Flash Character Animation - Face Animation

For this assignment, you will be using your Flash skills to animate a face.

Here's an example:

Instructions:

1. Find an image to work with. You want a full front face image. It should be a picture of you.
2. Save the image to your computer, and "import to the stage" in Flash.
3. Ctrl B to break the image apart.
4. Erase the background using the eraser and selection tools. Make the whole image a symbol.
5. Inside the head symbol, use the lasso tool and copy and paste to start breaking the image into parts on separate layers. You should only be separating parts you want to animate. Eyebrows, eyes, mouth, etc. Each piece that you want to animate needs to be it's own graphic symbol on it's own layer inside the head symbol.
6. You can draw new parts using the line tool or use the existing image.
7. The mouth can be split into upper and lower jaw. Draw an inside to the mouth on a layer below the jaw for when the mouth open.
8. Find a .wav sound clip to use as audio for lip-synch. Try 'troopervoices' in the #Sounds folder.
It should be short! You can use "http://www.onlinevideoconverter.com/mp3-converter" to download sound clips from Youtube.
9. Import your audio clip to the timeline. Under the sound properties Sync: 'stream'.
10. Animate to the sound. Remember to move the eyebrows, mouth, and blink the eyes!
11. Add a second then third sound byte on the same layer and animate accordingly.
12. Use the code below to add buttons to direct the movie.
13. Use the same code you used to post your The City .swf to your blog to post this .swf video to your blog.
14. Add a "stop" code to the last frame of your animation on it's own action layer if you don't want your movie to loop and again after each sound byte.
15. Add a button after each audio clip has been animated - then post the SWF.
title: Flash Animation 1 button
title: Flash Animation 2 buttons
title: Flash Animation 3 buttons

 

 

 

code for three buttons  sayWhat, afterHim  and copyThat also are their Instance names
I made the FUNCTION name similar but different  PlayWhat, PlayHim, PlayThat
the following goes into the (button) actions layer. I also set the start point 1 frame behind where the actual sound file frame is set at.


stop();  
sayWhat.addEventListener(MouseEvent.MOUSE_DOWN, PlayWhat);  
function PlayWhat(event:MouseEvent):void {  
gotoAndPlay(2);   }
afterHim.addEventListener(MouseEvent.MOUSE_DOWN, PlayHim);  
function PlayHim(event:MouseEvent):void {  
gotoAndPlay(44);   }
copyThat.addEventListener(MouseEvent.MOUSE_DOWN, PlayThat);  
function PlayThat(event:MouseEvent):void {  
gotoAndPlay(68);   }

Fish Tank

Title: The  FishTank

POST both and animated GIF and a SWF file

 

The colour changer code
- a live fish tank-
 

Starfish start button (symbol)

Green to white background gradient (symbol)

Seaweed looking tree (symbol)
the scene:- a rock -sandy bottom -a castle (draw)
bubbles (symbol) (move upwards)

A 'SeaBreacher' minisub (symbol) (get image from internet)
two fish - swim in front and behind sea weed (draw 1 - get the other off internet)
a collision in the tank!
sound effects - found in hand-out/#students/#sounds

 Crash Hit Pop Shot

In FLASH choose FILE- EXPORT -EXPORT MOVIE - ANIMATED GIF

The following is an Animated GIF


The Following is a SWF file