General Directions for Creating a Program with Flash

Size: px

Start display at page:

Download "General Directions for Creating a Program with Flash"

Jordan Floyd
5 years ago
Views:

1 General Directions for Creating a Program with Flash These directions are meant to serve as a starting point for a project in Flash. With them, you will create four screens or sections: 1) Title screen; 2) Menu screen; 3) Tolkien screen; and 4) Production screen. Assume the Title and Menu screens serve as a font-end to a multimedia program, titled The Media Profile. The Media Profile is an interactive program that profiles/highlights a variety of media topics, such as movies, books, music, television, and radio. Use the assets that I provided, which can be downloaded at: Remember to extract the asset zip file. Screen 1: Title Screen 1. Open Flash 2. Select Flash File (ActionScript 3.0) and click OK. The workspace appears (see figure 1). You may need to reset the workspace by selecting Window >> Workspace >> Reset Classic. Figure 1. Workspace 3. Click on the Stage area and then click the Edit button in the Properties panel. Set the Stage size to 720Px X 540Px (see figure 2). 1

Figure 2. Set Stage Size 4. Save your file. Select File >> Save. Save the file in inside the folder that contains the project assets.

Add four layers for a total of five layers.

Import assets one through twelve into your file. Each file has a number prefix. 7. Select File >> Import >> Import to Library. 8.

2 Figure 2. Set Stage Size 4. Save your file. Select File >> Save. Save the file in inside the folder that contains the project assets. The timeline 5. Set up the Timeline. Click the New Layer button (two icons to the left of the Trashcan). Add four layers for a total of five layers. Starting with the bottom layer name the layers as, Background, Buttons, Content, Actions, Labels (see Figure 3). Figure 3. Timeline Layers 6. Import assets one through twelve into your file. Each file has a number prefix. 7. Select File >> Import >> Import to Library. 8. Click in Frame 1 of the Background layer. Drag the 01_Background.jpg image onto the Stage. In the Properties panel set the X and Y positions to 0, which sets the image position to the Stage size (see Figure 4). Figure 4. Position Background image 2

png to the Stage and align it. 11. Click in Frame 1 of the Buttons layer. Drag 04_Begin.png to the bottom right of the Stage. With the Begin image selected choose Modify >> Convert to Symbol.

3 9. While still in Frame 1 of the Background layer, drag 02_MenuText_Circle.png to the Stage. Align the image to the center of the stage (Window >> Align). Make sure you press the To Stage button so the image is aligned to the Stage (see figure 5). Figure 5. Align image 10. Click in Frame 1 of the content layer. Drag 03_TitleText.png to the Stage and align it. 11. Click in Frame 1 of the Buttons layer. Drag 04_Begin.png to the bottom right of the Stage. With the Begin image selected choose Modify >> Convert to Symbol. In the convert to Symbol box, type Begin_btn in the Name box and select Button for the Type. Click OK. 12. Double click the Begin_btn object that is on the Stage. The button Editor Timeline displays. Press F6 to insert a new Keyframe for the over state of the button symbol. The red playhead moves to the Over frame. The Properties panel (Window >> Properties) displays a Swap button. If you do NOT see the Swap button, click the Begin_btn symbol on the Stage. Click the Swap button and select 04_Begin Over.png. Click OK. Press F6 again to add a new Keyframe for the Down state. Click the Swap button again and select the 04_Begin down.png. Click OK. 13. Exit the button editor timeline by clicking the Scene 1 on the Editbar on the top of the Stage (see figure 6). Figure 6. Editbar 14. Click in Frame 1 of the Labels layer. In the Properties panel, click in the Name box and type Title, this assigns the frame a label of Title. 15. Your completed frame should look like figure 7. 3

This extends the background images over to frame 5. Your screen should look similar to figure 8. Figure 8.

4 Figure 7. Completed frame Screen 2: Menu Screen 1. For frame 2, you could move to the second frame and begin to insert images. However, we ll spread the frames out a bit by making frame 5 out second screen. 2. Click in the background layer of frame 5 and press F5. This extends the background images over to frame 5. Your screen should look similar to figure 8. Figure 8. Screen 2 Note: If you notice that other objects are on the background layer other than the background image and the text ring (see figure 8), you should remove them from the background layer. Click 4

