FLASH 5 PART I USER MANUAL
Contents
1. A BETTER UNDERSTANDING Flash has been marketed lately as a Web Development tool but it s not easy to learn because of a counter intuitive interface and may not be the right tool for the job If you re using any of these other applications for Web Pages and you re thinking about switching to Flash there are some things to consider Flash requires a plug in for the viewer to see your site These plug ins now come with all new browsers Accessibility is an issue Some progress has been made For best results you can always keep your pages in these other formats and simply insert a Flash animation movie to make it more interesting It is important though that you understand that Flash is a Multimedia Authoring tool that can also be used for web pages THE AUTHORING ENVIRONMENT When you start the application Flash opens a new movie by default After that you can create more new movies by choosing File gt New Stage The stage displays what the end viewer will see much like the canvas in PhotoShop You can open the Movie Properties window to modify the size frames per second fps and background color of the stage by choosing Modify gt Movie Stage at BDA ETT File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL Toolbar Tode kok The toolbar contains tools for creating and changing2. e LE EE shake 3 Select frame 20 in the timeline 4 Select Insert gt Keyframe Notice that the visual cue here is that the timeline turns green and there is an arrow with a solid black line 10 15 File name Flash5_I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART I USER MANUAL ANIMATION BASICS PRACTICE REVIEW eB Remember the conditions for a Shape tween Steps File name Flash5 I User pmd Last modified 04 30 02 4 4 beginning and ending keyframes must be a shape Hint grouped objects have to be ungrouped and text and symbols must be broken apart Make a new layer and label it review Draw your object Create shape tween with shape selected locate the Frames panel choose Tweening gt Shape Hint if Frames panel cannot be seen choose Modify gt Frame Insert 2nd keyframe click in frame20 choose Insert gt Keyframe Deselect shape by click anywhere other than the shape Alter shape click and drag at one of it s sides with 2nd keyframe still selected delete shape and replace with new shape Save and test movie Copyright Arizona Board of Regents 2002 University of Arizona FLASH 5 PART USER MANUAL MORE WITH SHAPE TWEENS Text and imported graphics can be made into shapes by breaking them apart This will create one extra step when doing a shape tween Steps 1 Adda new laye
3. Multimedia Module FLASH 5 PART I USER MANUAL Flash5_l User pmd Last modified 04 30 02 FLASH 5 PART USER MANUAL File name Flash5 I User pmd Last modified 04 30 02 TABLE OF CONTENTS A Better VANG Ab Jr skil a 3 The Authoring Environment EEE EE EE 3 Creating Animation Keyframes and Motion Tweening occccoccnncnccnncccnncnonncnncnnnnnnnnnnnncnnnnnnnannnnos 5 Animation Basics Practice Review 1 rrrnnrnnnnernnnnnnnernnnnnnnennnnnnnnennnnnnnnernnnnnnnennnvnnnnsnnnsnnnnennunennee T EEN E e E E A E ENE A Es T Shape TWEN soriana a EA E ie oy EA EATER E ME EEES 8 Animation Basics Practice Review 2 ccccccecccsscccseeseeeecseeceecceseecaseceseesesenseessesecseesseesseeenaass 9 More With NE 10 MEIN e E conde E E E E E E E A E RE 10 Pave 10 OS EE EE Or 11 AE PE EE MN 11 Beyond Animation Practice Review 3 rrrrrernnrennnevnnnvvnnvrnnrvnnnernnnnnnnennnennnnennnrnnnnnnnnssnnnnnnnennnnennn 12 Buttons The Hit State EEE EE EE 13 Beyond Animation Practice Review 4 rrrnrnnnnrnnnnrvnnnrnnrnnnerrnnrennnrnnnrennnennnnennernnnsennsnnnnsennennsnennn 14 Adding Sound A o UU 14 Beyond Animation Practice Review 5 rrrrrernnrennnevnnnvvnnvrnnrvnnnernnnnnnnennnennnnennnrnnnnnnnnssnnnnnnnennnnennn 14 o PE Po EE UE e 15 ACUM A A N 15 Beyond Animation Practice Review 0 scr ticas 15 EEE EEE EE NE ET E E 16 Copyright Arizona Board of Regents 2002 University of Arizona FLASH 5 PART USER MANUAL
4. 6 Preview in Test Mode by selecting Control gt Test Movie Hint Flash exports the fla as a swf file and opens it in a new window LAYERS When you create a new Flash movie it contains one layer by default You can add more layers to organize the artwork Layers do not add to your file size and it is recommended that you put all objects as well as sounds on separate layers It is extremely important to label your layers Steps 1 Double click on the words Layer 1 2 Type the word motion to name this layer 3 Click on the Eye icon to hide this layer Note Clicking on the Eye icon hides all layers that you have If you had multiple layers and only wanted to hide one of them click on the bullet of that layer that is in the Eye icon column 4 Select Insert gt Layer to add a new layer You may more quickly add a new layer by clicking on the New Layer button 5 Name the new layer shape File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL SHAPE TWEENING Remember that the two conditions for a motion tween are a beginning and ending keyframe and a group or symbol The two conditions for a shape tween are a beginning and ending keyframe and a shape Steps 1 Make object is selected 2 Locate the Frames Panel Window gt Panels gt Frame and choose Tweening gt Shape Tweening None Motion
5. Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL SCENES Scenes are one way to organize your movie You can add delete duplicate rename and change the order of scenes You can quickly jump from scene to scene using the Edit Scene icon above the timeline es lm ACTION SCRIPT Flash has a scripting language called ActionScript Its used to add sophisticated interactivity Actions can be added to a frame button or movie clip BEYOND ANIMATION PRACTICE REVIEW 6 Steps le Add a new scene Insert gt Scene 2 Place shape button instance on the stage in scene 2 3 In Actions Window click and hold on the sign to reveal the drop down menu 4 Choose Basic Actions gt Go To D Choose Scene 1 Frame 1 6 In Scene 2 create a New layer and name it stop action T Select frame 1 in stop action layer 8 In Frame Actions window click and hold on sign 9 Choose Basic Actions gt Stop 10 Navigate to Scene 1 11 Select text button instance on stage 12 In Object Actions window click and hold on sign 13 Choose Basic Actions gt Go To 14 Choose Scene 2 Frame 1 15 Add Stop Action to Scene 1 16 Test Movie File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL CRITERION TEST 20 min This is the criterion test for the Flash 5 Part module
6. It is going to test your comprehension of the workshop you just participated in or allow you to test out of the Flash 5 Part module Open a new document and save to the desktop as YourName fla Create a circle that moves from the left side of the stage to the right side On a second layer create a shape tween of a box that turns into a circle On a third layer create a button of out of your name make it red and put a sound on the over state don t forget to create the hit state Publish for the web File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona
7. Palette s in PhotoShop A You can open all panels by selecting Window gt Panel all ml a sets gt Default Layout sy a From The authoring environment or source file is known as a fla file The published movie is known as a swf file When saving a new file Mac users must include the fla extension in the name CREATING ANIMATION KEYFRAMES AND MOTION TWEENING Using a tween is a simple way to achieve animation The two kinds of tweens in Flash are Motion tweens and shape tweens For a Motion tween there are two conditions that need to be met a beginning and ending keyframe your object must be a group or symbol 5 That s a Keyframe A keyframe is a frame that signifies a beginning or an ending File name Flash5_I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART I USER MANUAL Anything you draw with flash except text Visual cue appearance of small white dots when selected Any shape that has been grouped or any imported graphic Visual cue surrounded by blue bounding box when selected Any object can be converted into a symbol All symbols are stored in the Library Visual cue surrounded by a blue bounding box with a crosshair in the center Creating a Motion Tween Steps 1 Draw a circle and make sure it is selected 2 Select Insert gt Create Motion Tween It is now a symbol Flash has changed the shape into a symbol Re
8. a hit state to the button by 13 Get into Symbol Editing Mode CE 14 Add a keyframe in hit state 15 With the hit state frame selected use the rectangle tool to create a shape that covers the entire text area 16 Test the button File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART I USER MANUAL BEYOND ANIMATION PRACTICE REVIEW 4 Steps 10 Add a new layer and label it text Type the word Text on the new layer Convert the text to a symbol Insert gt Convert to Symbol Choose Button behavior and name the button text button Click OK Double click button icon in Library to go to Symbol Editing Mode Add keyframe in over down and hit states Change appearance in over and down states color size Use rectangle tool to create a shape that covers the entire text area This creates the Hit State Test the button ADDING SOUND TO A BUTTON Sound can be added to the over or down state of a button Keep in mind that sound must be in its final form before importing it into Flash BEYOND ANIMATION PRACTICE REVIEW 5 Steps al Double click instance of shape button on Stage to open into Symbol Editing Mode 2 Select Over State 3 Locate a sound file from the common Library sound and drag it onto the stage 4 Test button File name Flash5 I User pmd Copyright Arizona Board of Regents 2002
9. artwork The Line LP Rectangle and Oval tools function as you would expect from using other graphic programs Al Steps Fal 1 Using the oval tool create a circle i eo 2 Click once using selection tool E 3 Click once on shape to select the fill 4 Drag fill to the side to show that stroke has been left behind 5 To select both stroke and fill double click or drag the selection tool around object Different tools have different modifiers Note they are called modifiers in all lessons but on the toolbar they are labeled as Options Timeline The left side of the timeline contains Layers used to organize movie content Like the layers in PhotoShop they can be locked or hidden The right side contains Frames and the play back head in the same way that you may have seen in other animation applications DE eru ee ae 13 File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL Library The Library is used to store and organize reusable elements called symbols Types of symbols include graphics buttons and movie clips The Library is where all imported graphics and sound files are stored The Flash Library window is similar to Director s Cast window You open the Library by choosing Window gt Library Panels Panels make it easier to access options for modifying elements Similar to the
10. h are Buttons used to control interactivity and navigation Movie Clips used for complex animations 9 Graphics when you import graphics flash turns them into symbols Common Libraries Notice the difference of the screen as we are in symbol editing mode as opposed to the main timeline of a scene You can get back to the main timeline by choosing Edit gt Edit Movie or you could simply click on the Scene 1 icon as we only have one scene anyway gt fy Seems I En Gutten E LAEN 7 z ha ar WES D bayer 8 2 ane D baya ME o Haaa de Over Down Hit CREATING A BUTTON When you select the button behavior for a symbol Flash creates a Timeline with four frames These refer to the corresponding state of the user s mouse Steps 1 Choosing Insert gt New Symbol a_i 2 Choose Button behavior Ey fans Go Par Button 3 Name it Shape button and click OK Pine Feauni i D bowen I ye tele gt 4 Draw a button D Layn mll O Add keyframes to over and down states Ez alu ao el elf File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART I USER MANUAL Change appearance in over and down states color size To change the size of the button choose Modify gt Transform gt Scale and Rotate and type in 80 Navigate back to the main timeline by choosing Edit gt Edit Movie or clicking on
11. member the two conditions for a Motion Tween are beginning and ending keyframes and a group or a symbol Creating an Ending Keyframe Steps 1 Select frame 20 2 Select Insert gt Keyframe from top menu 3 Click on the second keyframe 10 15 4 Move the circle with the move tool 5 Hit return to show the animation Preview in Test Mode Steps 1 Select Control gt Test Movie File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL ANIMATION BASICS PRACTICE REVIEW 1 Steps 1 Open new document and save to desktop as review fla 2 Draw your object 3 Create Motion Tween Using Arrow tool select object choose Insert gt Create Motion Tween Hint Flash turns your shape into a symbol 4 Insert you second keyframe in frame 20 Hint Your first keyframe is automati cally put in for you by default e click on frame 20 choose Insert gt Keyframe e with second keyframe still selected move object to different place on stage Hint you should see an arrow with a solid line in blue shaded area on time line If line is broken you may have completed steps in the wrong order If you add the second keyframe before adding the motion tween your object will still be a shape Remember that motion tweens can only be done on a Group or Symbol 5 Alter position of object in 2nd keyframe Drag object to different place on stage
12. r 2 Name it text 3 Type the letter A 4 Select it Note after typing the A you may need to enlarge it Do by using the Character Panel 5 Choose Modify gt Break Apart Notice the little white dots in the A after we break it apart 6 Choose Shape tweening in the Frames Panel 7 Insert 2nd keyframe 8 Replace the letter A with the letter Z in the second keyframe 9 Break the Z apart Modify gt Break Apart 10 Save and Test the movie Tip Use the Info Panel to get the X and Y coordinates if they want the letters to be in the same location IMPORTING Steps 1 Choose File gt Import 2 Locate the file and Open Note On a MAC there are two extra steps after the import window opens you have to click add then click import On the PC once you have chosen File gt Import you image will appear on the stage All imported files also go to the Library where they are stored as reusable elements called symbols PUBLISHING The Published file goes into same folder or area as the saved file Because of this it is important to know where your saved file is Steps 1 Choose File gt Publish Settings to find the publish settings File name Flash5 I User pmd Copyright Arizona Board of Regents 2002 Last modified 04 30 02 University of Arizona FLASH 5 PART USER MANUAL SYMBOLS A symbol is a reusable image animation or button all stored in the Library The 3 kinds of symbols in Flas
13. the Scene 1 icon BEYOND ANIMATION PRACTICE REVIEW 3 Steps File name Flash5 I User pmd Last modified 04 30 02 Create a new movie and save it as buttons fla to the desktop Create a button Symbol choose Insert gt New Symbol choose button behavior name your button shape button click OK gt gt o Draw a button Add keyframes to over and down states Change appearance in over and or down state color size Place Instance of Button on Stage Hint to get back to the main timeline choose Edit gt Edit Movie select button in library drag button to Stage Test button by choosing Control gt Test Movie Copyright Arizona Board of Regents 2002 University of Arizona FLASH 5 PART USER MANUAL BUTTONS THE HIT STATE Steps 1 Make sure the first layer is labeled shape 2 Add a new layer and label it text 3 Type the word Text on the new layer Now we will convert this text into a button 4 Select text and choose Insert gt Convert to Symbol 9 Choose button behavior 6 Name button text button T Click OK We must now get into symbol editing mode ourselves by 8 Locate button in Library 9 Double click on button icon not name to open into Symbol editing mode 10 Add keyframes to over and down states 11 Change appearance of button in over and down states color size 12 Select Edit gt Edit Movie to get back to the main timeline Let s now add
Download Pdf Manuals
Related Search