Posts tagged Tutorial

1. Draw a square in the center of the stage.
Rectangle tool: turn off outline, click and drag on stage to draw.

2. Convert it to a movieclip symbol:
Right click on the square > convert to symbol > name: square_mc, “movieclip”, ok.

3. Add an invisible button inside square_mc.
Double click on the square_mc instance on the stage.
Create a new layer and call it “btn”.

With the button layer selected, draw another square or copy and paste the existing square.

Convert the shape to a button symbol called “invisible_btn”.

Double click on the button symbol you just made.
Select the “up” keyframe. Then click and drag the keyframe to the “hit” state.

Go back to the main timeline by clicking on “scene 1″ of the thread.

4. Create a short animation that will play (forward and reverse).
Select the movieclip instance on the stage.

Convert it to a movieclip symbol and call it “scale_square_mc”.

Double click on the movieclip to get to its timeline.

Create a motion tween by right clicking on the keyframe in the timeline and selecting “create motion tween”. (A 24-frame tween will automatically generate in the timeline).

Shorten the tween to 10 frames by clicking and dragging from the right edge of the tween.

With the play head on the 10th frame, use the transform tool (Q) to scale up the square. (Holding the shift key will preserve the proportion. Holding the option key will scale from the middle).

Note that a diamond keyframe appeared on the 10th frame in the timeline. You can make further adjustments to the tween using the motion editor palette.

We need to place a stop action at the end of the tween so that it doesn’t loop.
Create a layer and name it “stop”.
Right click on the 10th frame and select “insert keyframe”.

Select the keyframe.
In the actions palette, insert stop();
Note: a small “a” will appear in the timeline keyframe about the empty circle.

Go back to the main timeline (scene 1).

5. Label the instances (and the path to them) on the stage so that we can identify them in the code.
Select the movieclip on the stage.
In the properties palette, name it “scale_mc”.

Go to the “scale_square_mc” movieclip by double clicking on it on the stage.

Select the instance of “square_mc” on the stage.
In the properties palette, name it “square_mc”.

Go to the “square_mc” movieclip by double clicking on it on the stage.

Select the invisible button instance on the stage.
In the properties palette, name it “btn”.

Go back to the main timeline (scene 1).

6. Create a new layer and call it “actions”.

5. Select the actions layer frame and insert the following code using the actions palette:
//———–presets——————–
scale_mc.stop();
var rewind:Boolean = false;

//———–listeners——————–
scale_mc.addEventListener(Event.ENTER_FRAME,scaleRevFrame);

scale_mc.square_mc.btn.addEventListener(MouseEvent.ROLL_OVER,onScaleOver);
scale_mc.square_mc.btn.addEventListener(MouseEvent.ROLL_OUT,onScaleOut);

//———–functions——————–
function scaleRevFrame(event:Event):void{
if(rewind == true){
scale_mc.prevFrame();
}
}

function onScaleOver(event:MouseEvent):void{
scale_mc.play();
rewind = false;
}

function onScaleOut(event:MouseEvent):void{
rewind = true;
}

Note that there is a “var” (variable) named “rewind” in the presets. This allows us to use true/false statements (Boolean statements) to identify the condition of an instance. In other words, we can say something to the effect of, “If someone rolls over the square, then make it scale up. If someone rolls out of the square, turn it back off.”

In the listeners, we have an “ENTER_FRAME” event. It keeps track of what the movieclip instance “scale_mc” is doing.

The corresponding function for the “ENTER_FRAME” event has a conditional statement to execute. If the variable “rewind” is “true”, then go to the previous frame of scale_mc.

The other functions (onScaleOver and onScaleOut) essentially turn “rewind” on and off–they make the variable true or false. Rewind is false when someone rolls over scale_mc. Rewind is true when someone rolls out of scale_mc.

6. Save .fla and render.
The file should start with a static square in the middle. Roll over makes the square scale up smoothly, roll out makes it scale down smoothly.