I0059

Laboratory Exercise

Loading and Unloading Movie Clips
Objectives:
At the end of the exercise, the students should be able to:



load and unload Movie Clips, and create instances of movie clips on the stage.

Materials:


Computer with Windows XP Service Pack 2 or higher installed with Adobe Flash Professional CS5.5

Procedures:
1. Open Adobe Flash CS4 application.
2. Create a Flash File ActionScript 3.0.
3. Click Insert > New Symbol and set the following:
a. Name: jetX
b. Type: Movie Clip
4. On the first layer draw a rectangle using the Rectangle tool (
a. Stroke Color: #000000
b. Fill Color: #CCCCCC
c. Width: 106px
d. Height: 15px
5. Add a new layer by clicking the Add Layer button ().
6. Click on the Line tool ( a diagonal line.

) with the following properties:

) and press the key while dragging the pointer over the stage to draw

7. Select the line and click on the Free Transform tool (

) and change the angle of the line.

8. Click the Select tool (
) and click on the line.
9. Right-click on the line and select Copy > Paste in Place.
10. With the new line selected, click Modify > Transform > Flip Vertical to flip the line.
11. Use the Select tool (
) to position the line so as to form the tip of the triangle.
12. Draw a vertical line to close the gap and to create a triangle.
13. Click Layer 2 and click Modify > Combine > Union.
14. Click the Paint Bucket tool (
) and set the Fill color to #CCCCCC.
15. Position the triangle beside the rectangle on Layer 1.

16. Add another layer.
17. Click the Rectangle tool (
) and create a rectangle with the following properties:
a. Stroke Color: #000000
b. Fill Color: #CCCCCC

04 Laboratory Exercise 1

*Property of STI
Page 1 of 6

I0059

c. Width: 35px
d. Height: 15px
18. Use the Free Transform tool ( resize it.

) and the Distort control (

) to drag the corners of the rectangle to

19. Add another layer.
20. Create a rectangle on top of the tail section with the following properties:
a. Stroke Color: #000000
b. Fill Color: #CCCCCC
c. Width: #6px
d. Height: #40px
e. Corner Radius: 12
21. Position the rectangle on top of the tail section.
22. Add another layer and draw a rectangle on top of the fuselage section with the following properties:
a. Stroke Color: #000000
b. Fill Color: #0066FF
c. Width: #9px
d. Height: #15px
e. Corner Radius: 0
23. Add another layer and draw a rectangle on top of the fuselage section with the following properties:
a. Stroke Color: #000000
b. Fill Color: #FFFFFF
c. Width: #35px
d. Height: #12px
e. Corner Radius: 15
24. Add another layer and draw a rectangle on side of the fuselage section just before the tail section and set the properties as follows:
a. Stroke Color: #000000
b. Fill Color: #0066FF
c. Width: #17px
d. Height: #73px
e. Corner Radius: 0
25. Copy the rectangle and position it on the opposite end of the fuselage.
26. Add another layer.
27. Use the Line tool (
) to draw a triangle to create a wings for the jet having the following properties:
a. Stroke Color: #000000
b. Fill Color: #CCCCCC
c. Width: 33px
d. Height: 73px
28. Select the triangle and right-click Copy > Paste in Place.
29. Rotate the triangle and click Modify > Transform > Flip Vertical.
30. Position the two triangles on the side of the fuselage.

04 Laboratory Exercise 1

*Property of STI
Page 2 of 6

I0059

31. Add another layer and draw a triangle with the following properties.
a. Stroke Color: #000000
b. Fill Color: #CCCCCC
c. Width: 19px
d. Height: 33px
32. Select the triangle and right-click Copy > Paste in Place.
33. Rotate the triangle and click Modify > Transform > Flip Vertical.
34. Position the two triangles besides the tip of both wings.
35. Add another layer and draw a rectangle depicting the jet engine with the following properties:
a. Stroke Color: #000000
b. Fill Color: #0066FF
c. Width: #17px
d. Height: #13px
e. Corner Radius: 12
36. Use the Free Transform tool (
) and the Distort control (
) and drag the corners of the rectangle to resize it.
37. Right-click on the rectangle and select Copy > Paste in Place.
38. Drag the rectangle on the other side of the wings.
39. Drag the new layer and position it above Layer 1.

40. Click Insert > New Symbol and set the following:
a. Name: rocket
b. Type: Movie Clip
41. Use the Rectangle tool (
) and draw a rectangle depicting the jet engine with the following properties:
a. Stroke Color: #000000
b. Fill Color: #0066FF
c. Width: #33px
d. Height: #10px
e. Corner Radius: 0
42. Add another layer and use the Line tool (
) to draw a triangle with the following properties:
a. Stroke Color: #000000
b. Fill Color: #CCCCCC
c. Width: 12px
d. Height: 10px
43. Right-click on the triangle and select Copy > Paste in Place.
44. Repeat steps 41 - 42 to create another triangle.
45. Position each triangle as shown in the figure below.

04 Laboratory Exercise 1

*Property of STI
Page 3 of 6

I0059

46. Right-click on jetX from the Library and select Edit.
47. Add another layer and drag two instances of the rocket movie clip to the opposite side of the wing sections as shown in figure below.

48. Click Scene 1.
49. Right-click on jetX from the library and select Properties.

50. Select Export for ActionScript and leave all the other properties as is and click OK.

04 Laboratory Exercise 1

*Property of STI
Page 4 of 6

I0059

51. Click OK on the dialog box as shown in the figure below.

52. Click Insert > New Symbol and set the following:
a. Name: button1
b. Type: button
53. Use the Rectangle tool (
) and draw a button with the following properties:
a. Stroke Color: #000000
b. Fill Color: #0066FF
c. Width: #85px
d. Height: #25px
e. Corner Radius: 12
54. Add key frames for the Over, Down, and Hit events and set the colors as follows:
a. Over: #FFFF00
b. Down: #00FF33
c. Hit: #0000CC
55. Add a new layer on Scene 1 and add two instances of button1 and position them on the bottom-left corner of the stage.
56. Click the Text tool (
) and type start.
57. Select the text and set the properties as follows:
a. Font: Calibri
b. Style: Regular
c. Size: 28 pt
d. Color: #000000
58. Position the text on top of the leftmost button.
59. Now, type stop, select it and set the properties as follows:
a. Font: Calibri
b. Style: Regular

04 Laboratory Exercise 1

*Property of STI
Page 5 of 6

I0059

c. Size: 28 pt
d. Color: #000000
60.
61.
62.
63.
64.
65.

Position the text over the second button.
Select the start button and set the instance name to btnAdd.
Select the stop button and set the instance name to btnUnload.
Add another layer.
Right-click on the 1st frame of Layer 3 and select Actions.
Enter the following script: btnAdd.addEventListener(MouseEvent.CLICK, attachMovieclip); btnUnload.addEventListener(MouseEvent.CLICK, remMov); stage.addEventListener(KeyboardEvent.KEY_DOWN,flipMov); var addjet:jetX= new jetX(); function attachMovieclip(event:MouseEvent):void
{
var x:Number=0; addjet.x= Math.random() * stage.width; addjet.y= Math.random() * stage.height; addChild(addjet); } function remMov(event:MouseEvent):void { removeChild(addjet); }

66. Click Control > Test Movie.

67. Save the exercise with a filename Exercise5 – [Your Name].fla on your folder.
NOTE: This exercise will be used for the next laboratory session.

04 Laboratory Exercise 1

*Property of STI
Page 6 of 6