Flash Assignments


  1. Open Flash CS6 and follow along with this beginning drawing video. - Save As - Drawing1
  2. Flash Tools - Get familiar with basic tools before starting motion
  3. First Flash Animation - Two Moving Objects
  4. Moving Stickfigure Animation - Create a simple moving stick figure but make legs and hip move to like it's dancing.
  5. Animated Face
  6. Moving backgrounds and movie clips
  7. Add a character of object to your moving background
  8. Animated letters
  9. Create morphing effects using Shape Tweens
  10. Create an Animated Button
  11. Adding sound effects to buttons
  12. Interactive Drum Kit with sounds
  13. How to add a PLAY button on Scene 1
  14. How to animate the title using a movie clip
  15. Create a Sprite movie in Scene 2 of movie
  16. How to add audio to Flash
  17. Preparation to project -
  18. Public Awareness Advertisement Project using Shape Tweens
  19. How to upload a .swf file to a blog post
  20. Creating a movie clip within your movie and use an image from the web as your background.
  21. Flash Mini Projects








Actionscripts - buttons

Sprites
































FLASH ANIMATION with MUSIC - Shake, Rattle 7 Roll - Create your first animation: three images moving across the stage to music.

Right-click to play this Student Example.
Overview of assignment:
You will have 5 layers:
  1. Title
  2. Drink shaker
  3. rattlesnake
  4. tire
  5. Credits: Animation by <your full name>, Music: "Shake Rattle Roll" by Big Joe Turner
That will move across the stage in different motions while the music is playing.
Instructions:
shake.jpgrattle.jpgroll.jpg


  1. Go to Window--> Library
  2. Go to File--> Import to Library and Import each of the 3 images you saved above
  3. Name the first layer title
  4. Have the words: Shake, Rattle and Roll come from off the left side of the stage, to the center, enlarge (use transform tool) and then exit off the stage to the right. How to shrink/grow text
  5. Create a layer and name it Shake
  6. Drag and drop the shaker onto this layer in time frame 1 - Make it shake it up and down & then place it off the stage to the left
  7. Add a layer and name it Ratte
  8. Drag and drop the rattle onto this layer in time frame 1 - Make it rattle back and forth & place it off the stage to the left
    Create a layer and name it Roll
    Drag and drop the wheel onto this layer in time frame 1 - Make it roll (extra credit for taking the white background off the image) & then place it off the stage to the left
  9. Create a last layer that states: THE END BY YOU - & "Shake Rattle Roll" by Big Joe Turner

    NOW:
    1. Make the words: shake, rattle and roll move across and off the stage.
    2. Move the cocktail mixer onto the center of the stage, make it "shake" and then exit off the stage to the right.
    3. Move the rattlesnake onto the center of the stage, make it "rattle" and then exit off the stage to the right.
    4. Move the wheel onto the center of the stage, make it "roll" till it exits off the stage to the right.
    5. ADD A LAYER FOR THE MUSIC - OR Go to: Free MP3 files. Search: "Shake, Rattle and Roll" by Bill Haley. Click Download, you will get a new page with a line, right-click on the line and select SAVE AS...mp3 format. Import this MP3 file onto this layer.
    6. IMPORT the music file onto it's own layer.
    7. In the properties toolbar, change the music setting to STREAM
    8. In the last frame of your movie, right-click --> ACTIONS
    9. Click on the + icon to the right of the word Actionscript
    10. Select--> Global Functions
    11. Select Timeline Control
    12. Select STOP
    13. Go to File-->Save (to save it in Flash for future editing)
    14. Go to File-->Publish.
    15. Select FLASH
    16. PUBLISH
    17. Go to your wiki Animation page and upload the .swf file to the top of the page.

Animated Web Banner– Create a simple Flash animation with a background image moving objects and music.
What do your know about web banner ads?
Compare and contrast a regular advertisement with a web banner?
MOVIE GOAL:
You have been asked to create an animated tourism banner for an assigned city OTHER than NYC.
Grading Rubric
  • text should be easy to read (not TOO slow or TOO fast) - but prominent! It should grow or blink but easy to read.
  • follow instructions on banner size
  • use relevant and clear images that are close to the size of your banner size and good quality
  • the message must be relatively brief,to the point and eye-catching (growing/shrinking/blinking/BOLD) and CLEAR. This not a regular advertisement but a web banner
  • It should end with your message clearly stated! The view must know exactly what you are advertising!!!!
  • Meeting all the above requirements=85-90
Instructions:
  1. Open Flash
  2. View: typical web banner sizes.View examples of web banners
  3. SELECT a typical web banner size from step 2. Set your stage to this size.
  4. Use a minimum of 2 images that are icons of NYC (or relating to your goal) - NOTE the pixel image size at the bottom left in Google: try to get images closest to the banner size to preserve the quality of the image so you don't have to reduce the size too much.
  5. Go to File-->Import and get each of your images.
  6. If you don't have your Library task pane showing at right, Go to Window--> Library (this window will show your images).
  7. REMEMBER to put EACH IMAGE BE ON ITS OWN LAYER!! You may have to covert each image to a graphic (convert to symbol-->graphic).
  8. REMINDER: Give each layer a meaningful name so you know what is on it and lock the layers that you are not working on.
  9. Change the text messages (ad messages) at least twice during the ad.
  10. Use techniques that you have learned so far in class to make it eye-catching and informative
  11. For FULL CREDIT (100) - Find out how, in Flash 8, to make your banner clickable. It should go to a relavant web page when you click on it.
  12. Go to File-->Publish Settings
  13. Check off only the FLASH box to create a .swf file.
  14. Post your .swf file at the top of your wikispaces animation page
  15. FOR PROJECT CREDIT: Email me the link to your projects page: dbutera2@schools.nyc.gov
  16. NEW_YORK_CITY.gif
  17. banner.gif

Slideshow
– Create a slideshow with FADING text & images
Goal: Create a advertising slideshow for Curtis HS or another theme of choice. Use a minimum of 4 images and have them fade in and out during the show.
Requirements:
Scene 1 -
  • Layer 1 - Title your slideshow
  • Layer 2 - Create an animated start button
Scene 2:
  • Layer 1 - Choose a background color
  • Layer 1 - TEXT - Introduce the slideshow with large text such as: Curtis High School ......the place to be! or your choice. The text shouldl FADE IN and OUT. - Convert the text to a graphic so you can fade it.
  • All other 4 Layers - Each of the four images should be on their OWN LAYER and fade IN and OUT over time - one after the other.
  • Make sure things don't move too fast!!! Objects should be easy to view.
  • Add music - Visit: Free MP3 files., Free Music Downloads Download the file and then go to media.io to convert it to an acceptable Flash format. Choose WAV and press CONVERT. You can then download the file that you will import into your Flash movie.
HOW TO INSTRUCTIONS:
How to Fade In and Out
Examples:
Example 1 without text
Example2
Student Slideshow Examples

MASK
– Create an effect using a MASK.
Your objective is to create a movie so that the large letters NYC move across a black stage and you see the NYC skyline through the letters (like a stencil) as move across
GRADING:
8 points - good background with lots of light
10 point - big, thick moving letters that move slow enough so that you can read them and see the background
2 points for going above and beyond the requirements
20 POINTS

Creating a Mask
1-Layer One = a black background (this is the bottom-most layer)
Click on the arrow tool, go down to the Properties toolbar and click on the background swatch and select a color
2-Layer Two = put a skyline of NYC (this is the middle layer)
In that layer import a picture of the NYC skyline that isn’t dark
(then you size it so it’s over the whole square)
3-Layer Three = NYC text
Using the type tool, type: NYC in super-size text Note: Manually type number larger than 96 in the text size window and press Enter
4- Make the NYC text start off stage left (time 1), move across the screen and end (last time frame) off stage right
5- Right click on the NYC text layer (that means right-click on the area where you name the layer, not on the timeline) and select MASK
6- Insert a keyframe on each of the other 2 layers so that they are visible to the end of the movie. If you don't do this, you will see the NYC text scroll across the stage with nothing behind it.
7- FILE--> PUBLISH as an GIF that is animated and repeats (loops) like an advertising banner would.
Grading:
All the above = 90
Intro page with start button = 95
Intro page with animated start button = 100




==


==
Interactivity with Buttons Using Actionscript in Flash
Intro Scene with START button
– Create an intro page with a title and a start button that on Scene 1 that will start scene 2. Scene 2 will have the cool shape tween animation on it.
Instructions to create a intro scene and button:
  1. Go to Insert--> Scene 2
  2. On Scene 1, layer 1: Type the title: Shape Tween Movie
  3. On layer 2: Create the Start button to the movie by doing the following:
    • Change the stroke to 5 and a dark color
    • Change the fill = a light color
    • Type in the center of that shape, dark, bold, large text: START
    • Select all of the above and convert to a symbol & make it a BUTTON
    • EXAMPLE Introduction Scene with START button: Use this intro scene as a reference
  4. After that, right-click on the button and go to Actions. The Actions Script window will appear.
  5. You then go to Global Functions-->Timeline Control and double-click on "goto"
  6. If you don't see the options for Scene, Type and Frame, click on SCRIPT ASSIST button to show it.
  7. "Go to and Play" button should be selected on top
    • Scene = Scene 2
    • Type = Frame
    • Frame = 1start-button-script.jpg
  8. Close the Actions panel and go back to your movie.
  9. Go to INSERT --> SCENE
  10. Go to Scene 2 by selecting it from the icon on the top right.
  11. You can start developing your shape tween animation below on Scene 2
  12. Test the movie (Control-->Test Movie) and the button should appear at the 1st scene and a click on it should bring you to scene 2.
SHAPE_TWEEN Product Advertisement – Create an cool animation that morphs one shape or image into another shape or image over time.
INSTRUCTIONS:
Scene 1 -
  1. Introduce you product on Scene 1 with a title
  2. Provide working start button (see above) that starts the product advertisement on Scene 2
Scene 2 -
  • This scene will advertise your product using Flash's SHAPE TWEEN tool applied to text and images (see student examples below)
  • Click here for shape tween instructions
  • AND/OR go to the public drive and watch the Shape Tween Tutorials in the Flash Video Tutorials folder.
  • Scene 2 only has ONE LAYER!! Everything listed below in the requirements occurs on this one layer.
  • DO NOT convert anything to a graphic - all objects must be in pixels to morph
  • Text MUST be in pixelsto morph -
    • Type text, use arrow tool, right click on text -->
      • break apart into letters
      • AGAIN break apart letters into pixels
REQUIREMENTS of Scene 2: Make 6 morphs of a combination of different shapes of different colors, text and images of choice. PICK A THEME for your morphing movie. Advertise a product, event, an idea, etc.
  1. Introduce your advertisement clearly from the first frame with text
  2. Change the text into an image relating to your theme
  3. Change the image back to text or shapes (include shapes somewhere in your movie)
  4. you need 8 transitions - make sure you slow the frame rate (fps) so the audience can read the text.
  5. For 100pts. - do all of the above & figure out how to make the button move or change (in any way) when you mouse over it (flash button effects) & add a song.
Be creative!
Examples without the Intro Scene:


==

==

Creating Moving Characters in Flash

Onion Skins - Running Stick Figure on a Moving Background - Create an animation of a stickfigure running against a moving background using the onion skin tool.
Instructions:
  1. Go to: My Computer/331 Public Drive/Flash Video Tutorials. Watch FLASH MS Onions Skins Video.
  2. You will be expected to create a moving background on one layer and a stickfigure running along that background on another in an expressive, animated fashion. That means it's not one stiff, constant unmoving figure but arms, legs, expression, etc. will change and it moves along terrain.
  3. LAYER 1: Draw a background: You could make a simple background or another terrain like this example of a city skyline here: youtube videos on this subject.video2 - Text instructions - moving background
  4. LAYER 2: Use the onion skins tool & Insert BLANK KEYFRAMEs OFTEN to make a simple stickfigure run, jump, roll (whatever) across the moving terrain. Make it realistic - it should not bump into the objects in the background and your stick figure should move and be lively. You will redraw your stick figure with each new blank keyframe to accomplish this.. See this youtube video

Impact and Sound Effects - Stick Figure Hit by Ball
– Create an animation with a bouncing ball that demonstrates impact (flexes), has sound effects upon impact and changes the expression of a stick figure's face upon impact - on a moving background

Layers:
  1. 3-D looking ball (color gradient) that bounces >=2 times. Each time it hits something it should change shape slightly (show flex), at point of contact, (use the transform tool and keyframe changes to accomplish this) and add a sound at each point of impact.
  2. Stick Figure with body and head (eyes and mouth- each on their own layer!) - Use a blank keyframe and onion skins to change the expression and position of the stickfigure when it gets hit by the ball.
  3. Add a sound effects (download one from the web and import it) when the ball hits the sides of stage or object.
  4. Go to: File-->PUBLISH as a FLASH file (.swf)
  5. Upload to the top of your wiki Animation page
  6. Save as a Flash .swf file
For the 85: Convincing bounce ball flex with sounds effects upon impact and good timing of face change
For the 95: Draw the figure and make it run from the ball before it gets hit. Watch this instruction on how to draw a figure and make it walk. or an introduction to your movie or other (surprise me).
For the 100: Add a moving background as shown in video. moving background There are lots of youtube videos on this subject.

Stick Figure with Bouncing Ball and Sound Effects Examples



Sprite Animation

http://dbutera-webdesign.wikispaces.com/search/view/sprites

Animated 2-D Character
- Create your own custom animated character
Create the following individual parts of a character in Flash and save each part in your library. Create an animation of your character dancing to a song of choice. Multiple parts of your character should move to make your character expressive and convincing including 3 facial expressions. You may trace an image from the web if you can't create on from your imagination. Use onions skins and either copy and draw new frames for each body part over time.
  • Here's an example of very simple 2-D characters:
  1. http://faculty.westliberty.edu/2009festival/
  2. click on
    1. Winners
    2. Comedy Short
    3. Honorable Mention
    4. Launch Video
Using 8 layers:
  1. background
  2. torso with head
  3. eyes
  4. right arm
  5. left arm
  6. right leg
  7. left leg
  8. song
  9. extra credit: add character voice audio (to get the 100) at the beginning or end of movie. ( In the properties toolbar, change the music setting to STREAM so that it stop playing at end of movie)
Animation Requirements:
  • Make your character dance to a song of choice or move to an audio recording.
  • The timing of your character's movement should work with the audio.
  • Facial expressions must change during animation.
  • Make movements convincing in motion and timing.
Reference for making characters in Flash
Possible music downloads: Visit: Free MP3 files., Free Music Downloads Download the file and then go to media.io to convert it to an acceptable Flash format. Choose WAV and press CONVERT. You can then download the file that you will import into your Flash movie.
Be creative. Look at other animations online for character ideas.
FOR HELP & IDEAS GO TO: My Computer/Public Drive P/Butera/Web Design II/Flash Video Tutorials/Creating a 2D Character

Total 85-90 pts for all of the above
90-95 pts - for all of the above & for a more sophisticated character, movements and expressions that are above and beyond the requirements
100 pts - make your character vocal by adding your own audio file or add your own introduction to the movie with an audio file created by you.
Student Character Examples


Flash Mini Projects (20 pts each)
Choose 5 from here: Flash Mini Projects






Final MP3 Project Submission Request -
You will create a narrated animation with an introduction scene that contains the movie's title & a start button.
Determine what your movie will be about and what partner you will work with.

Final-Flowchart.jpg
  1. Scene 1 = A introduction to your animation. Your introduction must include a title and a start button on Scene 1 that links to Scene 2
    like the one in the animation The Chase . Click here for the button/scene linking instructions
  2. Scene 2 will contain your story. Topic: YOUR CHOICE. It can be a story, a creative expression, an instructional video, etc. You may use any character and setting. You characters may be insects, animals, aliens, people, fictional creatures, etc. NO STICK FIGURE characters but try to keep your characters simple so you don't waste too much time creating it because there is lots of other work to do! Manage your time well to complete the project on time.
  3. Add an audio of your own voice.Create an audio to your introduction in scene 1 and have the PLAY button appear at the end of your narration OR for more credit create a narration to your movie in scene 2. If you do a narration to your movie, check the timing to insure that your voice makes sense with what is happening in your movie.
    1. Record your voice in Audacity - This will be extra credit since we are running out of time and Audacity is not working at numerous stations.
    2. In Audacity, Go to: File -->Export as WAV
    3. In Flash, Go to : File--> Import to Library
  4. Extra credit - allow the user a choice of endings
  5. You make work with or without a partner
  6. Complete the form below before starting:



LOOKING FOR PROJECT IDEAS?? - Watch other animations!!
Curtis High School student animation Spring 2012
University of West Virginia Student Work
Explania.com - Animated Explanations
The Story of Stuff
Pet Cat
http://www.robludacer.com/ sanimations/collegetoon.html
http://www.robludacer.com/ sanimations/math.swf
Bobs Animations



OLD WORK - SKIP
SKIP THIS ONE - COMEDY - Make talking character

Create a movie of a celebrity, yourself or a friend talking. You will make the jaw move up and down and have words appear (a caption) in good timing.
In Flash:
1. Import an image of choice into your Library. Go to Window/Library to open your library
You will create the following parts in Flash
2. Layer1 = face
3. Layer2 = jaw - you will cut out from the original face image
4. Layer3 = body - which you will draw
5. Layer4 = will have the words (caption) that will appear one at a time when the jaw moves up and down....make the timing realistic.
MOVIE GOAL:
Make the jaw move up and down in the movie to imitate talking. The text in your caption should be timed properly with the jaw movement. Jaw movement should not be too slow or too fast, but convincing and inside mouth should be clean and realistic. Caption text must appear as he talks and NOT ALL AT ONCE!! Be creative!

Grading Rubric:
65 pts - gets the jaw moving up and down
75 pts - above plus the drawn body
85 pts - all of the above with caption
90 pts - all of the above with caption & good timing of the words to the jaw movement
100 pts - all the above and you clearly show that you went above and beyond the requirements of the project.

Follow the TUTORIAL - Go to: My Computer/Public Drive P/Butera/Web Design II/ Flash Video Tutotials/Talking head

Here's an variation on what I'm looking for but does not meet the exact assignment criteria



  1. Shape tween advertisement with start button
  2. Shape Tweens
  3. Play Button
  4. Sound Effects
  5. Animated Web Banner
  6. Animated Web Banner
  7. Slideshow
  8. Mask Tool
  9. Shape_tween Product Advertisement
  10. Sprite Animation Animated 2-D Character
  11. Flash Mini Projects