Project 7 – Animation and Interactivity
Develop highly visual interactive content for a promotional piece. We will be using
Macromedia Flash MX and Macromedia Dreamweaver MX for this project
This week you will create a multimedia promotional piece for ITP101. Using the
techniques learnt in this project your instructor may ask you to create a promotional
piece for your own company!
1. Begin by viewing the sample on the ITP101 web site. Your task is to recreate
the sample using flash.
2. Create a new folder lastname_firstname_flash
3. Save all your files in this folder
4. For this project, you will need to go to the class website to download the files
5. Save and unzip the source file which contains the 11 files (9 .bmp pictures, 1
sound file, and 1 .jpg image).
Create your sound file
You will need to create a .fla and .swf file for the music portion of the flash movie.
This sound clip will be controlled from the main movie.
6. Start up Macromedia Flash MX.
7. Go to File, New to create a new file. Name this file song.fla (extension is
automatically added by the application)
8. Import your sound clip. File-import
9. To see your sound clip in the library, go to Window, Library
10. Next you will need to create enough frames for a 30 second piece. In the
timeline window, scroll across to frame 361, and then right click on frame 361
and Insert Keyframe.
11. Click back on frame 1. Drag the sound clip from the library onto the stage.
12. After you drag your sound clip to the stage, your timeline should look
something like this
13. You will notice that the sound clip does not run the entire 360 frames. Make
sure you have frame 1 selected, and then look at the properties window.
Change the loop count from 1 to 4.
14. Save your file. Go to File, Publish. By doing this, you will have created the file
called “song.swf” which is placed in the same folder where you saved the
“song.fla” file. A “song.html” file is also generated. This file has the
“song.swf” file embedded in it.
15. Close “song.fla”
16. Create a new .fla file. Go to File, New. Name this file 101promo.fla
Now we will begin to assemble your main timeline.
This file will require creating two scenes. The preloader screen will be created in
scene 1, and the remaining 30 seconds of the promo piece will be created in
17. Change the stage size. To do this, click anywhere on the stage, and in the
properties window, click on the Size button.
18. In the Document Properties window, change the dimensions to 560 x 315 and
then click on OK. This is HDTV aspect ratio - 16:9
Since we know that the preloader is 5 seconds long, we know that this scene will
last until frame 61. (12fps)
19. Right click on frame 61, and then click on Insert Frame.
20. In the layers palette, double click on “Layer 1” and change its name to
21. Click on the column under the padlock to lock this layer. This will prevent us
from accidentally putting any objects on this layer.
22. Create additional layers (lower left icon in timeline window) for actions, text,
splash, splash fill and loading.
Next we will create the ITP101 motion mask.
23. In the splash layer in frame 1, use the text tool and type in ITP101. Center it
on the stage, font – any, size - 60
24. In the splash fill layer in frame 1, create a rectangle (any color) above the
ITP101 text. This will serve as the “filling” for the text.
25. Delete the border (stroke) of the rectangle by double clicking and then delete.
26. In frame 49 of the splash fill layer, right click and insert keyframe.
27. Use the free transform tool to stretch the rectangle to cover the ITP101 text
28. In the splash fill layer, select any frame in between the two keyframes.
Change tween from none to shape in the properties window
Your timeline should look something like this now.
29. Right click on the splash layer, and choose Mask.
After you click on mask, notice the change in the splash and splash fill layers.
30. To preview the effect of the mask, scrub the movie by moving the play head.
31. In the text layer, frame 1, use the text tool and type in the word “skip intro”
32. Select the text box, and right click it. Choose Convert to Symbol.
33. Name this symbol “skip intro” and make sure the behavior is set to button.
34. Now double click the “skip intro” button either on the stage or in the library.
Notice the different timeline (Up, Over, Down, Hit frames).
35. Insert a keyframe in the Hit frame.
36. Now on the stage, create a rectangle that covers the entire text. This will
create the whole area as a “clickable” area. Convert to symbol.
37. Select the skip intro button, and then click on the actions window.
38. Create an on release command that goes to frame 1 of scene 2. Use the
expert mode (icon in the upper right of actions window) to type in the
command as shown below.
The loading frames are periods added frame by frame to simulate motion.
39. In the loading layer, create the “loading” text. Insert a keyframe 3 frames to
the right, and add a period to the end of the “loading” text. Repeat the
process going to zero periods after going through three periods.
Your final timeline for scene 1 should look similar to this:
Creating the 30 second portion of the promotional piece will require mastery of
a few techniques in flash applied in different ways. This tutorial will show you
how to do it once, and you will need to apply the techniques where necessary.
This portion will also include the usage of basic actionscript, Flash’s
By this point, you should have your 5 second intro portion completed.
40. We will now need to create the second scene. Go to Insert, Scene and you
will now see that we have a new timeline in scene 2.
41. Once again, we will start with a layer that will act as our timekeeper. Rename
Layer 1 to timekeeper.
42. In that layer, right click on frame 361 and Insert Keyframe. Click on the
Padlock icon to lock this layer.
43. Create four more layers, actions, sounds, static text, and background. Your
timeline should look like this now
44. Go to frame 1 of the actions layer, and double click on play in the actions
45. Now click on frame 1 of the sounds layer and double click loadMovie in the
actions panel. For URL: type in “song.swf” (without quotes) and for location,
change the level to 1. Your actions panel should look like this:
46. In the actions layer, right click on frame 361 and Insert Blank Keyframe.
47. Go to your actions panel and double click on stop, unloadMovie, and
48. Make sure when you unloadMovie, you unload level 1.
49. Click on frame 1 of the background layer. Add two black rectangles at the top
and bottom of the stage. They may exceed the state dimensions but that
portion will not show. Lock the background layer. Your background should
look like this:
50. You will now need to create the static text. Go to frame 1 of static text layer.
Using the text tool, create all the text on the screen. Font: Arial Size: 25 for
the larger text, 10 for the smaller text. See sample for colors and alignment.
a. ITP101 Clothing Lineup
f. address 1234 anywhere st. Los Angeles CA 90089
g. email: firstname.lastname@example.org
51. When creating buttons from the text, you must convert the text to a symbol.
To do this, select your text, right click and choose Convert to Symbol.
52. In the Convert to Symbol window, give the symbol a name that is descriptive.
In this case, we will call it email button. Make sure that the behavior is
Button. Click OK.
53. Now double click the button either on the stage or in the library. Notice the
different timeline (Up, Over, Down, Hit frames).
54. Insert a keyframe in the Hit frame.
55. Now on the stage, create a rectangle (any color) that covers the entire text.
This will create the whole area as a “clickable” area.
56. To create a rollover, insert a keyframe in the Over frame and change the
color of the text.
57. Go back to scene 2.
58. Repeat this process for all buttons created from text. There should be a total
of 6 buttons: skip intro, close window, music on, music off, web, and email.
Once the text has been converted into a symbol, you can then apply actions
59. The email button will allow you to send an email to the desired email address.
60. Select the “email: email@example.com” button.
61. Go to the actions panel, and double click “on” and choose release (chosen by
62. Then double click on getURL and in URL area type
“mailto:firstname.lastname@example.org” (without quotes).
You will need to apply actions to the other buttons on the page. Convert the
remaining text to buttons, and apply the following actions to their respective
This button will allow you to launch a webpage in a new window.
63. Select your “http://” button. Go to the actions panel, and double click “on”
and choose release (chosen by default).
64. Then double click on getURL and in URL area type “http://www-
scf.usc.edu/~your_username” (without quotes) and for window, make sure
“_blank” is selected.
This button will allow you to turn on the background music.
65. Select your “on” button. Go to the actions panel, and double click “on” and
choose release (chosen by default).
66. Then double click on loadMovie and in the URL area type “song.swf” (without
quotes) and for location, level should be “1”.
This button will allow you to turn off the background music.
67. Select your “off” button. Go to the actions panel, and double click “on” and
choose release (chosen by default).
68. Then double click on unloadMovie and in the location, level should be “1”.
within the .swf file.
69. Select your “exit” button. Go to the actions panel, and double click “on” and
choose release (chosen by default).
70. Then double click on getURL and in the URL area type
74. At this point, click on the padlock column for the static text layer. This will
prevent any accidental changes to the text layer.
The next step is to import all your 9 images (.bmp) that will be used in the
75. To import your images, go to File, Import to Library. Choose your files for
import then click on Open.
76. You can see that the images are now in your library by going to Window,
Your library should look something like this now:
77. The easiest way to work with multiple images in flash is to create a new layer
for each image. Create a new layer and give it an informative name ( You
may use the name of the file as the layer name as long as the file is imported
with the .bmp extension)
78. Drag the image from the library to the stage, making sure that the newly
created layer is selected.
79. In order to tween or change the properties of any image, you must convert
the image to a symbol first.
80. Select the image, then right click it and select Convert to Symbol.
81. In the Convert to Symbol window, give this symbol a name (hint: for ease of
use, give a similar name as the layer) and make sure the Graphic behavior is
selected, then click OK.
82. Choose the scale tool, and scale down the image to the stage.
83. Scale down the image using the handles on the corner of the image to keep
the image size constrained.
84. Click on the Arrow Tool to get rid of the resize handles and move your image
to the starting location. (see last page of the project for locations of all
The key to creating an animation, fade in/out, or rotation is having two
keyframes. Without two keyframes, it will not work.
85. In your timeline, you should have a keyframe in frame 1. We will need a
second keyframe, so in the same layer right click on frame 25 of the timeline
and choose Insert Keyframe.
86. On the second keyframe, move the image to its final position. In this
example, we want the image to move to the left, so we will move the image
in the second keyframe to the left.
87. In the timeline, right click on any frame between the keyframes and choose
Create Motion Tween.
By scrubbing the timeline, you can see that Flash has created the animation for
88. To create a fade in effect, click on the first keyframe, then click on the image.
89. Now look at the properties window under Color. Choose Alpha.
90. Change the Alpha value to 0%. This will make the image transparent.
Remember that this only affects the first keyframe, and not the second one.
So this will be going from transparent to opaque, therefore creating a fade in
91. To make an image rotate, click on any frame in between the keyframes. In
the properties window, change the rotation orientation and the number of
92. Repeat these techniques for each image where you see fit for the 9 .bmp
files. See sample of how and where each image is animated. Your finished
movie should look very similar to the one in the sample.
93. To begin animating an image from ,say, frame 45, right click frame 45 and
insert blank keyframe
94. To make an image disappear after it has animated, either fade it out using
tweening or insert a blank keyframe.
95. Type in your text, then right click it and choose Convert to Symbol. Text
animation goes through the same process as images. You must convert text
to a symbol before you can animate it.
96. In the Convert to Symbol window, give it a descriptive name and make sure
the behavior is set to Graphic.
97. Follow the same processes as described above to complete the rest of the
98. Publish your Flash movie. This will create two new files. 101promo.swf and
101promo.html. Delete the 101promo.html file.
Publish your file on the web
The first page will be the window for the mainframe of your webpage, promo.htm.
The other page will be the new popup window which will hold the 101promo.swf file,
99. Start up Macromedia Dreamweaver MX.
100.Go to Modify, Page Properties.
101.For the title, type in “ITP101promo” then change the left and top margin to
0, and margin width and height to 0, then click on OK.
102.Next, go to Insert, Media, Flash and choose your 101promo.swf file and then
103.Click on File, Save and call this file “101promo.htm” and click on OK. Close
104.Go to File, New and select a Basic HTML page.
105.Go to Modify, Page Properties.
106.For the title, type in “ITP 101 Flash Promo project” then change the
background color to “#CFC5C5” then click on OK.
107.Type in some words notifying the user that they need to have Flash to enter
108.Insert the picture for the ITP101 logo from your Flash folder.
109.Scale down the image to a smaller size by dragging the handles on the
110.Click on the image. For the link, type in “#” which will make the image
clickable but links to the same page.
111.Next is to create the popup window. Click on Window-Behaviors to bring up
the behaviors window.
112.Click on the plus sign, and then select Open Browser Window.
113.Browse for your 101promo.htm file
114.Change the window width and window height to 560 and 315 respectively.
115.Lastly, type in “ITP101” for the window name. Then click on OK.
116.In the properties window under the events column, change the event from
onLoad to onClick.
117.Go to File, Save and call this file “promo.htm”
Submitting the project
1. FTP all your .htm files, .swf files, and all associated graphic files (not the .bmp
files) to the public_html folder on your UNIX account.
2. Test your published web site in both Internet Explorer and Netscape.
3. Email your URL to your instructor’s class account (e.g. email@example.com). Use
your class time as subject (e.g. 3:30 TTh).
Image animation details (9 images)
Horizontal Positions: Vertical Positions:
- 1-4 are onscreen - Positions are in the white space above the
- 0, 5 are offscreen bottom black space and below the top black
0 1 2 3 4 5
Timing: 360 frames (12 seconds)
Name Horizontal Vertical Alpha Other
Activewear 50 Middle n/a
Enyce 03 Bottom 0 100
3 Bottom 100 0
Ecko1 31 Top 0 100
1 Top 100 0
rl1 1 0 100 Small Large
para2 2 0 100 Small Large
puma1 3 0 100 Small Large
jlo1 4 0 100 Small Large
rl1 10 100 0 Spin-off
para2 20 100 0 Spin-off
puma1 30 100 0 Spin-off
jlo1 40 100 0 Spin-off
Casual 04 Top
4 Top 100 0
kc1 1/2 0 100
sj3 2/3 0 100
th1 3/4 0 100
Kc1 1/2 100 0
sj3 2/3 100 0
th1 3/4 100 0
ITP101 2/3 Top 0 100
…the best 2/3 Bottom 0 100