Create Animated amazing Shapes using flash AS3

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436


in this tutorial you will learn how to create amazing circular animated shapes as in the picture below :

we will use the following AS3 build in functions and properties :

• stage.stageWidth : this property is allow you to get the width of the stage ( and itis really helpful when you need to center the object or on resize events.
• stage.stageHeight : the same is stageWidth but we get the height of the stage instead of the width.
• MouseEvent : in AS3 when you need to fire a press event you need to use MouseEvent.MOUSE_DOWN along with the event listener and pass the mouse event as parameter to the caller function, and this is really a cool enhancement because you can now know the firing event and even the target which fire this event by using  e.currentTarget.
• Math.floor(Number): we use this when you want to get an integer value with the minimum value for example when you have a number with the range from 0.111 to .99999 the value will be always 0.
• Math.random(): get a float number between 0 and 1 .
• setInterval( function, delay ): we will use the set interval to create the animation effect because i can call the same function every time defined by the delay number counted by milli second.
• clearInterval: when you want to stop calling this function.
• rotation : when you want to rotate the object, but please be aware the the object rotate based on its orientation point.
• gotoAndStop.
• addChild(child) : you will use addChild maybe in every application because now in AS3 you deal with stage movies as an array of display objects and it os really an amazing enhancement because now you have a lot of build in function to deal with these display objects.  
• container.removeChild(Child) : to remove a specific display object from the container and in our case from the stage.
• getChildByName(name): return a child using itis name.

so you need to start by create new as3 document, and then create new movie clip and name it Shape_mc and in this movie clip you need to create two layers, the first one will contain only a stop action and the over will contains several frames and in each frame you will draw a simple shape as you like .

then you can remove the Shape_mc from the stage and linkage it to be used by action script at run time, then return to stage and add a new button from the component panel and then select the first firm in the stage to write the main code :



import flash.display.MovieClip;
import flash.events.MouseEvent;

var nStaticAngleMargin:int = 5
var nContainerXpos:Number = stage.stageWidth / 2
var nContainerYpos:Number = stage.stageHeight / 2 + 25
var nCallerDelay:int= 100
var nMaxAngle:int = 360;
var Container_mc:MovieClip;
var nShapeInterval;
var nAngleMargin:int =  0;
var nFrameNumber:int = 1;

function ReDrawNewShape(e:MouseEvent)
{
if(getChildByName("Container_mc")!=null)
removeChild(getChildByName("Container_mc"))
Container_mc = new MovieClip()
Container_mc.name = "Container_mc"
Container_mc.x = nContainerXpos
Container_mc.y = nContainerYpos
nFrameNumber =Math.floor(Math.random()*100%5)+1
addChild(Container_mc)
clearInterval(nShapeInterval)
nAngleMargin = 0
nShapeInterval = setInterval(DrawShape,nCallerDelay)
}

function DrawShape()
{
if(nAngleMargin>nMaxAngle)
{
clearInterval(nShapeInterval)
}
else
{
var oShape_mc = new Shape_mc()
oShape_mc.rotation = nAngleMargin
nAngleMargin += nStaticAngleMargin
oShape_mc.gotoAndStop(nFrameNumber)
Container_mc.addChild(oShape_mc)
}
}

Play_btn.addEventListener(MouseEvent.MOUSE_DOWN,ReDrawNewShape)

------------------------------
Online Demo
Source files

for further questions please contact me on : abed_q@hotmail.com.