ActionScript3:Creating a button with an Embedded video
|Flash11 (CS5) | Flash10 (CS4) <|
|Table of contents|
By the end of this page you will be able to:
To complete this tutorial you will need the following:
- A short video in flv format.
- A screen shot of that video.
Create a new Actionscript 3 movie. Create a new Button symbol, calling it whatever you like. If you want to access the button from actionscript make sure that the ‘Export for ActionScript’ box is ticked. Rename the first layer background. Import your video screenshot graphic into the Up frame of the backgrounds layer and center it horizontally and vertically. Click the Over frame and create a new frame that covers both the Over and Down states. Your timeline should now look like the image below:
Go back to the main stage and create a new movie clip symbol. Now with the movie clip symbol open go to the Import Video Menu (File > Import > Import Video). Make sure the option ‘On your Computer’ is selected. Click the browse button and find the video (preferably a small one) selecting it and clicking Open. Back in the Import Video window select the option ‘Embed FLV in SWF and play in Timeline’. Click the next button.
In the combo box next to ‘Symbol type:’ the option ‘Embedded video’ should be selected. If it isn’t select it. Make sure that the ‘Place instance on stage’ and ‘Expand timeline if needed’ check boxes are ticked. The ‘Include audio’ check box does not need to be ticked. Click the Next button, and review the Finish Video Import screen to make sure that everything is as specified before clicking the Finish button. Exit out of the movie clip and go back to the main stage.
Go back into the button you created earlier and select the over frame. Drag the movieclip containing your video onto the stage aligning it vertically and horizontally. Your timeline should now look like the one in the graphic below. Now make sure that the graphic and the video are the same size, adjusting the graphic by making it bigger or smaller as needed.
Now we will create a darkened inactive state and a coloured state for the down state. Lock the backgrounds layer and create a new layer called tint. Select the Up state and create a new keyframe. With the up state selected draw a rectangle with no border and a fill colour of black and an alpha of 50%. Change the size of the rectangle to the width of the video/graphic but make the height bigger to allow a short button text to be placed below. Align the rectangle horizontally but move the rectangle down to align the top with the top of the video/graphic leaving the excess below. Create a new keyframe on the down state and draw another rectangle with a different fill colour (#660000 in my case) with an alpha of 50% and no border. Align this rectangle in the same way as the rectangle drawn for the Up state. Below is an example of what your timeline and button might look like.
Now we are going to create the button text. Lock the tint layer and create a new layer called text. Create a new text box, entering a short text for your button, changing the font size to so that the text will fit on the tint rectangle below your video/graphic. Now for a final touch we will change the text colour for the Up state so that it is a bit more readable. Click the Up state and create a new keyframe. Now change the colour to something that is a bit easier to read; as the rectangle on the Up state is black, I will change the text to white.
The completed Button
Below is a graphic showing how the three states of your completed button may look like. The Over and down state would have a video playing.