HO-FL1: INTRODUCTION TO FLASH Introduction Flash is software authoring package for creating scalable, interactive animations (or movies) for inclusion in web pages. It can be used to create animated graphics, page banners and logos, web-site navigation bars and even entire web-sites. Flash movies are compact, vector based graphics, so they download rapidly and scale to the viewer's screen size. Flash contains a variety of media to help you learn the program and become proficient at creating your own Flash movies. This includes on-line help that appears in your web browser, interactive lessons, a tutorial, a printed manual (which you can download in pdf format) and a regularly updated web-site. There are also a multitude of web-sites providing useful tips, hints, tutorials and examples of Flash Movies. This aim of this Hands-On exercise is to introduce you to the main features of Flash, its menu commands, panels (also a feature of Fireworks), the stage, timelines and the Library. The Flash Screen and Tools Panels 1. Click on Start All Programmes Adobe Web Standard CS4 and open Flash. 2. When Flash opens you see the opening screen. This provides 3 options for you to chose from: (i) Open a Recent Item, (ii) Create New file, etc and (ii) Create a new file from a Template (Note: the opening screen should be similar to that shown below): 3. Select Create Flash File (ActionScript 2.0) to create a new file. (Note: in this module when we come to use ActionScript, we will focus on AS 2.0 as this is simpler for beginners to use and understand. The follow-on module, Building Web Applications using Flash and ActionScript, will introduce and use ActionScript 3.0). 4. Whenever a new document opens in Flash a number of panels and toolbars are displayed (most are similar to those in Fireworks). These include: the MENU bar: along the top of the screen contains groupings of key menu commands. the TOOLS panel: on the left hand side of the screen contains tools for creating and editing objects on the stage. the STAGE: the white area at the centre of the screen, which is where you do all the work: create graphics, add images, sound, text and navigation buttons. All objects placed on the stage visible to the user. mmfl-0010.doc Page 1 of 9
the TIMELINE: just below the main menu, which is what you use to control your Flash movies/animations (i.e. how your graphics change over time). Can contain different LAYERS of animation made up of a series of FRAMES. several multi-tab PANELS: which can be organised on the right hand side of the screen or made to 'float'. the PROPERTIES PANEL: can be positioned anywhere on screen, e.g. along the side or the bottom, enables you to adjust the properties of objects on the stage. 5. When you open Flash it creates a blank STAGE (the Flash work area), which is where you will do all your work, adding text and graphics, editing your images and movies. 6. The stage initially contains one scene (Scene 1) comprising a single layer (Layer 1). Sometimes you will create an animation that begins off stage. The OFF-STAGE area is the gray area around the white area of the stage. 7. Select File Save and save your file as mmflho1.fla in your ho folder (I:\myfiles\mm\mmhofl1\). Don't forget to save your files regularly during the exercises! Note: the default format that Flash uses to save files is.fla. But when you want to save/publish your work for use on the web you need to export it in the Flash Movie/Shockwave (.swf) format. You should never publish your original fla files on the web. 8. The TOOLS PANEL, shown down the left-hand side of the above diagram, contains a number of tools which you will explore in the following ho exercises (these are very similar to those available in Fireworks). If the Tools panel is not visible, select Window Tools (Ctrl+F2) and position in your preferred location. 9. Select the RECTANGLE TOOL and draw out a small rectangle in the top left-hand corner of the stage. Note: To create a square, hold the shift key down as you drag out the rectangle tool. 10. Select the SELECTION TOOL (the solid arrow in the top left hand corner of the Tools panel) and select the rectangle you have just created by dragging the arrow tool out around it. In the Properties panel, use the Fill and Stroke buttons to change the border and fill colour of your rectangle. mmfl-0010.doc Page 2 of 9
11. As in Fireworks, the Properties Panel also displays other properties of the active object, e.g. its position on the stage (X,Y coordinates, where the top left hand corner of the stage is X = 0 and Y =0) and its size (W = width and H = height, in pixels). Just as you did with Fireworks you should always use Properties Panel (in this case the Position and Size) to accurately size and position objects on the Stage: 12. All objects that you draw or place on the canvas can be edited. To edit an object you first need to select it with the SELECTION TOOL. 13. As you may already have discovered, selecting an object in Flash is different than in Fireworks. When an object is selected for editing you will see a dashed border or fill (not blue handles at the edges of the object as in Fireworks), depending on how you click on the object, for example: 14. Flash also contains different tools, which you can use to adjust the shape of your object, depending on where you position the SELECTION TOOL. Select the Selection Tool and move it over different areas of the rectangle. You should notice that the cursor changes shape? For example, if you select the edge or corner of the rectangle you can drag out the mouse pointer to adjust the object s shape: Displaying and Using Panels Just as in Fireworks, Flash contains a series of Panels, which are controls that you use to edit and optimise different aspects of your graphics. For example: the INFO, TRANSFORM and COLOR panels control a range of the object s properties. the ACTIONS panel is used for adding ActionScript commands to control the behaviour of your movies, or objects that make up the movie, such as buttons and images, allow for user interactivity, e.g. the actions that take place when the user moves their mouse over a button or other object in your movie. the LIBRARY panel contains graphics, buttons, movies, symbols, etc that you have previously created. If a particular panel is not displayed you can activate it by selecting Window on the Main Menu. A tick to the left of the panel name means that the panel is already displayed. mmfl-0010.doc Page 3 of 9
Library Objects, Symbols and Instances As in other Adobe packages, such as Dreamweaver and Fireworks, the Library is where you store objects that you have created. This is particularly useful if you want to reuse the same object elsewhere in your movie. As with Fireworks, to add an object to the Library you must first convert it to a SYMBOL. As you will soon discover all symbols used in a flash movie are stored in the Library. There are three types of symbols: GRAPHICS, BUTTONS and MOVIECLIPS, which can be reused throughout your movie or imported and used in other movies. A copy of a symbol used in the movie is called an Instance. Note: (i) all instances have the same properties (colour, size, etc.) as the original symbol, (ii) to create similar symbols with different properties it is necessary to DUPLICATE the object in the Library. 1. Select your rectangle so that it is the active object (remember this is indicated by the dashed fill and border). You select an object either by double clicking on the object or by dragging the Selection Tool arrow around it. 2. Select Modify Convert to Symbol on the Main Menu (or press F8) and create a graphic symbol called myrectangle1: 3. You should note three things: (i) Your Library now contains an item called myrectangle1, (ii) the instance of myrectangle1 on the canvas is indicated by a light blue border with a circle at its centre, (iii) the Properties Panel indicates that the object is a Graphic symbol. 4. The advantage of the library is that it enables you to create a reusable library of objects that you can use in your movies. The Timeline The timeline - which is where you create sequences of images that will make up your animation - is at the heart of Flash movies and usually comprises a number of layers which contain the different components that make up your movie: Animation is created by changing the appearance of an object or graphic along the timeline (or by using the Motion Editor, which is a new feature in Flash CS4). Don't worry if all this seems a little confusing at first, it will become much clearer and easier to understand as you use the timeline and motion editor to create your own animations and movies. Note: To find out more about the timeline and how it used, select F1 (Flash Help) and so a search using the keywords: 'Timeline' and 'Frames'. Creating a Simple Flash Movie You are going to create a simple movie, in which a rectangle changes colour: 1. Click on the Insert New Layer button on the timeline and insert a new layer. mmfl-0010.doc Page 4 of 9
2. Click on the layer names in turn and rename layer 1 = myrectangle1 and layer 2 = movie1: 3. Delete any symbols that you may already have placed on the movie1 or myrectangle1 layers. 4. Select Frame 1 in your myrectangle1 layer and drag a copy of the myrectangle1 symbol from the Library onto the stage. Use the Properties Panel to accurately position the instance of myrectangle1 on the stage, setting its position to x=30, y=20 (pixels): 5. Right click on the myrectangle1 symbol in the Library and select Duplicate from the pop-up menu that appears. Name the new symbol myrectangle2. 6. Double click on the myrectangle2 symbol in the Library. This should open the myrectangle2 symbol in the editing window. Use the Properties Panel to change the fill and border colours. 7. Close the myrectangle2 window by clicking on Scene1 (top left hand corner of the mmhofl1.fla tab). 8. Click in frame 1 of the movie1 layer to make it the active frame: 9. Drag a copy of myrectangle2 onto frame1 of the movie1 layer. Use the Properties Panel to position this next to the instance of myrectangle1 in frame 1 of the myrectangle1 layer. Set the properties so that both rectangles are 30 pixels from the top border (the y-location). 10. Your stage should now contain 2 rectangles: (i) an instance of myrectangle1 (pink) on frame 1 of the myrectangle1 layer and (ii) an instance of myrectangle2 (green in this example) on frame 1 on the movie1 layer. Your stage should now look similar to that shown below: mmfl-0010.doc Page 5 of 9
11. Right click on frame 20 in the movie1 layer and select Insert Blank Keyframe: Note: (i) Keyframes mark the start and end points of a transition in Flash. You can find more information about Keyframes on: http://en.wikipedia.org/wiki/key_frame. (ii) when you insert a keyframe, flash copies up the contents that were on the previous keyframe, (iii) when you insert a blank key frame, flash insert an empty keyframe to which you can add new objects/content. 12. Drag a copy of myrectangle1 from the Library into frame 20 of the movie1 layer: 13. Note: when you first drag myrectangle1 onto the stage ONLY the object in Frame 20 of the timeline are visible. To "see" the positions of objects on other frames and layers you need to activate ONION SKINNIG. 14. To do this (i) click on the Modify Onion Markers button (1) and select 'Always Show Markers', (ii) Click on the 'Edit Multiple Frames' button (2), which should reveal the mmfl-0010.doc Page 6 of 9
objects on the different layers? If not (iii) drag out the Onion Skin Markers so that Onion Skinning starts at frame 1 and ends at frame 20 (3): 15. Onion skinning can help you position the instance of myrectangle1 in frame 20 of the movie1 layer in exactly the same position as myrectangle2 on frame1 of the movie1 layer. Alternatively (as you should already know!) you can use the Properties Panel to position the instance of myrectangle1 in frame 20 of the movie1 layer in exactly the same position as the instance of myrectangle2 in frame 1. 16. Select frame 1 of the movie1 layer, then right click on the myrectangle2 object and select BREAK APART from the dropdown menu. 17. Select frame 20 of the movie1 layer and repeat this process to break apart the myrectangle1 symbol 18. Next Right Click anywhere between frame 1 and 20 in the timeline of the movie1 layer and CREATE SHAPE TWEEN from the dropdown menu: 19. Press Ctrl+Enter (or select Control Publish Preview Flash on the Main Menu) to see your 1st movie in action. Note what happens? 20. You should see that the rectangle on the right undergoes a smooth transition in colour from green to pink. Note: the solid arrow between frames 1 and 20 on the movie1 layer - this indicates that you have successfully created a TWEEN effect: 21. Take another look at your movie! What else do you observe? You should see that the pink rectangle on the left simply disappears. Think about why this is happening? Hint: Look at the difference in the number of frames in each layer on the Timeline! i.e. the pink rectangle is only visible in fame 1 of the myrectangle1 layer. 22. What you need to do is make the pink rectangle on the myrectangle1 layer visible across all frames 1-20. To do this, right click in frame 20 on the myrectangle1 layer and select Insert Keyframe: mmfl-0010.doc Page 7 of 9
23. Select Ctrl+Enter to test your movie. Make a note what happens. How is this related to the changes in the timeline? Do you understand what happened when you inserted a Keyframe at frame 20 of the myrectangle1 layer? Also note how this differs from what happened when you inserted a blank Keyframe. 24. Next insert a new layer and rename it: 'title'. Select frame1 of the title layer and insert some descriptive text, e.g. 'My first Flash movie': 25. Select Ctrl+Enter to test your movie. 26. Finally select Modify Document on the Main Menu and adjust the dimensions of the movie so that the stage is just slightly larger than the contents: 27. Save your movie. Then select File Publish Preview HTML to see the finished movie (which should open in a new browser window). 28. Note: when you save a movie Flash saves the file using its default.fla file format. Whenever you open.fla files in Flash you are able to edit the contents of the movie. In contrast, the streamlined movies that you load into web pages are in the Flash movie/shockwave format (.swf), pronounced 'swiff'. These files are compressed for mmfl-0010.doc Page 8 of 9
ease of download on the web and are non-editable, so once created they are fixed (the analogy is the same as between png files and jpeg/gif files in Fireworks): You should always save working Flash files in the.fla format (these fla files should NOT be published on your live website). You should export Flash files you intend to publish on the web in.swf format. 29. In order to create a.swf file for use in your webpages, you need to select File Publish on the main menu. This automatically creates two files: mmhofl1.html and mmhofl1.swf 30. Open Dreamweaver and create a new document called mmhofl1dw.html. Add a title, header and some explanatory text. Then select Insert Media Flash and add the mmflho1.swf file to your web page: 31. Resave the file and Preview in your web browser. Additional Exercises Now work through the following Abode TV exercises, which provide more background about the concepts/issues covered above: 32. Adobe TV: 01 Understanding Flash: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-01-understanding-flash/ 33. Adobe TV: 02 Understanding Flash File Types: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-02-understanding-flash-file-types/ 34. Adobe TV: 03 Exploring the Flash Interface: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-03-exploring-the-flash-interface/ 35. Adobe TV: 04 Setting up Workspaces: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-04-setting-up-workspaces/ 36. Adobe TV: 05 Using the Drawing Tools: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-05-using-the-drawing-tools/ 37. Adobe TV: 06 Object Merge and Drawing: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-06-object-and-merge-drawing/ 38. Adobe TV: 07 Understanding Symbols: http://tv.adobe.com/watch/learn-flashprofessional-cs4/getting-started-07-understanding-symbols/ ADDITIONAL READING AND RESOURCES Adobe Flash CS4: http://help.adobe.com/en_us/flash/10.0_welcome/ Adobe Flash CS4 User Guide: http://help.adobe.com/en_us/flash/10.0_usingflash/index.html Flash CS4 Documentation and Resources: http://www.adobe.com/support/flash/ Adobe TV Flash CS4: http://www.adobe.com/designcenter/video_workshop/ FlashKit - A resource for Flash Developers: http://www.flashkit.com/tutorials/ Adobe Flash Tutorials: http://www.layersmagazine.com/category/tutorials/flash Flash CS4 Tutorials: http://bestwebdesignz.com/tips/flash-cs4-tutorial/flash-cs4-tutorial/ Flash Tutorials: http://www.smartwebby.com/flash/default.asp W3Schools - Flash Tutorials: http://www.w3schools.com/flash/ RNIB - Design and build accessible websites: http://www.rnib.org.uk/professionals/webaccessibility/designbuild/pages/design_build.aspx Keyframes: http://en.wikipedia.org/wiki/key_frame mmfl-0010.doc Page 9 of 9