FLASH CS6 DIRECTIONS TO GET YOU STARTED!

FLASH CS6 DIRECTIONS TO GET YOU STARTED! SYMBOL A symbol is a reusable image, animation or button. You will see a plus sign + in the object once it s been converted to a symbol. Insert>Convert to symbol INSTANCE Each appearance of a symbol on the Stage or nested within another symbol is called an instance. Any time you change the symbol, the instance also changes. UNGROUP A SYMBOL Select the symbol, then Modify, Ungroup KEYFRAME Identifies a change, occurrence or major action. Insert a keyframe F6 PREVIEW IN BROWSER - F12 SHOCKWAVE swf = small windows format CTRL + ENTER to view on the web, or to prepare (shock) to insert into Dreamweaver. CHANGE BACKGROUND COLOR Modify>Document OR use the properties panel EDITING A SYMBOL After you have converted an object to a symbol, you can edit the object only in the symbol-editing mode. Choose right click on the symbol and choose Edit, or just double click the object. ANIMATION TIPS IN ORDER Animation - An animation is a series of frames 1. Create and name your layers. 2. Click on frame 1 BEFORE you do anything else! 3. Insert your image (File>Import to stage or library) or draw your shape or line on the stage. 4. Click on the image or shape or line with your pointer tool 5. Insert>Convert to Symbol or Right Mouse click>convert to Symbol>New Symbol, name, graphic 6. Go to the next place in the timeline where you want a change to be done example, something is spinning, moving, shrinking, expanding... and press F6 to insert a keyframe 7. With the new keyframe (only the keyframe) still highlighted, drag the object to the new position, and/or use Modify>Transform>Scale, Rotate, or Scale and Rotate, or Rotate CW or CCW 8. If you want fade in, fade out click on the item in frame 1 or a keyframe, make sure the item is selected with the pointer tool, and then go to Modify>Instance>Effect and choose Alpha>and choose a % 9. Highlight the layer, 10. CTRL ENTER to play USING PRESET ANIMATIONS 1. Go to Window, and choose Motion Presets 2. Select object make sure it s been converted to a symbol ANIMATION & TWEENING Tweening Classic tweens Use classic tweens to set properties for an object, such as position and alpha transparency in one frame and again in another frame. Flash then interpolates the property values of the frames in between. Classic tweens are useful for animation that consists of continuous motion or transformation of an object. Classic tweens appear in the Timeline as a contiguous span of frames that can be selected as a single object by default. Classic tweens are powerful and simple to create. FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 1 1/27/2017

Shape tweens In shape tweening, you draw a shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another. You do not create symbols for this tween. Frame-by-frame animation This animation technique lets you specify different art for each frame in the Timeline. Use this technique to create an effect that is like the frames of a film being played in rapid succession. This technique is useful for complex animation where the graphic elements of each frame must be different. BRING IN AN IMAGE To bring in an image you either created or found, go to File>Import to stage or library>select your image from your H drive or wherever. GET RID OF THE WHITE BACKGROUND OF AN IMAGE Select the image. Modify>Break Apart {CTRL B}. Click on lasso tool, use magic wand. Click on the white area and press Delete key. Select any remaining white area and delete. Use the eraser to clean up smaller areas. Modify>Group to have the image in one piece again. FADE IN/OUT Select item. Insert>Convert to Symbol. Choose Color tab on the Properties Panel, Color Effects, then choose Alpha>0% for transparent, 100% to see image in regular view. Choose different Alpha % at different keyframes for effect. You can use this for a blinking effect. COMBINE OBJECTS Draw two or more shapes, go to Modify, combine Objects, then choose union, punch, intersect, or crop 3-D TOOL You need to create the object or text object, convert to symbol, then the 3D Rotation Tool (AKA global rotation) or 3D Translation Tool will be available. DECO TOOL Choose the deco tool from the toolbar. You can swap out another image. Or choose go to the brush tool (open it) and choose the spray brush tool http://tv.adobe.com/watch/flash-downunder/the-bone-tool-and-the-deco-tool/ TEXT 1. Use the Text Tool name layer text 2. Type text in frame 1 (size 20) Make it a Symbol {Right mouse, convert to symbol} 3. In Frame 50, press F6 4. Click on text in Frame 50 with the arrow tool 5. Use Free transform tool to enlarge text 6. Double check on frame 1 and frame 50 to make sure you have small text in frame 1 and larger text in frame 50 7. Shift click on all frames, and Insert>Classic tween 8. Double check again on frame 1 and frame 50 to make sure text is the right sizes 9. In frame 1 look at the Properties panel>rotate>cw or CCW 5 times or whatever you want 10. If you want an alpha change (transparent to full color), both pieces of text have to be symbols. 11. You can also break apart the text in frame 1 and then the larger sized text in the last frame, and you will have a smoother transition, but you can t use the alpha settings. FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 2 1/27/2017

