Knox Grammar School І TAS Department
Knox TAS Department
Flash CS4 – Tutorial 4 Controlling Flash • •
Basic Action Script Using buttons
Click the following link to see a finished version of this tutorial: http://megaswf.com/serve/1098294
Creating Shapes, Adding Text and Naming Layers 1. Create a new document using Action script 3. 2. Click the stage, then open the properties tab and alter the color of the stage.
3. Open the brush tool and select a grey color from the paint bucket. 4. Draw the outline of a cloud. 5. Open the paint fill tool and select white from the paint bucket. 6. Fill the inside of the cloud white.
7. Open the selection tool (black arrow) and select the cloud by drawing a box around it. 8. Right click the cloud and select “Convert to symbol” 9. Name the symbol and ensure that the “type” selected is “graphic”.
10. Open the library and drag as many clouds onto the stage as desired. 11. To alter the size and shape of clouds, right click a cloud and select “free transform”. 12. Double click “Layer 1” in the time line and rename it “clouds”.
1
Knox Grammar School І TAS Department
Inserting Layers and Importing Images
13. From the “Insert” menu, click “timeline” then “layer” 14. Name the layer “title” 15. Add a title to the object by selecting the text tool. 16. Create an area for the text by drawing a box on the stage. 17. Open the “Text” menu and select a range of size, style and font options. 18. Select a color of the text from the paint bucket. 19. Type your text into the box. 20. Adjust size and location of box if required.
21. Open internet explorer and search for an aeroplane vector drawing (.gif or .png etc.) 22. Save As the aeroplane to your computer. 23. Back in Flash, in the File menu, select import, import to library and browse for your saved image. 24. Insert a new layer and name it “aeroplane”. 25. Open the library and drag the aeroplane onto the left of the stage. If the plane doesn’t have a transparent background, you may need to edit it in Adobe Illustrator or simply search for a different plane.
2
Knox Grammar School І TAS Department
Adding Tweens, Buttons and Action Script 26. In the plane layer, select frame 30 and right click, then click insert keyframe. 27. Move the plane to the far right of the stage. 28. Right click on any of the frames in between and select “create classic tween” 29. Insert Keyframes in frame 30 for the remaining layers (Title and Clouds) to show the content during all frames.
30. By pressing ctrl Enter, you should be able to preview a plane flying across the screen. 31. Right click on frame 30 in any layer and select “Actions”. 32. Type the following accurately: stop() 33. Click the Timeline tab to get out of Actions and notice the little “a” in frame 30 of the timeline layer chosen 34. The movie will now stop once the plane has flown across the screen.
35. Insert a new layer and name it “Buttons”. 36. In frame 1, use the text tool and add the word “Take Off” to the bottom left of the stage. 37. Right click the “Take Off” text and select Convert to Symbol. 38. Name the button “TakeOff_btn” and ensure Type selection is button. 39. Double click the Take Off button to edit the button properties. 40. Insert a keyframe in each of the three boxes below the button properties; “Over”, “Down” and “Hit” 41. Alter the colour of the text for each property of the button then double click the stage to exit.
3
Knox Grammar School І TAS Department 42. Repeat steps 36 to 41 and create a “Landing” button named: “Landing_btn” 43. Insert a keyframe in frame 30 of the buttons layer. 44. Click Ctrl Enter to watch your animation and make sure the buttons change colour when you click and mouse over them. We will add function to the buttons later.
Creating Basic Scenes
45. Create a new layer and name it “Background1” 46. Insert a keyframe in frame 31 of the background layer 47. In frame 31, use the rectangle tool to create a flat, black rectangle to represent a runway, level with the bottom of the stage. 48. Drag in some clouds from the library to fill the sky to the right of the stage.
49. Press Ctrl A to select all items on the stage. 50. Right Click a cloud and select “convert to symbol”. Name the image “background” and select type: graphic. 51. Insert a keyframe in frame 130 of the Background1 layer. 52. Move the runway background image to the left until the last cloud is on the stage. 53. Right click a frame in the Background 1 layer and select create classic tween. 54. Insert a new layer named “Scene 1” 55. Insert a keyframe in frame 31 of the Scene 1 layer. 56. In frame 31 of the Scene 1 layer drag the plane from the library and place it on the left of the runway. 57. Insert a keyframe in frame 71 of the Scene 1 layer.
4
Knox Grammar School І TAS Department 58. Insert a keyframe in frame 130 of the Scene 1 layer. 59. Move the plane to an elevated position on the far right of the stage. 60. Right click a frame on the Scene 1 layer and create a classic tween.
61. Right click on frame 130 in any layer and select “Actions”. 62. Type the following accurately: stop() gotoAndPlay(1) 63. Click the Timeline tab to get out of Actions and notice the little “a” in frame 130 of the timeline layer chosen 64. The movie will now stop once the plane has flown across the screen and go back to the Home Animation.
65. Create a new layer named Background 2 66. Insert a keyframe at frame 131 of background 2 layer. 67. Drag in the background from the library. Reverse it by dragging the right side past the left side. 68. Insert a keyframe in frame 230 of the Background2 layer. 69. Move the runway background image to the left until the end of the runway is on the stage. 70. Right click a frame in the Background 2 layer and select create classic tween.
5
Knox Grammar School І TAS Department
71. Insert a new layer named Scene 2 72. Insert a keyframe at frame 131 of the Scene 2 layer. 73. Drag in the plane, placing it at the top left of the stage 74. Insert a keyframe at frame 150 of the scene 2 layer. 75. Insert another keyframe at frame 200 of the scene 2 layer. 76. Move the plane down to the runway. 77. Right click a frame in the Scene 2 layer and select create classic tween.
78. Right click on frame 230 in any layer and select “Actions”. 79. Type the following accurately: stop() gotoAndPlay(1) 80. Click the Timeline tab to get out of Actions and notice the little “a” in frame 230 of the timeline layer chosen 81. The movie will now stop once the plane has landed and go back to the Home Animation.
Adding Action Script 82. Create a new layer called Actions takeoff_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1); function mouseDownHandler1(event:MouseEvent):void {
83. Insert a keyframe in frame 30. 84. Right click on frame 30 in the Actions layer and select Actions.
gotoAndPlay(31); } landing_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2); function mouseDownHandler2(event:MouseEvent):void { gotoAndPlay(131); }
6
85. Copy the text on the left into the Actions box. 86. Press Ctrl Enter to test your finished animation.