Description: Students will build on the foundations of a constructing a simple Flash web site from the previous lab. By the end of this lab, students should be able to load assets, load text from simple text files, and nest .swf files, create simple navigational elements, integrate loaders, load external SWFs, add video, integrate programmatic tweens, optimization, and basic XML.
Your finished fla after part 1 should look similar to this
Create a new flash file > 550x400 > 12 fps
Once open, name your first timeline layer "labels".
On frame 15, create a new keyframe
On frame 27, create a new keyframe
On frame 35, insert a frame
On frame 15, in the properties panel, label it "page1"
On frame 27, in the properties panel, label it "page2"
Create a simple button in your library with the text "Page 1" on it and name it "page1button". In the library, duplicate this button (right click > duplicate), change the text to "Page 2" and save the symbol as "page2button".
Create two new layers: "button 1" and "button 2". Drag an instance of page1button to the first layer (instance name: btn1), and an instance of page2button to the second (instance name: btn2). Make sure they are off the stage. Make sure that you have created the instance names on frame 1.
Create new keyframes on frame 10 for both buttons and tween them onto the stage from frame 1 to 10.
Create a new layer and name it "actions". Insert a new keyframe on frame 10. Add this script to that frame:
Create a new movieclip in the library named "infoBox". Within the movieclip, create a textfield and add some text into it (anything will do, so long as it is visible).
On the main timeline, make a new layer and name it "info". Create a new keyframe on frame 15. Drag an instance of 'infoBox' to the stage on this keyframe, offstage.
Create a new keyframe for the infoBox on frame 24. Tween infoBox onto the stage between 15 and 24.
Add a new keyframe on the actions layer. Add the stop command on this frame.
Make a new MovieClip symbol in the library named "imageBox". Create two layers on imageBox, "actions" and "images".
In the actions layer, on the first frame, add the stop command.
Create keyframes on frames 1-3 on the images layer. On each frame, place one of the three images from the library. Be mindful of your registration point for each - if you want each image to load into the same spot (either top left or left middle would probably be good location for it on each image).
Make a new button in the library (this is the round button in the example below), call it "imageButton".
Make one last movieclip in the library, called "btnBox".
In btnBox, drag 3 intances of imageButton. Give them instance names of "b1", "b2", and "b3".
Return to the main timeline.
Create two layers : "buttons" and "images".
Add keyframes on frame 25 for each of these layers. On the buttons layer drag an instance of btnBox and on the images layer place an imageBox, both offscreen.
select the btnBox and name it "btns" in the properties panel.
Select the imageBox and name it "images" in the properties panel.
Make keyframes on frame 35 for each, and tween them onscreen.
Create another keyframe on 35 for the actions layer. Add this code on it:
Save a copy of the previous site you made and rename this version to Lab06part2.fla
Your finished fla after part 2 should look similar to this
Remove the buttons layer.
Delete the images 1-3 from the library.
Open up the infoBox movieclip. Select the textfield you created, and in the dropdown make it a dynamic text field. Name this textfield "info". Delete any text in the field. Give the infoBox movieclip on the stage an instance name of “iClip”
Return to the main timeline.
Create a new keyframe on frame 15 of the actions layer. Add this code to it:
In the same folder as the .fla, create a file named "info.txt", and add some text within it.
Open up the actions on frame 35. Leave only the stop command.
Enter the btnBox movieclip and delete all the buttons.
Enter the imageBox movieclip.
Delete the images layer.
Create new layers: "text", "buttons", "actions"
Add an instance of btnBox to the buttons layer.
Select the btnBox and name it "btns" in the property panel.
Add a keyframe on frame 10 for the buttons layer.
Select the btnbox on frame 1 of ther buttons layer. Set the alpha value of the box to 0%.
On the text layer, create a slim textfield and name it "txtName"
Insert a frame to the text layer at frame 10 to make the textfield available for the full 10 frames.
Add a keyframe to the actions layer at frame 10 and add the stop command.
On the first keyframe in the actions layer type this code (make sure there is not a stop command in the following code when you type it):
Right click on your image button in the library, select “properties”. Under Advanced > Under Linkage > Click “export for actionscript”. Name the class “nextb”.
Open up your finished file from part 2 and name it Lab06part3.fla.
Your finished fla after part 3 should look similar to this
Create a new flash file. Name it "imageBox.fla". Save it in the same folder as your lab 6 file and open it up.
Transfer the btnBox and nextb items from the lab 6 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 6 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 and select properties. Under linkage, select "export for actionscript".
Enter the actions window for the first frame on the actions layer and edit the code to look like this.
Open up the lab 6 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" label.
Add this code ( it can be modified from the code from imageBox.fla, if it saves you trouble ).
Save and test the file
Adding video
Create a new button similar to the page 1 and page 2 buttons currently in the lab 6 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 4 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 label. Add your three playback buttons and name them "stopBtn", "playBtn", and "pauseBtn".
Open up the Adobe Media 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 lab6 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.
Cleanup
In your lab 6 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.
Your finished fla after part 4 should look similar to this
Programmatic Tweens Programmed tweens are excellent not only for saving on file size, but also for handling all sorts of dynamic interactions where a reaction to an event may require an item on the screen to move in a number of unspecified directions.
These next steps will only cover a very basic use of tweens. Keep in mind that if you move on to advanced actionscripting, it may be helpful to look into more advanced methods of tweening, as Adobe's own tweening engine is quite slow
Open up your last file and rename it Lab06part4.fla
Clear all the frames after the first on the button layers
Optimization
Assuming your graphics have been optimized following the material covered in lecture, and that you are loading in external swfs in logical places, optimization is a simple matter of tweaking final export settings on the file. These next steps will show you how to optimized our current file
Some ways to cut down on other size problems are detailed in the lecture material. Pay attention to the settings applied to your images and sounds - these can have a huge effect on the final size of your file, and can usually be tweaked to smaller sizes without a huge loss in quality
Click file -> publish settings
In the window that pops up, click 'flash'
Under options, check 'Omit trace actions'. This will speed up any flash file that is tracing out information in large amounts.
Also click 'Protect from import' and specify a password beneath the options list.
Finally click 'generate size report'.
Publish the movie.
You will be presented with output detailing the size output on different frames. Pay special attention to where there are especially large numbers - these are the ones you will want to double-check and try to pair down the data contained in the frame
XML XML is a great way to pass data into flash. Thankfully, getting it into flash is just as easy as loading in an external file ( although some extra parsing is needed ), so here is an example of how to load in some XML info for your about page.
Download info.xml to the same folder as your lab 6 folder.
Open it up and change some of the values within the tags, so you understand the structure of the XML file.
Return to your lab 6 file.
Select the actions on the first frame of the page1 section.