BLINKING BALL 1. Rename layer 1 to: SHAPE 2. In Frame 1, draw a ball 3. Select marquee - the ball with the arrow tool. Right Mouse click>convert to symbol as a graphic 4. Go to the properties panel, color effect, alpha 5. Frame 5 insert keyframe with F6 Alpha 0% 6. Frame 10 insert keyframe with F6 Alpha 100% 7. Frame 15 insert keyframe with F6 Alpha 0% 8. Frame 20 insert keyframe with F6 Alpha 100% 9. Frame 25 insert keyframe with F6 Alpha 0% 10. Frame 30 insert keyframe with F6 Alpha 100% 11. Lock the shape layer 12. Add a new layer, name it TEXT 13. Click in Frame 1 on this text layer 14. With the text tool, type SEAHOLM Font size 50 15. Frame 50 F6 to insert a keyframe 16. Click in frame 50. Use the pointer tool to select the text. 17. Use the Free transform tool to make the text smaller 18. Shift click on all frames>insert>create classic tween 19. Double check that in Frame 1, text is big, in frame 50 it s little 20. Frame 1 alpha 100% 21. Frame 50 Alpha 0% 22. Shift click on the ball layer frames. Hold the shift key down, and move all frames so movie ends at the same time. 23. CTRL ENTER to play you should see your large text get smaller, then disappear. The ball will blink and blink at the end. BONES When you add bones to symbol instances, you create a chain of linked instances. You can edit their relative positions after adding bones. The symbol instances can be on different layers before adding bones. Flash moves them to a new layer when bones are added. Create symbol instances on the Stage. Arrange the instances in the approximate spatial configuration you want them in before adding bones. 1. Select the Bone tool from the Tools panel. You can also press the X key to select the Bone tool. 2. With the Bone tool, click the object 3. Then drag to a separate symbol instance to link it to the root instance. While dragging, a bone appears. When you release the mouse, a solid bone is displayed between the two symbol instances. Each bone has a head, the round end, and a tail, the pointed end. 4. http://www.layersmagazine.com/flash-cs4-animating-puppets.html FAKE MASKING (SPOTLIGHT) 1. Make the background a color. 2. In frame 1, with the circle tool, draw a small circle in a contrasting color, like bright blue, on the left side, middle of the stage. 3. With the pointer tool, select (marquee) the circle to select it and Insert>Convert to Symbol as a graphic 4. In frame 60, insert a keyframe F6 5. In frame 60, move the circle from the left side of the screen to the far right in as straight of a line as you can. 6. Turn on the onion skinning and edit multiple frames to check the path of the circle. 7. Shift click on all frames in the layer and Insert>Create Classic Tween. You should see the path of the circle left to right. 8. Create a second layer called text. Make sure you can see the onion skinning for the circles (you may have to drag it out again for this new layer). 9. In frame 1 of the text layer, type some text. It can be a sentence or group of words. It MUST be the same color as the background (use the eyedropper tool to get an exact match), and it must be placed over the onion skinned circles, stretching from left to right. The text should be only one line and fit inside the circles. 10. Select the text with the pointer tool, Insert>Convert to Symbol as a graphic. This puts the text in all frames. 11. Do NOT animate the text. CTRL ENTER to see your masked movie! FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 3 1/27/2017