5 the object that you want to move from the background. Notice that the timeline highlights the layer in which the object is located. With the object selected, cut it from the layer (press CTRL+X) and then click the layer where you want to place it and press CTRL+V. 3. Click in the Content layer of frame 5 and press F7, which inserts a new Blank keyframe. Drag 05_MenuImage.png to the middle right side of the stage. 4. While still in frame 5 of the Content layer, drag 06_Menutext.png to the top middle of the stage. Align it to the center of the stage. 5. Click in the Buttons layer of Frame 5 and press F7, which inserts a new blank Keyframe. 6. While still in frame 5 of the Buttons layer, drag 07_Production.png to the left side of the stage. 7. While still in frame 5 of the Buttons layer, drag 08_Tolkien.png to the left side of the stage below 07_Production.png. 8. Your screen should look similar to figure 9. Figure 9. Completed screen 9. Click on the Production image (07_Production.png) on the stage. Notice how the timeline highlights indicating the layer in which the image is located. Make sure it is on the Buttons layer. 10. With the Production image selected choose Modify >> Convert to Symbol. In the convert to Symbol box, type Production_btn in the Name box and select Button for the Type. Click OK. 11. Double click the Production_btn object that is on the Stage and the button Editor Timeline displays. Press F6 to insert a new Keyframe for the over state of the button symbol. The red playhead moves to the Over frame. The Properties panel (Window >> Properties) displays a Swap button. If you do NOT see the Swap button, click the Production_btn symbol on the stage. 5

Click the Swap button and select 07_Production over.png. Click OK. Press F6 again to add a new Keyframe for the Down state. Click the Swap button again and select the 07_Productiondown.png. Click OK. 12.

6 Click the Swap button and select 07_Production over.png. Click OK. Press F6 again to add a new Keyframe for the Down state. Click the Swap button again and select the 07_Productiondown.png. Click OK. 12. Exit the button editor timeline by clicking the Scene Repeat the above steps for the J.R.R. Tolkien image (convert it to a button symbol). 14. Click in Frame 5 of the Labels layer and press F6 to insert a keyframe. In the Properties panel, click in the Name box and type Menu, this assigns the frame a label of Menu. Screen 3: Tolkien 1. Click in the background layer of frame 10 and press F5. This extends the background images over to frame 10. Again, we could place this frame next to frame 5 but for clarity we ll extend it to frame 10. Your screen should look similar to figure 10. Figure 10. Screen 3 2. Click in the Content layer of frame 10 and press F7, which inserts a new Blank keyframe. Open the Library (Window >> Library). Drag 09_Tolkien_text.png to the top center of the Stage. Align it to the center of the Stage. 3. While still in frame 10 of the Content layer, drag 10_ Tolkien_Photo.png to the left side of the Stage. 4. In the assets folder, open the Tolkien.txt file. Copy the text. The text appears in a single line. Press CTRL+A to select it all and then press CTRL+C to copy it. Return to Flash and click in the Content layer of Frame 5. Click the Text Tool on the Toolbar (the letter T). With the Text tool, click and drag to make a text field. Paste the text in the text field. 6

5. Click the Selection tool (Arrow at the top of the Toolbar) and click on the text field. In the Properties panel (Window >> Properties) set the position of the text field to X 323 and Y 147.

7 5. Click the Selection tool (Arrow at the top of the Toolbar) and click on the text field. In the Properties panel (Window >> Properties) set the position of the text field to X 323 and Y 147. Set the width and height of the field to W 355 and H 321. Set the text to Times New Roman, Bold and size 16. Set the text color to Black (see figure 11.) If your text field has a white background color, you can remove it by clicking the Show border around text button (see figure 11). Figure 11. Text field 6. Click in the Buttons layer of frame 10. Press F7 to insert a new blank Keyframe in this layer. 7. Open the Library (Window >> Library) and drag the image 12_Menu.jpg onto the stage. Position it in the lower left side of the Stage. 8. Notice how the timeline highlights indicating the layer in which the image is located. Make sure it is on the Buttons layer. 9. With the Main Menu image selected choose Modify >> Convert to Symbol. In the convert to Symbol box, type Menu_btn in the Name box and select Button for the Type. Click OK. 10. Double click the Menu_btn object that is on the stage and the button Editor Timeline displays. Press F6 to insert a new Keyframe for the over state of the button symbol. The red playhead moves to the Over frame. The Properties panel (Window >> Properties) displays a Swap button. If you do NOT see the Swap button, click the Menu_btn symbol on the stage. Click the Swap button and select 12_Menu over.png. Click OK. Press F6 again to add a new Keyframe for the Down state. Click the Swap button and Select the 12_Menu down.png.png. Click OK. 11. Exit the button editor timeline by clicking the Scene 1 on the Edit bar. 12. Click in Frame 10 of the Labels layer and press F6 to insert a keyframe. In the Properties panel, click in the Name box and type Tolkien, this assigns the frame a label of Tolkien. 13. The complete frame should look like figure 12. 7

Figure 12. Completed screen Screen 4: Production 1. Click in the background layer of frame 15 and press F5. This extends the background images over to frame 15.

Open the Library (Window >> Library). Drag 11_VideoText.png to the top center of the Stage. Align it to the center of the Stage. Insert video 3.

8 Figure 12. Completed screen Screen 4: Production 1. Click in the background layer of frame 15 and press F5. This extends the background images over to frame 15. Again, we could place this frame next to frame 10 but for clarity we ll extend it to frame Click in the Content layer of frame 15 and press F7, which inserts a new Blank keyframe. Open the Library (Window >> Library). Drag 11_VideoText.png to the top center of the Stage. Align it to the center of the Stage. Insert video 3. Choose File >> Import >> Import to Library and browse to the 13_Video_LOR.flv video file. The Import video box appears. Make sure your Flash file has been saved. It is preferable to have the Flash file (.fla) in the same folder as the video file so the Flash file can link to the video. The video will be linked to the Flash file. If you move the video to another folder it will not play. 4. Click the Next button. The Skinning screen appears (see figure 13). You can choose a skin for your video controls. In this example the SkinUnderall.swf has been selected. Figure 13. Options for video 8

9 5. Click Next and then click the Finish button. Position the video object in the center of the stage. 6. Click on the video object on the Stage. Open the Component Inspector (Window >> Component Inspector). In the Component Inspector panel, change the AutoPlay option from True to False. This ensures that the video does not begin to play until the user clicks the play button. 7. Click in the Buttons layer of Frame 15 and press F5 to extend the Main Menu button to this frame. 8. Click in Frame 15 of the Labels layer and press F6 to insert a keyframe. In the Properties panel, click in the Name box and type Production, this assigns the frame a label of Production. 9. The completed screen should look like figure 14. Adding Actions Figure 14. Completed screen 1. If you run your program now (press CTRL+Enter), the screens flip by quickly. We need to add some Actionscript to control how the frames appear. 2. Click the Actions layer of Frame 1. Press F9 to open the Actions editor. In the assets folder, you will find a text file (ActionScripts.txt). Open it and copy the actions for Frame 1 and paste them into the Actions editor window (see figure 15). Figure 15. Screen 1 actions 9

$3. Below is the script for frame 1. /*Actions for FRAME 1*/ stop(); begin_btn.addeventlistener(mouseevent.click, gonext); function gonext(e:event):void{ } gotoandstop("menu"); 4.$

10 3. Below is the script for frame 1. /*Actions for FRAME 1*/ stop(); begin_btn.addeventlistener(mouseevent.click, gonext); function gonext(e:event):void{ } gotoandstop("menu"); 4. The first (/*Actions for FRAME 1*/) line is a comment. Anything between /* and */ does not execute. This is a useful way to make comments to yourself in ActionScript. 5. The second line stops the playhead on the frame. 6. The third line is an Event Listener. It tells flash to listen for a mouse click on an object with the instance name of begin_btn. Each object that is placed on the Stage from the Library is an instance of that object. In this case, the instance name is begin_btn. However, we have not given any object an instance name of begin_btn and if we ran the program now we d get a script error message. 7. Click on the Begin button on the Stage. In the Properties panel, type begin_btn in the box for <Instance Name>. It is case sensitive so you need to type begin_btn and not something like Begin_BTN. Now, Flash will listen for a mouse click on begin_btn. If the user clicks on begin_btn, then Flash will execute a Function name gonext. gonext sends the playhead to a frame title Menu. 8. Click the Actions layer of Frame 5. Press F6 to insert a new Keyframe. Press F9 to open the Actions editor. In the assets folder, open the ActionScripts.txt file, if it is not already open. Copy the actions for Frame 2 and paste them into the Actions editor window (see figure 16). Figure 16. Screen 2 actions 10

11 9. Below is the script for frame 2. /*Actions for FRAME 2*/ stop(); tolkien_btn.addeventlistener(mouseevent.click, gotolkien); production_btn.addeventlistener(mouseevent.click, goproduction); function gotolkien(mouseevent):void{ } gotoandstop("tolkien "); function goproduction(mouseevent):void{ } gotoandstop("production"); 10. This script is similar to the one in frame 1 except that is has two event listeners, one for tolkien_btn and another for production_btn. When clicked, these two buttons execute functions that take the user to either the Tolkien or Production frame. We need to give the buttons instance names. Click on the J.R.R. Tolkien button on the Stage. In the Properties panel give it an instance name of tolkien_btn. Repeat this for the Production button, assigning it the instance name of production_btn. 11. Click the Actions layer of Frame 10. Press F6 to insert a new Keyframe. Press F9 to open the Actions editor. In the assets folder, open the ActionScripts.txt file, if it is not already open. Copy the actions for Frame 3 and paste them into the Actions editor window (see figure 17). Figure 17. Screen 3 actions 12. This script listens for a mouse click on an instance named menu_btn and when it is clicked, the playhead moves to a frame title Menu. 13. Click the Main Menu button on the Stage. In the Properties panel give it an instance name of menu_btn. 14. Click the Actions layer of Frame 15. Press F6 to insert a new Keyframe. Press F9 to open the Actions editor. In the assets folder, open the ActionScripts.txt file, if it is not already open. Copy the actions for Frame 3 and paste them into the Actions editor window (see figure 18). 11

Figure 18. Screen 4 actions 15. This script listens for a mouse click on an instance named menu_btn and when it is clicked, the playhead moves to a frame title Menu. 16.

stop(); in the script stops the video if it is playing. This is useful because without the line the video will continue playing even when the user moves to another screen. 17.

12 Figure 18. Screen 4 actions 15. This script listens for a mouse click on an instance named menu_btn and when it is clicked, the playhead moves to a frame title Menu. 16. Give the video player an instance name of myvideo_flv. Click the video player on the Stage and in the Properties panel type myvideo_flv for the instance name. The line myvideo_flv.stop(); in the script stops the video if it is playing. This is useful because without the line the video will continue playing even when the user moves to another screen. 17. Test your program by pressing CTRL+Enter. Adding Animation 1. Select Insert >> New Symbol and the New Symbol box appears. Type a name in the Name box and then select Movie Clip as the symbol Type. Click OK. 2. The Symbol timeline appears. Open the Library and drag 02_MenuText_Circle.png onto the Stage area for the symbol. You will see a small plus (+) sign in the center of the Stage area. Place the symbol there (see figure 19). Figure 19. Screen 4 actions 3. On the Stage area of the Movie Clip symbol, right click on the text ring image (02_MenuText_Circle.png) and select Create Motion Tween. The Convert selection to symbol for tween box appears. Click OK. 4. The timeline for Layer 1 extends to frame 10. Move the playhead to frame 10. Click on the text ring image (02_MenuText_Circle.png) to select it. Select Window >> Transform to display the Transform panel. In the Transform panel, set the Rotate to 90 (see figure 20). The text ring image rotates 90 degrees. 12

Figure 20. Transform/Rotation 5. Add a new layer (layer 2). 6. Press the CTRL key and click frame 10 of Layer 1. By pressing CTRL and clicking on a frame, you can select a single frame.

