Flash – Unit C Flash Unit C A. Shape Tween (as opposed to Motion tween – Use NO Motion Tweens!!!) 1.
Create a new Flash animation called Unit C. 2.
Call your first Scene Shape Tween. 3.
Choose a background color from the Properties Panel at the bottom. 4.
All the rest will be on Layer 1: WordsTweening 5.
Frame 1 a. With the text tool, your choice of colors, type a large word into the left side of your stage. b. position it on the far left 6.
Frame 10 -­‐ Insert a Keyframe. This holds the word so the viewer can read it before the tweening happens. 7.
Frame 30 a. Insert a Keyframe b. With the text tool, your choice of colors, type another word into the middle of your stage. c. position it in the middle of the screen d. delete the first word at this keyframe 8.
Frame 40 -­‐ Insert a Keyframe. This holds the word again. 9.
Frame 60 a. Insert a Keyframe b. With the text tool, your choice of colors, type another word into the right side of your stage. c. position it on the far right d. delete the other words at this keyframe 10. Frame 70 -­‐ Insert a keyFrame. This holds the word ‘til the end with no additional action. 11. Click on keyframes 10, 30, 40 & 60 and break apart each word (Command-­‐B) twice so computer does not see them as text anymore but as random graphics. 12. Insert Shape tweens a. Right-­‐click between keyframe 10 and keyframe 30 on the timeline and choose Shape Tween b. Do the same for between keyframe 40 and keyframe 60 13. A sample of the scene is included (the .swf version). MultiMedia 1
Flash Unit C Assignments
Page 1 of 10
B. Shape Tween 2 … Words Transforming 1. New scene: ShapeTween2 2. Layer 1: Background a. Make a gradient (Color Mixer panel – change from Solid to Linear). b. Use rectangle tool and draw a rectangle around the stage. c. Click on the rectangle with the select tool. d. Use the Gradient Transform tool – 3rd one down on the tool palette – hold to access it. Drag the top corner handle down and to the right some to make the gradient to go from corner to corner – light (top left) to dark (lower right) -­‐ instead of from side to side. e. Insert a Frame (NOT a keyframe) at 60 to make the background permanently visible. 3. On a new layer called Digital Imaging (or two other words of comparable length) a. Frame 1: i. Type the first word (Digital). ii. Make it a darker color, large and in the upper left corner iii. Select the first word (Digital) and break it apart twice (so it is not text but a random graphic). b. Frame 30: i. Insert a Keyframe ii. Delete the first word (Digital) iii. Type the second word, large (Imaging) in lower right. iv. Make it a lighter color and large. v. Select the second word (Imaging) and break it apart twice (so it is not text but a random graphic). c. Frame 60: i. Insert a keyframe ii. Import a picture of your choice: File à Import to Stage iii. Size it to fit in the middle between the two words iv. Delete any words that are on this keyframe v. Break it apart (just once is needed on pictures). d. Click between the first word (Digital) and the second word (Imaging) on the Timeline and insert a shape tween. e. Click between the second word (Imaging) and the picture on the Timeline and insert a shape tween. f. Run the animation. 4. To leave the first two words (Digital and Imaging) there: a. Make a new layer called words stay. b. Frame 1: Copy and Paste in Place the first word (Digital) from the Digital Imaging layer i. Click on Frame 1 of the Digital Imaging layer. ⌘C (to copy the word) ii. Click on Frame 1 of the words stay layer and Paste: Edit à Paste in place c. Frame 30: Keyframe, then Copy and Paste in Place the second word (Imaging) from the Digital Imaging layer i. Click on Frame 30 of the Digital Imaging layer. ⌘C (to copy the word) ii. Make a Keyframe at 30 on the words stay layer. iii. Click on Frame 30 of the words stay layer and Paste: Edit à Paste in place d. Frame 60: insert a frame to hold those two layers on the screen. 5. To hold the whole animation before repeating, insert frames (not keyframes) on frame 70 of all layers. MultiMedia 1
Flash Unit C Assignments
Page 2 of 10
6. Sample: MultiMedia 1
Flash Unit C Assignments
Page 3 of 10
C. Shaping Letters 1. Layer 1: your choice of background 2. Layer 2 (will only be 2 layers total): Name a. Make a new layer b. Put your name in on frame 1 c. Make it LARGE – fill the stage. d. Break Apart (Command-­‐B) twice e. Put keyframes in at 10, 25, 50 and 75. All these frames shoud be the same: 3. Reshaping the full name (still on Name layer) a. Select keyframe 25 b. Modify à Transform à Envelope c. Reshape your name by dragging the handles on the box around. d. Keep name so it can still be read. For example: e. Insert a keyframe at 35 – this makes 25 and 35 the same. 4. Reshaping individual letters (still on Name layer) a. Select frame 50. b. Select one letter NOT the whole name c. Modify à Transform à Envelope d. Reshape each letter (at least 5) SEPARATELY by dragging the handles on the box around. e. Keep letters so they can still be read. f. Insert a keyframe at 60 – this makes 50 and 60 the same. 5. Insert shape tweens between 10-­‐25, 35-­‐50 and 60-­‐75. 6. Allow for time to hold at the end: Insert frames a second or two down the timeline. MultiMedia 1
Flash Unit C Assignments
Page 4 of 10
D. Spotlight 1. New Scene called Spotlight. 2. Layer 1 -­‐ Background a. Make it a non-­‐standard gradient turned. iv. Make a gradient (Color Mixer panel – change from Solid to Linear). v. Use rectangle tool and draw a rectangle around the stage. vi. With the Select tool, click on the rectangle. vii. Click the Free Transform tool (3rd one down). Hold down on it to access the Gradient Transform tool. This will show 3 handles. viii. Drag upper right handle about 45° to make the gradient to go from corner to corner – top left to lower right -­‐ instead of from side to side. b. Frame (not keyframe) at 60 3. New Layer -­‐ Name a. Type your first and last names b. Make it fill the space – fat, wide c. Your choice of colors d. frame at 60 4. New Layer -­‐ Spot a. Make an oval i. Filled in ii. off the stage to the left iii. make it a little taller than the height of your letters iv. Insert a classic tween b. Keyframe at 30 i. Position the oval to the right of the stage (off stage) ii. Control-­‐click the name of the layer and make it a Mask c. Make sure it works so far. i. Unlock the mask layer. ii. Keyframe at 60 iii. Size and position the circle so it barely but completely covers the name iv. should still be tweening v. Lock the layer again and test it MultiMedia 1
Flash Unit C Assignments
Page 5 of 10
E. Reveal 1. New Scene -­‐ Reveal 2. Layer 1 a. name it Background b. Import a picture to the stage (size it to fill the stage) c. Frame at 30 3. New Layer a. name it Mask. b. Make a tiny rectangle in the center of the stage c. Select it d. Convert to a Symbol (Modify à Convert to Symbol) e. Insert a classic tween f. Keyframe at 30 g. At 30, Transform to Scale to large enough to cover the whole stage. h. Control-­‐click the layer’s name and make it a Mask 4. “Hold” the animation a. Insert a frame a second or two down the timeline on the two layersso the animation “holds” 5. Give it “character” a. Unlock layer(s) to do this step. b. Move frame 1 of Mask Layer to a corner or edge c. Add a rotate to the tween d. Lock layer(s) again. MultiMedia 1
Flash Unit C Assignments
Page 6 of 10
F. Typewriter & Sound 1. New Scene – Typewriter & Sound 2. Three Layers a. Background: Create a background of your choice b. Typewriter c. Long Song 3. Typewriter Layer: a. Font -­‐ Courier b. Large – fills the screen left to right c. Color – your choice d. Type the word Typewriter e. Set up frames: i. Insert a frame at 20 ii. Insert keyframes on every other to the end: starting with 3, 5, 7, … f. Change the frames to show just the following: i. Frame 1 – show just T (highlight the rest of the word and delete) ii. Frame 3 – show just Ty (highlight the rest of the word and delete) iii. Frame 5 – show just Typ (highlight the rest of the word and delete) iv. Etc. 4. Play animation 5. Get sounds to use a. File à Import à Import to Library b. Go to Applications à Microsoft Office 2011 à Office à Media à Sounds à Typewriter (hold down the format bar and choose All Files otherwise it’s grayed out) c. Find another longer sound. Ex: Macintosh HD à Users à Shared à Sounds (can preview in Finder). d. Window à Library to see the sounds you imported 6.
7.
8.
9.
Typewriter layer: on Frames 1, 3, 5, etc. – drag the Typewriter sound to the stage Long Song layer – drag the longer song to the new layer Play the animation with sounds! Try Sound editing from Properties panel (at the bottom): a. Edit – allows fade in and fade out 10. Stop the long song a. Properties panel i. Add a keyframe at the end on the long song layer. ii. On that keyframe, hold down Sound drop-­‐down box (on Properties panel) and choose the song to be stopped. iii. Hold down Sync: Event and choose Stream MultiMedia 1
Flash Unit C Assignments
Page 7 of 10
G. Organizing Letters 1. New scene: Organizing Letters 2. Background – your choice – on a layer of its own. 3. New Layer -­‐ Text – approx. 7 letters a. Word(s) – your choice b. Large – fills the screen left to right c. Color – your choice 4.
5.
6.
7.
8.
Select the lettering with the Select tool Select it. Modify à Break Apart Modify à Timeline à Distribute to Layers Highlight all the frame 1’s. Insert tweens all at once. Insert frames at 40 a. Multiple select Frame 40 on all letter layers b. Control click – select Insert Frame 9. Insert keyframes at frame 10 a. Multiple select Frame 10 b. Control click – select Insert Keyframe 10. Repeat this for each letter a. Click frame 1 of first letter b. Click the letter c. Go to the properties panel (where we have changed Brightness before) Hold down None and change Alpha to 10% d. Move to different place on the stage e. Modify à Transform à Scale and rotate à scale to 40% 11. Highlight the tween (keyframe to keyframe) and move (drag & drop) each further down the timeline. Letters appear at different times from different places but the tweens will all remain 10 frames long. Starts like this: Finishes like this: Finished Product: 12. Insert frames (not keyframes) on all at the end so the animation holds at the end for a second or two (not a frame or two). MultiMedia 1
Flash Unit C Assignments
Page 8 of 10
H. Orient To Path – 2 scenes 1. New Scene: Windy a. Layer 1: Object to move i. Draw a boat with the brush tool (or import a boat) on the far left of the stage.
ii. Tween the boat.
iii. Have it finish on the far right side (with a keyframe).
b. Layer 2: i. Add a guide layer (right-­‐click on the name of the 1st layer on the timeline and choose “Add Classic Motion Guide”)
ii. Draw a “rocky” path with the brush tool for the boat to go on.
c. Test the animation. d. If it doesn’t follow the path: i. Click on first frame of boat and move the boat to the beginning of the path.
ii. Click on the end frame of the boat and move the boat to the end of the path.
e. Orient boat to path: i. Click on the blue tween arrow in the timeline
ii. Click Orient to Path in the Properties Panel.
2. New scene: Calm a. Guide Path: Create a “calmer” guide path (not straight, though) for the boat in this new scene. Orient to Path will not rock the boat much at all. b. Boat to be guided: To use the same boat, copy and paste the boat from Windy scene to this new Calm scene. c. End frame is to have the boat
VERY small
as if it was getting further away. MultiMedia 1
Flash Unit C Assignments
Page 9 of 10
New Flash Skills -­‐ Unit C Number Received Number Possible Name _________________________________ Requirement ______ 10 Scene: ShapeTween  Large words – hold each word for about a second before tweening  From far left to far right 15 Scene: ShapeTween2 (Shape tween with Graphics & Text)  Gradient background turned diagonal using Gradient Transform tool  Once words appear, they are to stay visible 15 Scene: Shaping Letters  Full name layer: Whole name reshaped  Individual Letters layer: Individual letters (at least 5) reshaped  Insert frames so they stay on the screen for a second or two 15 Scene: Spotlight  Background – Non-­‐standard diagonal gradient using Gradient Transform tool  Name fills the banner  Mask starts and ends off stage (left…right of name)  Then mask reveals the whole name from right to left 10 Scene: Reveal  Mask goes from corner or edge to center  Mask goes from small to large  rotate  Insert frames so the animation “holds” on the screen for a second or two 15 Scene: Typewriter  short typewriter sounds in same layer as keyframes  long song layer – busy/loud/long enough to hear before stopping 20 Scene: OrganizingLetters  Letters come in at different times  Alpha settings  Scale settings  Letters come from different places on the stage  Tweens all 10 frames long  All layer actions end at the same time  All letters hold at the end for a second or so 15 Scenes: Windy & Calm  Boat goes from far left to far right  Guide layers on both – orient to path  “Calmer” scene: NOT straight path, boat gets smaller Other: Creativity, file named correctly, this sheet turned in, etc. ______ ______ ______ ______ ______ ______ ______ ______ 10 ______ 125 MultiMedia 1
TOTAL Flash Unit C Assignments
Page 10 of 10