© W. Janczak for “Design & Information Architecture” Flash 5 Tutorial 1 The following instructions will be used during the studio tutorial. Authoring environment Open Flash: the application opens the window “Untitled 1” displaying the Toolbar, the Timeline with a “Layer 1”, the Stage and the Controller. Panels are accessible from Window>Panels and/or from the Launch bar. The default frame rate is 12 fps, the dimensions of the Stage are 550 x 400 pixels and the colour of the Stage (Background) is white. If you want to change these properties choose Modify>Movie and in the “Movie Properties” window enter new data. Drawing and Painting (see Help>Lessons) Symbols A Symbol is a reusable graphic image (Graphic), button (Button) or animation (Movie Clip) stored in the movie’s Library (Window>Library). An Instance is an occurrence of a Symbol on the Stage. Use Symbols to reduce the file size and speed the movie playback. 1 Creating Symbols. 2 Editing Symbols. 3 Editing Instances. 1 Creating Symbols. 1.1 Choose Insert>New Symbol, in the “Symbol Properties” window type the name, select the Behavior and click OK. 1.2 Flash switches to the symbol-editing mode; create the content: -use the drawind tools to create a symbol or import media The Symbol is stored in the Library. 1.3 Choose Edit>Edit Movie and in the movie-editing mode drag the image from the library to the Stage. or Create an image on the Stage, select it and choose Insert>Convert to Symbol. In the “Symbol Properties” window type the name, select the Behavior and click OK. The image on the Stage becomes an Instance of the Symbol and the Symbol of the image is stored in the Library. If you want to use the content created in Photoshop (.jpg or .pic formats) choose File>Import, find the image, import it and convert it to a Symbol. You can also import files created in Illustrator (.ai or .jpg formats). Bitmap files should be saved in a 72 pixels/inch resolution (File>Save for Web) to minimize the size of swf files. 2 Editing Symbols. When you edit a Symbol, the changes affect all Instances. 2.1 Select a Symbol on the Stage and choose Edit>Edit Symbols: the movie-editing mode changes to the symbol-editing mode. 2.2 Edit the Symbol and return to the movie-editing mode: Edit>Edit Movie. 3 Editing Instances. Changing an Instance does not affect other Instances or the original Symbol. 3.1 Change the scale and proportions: select the Instance on the Stage and use the scale modifier. 3.2 Rotate: use the rotation modifier. or Choose Window>Panels>Transform and in the window modify Scale and Rotate. 3.3 Change colour properties: select the Instance on the Stage, choose Window>Panels>Effects and modify Brightness, Tint, Alpha or Advanced. 3.4 Choose Modify>Transform and select an option. Buttons A Button is an interactive type of a Symbol with a special Timeline. It has four states related to the mouse events (i.e. press, release, roll over): Up, Over, Down and Hit. 1 Creating the Up state for the Button. 2 Creating Over, Down and Hit states. 3 Attaching Actions 1 Creating the Up state for the Button. 1.1 Choose Insert>New Symbol. 1.2 In the “Symbol Properties” window enter a name and choose Behavior: Button. Flash switches from the movie-editing mode to the symbol-editing mode. 1.3 Check if the Up frame is selected and create an image for the Up state of the button. 2 Creating Over, Down and Hit states. 2.1 Select Over, the second frame, choose Insert>Keyframe and modify the image by changing colour or shape or both or by creating a new image. If you create text or other images on the stage, they will appear on the mouseover state in the movie. 2.2 Select Down, the third frame, choose Insert>Keyframe and modify the image. 2.3 The Hit state defines the active area of the button. It is invisible and usually does not have to be created. 2.4 Choose Edit>Edit Movie to switch to the movie-editing mode. 2.5 Drag the button symbol from the Library to the Stage and check the interactivity of the button: choose Control>Test Movie and test the button. To check more complex interactivity, choose Control>Test Movie. 3 Attaching a simple Action 3.1 Disable the button before modifying it: choose Control and deselect Enable Simple Buttons. 3.2 Select the button on the Stage, choose Window>Actions. 3.3 Click the + sign and choose Get URL. Specify the URL and a name of the window or frame. Help 1 www.macromedia.com/software/flash 2 Help menu: 2.1 Flash Help Topics 2.2 Flash Developers Center www.macromedia.com/support/flash 2.3 Lessons 2.4 Samples 3 Libraries menu