Using Animation and Sound in Flash Movies

Using Animations and Sound in
Flash Movies

Assignment: Create a simple flash movie using
motion and shape tweening, simple buttons, and
sound. Publish this flash site and place a link to it
on your Portfolio website. (40 points) Due Monday,
April 17, after 5:00 p.m.

Assignment: Work on your Flash Banner Ad, which
is due on Friday, April 21.

1. Your simple flash movie assignment (40 points) is due today. Please e-mail the URL address for your portfolio files (20 points) so that I can grade them.

2. Hand out two handouts:

a. "Using Movie Clips and Graphic Symbols"
b. "Flash Sound Sync Settings"

2 .Basic Sounds for Flash Movies ----Flashsounds.fla

--Download and use this fla file when you want to add
basic sounds to the flash movies you are creating.

2. Remember, your Flash Movie is due Monday, May 8th. Your Flash banner ad is due on Friday April 21st.

Basic elements of a webpage
Elements of a basic Flash Flash Banner Ad
Demo Flash Movie: Protecting Freedom

3. For creating a simple Flash banner ad, use
this file and its enclosed Flash library: sewflash2.fla

-- See sewflash2.html to see what this movie looks
like

4. Creating Buttons and adding actions to buttons

See ease1.html and ease1.fla
and buttontst.html and buttontst.fla
To create a button, select "Insert" and then select
"new symbol" and choose button.
There are four states to a flash button: up, over,
down, and hit:

up--defines the initial state of the button.

over--defines what the button looks like when you
          run the mouse over it.

down--defines what the button looks like when it
           is clicked.

hit--defines the area of the button that responds to
       the mouse.
In the up frame of the button, create a shape that you want to use as a button.
Now go to the over frame of the button and add a
keyframe. Now change the color of the button in
the "over" state.
Now go to the down frame of the button and add a
keyframe. Now change the color of the button in
"down" state.
Finally, go to the hit frame and insert keyframe.
Draw a circle or a box that you want to be the
"hit" area for this button when the mouse rolls
over it.
After making a couple of buttons, go back to
scene one and drag and drop your symbols--buttons- from your Flash movie library.
You can make these buttons when clicked go to
specific URLs by using actions.
With the button selected in the frame you want the
action to start from, select "windows" and choose
"actions."
In the actions panel, first select "basic actions" and
then select "on Mouse Event." Now choose "on release" to make this button clickable.
In the actions panel, now select "Go to URL" under
the "basic actions" menu. This will create a box that will allow you to designate a URL.
In the "Go to URL" box, make sure you designate
whether the URL will open up in the same or a
new window.

4. Because Flash MX 2004 doesn't come with
sounds effects, I have created a CD of simple Flash
Sound files. You can add these sound files to your Flash program by going to this folder on your computer:

a. C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Libraries

b. Now copy the flash fla sound files from your
computer into this folder.

c. This will add these flash sounds to your Flash MX
2004 program.

d. I will e-mail the Flash sound folders I want you to
add to your Flash program

5. Creating Actionscript code for buttons in Flash
MX 2004

See ease1.fla and ease1.swf for
example of how this works.
Actionscript for Play button

on (release) {
play();
}
Actionscript for Stop button

on (release) {
stop();
}
Actionscript for stop all sounds button

on (release) {
stopAllSounds();
}
Actionscript for go to frame 1 and stop the movie

gotoAndStop(1);
Actionscript for go to frame 1 and play the movie

gotoAndPlay(1);

2. Making a Flash Banner Ad using the elements of the Flash movie at www.moet.com . Use moet4.fla for
the basic elements.

See Moet Flash movie
I created a CD with images, wav, and mp3 files captured from this Flash movie.
Students are welcome to make a copy of this CD
to work on creating their Flash Banner Ad movies.
There isn't one Flash movie to be created from these elements.
The art of Flash movie design is what individual artists do with the elements to create their own movies.

3 .Students' Favorite Flash websites

3.Flash Buttons

See ease1.html and ease1.fla

Go to the Control Menu and turn off "Enable
Simple Buttons. This allows you to move
your buttons on the page.
Go to the Control Menu and turn on "Enable
Simple Buttons." This allows you to test to
see if your button actions work.
If you are having trouble working with your
buttons, always check to see whether you
have "Enable Simple Buttons" on or off.
You can select a button to edit its states by
clicking in the "+" area on that button.
A button has four states: Up, Over, Down,
and Hit.
You need to add actions to these different
button states you must first add a keyframe.
You can add sound to these various button
states, such as on Over or Down. Don't
overdue these sound effects here.
Just as you can add sounds using the
"Sound library," so too can you add buttons
using the "Button library."
The "Hit" state for the button determines how
big an area around the button will activate it.
To make a button open a link, you need to go
to the Actions panel and select "Browser/network"
and choose "Get URL."
You know you have selected the correct Actions
command, when it ask you to determine three states for your buttons: URL, Window, and variables.
You can't put an Action for a button inside one of
the Button States. You have to go back to the
main scene and add a button action from there.
To animate buttons, you can add "movie clips"
to your button states.

3. Putting Flash movies into webpages

Make sure that the Flash movie is not
so big that it overwhelms the webpage.
The Flash movie should be a box inside
the webpage.
First, save the flash movie and copy the
flash movie ".swf" file onto the web.
Now go into a Dreamweaver webpage and
select the "Insert" menu and select "Media"
and then select "Flash." Insert the flash movie,
that is its ".swf file" into the Dreamweaver
document.
When you put the Flash movie into a webpage,
Dreamweaver will create a box just big enough
in the webpage to hold the Flash movie.
If you click on the Flash movie inside the
webpage, you can set the parameters for
how the movie will run in your webpage.
You can use the same basic action parameters
that you used to control sound files on webpage
with information about looping, autoplay, etc.
Always test the webpage with the Flash movie
in it to make sure it works properly.

4. Putting Symbols within symbols to create animated Symbols

Remember you can always switch from editing
a scene to editing a symbol or tween within that
scene by using the icons on the timeline.
Make an animated action such as a
rotating ball.
Now select all the layers in this action and
select "copy frames."
Now go to the "Insert" menu and select
" Insert New Symbol."
Now select the first frame of this new symbol
and go to the "Edit" menu and select
"Paste Frames."
This will paste all the frames in your animation
into this symbol.
You can now add this animated symbol to
other layers of the movie.

4. Putting animated actions into movie clips and then inserting them into Flash Movies.

You create "animated movie clip" symbols
the same way you create "animated graphic"
symbols.
Use animated movie clip symbols instead of
animated graphic symbols when you want to
include the sound, the automatic looping,
and actions in your animated symbol.
Try to use animated movie clips instead of
animated symbols because animated movie clips
aren't as big as animated graphic symbols.

5. Adding Fade ins and Fade Outs to sounds.

When adding sounds, you can controll
how and from what channel the sound
fades in and out
Go to edit sounds and select "Effect." You
can now control exactly how the sound
comes in and out in your action.
Use start and stop controls to make the
sound start and stop playing.
See the handout on "Including Sound in
your Animation".

6. You can add animated movie clips to buttons to make animated buttons.

You can make buttons move, change shape
and form, and change sounds adding
animated movie clips to buttons.
Remember, just because you can do wild
things with buttons doesn't mean you
should.
Use these tricks sparringly.

6. Publishing your Flash Movies on the web

