Tutorial details:
Written by: Natalie Ebenreuter www.nee.id.au enatalie@unite.com.au
Difficulty Level: Intermediate
Download FLA
This exercise will cover

How to use shape hints
How to animate along a motion path
Creating buttons
Using simple actions

Press the play button below to see an example of what we will be making. Scroll down to begin.

Create a new document, File/New from the above menu that is 4005 pixels wide and 400 pixels high. You can do this via the Property Inspector by clicking on the size button or by going to Modify/Document on the menu bar. Set the frame rate to 25 frames per second, as we will be animating.


Save your document and call it shapeHint_path.fla


In the first scene create twelve new layers and name them as they appear in the graphic below .


On the centre layer use the circle tool to draw a yellow circle that looks something like this

On the stem layer use the circle tool to draw a green circle and use the pen tool or the pencil tool to draw a long stem. Cut the green circle in half so that it sits nicely under the yellow centre circle. Your stem layer may look something like this.

Hold down the Shift key and Select frame 16 of the centre and stem layers and hit F5 to insert a keyframe on each layer. Now it is time to add some petals. On frame 1 of the right layer using the circle tool draw a long circular shape that looks similar to this


Select frame 16 of the right layer and hit F6 to insert a keyframe. On this frame we would like our petal shape to be open so the graphic on this frame needs to look something like this.


The best way to move the upright petal to this shape is to use the scale tool. The first image below has the registration point of the scale tool in the centre of the graphic. The second image has the registration point where we would like it to rotate from (the base). To do this simply drag the little circle registration point down to the base of the petal shape. The Third image is rotated from the new registration or pivot point.

Now that everything is in the right place it is time to add a shape tween. Select frame 1 of the right layer and in the properties inspector next to Tween select shape from the drop down menu.


Your right layer should now look something like this.



Now we are ready to add some shape hints. Why are the benefits in using shape hints? Take a look at these two files and you will see that without the extra guidance that shape hints offer, our petals will not look so delicate. They may end up looking like blobs of cotton instead.

A shape tween without Shape Hints


A shape tween with Shape Hints


Still on the first frame of the right layer go to the above menu and Select Modify/Shape/Add Shape Hint or it may be easier to use the short cut Command Shift H (on a mac).

This will add a small red circle with the letter a on it. To see shape hints select View/Show Shape Hints from the menu above. (The layer and keyframe that contain shape hints must be active for Show Shape Hints to be available.)

Move the first shape hint to the top of the petal. Add three more shape hints and as they appear in alphabetical order, arrange the letters as they are in the image below.


Once the shape hints have been placed on frame 1 of the right layer we must adjust the shape hints that now appear on frame 16. The shape hints will all be on top of one another so just drag them around as they will all be there. The shape hints for frame 16 should look like something like this.


Each shape hint in the first frame of the shape tween will direct itself to the corresponding shape hint on the next keyframe. If you test your shape tween it should look something like the example A shape tween with Shape Hints above.

A few things about shape hints.

• To remove a shape hint, drag it off the Stage or outside the flash application all together.
• To remove all shape hints, go to the above menu and Select Modify/Shape/Remove All Hints. You must be on an active layer that contains shape hints for this to be effective. It will not remove every shape hint in your entire movie just those on the selected layer.
• As general rule shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.

I can guarantee you will be a master of shape hints buy the time you have added all the remaining petals. They can be quite temperamental at times and as our remaining petals require a few different shapes we should go through some of the tricks you may need to use. The next petal to create will be simple as it will be the opposite of the one we just created. On the left layer you can copy the two petal frames, adjust their position around the stem, add a shape tween and reapply the shape hints. You could try copying everything and modifying it to sit on the left hand side of the stem but copying the shape hint information can be a little messy and unsuccessful.


The next best petal to create and tween would be the centre front petal on the front centrelayer. The images below give you a guide to the shape hints order for this particular petal. I only used two shape hints for this petal as the shape tween is a more simple shape for flash to tween. You will notice that a and b have been reversed to stop the petal from flipping over. This will also depend on how you create your graphics and scale them on frame 16.


The front centre tween can now be modified quite easily for the centre back layer. The next petal is a little tricky as it is for the corner petals and because of their shape and positioning they can take a while to get right. You really only have to get one right and the rest will follow. Below is a guide for the shape hints for the petal on the centre left layer. You will notice that the shape hints b and d swap positions on the 16th frame, this is because the shape began to filp. To prevent a shape from twisting or flipping it usually helps to swap the hints around. This will also apply for the shape hints on the centre right layer.


The Lucky last petals to add will be the front corner petals on the layers front right and front left. You could manipulate the centre right and centre left tween as a starting point. The images below are a guide for the front right shape hints.

Now that all our petals are tweening beautifully with the addition of shape hints your layers should look something like this.



To add a little more animation to our flower it would be nice to have a petal to float to the ground after it opens. To control the direction of how a petal floats to the will require the use of a motion guide. It is time to create a motion guide.

In Scene one hold down Shift and select keyframe 45 on every layer and hit F5 to insert a frame. Now your movie will be 45 frames long. Select frame 16 on the front left layer and hit F6 to insert a keyframe. Select the new keyframe you just added in frame 17 and hit F8 to convert the petal shape to a graphic. We are going to be using a motion tween with our motion guide so we cannot a shape to do this. In the properties panel be sure that graphic is selected, call your graphic front left and hit ok.


At the bottom of the layers pallet are three icons. With the front left layer selected hit the middle icon that looks like a plus sign with a red dotted line to add a motion guide.


Select frame 17 of layer Guide: front left and hit F7 to insert a blank keyframe. With the pencil tool selected in smooth mode draw a long curvy line from the edge of the front left petal to the ground.



If your line looks a bit jagged select it and click the smooth tool to iron out the edges.




While your line is still selected, click on the magnet icon just above the smooth tool to enable snap to objects.



Deselect your line and grab the end of the line that is closest to the petal when you see the little black arrow appear. We are now in the process of attaching the motion guideto our petal. If you move the end of the line towards the centre of the petal graphic a black circle will appear and feel as if it is attaching itself to the front petal graphic.



One layer down to the front left layer, select frame 45 and hit F6to insert a keyframe. Move the front left petal graphic to the end position of the motion guide and you will find that once again a black circle will appear and allow you to snap the petal to the motion guide.

Select frame 17 and in the property inspector next to Tween select Motion. Play around with some of the settings. We went through easing in the previous tweening example so you will be all set to create some effective floating animation.

As a final step we will add a play button so that our flower doesn't freak out on us and loop forever. Create two new layers and call them actions and buttons. Move these two layers so that the actions layer is the very top layer and the buttons layer is underneath it.

On the buttons layer use the text tool to type "play". Select "play" and hit F8 to convert it to a button. Make sure you have button selected and call it play_btn and hit okay.



Double click on play_btn to edit the button in place. Hit F6 to create keyframes for the over, down and hitstates. Make sure you draw a square shape on the hit state frame to cover the height and width of the text. Simple text isn't always recognised as a true hit area in flash so it is always a good idea to add a shape to the hit area when using text buttons.





We must add an instance to our button so that our actionscript can tell it what to do. Select play_btn and in the property inspector where you see <instance> type play_btn.


Time to add some actions to our buttons.

Select on the actions layer and hit F9 to open the actions window.

Cut and paste the text below into the actions window

[as]//this stops the main timeline
stop();
//when we click the play button start playing the main tileline
play_btn.onRelease=function(){
        play();
}     [/as]

Select frame 45 on the actions layer and hit F7 to insert a blank keyframe. Select the blank key frame and cut and past the following into the actions window.

[as]//this stops the main timeline
stop();

//when we click the play button go to frame 2 and play the main timeline
play_btn.onRelease=function(){
        gotoAndPlay(2);
}
[/as]

All that is left to do is to test your movie. Go to Control/Test Movie at the menu above to test your movie. Click on the play button to watch your animation. Click here to download fla
Should you find any errors in this exercise or some of the instructions difficult to understand please send me an email at enatalie@unite.com.au