COMP126-2006: Practical 6 Buttons and First Script Instructions In Flash, we are able to create movies. However, the Flash idea of movie is not quite the usual one. A normal movie is (technically) a series of frames, played one after another on a screen, to create the illusion of motion. In Flash we can do (and have done) exactly that. However, the programming features of Flash provide some different options. The opposite extreme to a normal movie is a Flash movie with only one frame, in which program instructions cause all the movement and interaction on the screen in effect not a movie at all, but something much more like an ordinary computer program. Between the extremes is the option that we will cover in today s practical session: A movie (normal, with lots of frames), divided into parts like scenes ; when we click a button a particular scene plays. The second example we will build illustrates this idea. The timeline is as follows: On frame 1 is a circle with two arrow shaped buttons. If you click the Square button, the animation from frame 10 to frame 30 is played, showing: If you press the Star button the animation from frames 35 to 55 is played, showing: The scenes we build can be one frame long, or many. Only limited use is made of Action Script, but it enables us to move from pictures and fixed animation, to our first interactive examples.
Making a Button In Flash a button is a kind of Symbol. It is stored as a short movie, with four frames. These frames are not simply played one after another, kind a conventional movie however. They are displayed under program control, and represent the working states of a button. They enable a Flash button to change its appearance according to its 'state'. There are four different states, they are: Up, Over, Down and Hit. Up: Is the default state and occurs when the mouse pointer is not over the button. Over: Is when the mouse pointer is over the button. Down: Is when the mouse pointer is over the button and the mouse button is down. Hit: Is an invisible area on the screen being the active area of the button. NOTE: In this practical we will make our own buttons, which is often what a Flash developer has to do in order to make sure that they are graphically appropriate for their setting. It is also useful for learning purposes, because it gives us our first example of a movie with frames, that doesn t work as we would expect a movie to work. However, it is not the only option. Flash comes with a library of predefined useful buttons for you to try. If you menu: Window / Other Panels / Common Libraries / Buttons, you should see a new library panel appear on the screen with folders full of predefined buttons and other controls. Have a look A button is a type of Symbol, so the first thing to do (after starting a new document) is create a 'Button Symbol'. 1. Menu: Insert > New Symbols The "Symbols Properties" dialogue box will open. 2. Name: Button 1 3. For Behaviour select: Button 4. Click: OK As usual you will be put into a symbol editing stage for Button 1. In this stage, you will have four frames, corresponding to the three states of a button, and a fourth for the hit area: Creating the up state Frame 1 - Up Frame 2 - Over Frame 3 - Down Frame 4 - Hit 5. In the middle of the stage draw a rectangle with the rectangle tool: Once you have finished drawing your rectangle, go back to the selection tool: 6. With the selection tool, single click on the rectangle fill and select a colour with the Fill Colour tool: 7. You need to align your rectangle to the centre of the stage using the Align panel. Menu: Window > Design Panels > Align (apple/ctrl K) 8. Double click on the coloured fill of the rectangle. This should select both the fill and the stroke (outline). Fill and stroke highlighted: Both are dotty! Warning: If the fill and stroke are not both highlighted you will only move part of your rectangle.
9. In the Align panel click the 'To Stage' button: 10. With the rectangle selected click on the Align Vertical centre button: 11. Click on the Align Horizontal centre button: 12. Create a new Layer and Using the Text tool type 'Click Here' (or whatever else you might want your button to say). 13. The text must be set to Static. To check this open the Property panel: Window > Properties. With the text still selected the panel should say: arrow to select static text. 14. Select your text with the Arrow tool:. If it does not, use the drop down 15. In the Align panel the 'To Stage' button should still be selected (it will be white, not gray, see picture below). 16. Click on the Align Vertical centre button: 17. Click on the Align Horizontal centre button: (fig 8.3) After you have finished the text you may need to re-size your rectangle. Because the text is on top of the rectangle it may be difficult to select. If need be just move the text out of the way - you can always reposition it using the Align Panel later. 18. To re-size the rectangle double click on it with the: Selection Tool Then either use the: Free Transform Tool Or use the Property Panel and type in the size you want. After you have re-sized your rectangle you will need to re-centre it with the Align Panel. You may also need to re-centre the text.
The over state 19. Right click / control click on frame Over in the timelinever' frame in layer 1 and select: Insert Keyframe from the popup menu. Repeat this for layer 2. 20. Select the text with the Selection tool and change the text to bold by going to Text > Style > Bold Note: Instead of changing the text to bold you could do any other change you wanted such as size, colour or position. Changing the text itself can be done if you use the Text Tool, and select your text item. 21. You may need to align the text centre of the stage again. 22. Select the rectangle and change it to another colour by single clicking the fill colour of the rectangle The down state (only the fill will be dotty). Select a colour by clicking on the Fill Colour tool: 23. Do the same as before, insert new Keyframes in the Down frame for both layers 24. Change the colour of the rectangle and/or... Change the colour or the look of the text. Placing the button on the main stage: Your timeline should look like this: Note the keyframes - black dots 25. Click on the Scene 1 Tab: You will return to the main stage, which should be empty. Don't panic, you haven't lost your symbol. 26. Click on Window > Library. Your symbol will be in the library. 27. Drag your symbol from the Library onto the main stage. 28. Test the movie. The button won t cause any actions, but you should be able to see it change appearance when moving the mouse over it, and again when you click on it. The hit state The hit area is normally the same as the rectangle. You do not need to create this frame unless the hit area you want is different to the original rectangle you created on frame one. Note: If your button did not have a solid background (in this case a filled rectangle) but only text, you would have to create a rectangle (or other solid shape), in the hit area frame. Otherwise when the mouse pointer went over the gaps between the letters, the button would go back to frame one. Using buttons to make a slideshow. 29. Make sure your main stage (scene 1) is clear. In frame 1 (the only frame at present), draw a rectangle. Import a picture (of your choice), and use the bitmap fill to put the picture into the rectangle. You may need to use the Fill Transform Tool to adjust the size or orientation of the picture. 30. Add keyframes at frame 2, frame 3, and frame 4. 31. Choose and import another picture. Make it fill your rectangle on frame 2. 32. Do the same for frames 3 and 4. 33. You should now have a movie with four frames, each showing a rectangle with different pictures. Try playing the movie. What do you see? 34. Name the layer (it is the only layer) with the pictures Pictures.
35. Add a new layer and name it "control", move it to the bottom below the "picture" layer. This layer will end up with buttons on it. 36. The slideshow will require two buttons Forward and Reverse. So far, you have a button with Click Me displayed on it. Fortunately, it is not necessary to start from scratch in making new buttons. (Although it might be a good idea to do so for at least one of the buttons, just for practice.) It is possible to copy a symbol, and make changes. Make sure that your Library is open. If not, choose Library from the Window menu (or press ctrl / apple L). Right click (control click), on your button and select Duplicate from the drop down menu. Name the new (copied) button Forward. Repeat to create a third button called Reverse. Edit your button symbols to change the text to Forward and Reverse respectively. 37. On the main timeline, select frame 1 in the control layer and drag instances of the back and forward buttons to the scene as shown below (in the screen shot we have used round buttons with arrowheads). Position the buttons them as you think appropriate. 38. 38. Now we need to add ActionScript to make the buttons do something. First, you will add a new layer above the picture layer (at the top of the timeline) and name it "actions". Select frame one in the layer you have just created and open the actions window (Window / Development Panels / Actions). Once the actions window is open type the following stop(); This command will be performed after the frame has been displayed. It stops play on the movie at this point effectively freezing it on frame 1. Test your movie. What happens?
39. Now we must add script to the buttons and make the movie work as a slide show. Click on the forward button and open the Actions window again. Type the following on(release){ } gotoandstop(_currentframe + 1); Use the blue tick to check your that your instructions are valid. Action Script is fussy about getting the punctuation exactly right. (a) The first line states when the action is going to happen. In this exercise we are going to make the event happen when you release the button, however there are a number of other expressions you could use, below is a list of some other expressions and their meanings. on(press) on(release) when a button is pressed when a button is release while the mouse is over the button on(releaseoutside) when a button is released while the mouse is not over the button on(rollover) on(rollout) on(dragover) on(dragout) when the mouse rolls over / onto a button when the mouse rolls off a button when the mouse is dragged onto a button when the mouse is dragged off a button There are others, but these are the more commonly used expressions. After you have stated when something is going to happen you then type {.You may find it hard to remember to do this at first, if you do forget your script will not work correctly, so try and remember. (b) The second line states what will happen once you release the button. We ve used gotoandstop This will make Flash go to a particular frame (showing it) and then stop, you can also use gotoandplay(); this will go to a frame and then keep playing. Which frame it goes to will depend on what you type in the brackets. We have typed (_currentframe + 1) this will find the number which corresponds with the frame which the flash movie is currently in and then add 1 to that.. Notice that the word currentframe is preceded by an underscore character _. It is important, so don t forget it. Once you have finished writing an event you type ; to indicate that it is the end of that event and once you have finished writing all the events for that expression you type } to close the expression. 40. Select the back button and repeat step #5, however instead of typing (_currentframe + 1) type (_currentframe - 1) 41. Test your movie. Notic that, when you're at picture 1, you can't go to the previous frame, which is picture 4. Also, when you're at picture 4, you can't go to the next frame, which is picture 1. Therefore, we need to make some small adjustments. 42. On the control layer, select frame 2 and add a keyframe. Then, add a keyframe at frame 4. 43. Now go back to the frame 1 on the control layer and click on the screen to deselect the buttons. Click on the back button, open the actions window and change its script from gotoandstop(_currentframe - 1) to gotoandstop(4). Then click on frame 4, select the forward button, and change its script from gotoandstop(_currentframe + 1) to gotoandstop(1). 44. Test the movie again. You'll find the problem has been fixed. Note: Instead of using gotoandstop(_currentframe - 1) and gotoandstop(_currentframe + 1) you can also use prevframe(); and nextframe();
Eg. on(release){ nextframe(); } 45. Save your movie at prac6a. PC users, remember to navigate via H:\ Pick a Path animation. 46. Your task now is to build the animation shown on page 1. A front frame with Square and Star buttons, taking you to separate animations for the two transformations. 47. Save your animation as prac6b. Note: Depending on your setup you may not have a PolyStar Tool available on your toolbar. If you don t you can get it by going to menu: Edit / Customize Tools Panel. Experiment with this. If you have trouble ask a demonstrator.
COMP126-2006: Practical 6 Buttons and First Script Instructions Review Page. Question 1: What happens at step 33. (Playing movie with four frames.) Question 2: What happens at step 38. (Stop command at frame 1) Question 3: The circumstances in which actions for a button can be performed include both release and releaseoutside. Why do you think both are needed? Give an example of a situation in which releaseoutside would be helpful. Question 4: At step 42, why did you need to add a keyframe at frame 2? VERIFICATION Show the demonstrator your finished versions of the exercises in this practical. You may also be asked to demonstrate how you performed a specific task from this practical. Name: 0 1 2 3 4 ID: (demo sign & date)