Before you publish your Flash movies on the web,
test your movie to see if it runs properly. Go
to "Control" and select "test movie."
You can insert a Flash movie into a Dreamweaver
"html" file, but Flash loads and runs better if
you run the Flash movie as its own webpage.
Before you publish your Flash movie, make sure you save it as a working Flash movie file by
saving it as an "fla" file.
To save a Flash movie, go to "File" and select
"publish settings."
Under "publish settings," select "Formats" and choose "Flash (.swf)" and "Html (.html)" as file types. This will save your Flash movie as an html file whichthen plays your Flash movie-- "the .swf file".
Under "publish settings," select "Flash" and then
set the options for your Flash movie file. You want
to set the quality of the jpeg files you use, whether
to "protect from import" your Flash file, and
whether your Flash movie loads from "bottom up"
or "top down."
Under "publish settings," select "HTML" and
then set the options for your Flash movie html file.
Here you can set the size of your Flash movie,
the quality of the images, and whether you want
your Flash movie to loop.
After selecting your "publish settings," now click
on "Publish" to make a web version of your Flash
movie.
In order for your Flash movie to play on the web,
you need to copy both the "flash.swf" and
"flash.html" files to the web server you site is on.
When you want to play your Flash movie on the web, you will simply click on the lick to the "flash.html" file that plays the Flash movie--the "flash.swf" file.

7. A Review of Shape Tweening

When you use shape tweening, remember that
you don't need to make these shapes symbols.
You create one version of the shape in one keyframe and another version of the shape in the end keyframe.
Select shape tweening between these two keyframes.
Notice that it takes Flash a little longer to run a
shape tween than it does to run a motion tween.
Too much shape tweening in a Flash movie will
slow down the entire movie.
If you want to transform shapes into text or text into shapes with shape tweening, you must first "break apart" the text so that Flash recognizes the text as shapes rather than text.
You break apart text, by selecting the text and then
going to "Modify" and selecting "Break apart."
Here are some examples of simple shape tweens.
Notice how fast or how slow they run depending
on the complexity of the shape tween.

a) shapedemo1.html

b) shapetext.html

8. Creating a stop-action Flash movie and/or a Flash movie slideshow.

See example of a simple button-activated, stop-action movie: movpic.html. See movpic.fla .
To create this stop-action movie, you need to first
decide on how big each of your image slides will be.
Remember, you want each image to fill the stage and not overlap with the following image--as is the case in my example.
If the stage is 550 (wide) x 400 (high), you want to make each of your slide images about 550 wide
and no higher than 370, because you need to
leave room for a button on the stage.
In Fireworks, adjust the size of each of your slide images to the exact size you want and then save them as a jpeg. Because this is a Flash movie, you might want to save your jpeg images at 60 % rather than at 80 or 100 % quality in order to make the Flash movie file smaller.
In Flash, go to "File" and select "import" and import
each of the images you want to use in your stop-action movie. For now, just lay them one on top of the other.
After you have imported the images, now lay the images out across the stage so that they make a slide-strip of images, with each image just overlapping the other.
Now select all these images and make this image
film-strip a symbol.
After making the image film-strip a symbol, add a keyframe on frame 50 and now add keyframes at frames 10, 20, 30, and 40 (The number of keyframes you need to add depends on the number of images in your slideshow.
At keyframes 1, 10, 20, 30, and 40, create motion tweens.
Now for each keyframe from 10 to 40, move the slide-strip of images to correspond to one image being on the stage for each motion tween. So that each time you motion tween this sildeshow, you will move from one image on
the stage to the next.
Now put "stop" actions on keyframes 1, 10, 20, 30, and 40. You don't need a "stop" action on your last keyframe ( in this case frame 50).
Now create a new layer and put a small button on it.
Make this button a symbol and choose "button"
instead of "movie clip" under the "new symbol"
panel.
Move this small button to the bottom of the stage
just beneath your slide-strip.
Now select the button and go to the "Actions"
panel window. In actions, first select "On Mouse
event" and then "on release" and then select
"play".
Your action script should now look like this:

on (release) {
play ();
}
Remember, if you want to vary the sliding motion
between images in your slideshow, you can use
easing to vary the speed that each image comes on
the state.
Now test your image slideshow. Does the button
work the way you thought it would? Do the images
move at the right speed given your use of easing?