Intro | Part 1 | Part 2 | Part 3
For this part of my series on Flash and library instruction I am going to briefly walk through the steps to create a Powerpoint-like Flash movie. The reason I do this is twofold: 1) To show that Flash can be used to create any sort of presentation that traditional software can, and 2) Because the steps necessary to create a game, animated movie, etc… are too complex for most beginners. And that’s primarily who I’m dealing with here. That said, the important thing is to remember that it’s possible to do much more than I demonstrate below.
The example I’ve provided is broken into four steps. Step one involves importing multimedia into Flash for easy access. Step two creates the basic movie timeline structure. Step three creates our visuals, and finally step four adds some basic ActionScript and a button that lets us to move through our movie.
Step #1
• Step #1 File
After opening a Flash document you should be staring at a blank document. Really blank. To import all of your multimedia click “File“ » “Import” » “Import to library...” Select the images, video, and other multimedia that you would like to use. Once you do this you should notice that the list to your right becomes populated with the files you imported. For organizational purposes I’ve gone ahead and created a folder to store these files (within Flash), but the entire process isn’t necessary. Next, double-click on the text to “layer1” on the timeline and rename it to “main.” Finally, select the second cell (the one just to the right of the empty circle) and press “F6” until there are seven keyframes. They’ll differentiate your content later on.
Step #2
• Step #2 File
Our next couple of steps are fairly simple. We need to add another layer for our ActionScript and then we need to add some basic code, because it will keep each of our seven frames from playing continuously. So, click the “insert layer” icon under the timeline and rename it “actions.” Next, add some more keyframes to make our new layer identical to the one underneath it. Once you do this then you can right click on each of the cells and select “actions.”
Once there all you need to do is add the code that I spoke of earlier. Type in the following and you should be set:
stop();
Simple, eh? This ActionScript lets Flash know that the animation should stop.
Step #3
• Step #3 File
This portion is the most intuitive of them all. We have already imported our artwork, added our keyframes, and the bulk of what is left to do is add our content. At the risk of glossing the process over all that needs to be done is for the presentation to be made as you want. This can be done by dragging the appropriate files from the list to your right and adding text. In my case I used the text from Wikipedia’s article on the Dewey Decimal system to save time. Once everything looks the way you want then we are ready for our next and final step. Just remember… all text and content needs to be placed in the appropriate sequential frame.
Step #4
• Step #4 File
At this point our movie looks good but it doesn’t “work.” We need to be able to navigate! Setting this up is a twofold process, and can be a little confusing, but if you bear with me everything will work in no time!
First, create some text in the lower right hand corner and type in “next.” Afterward, right click on the new text and click “convert to symbol” and then select “button.” This will transform our text to a button. When you name the button make sure to add “_btn” at the end as well. Once done you should see an icon in the library to your right and you’ll know that the new item is created.
What needs done now is to go ahead and right click on the new icon to your right and to select “edit.” In the window that pops up you should see a new timeline that reads “up,” “over,” “down,” and “hit.” Add two keyframes to the over and down cells and then select them to change the text color. The color doesn’t matter, but once it is changed the button should be set to where a transformation occures whenever the user clicks or hovers the button. Nifty! All that’s left to do is to go ahead and drag your new button from the library to each frame.
At this point we have two things to do. First, we need to name each instance of the button. I would suggest going to each frame, selecting the button, and then where it says “instance name” under “properties” name it “next_x_btn.” Change “x” to the appropriate frame number. Make sure each button has a unique name as well. Then, as you did with the previous ActionScript add the following code to each frame. Just take care to update the relative information.
next_1_btn.onRelease = function() {
gotoAndPlay(2);
};
The “next_1_btn” refers directly to the button that is clicked. Remember when we named them? This is why. The “.onRelease = function()” triggers the event after the button is clicked as well, and the “gotoAndPlay(2)” tells Flash to go to and play the numerical frame provided. After adding all of this then your new Flash movie should flow seamlessly! If not, don’t worry, because I’ve provided an example below to double-check your work. Here’s the final product!