CREATE A MOTION GUIDE the Paul Snyder way! 1. Make the background any color. 2. Name layer 1 Circle (naming layers makes it easier to understand what is going on when there are multiple layers. 3. In layer 1, frame 1, draw a circle. 4. Select the circle with Arrow tool, then Right mouse click, create a symbol as a graphic. 5. In Frame 50, create a keyframe (F6 in frame 50) 6. In frame 50, move the circle to the right side of the stage. 7. Highlight all the frames, and then in the properties bar, change the tween to MOTION 8. Test your movie (Control + Enter) to make sure it works up to here your circle should move left to right 9. Click on the Onion Skin icon, the second icon from the left under the frames on the Timeline. 10. Drag the Onion Skin marker on all the frames (wherever your circle is moving; this allows you to see where the circle is moving) 11. Click on the layer name, look under the layers and click the ADD MOTION GUIDE icon, the second icon from the left. A new layer is created above. Note the dashed lines between the two layers (showing that the layers are linked) and the Motion Guide icon (a blue arc with an orange dot). 12. In the Motion Guide layer, use the pencil tool AND CHOOSE HAIRLINE, BLACK COLOR to draw a line that you want the circle to follow (the line must start in the middle of the circle in frame one, and end in the middle of the circle in the last frame.) 13. Be creative with your line. 14. If it worked, the onion skin should snap to the line that was drawn in the Motion Guide layer. 15. With the Arrow tool, drag the middle of the line to make curves. MORPHING BETWEEN SHAPES 1. Frame 1 draw a square (do not convert to symbol!) 2. Insert a keyframe in frame 40 (F6) 3. Delete the square while in frame 40 4. Draw a circle while in frame 40 5. Select frames 1 through 40, Insert Shape Tween. 6. CTRL ENTER or Play, and your square will morph into a square MORPH IMAGE TO TEXT 1. In frame 1, file import an image 2. Do NOT convert the image to a symbol! 3. Use the pointer tool to click on the image, and CTRL B to break it apart. 4. In your ending frame, (like frame 40 or 60) create a keyframe F6 5. Delete the image from the ending frame 6. In this keyframe, choose the TEXT tool and type a letter or word(s) 7. With the pointer tool, select the text you just typed, and CTRL B to break the text apart into individual letters 8. Repeat this break apart step again CTRL B to break the letters into pieces 9. Shift click on all frames in the layer, Insert Shape Tween 10. Run it and you will see the image change to text! 11. You can also do this with Text to an Image MORPH SHAPE TO TEXT 1. In frame 1, draw a shape, or many shapes 2. Do NOT convert the shape to a symbol! 3. Use the pointer tool to click on the shape, and CTRL B to break it apart. 4. In your ending frame, (like frame 40 or 60) create a keyframe F6 5. Delete the shape from the ending frame 6. In this keyframe, choose the TEXT tool and type a letter or word(s) 7. With the pointer tool, select the text you just typed, and CTRL B to break the text apart into individual letters 8. Repeat this break apart step again CTRL B to break the letters into pieces 9. Shift click on all frames in the layer, and Insert Shape Tween 10. Run it and you will see the shape change to text! 11. You can also do this with Text to a Shape FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 4 1/27/2017

MORPH IMAGE TO IMAGE (not as cool, but it works) 1. In frame 1, file import an image 2. Do NOT convert the image to a symbol! 3. Use the pointer tool to click on the image, and CTRL B to break it apart. 4. In your ending frame, (like frame 40 or 60) create a keyframe F6 5. Delete the first image from the ending frame 6. In this keyframe, file import a second image 7. With the pointer tool, select the second image, and CTRL B to break it apart 8. Shift click on all frames in the layer, and Insert Shape Tween 9. Run it and you will see the image change to a second image! MAKE YOUR SCREEN FREEZE, LIKE FOR THE END OF YOUR MOVIE (ACTIONSCRIPT) To make the screen freeze, so you can read the text you just morphed into, Make a new layer called STOP, click on ending frame for the layer the text is in, and open up the Actions Panel {F9}, Global Functions, Timeline Control, Stop and double click on the word STOP SPINNING AND SHRINKING TEXT The important thing to remember about FLASH when creating a movie is that each layer can have animation and movement separate from all other layers, and that you can create more than one keyframe on the timeline for one layer. This enables you to make many cool effects and looks. 1. New file 2. With the text tool, type SEAHOLM (large font size for cool effect) 3. Select the name with the arrow tool 4. Insert convert to symbol, graphic 5. Go to frame 60 and insert a keyframe with F6 6. In frame 60, use the Free transform tool to shrink the text. 7. Double check that text is different sizes in frame 1 and frame 60 8. Highlight the layer. Insert Classic Tween 9. On the Properties Panel, choose Rotate: CW 5 times 10. When you run this, (CTRL ENTER or PLAY) the text should spin and shrink to a small dot on the screen! MAKING A LINE GO FROM SHORT TO LONG 1. Pick a color for the background Use the pointer tool to click on the background>background>and choose a color 2. Choose the Line Tool 3. Check the stroke size for a line Property Panel>Stroke> Change to Hairline 4. Pick a color for the line 5. Draw a line with the line tool very, very small with the hairline stroke 6. Click in frame 1, select line with arrow (pointer) tool 7. Right mouse click on the line>convert to symbol, choose Graphic 8. Select line with arrow tool (again, or still) 9. Go to (ex) frame 25, and click, then create keyframe with F6 10. Modify>Transform>Scale or use the Free Transform tool 11. Pull on the line with your mouse to the size you want 12. Shift click to select all frames 13. Insert classic tween 14. To spin the line, click on the first frame with the pointer tool 15. Properties Panel>CW or CCW and number of times 16. Play! Your line should go from small to long and spin WAVY LINES 1. Draw a line with the line tool in any color. Make the stroke size a bit thicker than a hairline stroke. 2. Right mouse click on the line and choose ENVELOPE 3. This made little nodes pop up along the line 4. Click on the transform tool 5. Use your mouse to move parts of the line up and down you will see the Bezier curves and have a wavy line 6. To animate add keyframes highlight frames and choose shape tween FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 5 1/27/2017

CURVY LINES 1. Draw a line 2. Put mouse next to line and see the curve under the mouse 3. Pull on line to curve! CREATING BUTTONS 1. Create a new button 2. Click on the rectangle tool 3. At the bottom of the toolbar, a curved tool shows click on that 4. Change radius to 20 5. Choose a color and draw a rectangle on the canvas 6. With the text tool, choose a color and size and type some button text 7. Marquee the entire button with the arrow tool 8. Insert>Convert to Symbol>Name: button name, Behavior: Button>OK 9. You will see UP, OVER, DOWN stages for the button over the timeline 10. Click under each button stage in the timeline, and insert a keyframe with F6 11. Go back to each stage and edit the button color, text, etc. 12. F12 to see the button in the browser 13. File>Import to library an Acid sound loop. Add sound through Property panel. F12 to see your button! USING MOTION EDITOR 1. Create an object, convert to symbol 2. Insert keyframes and insert motion tween 3. Place your cursor somewhere in the tween 4. Switch to Motion Editor (behind the timeline) http://tv.adobe.com/watch/digital-design/getting-started-14-using-the-motion-editor/ SOUND IN YOUR FLASH PROJECT 1. Create new layer, name it sound, click on frame 1 2. File>Import to stage or library>choose Sound File 3. Properties Panel>Sound: pull your sound down 4. Choose the first frame in your sound layer and then you will have syncing options 5. Sync: Stream will start over when movie starts over OR Start: will play whole piece until done while movie repeats 6. Pull song to last through all frames of your project and CTRL ENTER to play! 7. Another option: - go to Window, Common Libraries, Sounds 8. Drag a sound to the library 9. Add a layer name it sound 10. Drag the sound from the library to the stage FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 6 1/27/2017

EXTRACTING YOUTUBE SOUNDS FROM VIDEOS 1. Find your video 2. Copy the url info 3. Go to http://listentoyoutube.com/ 4. And paste the url info. 5. This will convert the file to a MP3 file. 6. Now, you can save this in your H: drive. FLASH MX DIRECTIONS TO GET YOU STARTED WEB 1 page 7 1/27/2017