13 Figure 20. Transform/Rotation 5. Add a new layer (layer 2). 6. Press the CTRL key and click frame 10 of Layer 1. By pressing CTRL and clicking on a frame, you can select a single frame. With frame 10 of Layer 1 selected, press CTRL+C to copy that frame. 7. Click in Frame 11 of Layer 2. Press F6 to insert a new keyframe and then select Edit >> Paste in Place to paste the frame you copied from Layer 1. This copies the 90 degree rotated image of the text ring. Alternatively, you could press CTRL+V to paste the frame you copied from Layer 1 but you would need to set the position of it to match the text ring image in Layer 1. If you pasted using CTRL+V, then click frame 11 in Layer 2 and then click on the text ring image to select it. In the Properties panel set the X and Y positions so they match the text ring image in Layer With the text ring image in Layer 2 selected, right click on it and select Create Motion Tween. 9. Click in Frame 20 of Layer 2 and press F6 to insert a new keyframe. Move the playhead to Frame 20. Open the Transform panel (Window >> Transform) and type 180 in Rotate to rotate the text ring image 180 degrees. 10. Add a new layer (Layer 3). 11. Press the CTRL key and click frame 20 of Layer 2 to select the single frame. With frame 20 of Layer 2 selected, press CTRL+C to copy the frame. 12. Click in Frame 21 of Layer 3. Press F6 to insert a new keyframe and then select Edit >> Paste in Place to paste the frame you copied from Layer 2. This copies the 180 degree rotated image of the text ring to Layer With the text ring image in frame 21 of Layer 3 selected, right click on it and select Create Motion Tween. 14. Click in Frame 30 of Layer 3 and press F6 to insert a new keyframe. Move the playhead to Frame 30. Open the Transform panel (Window >> Transform) and type 270 in Rotate to rotate the text ring image 270 degrees. 15. Add a new layer (Layer 4). 16. Press the CTRL key and click frame 30 of Layer 3 to select the single frame. With frame 30 of Layer 3 selected, press CTRL+C to copy the frame. 17. Click in Frame 31 of Layer 4. Press F6 to insert a new keyframe and then select Edit >> Paste in Place to paste the frame you copied from Layer 3. This copies the 270 degree rotated image of the text ring to Layer 3. 13

18. With the text ring image in frame 31 of Layer 3 selected, right click on it and select Create Motion Tween. 19. Click in Frame 40 of Layer 4 and press F6 to insert a new keyframe.

14 18. With the text ring image in frame 31 of Layer 3 selected, right click on it and select Create Motion Tween. 19. Click in Frame 40 of Layer 4 and press F6 to insert a new keyframe. Move the playhead to Frame 40. Open the Transform panel (Window >> Transform) and type 360 in Rotate to rotate the text ring image 360 degrees. 20. Click Scene 1 on the Editbar to return to the main timeline. 21. Go to frame 1 and click in the Content layer. 22. Open the Library and drag several instances of the Movie Clip symbol to the Stage. In this example the movie clip is named TitleAnimation. Two instances of it were placed in the Content layer (see figure 21). Be careful not to place an instance over the Begin button. Because Begin is located in the layer below Content, it will not be clickable if the animation is directly over it. Figure 21. Transform/Rotation 23. Click on one of the instances of the animation (TitleAnimation) to select it. In the Properties box, under Color Effects, choose Alpha for Style. Set the Alpha level to 35%. Repeat this for the other instances of the animation. 24. Test your program by pressing CTRL+Enter. 25. Publish your file. Each time your press CTRL+Enter and run your program, Flash creates a.swf file. You could embed this file in an html document. Flash also provides a set of options for Publishing. 26. Select File >> Publish Settings. On the Setting box chose Flash and HTML. Press Publish. Flash create an html document and a.swf file. It embeds the swf file in the web document. 14

-Remember to always hit Command + S every time you make a change to your project going forward.

-Remember to always hit Command + S every time you make a change to your project going forward. -Open Animate -Under Create New - Select ActionScript 3.0 -Choose Classic as the Design type located in the upper right corner -Animate workspace shows a toolbar, timeline, stage, and window tabs -From