Adding Animation and Button Interactivity

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following:

This is a tutorial on how to add animation through movieclips and button interactivity.

Start with downloading the flash file where you imported the website layout created in the photoshop and later imported in flash in the previous tutorial (click here to download the photoshop file).

Open the flash file that you downloaded from the above given link and create a new movie clip by pressing CTRL+F8, enter the symbol name as ravishing rings in the Create New Symbol dialog box and choose OK.
Choose Window> Properties from the main menubra and set the stage background colour to dark grey so that the text that will be entered in the white color is visible.
Also, choose Window > Library from the main menubar and use the assets in the Library to arrange the images, as shown in Figure.

Make sure that all the four images are placed on separate layers and name it as 1 to 4 starting from the left most figure. (For creating a new layer and naming them, refer to the previous tutorial).
Arrange the layers as shown in Figure below.
Make moviclips of the all the images, as discussed earlier and name them as 1,2,3,4 as per there layer name. In the layer1, select frame number 16 in the timeline and press F6 to create a keyframe there.
Next, move to layer 2 and add keyframe at frame 10. Select the keyframe at frame 10 and use the left arrow button to move the respective movieclip below movieclip 1.
Lock the layer1 and select the movieclip 2 at frame10 and choose Window>Properties from the main menubar. From the Color Effect drop-down select Alpha and set its value to 0 at frame 10. Next, at the bottom right of the properties panel choose the Add Filter button and choose Blur from the flyout and set the values, as in Figure.
Move, your cursor at frame5 in the timeline of layer2 and right click on the frame and choose Create Classic Tween, a straight line with one arrow at the right most frame is created indicating that the tweening has been added to that layer. Scrub the play head to view the motion of the movieclip.

Incase you are not getting the tweening effect, refer to the following figure and repeat steps 6 to 8 again.
Repeat the same steps for all other layers. For layer 3 the end frame should be 13 in the timeline and for layer4 it should be frame number 15.
Move back to layer 1 and unlock it and add a keyframe at frame 19 in the timeline and add the glow filter to it with the X&Y value to 15 and quality to high. Next, add motion tweening in between the frames 15 to 19.
Again, add a keyframe at frame 23 and change the glow filter value to 10 in the PROPERTIES panel and add motion tweening there also.

After adding tweening to all the four layers , the timeline should look as in Figure below.
Choose frame23 and choose Window>Code Snippets from the main menubar to display the code snippets panel and expand the Timeline Navigation rollout, as shown in Figure.
Double-click on the Click to Go to Frame and Play option in the Code Snippets panel, a message box asking you to add a default instance name to the movieclip will appear, as shown in Figure. Choose OK to add the script on frame23.

A new layer with the name Actions is added to the timeline with a keyframe at frame 23. The keyframe has an a symbol indicating that it has an actionscript 3.0 code over it.
Select the keyframe with actionscript and press F9 to see the code, the actions panel is displayed. At the bottom of the code, replace 5 with 17, refer Figure.

The script indicates that whenever the playhead will come at frame 23 it will be reverted back to frame 17 and it will go in a loop making the glow animate.
Next create a new layer at the bottom of the timeline and name it as textbox. Create a rectangular box on that frame with a linear gradient of black(right) to red(left). Make it a movieclip and name the movieclip as textbox. Add a blur filter to it. The movieclip will look as in figure.
In the textbox layer choose frame23 and press F5 to create frames. Next, make sure that you have a keyframe at frame1 (alpha=0), frame12(alpha=0), frame16 (alpha=100). Add motion tween between frame 12 and 16.
Create a new layer above the textbox layer and name it as text. Create a text area over the textbox and the desired text. Next, create a movieclip of this text area with name as text. Repeat the same steps as in point 16 for this layer also.

Scrub the playhead in the timeline or press ENTER to view the transitions. Before proceeding further make sure that the timeline looks as in figure below
Now move back to scene1 by choosing the Scene1 icon at the top left of the stage area.
Choose View> Rulers from the main menubar to display the rulers in the stage area. Move your cursor to the horizontal ruler, press and drag to create cyan colored guideline. Adjust it to the top of the image.
Similarly, drag a vertical guideline to the leftmost border of the first image. Repeat the steps to create a guide box enclosing all the four images, refer Figure.

The guides will help us place the movieclip we created in the tutorial at the right place which will help in smoother transition of the tweening we created.
Choose the RAVISHING RINGS text at the bottom of the first image and press F8 and name it as rrings and convert it into a button. Select the rrings button and choose Click to go to frame and stop from the Timeline navigation area of the Code Snippets panel.
Create one more layer in the timeline and rename it as home. Add the HOME text in the stage area at this frame and place it at the top menu before the COLLECTIONS text. Select the text and make it a button symbol as discussed earlier. Also, add the click to go to frame and stop functionality to this button using the code snippets and modify the script such that it stops at frame1. Choose frame5 in the home layer and choose F5.
Next, choose frame1 of the home layer and press F9 and write the following script code in the actions panel
stop();
This code will help stopping the playhead to run to the next frame unless guided to do so at runtime.
Next, move the cursor at frame5 and choose F6 for all the active frames in the timeline. Select the 4 images in the stage area and delete them. Next, choose the frame 5 of ravishing rings layer and open the library panel by pressing CTRL + L.
Drag the ravishing rings movieclip on the stage area and align it in between the guides.
Press CNTRL + ENTER to view the functioning of two buttons: RAVISHING RINGS and the HOME button. Click on the RAVISHING RINGS button to redirect to its related frame refer Figure.
Repeat the same steps to add transition for the remaining three images. Make sure everytime you do the create a transition all the main images should come at the same position as is there in this case.

Proceed to Step 5 >> Adding a Preloader

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.