Toxiclab.org

Blur circle easing animation

4.7.2009, 13:57
Submited in: Flash | Total Views: 12853

Using this thoroughly explained, detailed flash lesson, you will see how to create blur circle easing animation using the AS 3 and some special flash tips and tricks. You can use this animation for some presentation. Using this lesson, you will also learn how to apply blur filter on any object, how to convert any object into a Movie Clip Symbol, how to create instance name and much much more. Let's start!

Example:

Click on the button to see easing animation!




Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select any color as background color. Set your Flash movie's frame rate to 36 and click ok.



Step 2


Select now the Oval Tool (O) and draw a Circle shape like it is shown on the picture below.



Step 3

While the circle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 4

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip circle_mc. See the picture below!



Step 5

select the Selection Tool (V) and click once on the circle. Then, go to the Properties Panel (Ctrl+F3). After that, select Filters tab from the left side. Click then on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 6

Draw now button shape, select it and hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 7

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip button_mc. See the picture below!



Step 8

Select now the first frame and go to the AS panel (F9). After that, enter this code inside the actions panel:

import fl.transitions.Tween; 
import fl.transitions.easing.*; 
button_mc.addEventListener(MouseEvent.CLICK, startAnimation); 
function startAnimation(event:MouseEvent):void { 
 
var circleR:Tween = new Tween(circle_mc,"rotation",Regular.easeOut,0,210,5,true); 
var circleY:Tween = new Tween(circle_mc,"y",Regular.easeOut,20,240,4,true); 
var circleX:Tween = new Tween(circle_mc,"x",Regular.easeOut,20,420,4,true); 


We're done now!

Have a nice day!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials