Getting started with Flash

Getting Started with Flash 2 Contents About Flash ............................................................................................................................................................. 4 About this workbook ............................................................................................................................................. 5 The workspace ........................................................................................................................................................ 6 Getting Started with Flash ..................................................................................................................................... 7 Symbols .................................................................................................................................................................... 8 Create a button symbol .......................................................................................................................... 8 Define the button’s states ...................................................................................................................... 8 Scenes ..................................................................................................................................................................... 11 Create a scene ........................................................................................................................................ 11 Animations............................................................................................................................................................. 13 Create a motion-tweened animation .................................................................................................. 13 Layers...................................................................................................................................................................... 15 Add a layer ............................................................................................................................................. 15 Name layers ........................................................................................................................................... 15 Adding interactivity .............................................................................................................................................. 17 Add Action Script on a button ........................................................................................................... 18 Add Action Script on the timeline ..................................................................................................... 19 Publishing a movie................................................................................................................................................ 23 About Flash Macromedia Flash is an advanced authoring software package for creating interactive content. With Flash you can design and author interactive websites, animations etc. with rich media such as video, graphics, sound. Flash animations can be truly engaging offering a unique experience. You can use Flash to:  Create animations or simulations;  Create interactive websites;  Create interactive quizzes;  Engaging activities such as drag and drop exercises;  Export your Flash files to a .swf file which can be viewed in a web browser. To view Flash content you need to have the Macromedia Flash Player installed on your computer. You can download the Macromedia Flash Player for free from Macromedia’s Download page at: http://www.macromedia.com/downloads/ 4 About this workbook This is workbook has been created to accompany the training course Getting Started with Flash. It is a reference guide introducing you to the basics of Flash. When you complete the task of the exercise in the workbook you will be able to:         View a Flash movie and modify it; Create button symbols; Work with scenes; Add text and graphics; Create (motion-tweened) animations; Create layers to organise content; Add interactivity to a movie by: o Adding Actions to a button; o Adding Actions to the timeline. Publish a Flash movie. 5 The workspace When you start Macromedia Flash Basic 8 you will see a window similar to the one below. 1. At the top of the window you will see the Menu bar (File - Edit - View - Insert - Modify - Test Commands - Control - Window and Help). Underneath the menu bar you can see: 2. The toolbar; 3. The timeline; 4. The stage; 5. The panels. Toolbar Menu bar Panels The timeline The stage The Properties panel 6 Getting Started with Flash Go to C:\ Flash\Trainees Files and open the movie main_movie.fla. A screen similar to the one below appears: Spend some time to experiment with the workspace. - Can you see the four layers on the timeline? Have a look at the library panel on the right of the screen. - Can you see the symbols on the library? Click on each name to preview them. You can also check the properties of the movie. Select Modify>Document to check the dimensions and other properties of the document. If you are ready move to the next section to start the exercise. 7 Symbols You can draw shapes, objects etc on the stage. To organise these elements you convert them to symbols. There are three types of symbols you can create in Flash: 1. Movie clips 2. Buttons 3. Graphics. Whenever you create a symbol it is automatically added on the library. Once a symbol is created, you can drag and drop onto the stage as many instances of it as you want. Create a button symbol 1. On the timeline click on the layer ‘wales’ to select the content of this layer. You will notice that the ‘Wales area of the map’ has been highlighted on the stage. 2. Select Modify>Convert to symbol. On the pop-up that appears: a. Type button_wales in the name field; b. Select button for type; c. Click OK. 3. You will notice that the button has been added to the library. Note: Now that you have created the button_wales you can drag onto the stage as many button_wales instances as you want. You can name each instance on the properties panel. Naming the instances is very important when you are using Action Script to add interactivity. Define the button’s states A button symbol has 4 frames (states) you can define. Up, Over, Down & Hit.  The Up state is the way the button appears when there is no mouse interaction (the way it appears on the stage).  The Over state is the way the button appears when the mouse is over the button.  The Down state is the way the button appears when the mouse is clicked (down) by the user.  The Hit state is invisible to the user. However, it is very important as it defines the area that the user can click on for interaction. 1. If not already selected, select the button_wales you have just created on the stage. You will notice a light blue border around the button. 8 2. Double-click on the button. You will notice that the timeline changes to the button’s timeline. Note: You can always return to the main timeline by clicking on the Scene 1 hyperlink on the top of the timeline window. 3. To define the Over state of the button right-click on the Over frame. This is the grey cell underneath ‘Over’. On the drop-down menu that appears choose Insert keyframe. 4. You will notice that both the border and the fill are selected on the stage. Use the Selection tool (this is the black arrow tool on the toolbar) to ONLY select the green area (fill) of Wales on the stage. Note: You may need to click on the white area to deselect any selection first. The selection will appear dotted as shown below: 9 5. Click on the Fill Color on the toolbar to choose a light green colour for the Over state. 6. Follow the above steps (3-5) to define the Down state of the button. For the Down state choose a light orange for the fill. 7. As the Hit state is not visible you only need to create the keyframe (step 3 above) 8. Return to Scene 1 by clicking Scene 1 on the top of the timeline window. 9. Save the movie. 10. Select Control> Test Movie to test your movie. Test the button Wales. It should change its colour to light green when you place the mouse over it and it should change its colour to light orange when you click on it. You will add interaction to the button later on. 10 Scenes In Flash you can have multiple scenes. Each scene has its own timeline. You can create and add content on different scenes and use Action Script to link them. An easy way to think of scenes is if you imagine them as different movies. However, instead of saving them individually you save them ALL in one file. In the following tasks you will create a new scene and then add to the new scene: 1. An animation of Wales; 2. Information about Wales (flag, capital city); 3. A back to the map text button to add interactivity; 4. Interactivity using Action Script. The result will be: When the users click on the Wales area on the map scene they will be presented with the new scene, similar to the one below: The back to the map text button will allow the users to click on it and return to the map scene to choose a different country. Create a scene If you do not have the scene panel open select Window>Other Panels>Scene to open it. You will notice that the panel contains only one scene (Scene 1) on the list. This is the scene with the map. 1. Double-click on Scene 1 to edit the name of the current scene. Change it to map. 2. Click on the add scene button (this is the + symbol on the bottom of the panel) to add a new scene. Name this new scene wales. You can jump from scene to scene by selecting them on the scene panel. Your scene panel should be similar to the one below: 11 3. Select the wales scene. You will notice that the stage of this scene is completely empty as well as the timeline. 4. From the library panel drag the graphic_wales graphic symbol onto the stage. Use the properties panel to position the graphic using the following setting: a. X: 112.8 b. Y: 280.1 Note: These are the same X & Y coordinates as the button_wales on the map scene. 12 Animations The types of animation you can create in Flash are the following: 1. Frame-by-frame animations, 2. Shape-tweened animations and 3. Motion-tweened animations. Note: Motion-tweened animations can be used to tween symbols, groups and text blocks. You can also change the rotation, scaling and colours of the objects you tween. Create a motion-tweened animation In this step you will create a motion-tweened animation on the graphic_wales symbol. Make sure you are on wales scene. 1. Select the frame 20 on the timeline (this is the grey cell under the number 20) as shown below. 2. Right-click on this frame. From the drop-down menu choose Insert keyframe (or choose Insert>Timeline>Keyframe). The timeline should look similar to the following: 3. Click anywhere between the frame 1 and frame 20 (above I have clicked on the frame 10). 4. On the Properties panel select Motion Tween on the pull-down menu. 13 5. The timeline should change to light blue with a black arrow between the two keyframes (frame 1 & frame 20) Note: If a motion-tween is NOT successful it will be displayed with a black dotted line between the two keyframes on a light blue background. 6. Select the second keyframe (this is frame 20) on the timeline as shown below. A light blue border appears around Wales. 7. Select the Free Transform Tool on the toolbar to scale (enlarge) the symbol. Note: Make sure you have the Shift key pressed on the keyboard to maintain the proportions. 8. Use the Selection Tool (black arrow) to position the symbol in the centre. Your screen should be similar to the on the right, 9. Save and test the movie (Control>Test Movie). You should be able to see the two scenes (map and wales) playing one after the other. The wales scene has the animation. 14 Layers You can organise the content of a scene into layers. It is extremely useful especially when you are dealing with lots of contents. In this step you will create layers for organising the content (information about Wales) of the wales scene. Add a layer Make sure you are on wales scene. 1. Click on the Insert layer icon to add a new layer on the timeline. 2. A new layer (Layer 2) will be added on top of the current layer (Layer 1). Name layers You can change a layer’s name by double-clicking on it. 1. Change the name of Layer 1 to: wales. Change the name of the top layer (Layer 2) to: information. 2. Select the information layer if not selected. From the library drag onto the stage the wales flag graphic and position it on the top-left side of the screen (as shown to the right). 3. Select the Text Tool on the toolbar and type Wales on the stage. Use the properties panel to change the properties (font, size) of the text. The stage should look similar to the one on the right. 4. Save your movie and test the scene (Control>Test Scene). 15 5. Return to the wales scene and add a new layer. Name the new layer: capital. This time you will add some text (Cardiff) that will ONLY appear on the last frame (frame 20). Select the frame 20 on the capital layer. Right-click and choose Insert Keyframe from the drop-down menu that appears. A keyframe will be added on frame 20 and will be selected. Your timeline should look like the one below: 6. Use the Text Tool to type Cardiff on the stage. Position the text on the map using the Selection Tool (black arrow). If you want you can use the Oval tool to create a small dot for the location. Your stage and timeline should look similar to one below: 7. If you test the scene you will see that the text Cardiff only appears when the animation is finishing (frame 20). 8. Save the movie. 16 Adding interactivity You can add interactivity to your movies by using Action Script. Action Script is an event driven language. It reacts to external (i.e. click of the mouse) or internal events (i.e. loading a movie). Action Scripts are set up to detect when an event occurs and reacts by executing a set of instructions. Action Scripts can be placed on: 1. the stage (i.e. button) 2. the timeline (Keyframes) In this step you will add the instructions (Actions) on the button_wales on the map scene. In plain English the instructions should be something similar to this: When the mouse button is released on top of the button_wales, go to and play the scene wales from the beginning (this is from frame 1) to the end. Scene: map Scene: wales Event: the mouse release over the button_wales Instructions: Go to and play the scene wales from the beginning to the end 17 Add Action Script on a button Before you start with the Action Script make sure you are on map scene. 1. Select the button_wales on the stage. 2. Open the Actions panel if not already open (Window>Actions). 3. On the Actions panel open the Global Functions>Movie Clip Control and double-click on the on option presented. Your screen should be similar to the one below. From the drop-down menu double-click on release. 18 4. Move the cursor to the beginning of the second line, just before the closing curly bracket. Open the Global Functions>Timeline Control double-click on gotoAndPlay. The gotoAndPlay instruction has been added on the script. Move the cursor between the opening and closing bracket after gotoAndPlay. Inside the brackets type: "wales",1 The script you created should look like this: If you test the movie you will realise that both scenes (map and wales) are still playing one after the other. That is because you do not control the timeline. Add Action Script on the timeline If there are no instructions on the timeline, Flash will play all scenes one after the other starting from the first, moving to the second and so on. In this step you will add an instruction on the timeline. What we want to achieve is that the playhead will ‘wait’ at frame 1 on the map timeline until an event occurs. In other words, the playhead will not ‘go to and play the second scene’ but will remain on frame 1 until an event occurs. The event, in this example, is the release of the mouse on top of the button_wales. As this script will control the timeline it will be added (placed) on the timeline. 1. Create a new layer on top of the other layers and name it actions. Note: If the new layer’s position is between the other, click on it and drag it to the top position. 2. Make sure you have the actions layer selected. Your timeline should be similar to the one below: 19 3. On the Actions panel open the Global Functions>Timeline Control and double-click stop. The stop(); action has been added on the keyframe on the timeline. You will notice that an a letter has been added on the timeline, on the actions layer (see below). 4. Save and test the movie. This time Flash will only play the first scene. When you release the button_wales Flash will play the second scene. You will notice however, that when the second scene is played it jumps back to the first scene. You can also control the timeline of the second scene. In the following step you will add a stop action on the last frame of the wales (scene) timeline. 5. From the scenes panel select the second scene of the movie (wales). The timeline changes on the screen to the wales timeline. 6. On this timeline add a new layer on top of the other and name it actions. See below: 20 7. Select the last frame on the actions layer and right-click to insert a keyframe as shown below: 8. On the Actions panel open the Global Functions>Timeline Control and double-click stop. The stop(); action has been added on the keyframe on the timeline. You will notice that an ‘a’ letter has been added on the last frame (keyframe 20) on the timeline, on the actions layer (see below): 9. Save and test the movie. You will see that this time Flash will play the first scene. When you click and release the button_wales Flash will play the second scene. But you cannot return to the map. The last step is to create the ‘back to the map’ text button. The instructions you will add on this button is: return to the map scene when the mouse is released. 1. Make sure you are on the wales scene. 2. Insert a new layer and name it ‘back button’. 3. Use the Text Tool to type back to the map onto the stage. Place the text on the bottom-right corner. 4. Select the text to convert it to a button symbol (choose Modify>Convert to Symbol). On the pop-up window name it button_back and select button for type. Click OK. 5. Double click the button_back onto the stage to define the Over, Down and Hit states. a. Select the Over frame, right-click and insert a keyframe. b. Use the Properties panel to change the colour of the text to red. c. Repeat the steps a and b to define the Down state (choose a different colour this time). d. Repeat the step steps a and b to define the Hit state. 21 Important step: As stated previously the hit button is invisible but it defines the area the user can click. For this reason it is important to create a rectangle around to text to define the hit area, otherwise it will ONLY be the text. Select the Rectangle Tool top draw a rectangle to cover the text as shown below. Do not worry about the colour. The Hit state is invisible anyway. 6. Return to the wales scene and add the following script to the button: on (release) { gotoAndStop("map",1); } 7. Save and test the movie. 22 Publishing a movie You can publish your movie as a SWF file that can be displayed in a web browser. 1. Select File>Publish. Flash saves a SWF version of your file and an HTML file in the folder where the main_movie is (C:\Flash\Trainees Files). 2. Go to C:\Flash\Trainees Files folder and open the main_movie.html file. The HTML file opens in a web browser and displays your Flash movie. 23 Reinforce your Learning Use this workbook to help you perform the following tasks…  Create button symbols;  Work with scenes;  Add text and graphics onto the stage;  Create motion-tweened animations;  Create layers to organise content onto the stage;  Add interactivity to a movie by: o Adding Actions to a button; o Adding Actions to the timeline.  Publish a Flash movie. Follow-up activity:  Use this workbook to create a fully interactive map of the U.K. 24 25 Learning Technologies Training Courses Using Images Find out more about using different types of images and create banners and icons for your WebCT course or website. You might also be interested in Audacity Find out more about recording, editing and mixing audio for your WebCT course or website. Getting Started with WebCT WebCT: Getting Started with WebCT Getting More from WebCT Evaluate your course using WebCT Surveys Managing your WebCT Course Quiz Taster Multimedia: Audacity Taster (audio-editing) Creating software demos with Wink Getting started with Flash Using Images Learn how to use the WebCT Virtual Learning Environment in your teaching. Creating content: Impatica for PowerPoint Scenario-based learning using PowerPoint Using Dreamweaver with WebCT Using Dreamweaver: Cascading Stylesheets and Templates Learning Technologies Support Service Office: The Barleycorn 23 Gower Place t. 020 7679 (3)3559 / (3)7170 / (3)3878 e. ltss@ucl.ac.uk http://www.ucl.ac.uk/learningtechnology