Flash+Assignments


 * 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**
 * Save As: ShapeTween1 - How to morph objects using shape tweens - shape to shape
 * Save As: ShapeTween2 - How to morph objects using shape tweens - shape to text
 * Save As: ShapeTween3 - How to morph objects using shape tweens - shape to image to text
 * 1) __ Create an Animated Button __
 * 2) __ @Adding sound effects to buttons __
 * 3) __ Interactive Drum Kit with sounds __
 * 4) __ How to add a PLAY button on Scene 1 __
 * 5) __ How to animate the title using a movie clip __
 * 6) Create a Sprite movie in Scene 2 of movie
 * 7) How to add audio to Flash
 * 8) **Preparation to project -**
 * ** __ Public Awareness Assignment __ **
 * ** __ Animated Banner Sizes __ **
 * How to add a PLAY button on Scene 1
 * 1) Public Awareness Advertisement Project using Shape Tweens
 * 2) How to upload a .swf file to a blog post
 * 3) Creating a movie clip within your movie and use an image from the web as your background.
 * 4) 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. You will have 5 layers: That will move across the stage in different motions while the music is playing.
 * Overview of assignment:**
 * 1) Title
 * 2) Drink shaker
 * 3) rattlesnake
 * 4) tire
 * 5) Credits: Animation by, Music: "Shake Rattle Roll" by Big Joe Turner
 * Instructions: **
 * Open a New Flash Document and ** Save As ** ** Shake Rattle Roll. **
 * Choose a color for your background
 * Save the following 3 images to your Animation folder
 * For full credit (to get 100), remove the white backgrounds in Photoshop of the following three images. View this video for "how to" remove a background in Photoshop.

> 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 > > NOW:
 * 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
 * 1) Create a last layer that states: THE END BY YOU - & "Shake Rattle Roll" by Big Joe Turner
 * 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 - media type="file" key="1 Shake, Rattle and Roll Bill Haley and the Comets (1954).mp3" width="240" height="20" 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? You have been asked to create an animated tourism banner for an assigned city OTHER than NYC. __**Grading Rubric**__
 * MOVIE GOAL:**
 * **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!! Y**ou 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) [[image:dbutera-webdesign/NEW_YORK_CITY.gif]]
 * 17) [[image:dbutera-webdesign/banner.gif]]

Slideshow – Create a slideshow with **FADING text & images** __**Scene 1**__ - __**Scene 2:**__ How to Fade In and Out Example 1 without text Example2 Student Slideshow Examples
 * 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:**
 * **Layer 1 -** Title your slideshow
 * **Layer 2** - Create an animated start button
 * **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:**
 * 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 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
 * GRADING:**
 * 20 POINTS**

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. Grading:
 * Creating a Mask**
 * 7- FILE--> PUBLISH as an GIF that is animated and repeats (loops)** like an advertising banner would.
 * All the above = 90**
 * Intro page with start button = 95**
 * Intro page with animated start button = 100**

media type="file" key="Lopez MASK.swf" width="360" height="270"

==

== – 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: media type="file" key="livesey_a4.swf" width="360" height="270"media type="file" key="A5.swf" width="360" height="270"
 * Interactivity with Buttons ** **Using Actionscript in Flash**
 * Intro Scene with START 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
 * 1) After that, **right-click on the button** and go to **Actions**. The Actions Script window will appear.
 * 2) You then go to **Global Functions-->****Timeline Control** and double-click on **"goto**"
 * 3) If you don't see the options for Scene, Type and Frame, click on **SCRIPT ASSIST** button to show it.
 * 4) "Go to and Play" button should be selected on top
 * Scene = **Scene 2**
 * Type = **Frame**
 * Frame = **1**[[image:start-button-script.jpg]]
 * 1) Close the Actions panel and go back to your movie.
 * 2) Go to **INSERT** --> **SCENE**
 * 3) Go to Scene 2 by selecting it from the icon on the top right.
 * 4) You can start developing your shape tween animation below on Scene 2
 * 5) 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 pixels**to 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

– 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
 * Impact and Sound Effects - **** Stick Figure Hit by Ball **


 * 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 __**Animation Requirements:**__ Reference for making characters in Flash Be creative. Look at other animations online for character ideas.
 * 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) []
 * 2) click on
 * 3) Winners
 * 4) Comedy Short
 * 5) Honorable Mention
 * 6) 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)**
 * 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.
 * 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.
 * __FOR HELP & IDEAS GO TO__: ** // My Computer/Public Drive P/Butera/Web Design II/Flash Video Tutorials // / ** Creating a 2D Character **

Student Character Examples
 * 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.

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.

> like the one in the animation The Chase. Click here for the button/scene linking instructions
 * 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
 * 1) **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.
 * 2) **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.
 * 3) 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.
 * 4) **In Audacity**, Go to: **File -->Export as WAV**
 * 5) **In Flash, Go to : File--> Import to Library**
 * 6) **Extra credit** - allow the user a choice of endings
 * 7) You make work with or without a partner
 * 8) **Complete the form below before starting:**

media type="custom" key="18617406"

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

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

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. 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!! B**e creative!**
 * 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:**
 * MOVIE GOAL:**

__**Grading Rubric:**__ 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
 * 65 pts -** gets the jaw moving up and down
 * 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 media type="file" key="kim 2 each word seperately.swf" width="475" height="356"


 * 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