Ross Sheppard High School
Web Page Design and Construction
Student Learning Guide
Using a Motion Guide

	When you have finished this project, you will be able to:
	describe the purpose of a motion guide
	create a motion guide for symbols to follow

1. Create a new folder called "Flash Motion" on your personal drive space. Save everything to do with this project in that folder.
   
   
2. In the previous project you created a straight line motion for your objects. In this project you will learn how to create a motion guide that symbols can follow.
   
   
3. Start a new project in Flash:
   
   
4. Under thee "Modify" menu select "layer" and change the layer name to "Blue Square" and click "OK"
   
   
5. Under thee "Modify" menu select "Movie and:
   • set the frame speed for 24 fps
   • set the movie size for 500 by 500 pixels
     
     
6. Create a Blue square with a 2 point Black border in the upper left corner of the stage.
   
   
7. Save your project as "Motion Guide" in the "Flash Motion" Folder.
   
   
8. Your Project should look similar to the one below.
   

9. Using the Select Tool (Arrow) Drag a square window around the blue square on the stage so that both the blue fill and the outline are selected.
   
   
10. Press F8 or click on the "Insert" menu and select " Convert to Symbol"... to turn it into a "motion-tweenable" object. (select the Graphic option) Name this symbol "Blue Square" and click OK

    
    

11. Click on the "Blue Square" layer bar, then click the "Insert" menu item.
    
    
12. Select "Motion Guide". Notice that a new layer has been added to your timeline. It should say - Guide:Blue Square (Each of these bars will be used differently in the following instructions. Pay close attention to which one is selected in each instruction)
    
    
    
    
13. Click on the "Guide:Blue Square" layer bar and then use the line tool to draw a straight line from the position you wish the blue square to start, to the position where you wish it to finish.
    
    
    
    
14. Selecting the pointer tool, adjust the shape of the line by clicking somewhere along the line and dragging the pointer to bend the line to the shape you want.
    
    
    
    
15. If you haven't done so already, click on the Snap Toggle Button under the Menu Bar.

    

16. Click (select) the Blue Square layer bar.
    
    
17. Right-click on the 36th frame of the blue square layer timeline and insert a Key Frame (F6) for the Blue Square layer.

18. Click (select) the Guide Blue Square layer bar.
    
    
19. Right-click on the 36th frame of the "Guide blue Square" timeline and insert a Frame (F5).

20. Drag the red Timeline Marker to Frame 1
    
    
21. On the stage, click (at the center of the blue box) and drag the Blue Square to exactly the left end (starting point) of the motion guide line. (Make sure the little circle that appears at the center of the Square "snaps" to the end of the line.)
    
    
22. Drag the red Timeline Marker toFrame 36.
    
    
23. On the stage, click (at the center of the blue box) and drag the Blue Square to exactly the Right end (finish point) end of the motion guide line. (Make sure the little circle that appears at the center of the Square "snaps" to the end of the line.)
    
    
24. On the timeline of the Blue square, Right-click somewhere between Frame 1 and 36, and select Create Motion Tween.
    
    
    
    
25. Save your project and run it. (press the enter key to run) The Blue Square should follow the motion guideline as shown in the example below (you can also click Refresh or right-click on the blue square and click play to run the movie again):
    
    
    
    
    
26. So far you have viewed the Flash movies that you have created in Flash rather than as a Web page.
    
    
27. Now, you will convert the movie to a Web page. In order to do this, you need to "Publish" the movie.
    
    
28. Click "File" on the Menu Bar, then on "Publish Settings".
    
    
29. Click on the HTML tab and change the "Window Mode" to "Tranparent Windowless".
    
    
30. 
    
    
31. Click the OK button.
    
    
32. Click "File" on the Menu Bar once again, the select "Publish". This will create an HTML page of your movie. The file will be saved in the same folder in which you originally saved your movie. The file will be saved with the same name as your movie, but with the HTML extension.
    
    
33. Use Windows Explorer to locate the new HTML file. Double click on the file and it will open in the Internet Explorer browser.
    
    
34. Notice that your movie continues to play, or loop. We need to change this so that it plays only once.
    
    
35. Switch back to Flash and click on frame 36 of the "Blue Square" timeline..
    
    
36. Right click on the frame, and select "Properties" from the window that opens.
    
    
    
    
37. Click on the "Actions" tab.
    
    
    
    
38. Click the "+ " sign and a list of possible actions will appear.
    
    
    
    
39. Choose Stop from the list and click "OK"
    
    
40. Save your movie.
    
    
41. The last time you played the movie, you opened it in a browser by finding the file in Windows Explorer.
    
    
42. This time you will use a shortcut from within Flash by pressing [Ctrl][Enter].
    
    
43. Create two more symbols and have each symbol follow a different motion guide.
    
    
44. Click here to see the marking guide for this project.
    
    
45. Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded.