Lab 09: Simple Site - Pt II

Assigned: October 21st, 2009

Due: October 21st, 2009

Description:

Students will build on the foundations of a constructing a simple Flash web site from the previous lab. By following the directions below...students should be able to integrate loaders, load external SWFs, and add video.

[ 9-1 ] External swfs and preloaders

• Open up your finished file from part 2 of lab 8. Name it xxx_Lab9_1.fla, with the xxx being your initials.
• Create a new flash file. Name it "imageBox.fla". Save it in the same folder as your lab 8 file and open it up.
• Transfer the btnBox and nextb items from the lab 8 flash file to the imageBox file. ( One way to do this is to open up two library windows using the blue two-windows-and-an-arrow button in the upper right hand corner of the library window, then drag the items from one library to the other. )
• Go into the image box clip in the lab 8 library, and copy all of the frames contained within.
• Paste these frames into the main timeline of the new imageBox file.
• Create a new loading bar the same way you did in lab 3 named "loadingClip" in the library. For the actual loading bar within loadingClip, name it "lbar" in the properties panel.
• Rightclick on loadingClip andn select "linkage". Select "export for actionscript".
• Enter actions window for the first frame on the actions layer and edit the code to look like this.
• Open up the lab 8 file again. Make sure imageBox, btnBox, and nextb are deleted from the libary. Also delete the images layer.
• Create a keyframe on the actions layer on the same frame as the "page 2" flag.
• Add this code ( it can be modified from the code from imageBox.fla, if it saves you trouble ).
• Save and test the file.

[ 9-2 ] Adding video

• Create a new button similar to the page 1 and page 2 buttons currently in the lab 8 file. Name it "btn3" in the properties panel.
• Make a page3 flag after the page2 stuff. Add a keyframe for the actions layer beneath it, and add frames for the buttons so they appear on this frame as well.
• Make 3 buttons for the eventual movie: a play button, pause button, and stop button.
• Create a new layer named "playback buttons" and add a keyframe beneath the page3 flag. Add yoru three playback buttons and name them "stopBtn", "playBtn", and "pauseBtn".
• Open up the flash video encoder. ( It will be in the same windows start folder as flash )
• Download this file and add it to the video queue. Click "start cue". This will take some time, but it will transfer the video file into a .flv format, one that flash can use. ( The video encoder can do a lot more. If you're into video, play around with it some more ).
• Make sure the video.flv file is in the same folder as your lab8 file.
• Open up the actions panel for the frame beneath the "page3" flag, and add this code.
• Save the file. This video format can be done in a similar way to how you created the imageBox clip to allow you to load several different movies.

[ 9-3 ] Cleanup

• In your lab 8 file go to the actions frame that has the code for your page buttons. Change the code to look like this.
• Save and test the file. Your movie should be working, and when you click on another page button, nothing from the current page should be left over.