This past week I needed to create a Flash movie to play a short intro animation with text fading in and out and sliding across the screen and then have a play button for a short video clip within the flash movie. You can see the end result below, and if you've missed the sliding/fading part just right click anywhere in the flash movie (except on the video icon) and choose rewind, the right click and choose play. For your convenience (and since this is a complicated tutorial) I have attached the raw .fla file of the Flash movie you see below at the bottom of this tutorial so you can experiment and trouble shoote any problems you might run into.

What I found out is that in order to produce this video I had to change the settings in my version of Flash to Action Script 2.0 by going to File > Publish Settings > ActionScript Version 2.0 so make sure you've done that if you want to use the code I've posted below.

To start out with I adjusted the size of my canvas by going to Modify > Document. I always do this when I'm first starting out with Flash because for some reason Flash always crops from the bottom and right side so you can really end up in trouble if you have to crop from the left side or top at the end of your project (if anyone knows how to crop from the top or left please leave a comment below).

Once the canvas size was right I used the rectangle shape tool on the tool bar to draw the borders of the movie. Then I added some text and adjusted it's color and position. Before I started adding frames and keyframes I right clicked on the text and chose Convert to Symbol because I knew I wanted to do animatios and fades with the text. Under the Convert menu I chose convert to movie clip because neither piece of text was going to be a button, but it still needed to be a symbol to do tweening.

Once the two text items in my movie were converted to symbols I added frame to my movie up in the timeline by right clicking and choosing the appropriate topics in the menu. Ultimately I positioned the title text on the right hand side of the canvas in it's first keyframe and then used the properties toolbar to adjust the color > alpha settings to make the alpha zero (which made the text invisible). Converseley, the final keyframe of the title text had alpha at 100% and was positioned on the left side. Once these adjustments were made I right clicked the frame between the two and chose Create Motion Tween. The effect created is that the text fades in as it slides across the screen from the right to the left. Similar alpha tweening was done on the second set of text but in this case no motion tweening was done.

The next step in this project was adding a video player within the flash movie including a play button with rollover effect. For the button I used my mac screenshot tool to take a picture of my video (outside of flash) while playing in quicktime. I imported the screenshot to Flash and then converted it to a symbol but this time I chose to convert it to a button... Once done, I double clicked the image which brought me to the button timeline, this area has four keyframe slots in the timeline that allow for up, over, down, and hit status to allow for image minipulation. For the over down and hit statuses I chose to add a small play icon to the button and also adjust the alpha so that when users hover over it in the Flash video they notice that the area is interactive.

Now the really challenging part, importing video into Flash to be played in the flash movie itself. To do this I had to choose File > Import > Import Video... and then choose Embed video in SWF and play in timeline. This choice is very important if you want to be able to play a video within your flash using a play button later in the movie. The other option (Progressive download from a web server) is for when you want to make a flash file that is simply meant to play a video and do nothing else. Flash does give a warning that "Embeded deployment is likely to cause audio synchronization issues" but that wasn't really a problem with my short clip.

When importing video you get to choose the dimmensions but I found that it sort of just spit out an approximation, thankfully I was able to manually adjust the size of the video later on my own and then position it in the next frame after the button. Since the type of importing we chose was embeded video in timeline you will see a long batch of frames for the video and you should be able to actually see the video play if you scroll through the timeline. Now all you need is the code to tell the flash video to stop at the frame where your button is, then play the subsequent frames when the button is pressed, then stop after it has played and restore the button. I've created a short explanation of that below:

intro flash animation> stop at button/press to play> movie> stop at second button/press to play

The commands are as follows, note that the # should be replaced with the frame number where your video is meant to pick up once a user presses the button. Also, you will use this code twice in your flash, once at the first play button, and once at the "replay" button at the end of the video sequence.

stop();

on (release) {
gotoAndPlay(#);
}

To implement this code, right click the keyframe that you are using for your "play movie" button and then choose Actions. In the actions box type the code "stop();" then, on the button itself in the regular scene (not the timeline or keyframe and not the button area with the four keyframes) right click the button graphic and choose Actions from the drop down menu. Here add the "on (release)..." code shown above and for the gotoAndPlay(#) insert the frame number you want to begin playing once the button is clicked. Once this is done add another button at the end of the play section ad do the same stop/goto steps we just covered, this way your flash won't replay from the beginning including the intro flash animation, instead it will allow the user to replay just the video sequence.

I guess it's all kind of complicated, the real value here is the Action Script 2.0 tip and the Actions tip about adding stop to the keyframe and the goto Action code to the button itself. Below is a simplified video of what we just discussed. In it the user creates a play button, a short sequence (which is like the movie we imported) and then ends with another play button.