Adobe Flash CS3 Professional Component Cosmetology

CATEGORIES: Flash, Tutorials | Lee Brimelow | February 19, 2008

The video components in Flash have come a long way over the years, and now they come with a host of skins that are pretty nice from a design point of view. However, I’ve always preferred to create my own custom video player skins, and with Adobe Flash CS3 Professional, customizing components is easier than ever. In addition, Flash CS3 Professional comes with some new controls, such as full-screen viewing mode and closed-captioning. In this tutorial, we’ll create a nice, minimalistic skin that can contain any or all of the video controls that are supported in Flash. At the end of the tutorial, we’ll go over the complete set of available video controls.

STEP 1 Create an ActionScript 3.0 Project
In the Create New section of the Welcome screen, choose Flash File (ActionScript 3.0). We’ll use ActionScript 3 because we can take advantage of some of the new features of Flash Player 9, including the ability to make our video full screen with the click of a single button. But be aware that the SWF file you create won’t work in any previous versions of the Flash player. The current distribution of the Flash 9 player is growing rapidly and is nearing 85% of all Internet users, so it’s acceptable to begin publishing to it.

STEP 2 Import the Video File
Double-click “Layer 1” and rename it “video.” Choose File>Import>Import Video. Click Choose (PC: Browse), select a .mov file (ours is 320×180), click Open, and click Continue (PC: Next). From the Deployment window, choose Progressive Download from a Web Server (this keeps the resulting FLV file as an external file separate from our SWF file). Click Continue, choose Flash 8 – High Quality from the encoding presets menu, and click Continue again. Choose None from the Skin menu (we’ll be creating our own) click Continue, and click Finish. Choose Flash CS3 Document (*.fla) for Format and click Save to start the encoding process.

STEP 3 Create the Base Graphics
Lock the video layer and create a new layer below it called “base.” Choose the Rectangle Primitive tool (from the Rectangle tool’s flyout menu). Drag out a rectangle below the video. Set the Width to match your movie (320 pixels in our example) and the Height to 35 pixels. In the Color panel, remove the Stroke color and set the Fill to a dark gray to black linear gradient. Get the Gradient Transform tool (F), rotate the gradient 90˚ and scale it. With the Selection tool (V), drag a corner point to create a rounded rectangle. Hide the top rounded corners behind the video.

STEP 4 Stroke the Video
Now we’ll create a stroke that sits on top of the video so that it looks as if it’s part of the player. Click the Insert Layer icon to create a new layer, name it “stroke,” and drag it above the video layer. Get the Rectangle tool, Option-click (PC: Alt-click) on the Stage, and enter the same dimensions as your video in the Rectangle Settings dialog. Set the rectangle’s Stroke to black and remove the Fill. Position it over the video and then press Command-Return (PC: Ctrl-Enter) to test the movie and see the completed shell of the video player.

STEP 5 Create the Control Icons
Create a new layer above the stroke layer and name it “controls.” Now we need to create the icons that will serve as the visuals for our video controls. Zoom in on the base so that you can get a close view of what you’re creating. First create the Back (rewind) icon. You can create the icons from scratch using the drawing tools or you can use a font that contains the necessary glyphs; either way, the graphic for the Back icon should look like two triangles pointing to the left (as shown).

STEP 6 Create the Remaining Icons
Continue creating the graphics for the remaining controls. You’ll need to create a Play icon (a triangle pointing to the right), then a Pause icon (two rectangles sitting next to each other). The Play and Pause icons will actually be used together to create a Play/Pause toggle icon. Lastly, create an icon that will represent the full-screen video control: A simple approach is to create an arrow that points to the upper right (as shown at the far right of our example).

STEP 7 Add the Component Controls
Now that we’ve created our icons, we need to drag out the actual video controls from the Components panel. Open the Window>Components panel and twirl down the Video folder to reveal the video controls. Drag the following components to the Stage: BackButton, PlayPauseButton, and FullScreenButton. Position them somewhere on the black video component so that you can see them easily as you edit. We’ll be incorporating our custom icons into these controls.

Step 8 Skin the BackButton
Select and copy your custom Back icon. Control-click (PC: Right-click) on the BackButton and choose Edit in Place—you’ll see all of the button’s states. Control-click the Normal state on the left and choose Edit in Place. Select the icon in the middle of the Normal state and press Backspace to delete it. Paste your copied icon graphic on the Icon layer and center it on the button (note the icon’s position to use for the other states). Click on the button graphic behind your Back icon and set its Alpha to 0 in the Properties panel (in the Color pop-up menu).

STEP 9 Skin the Remaining Button States
Navigate up one level (click on “BackButton” in the Edit Bar) and select the second button: the Over state. Follow the same steps as for the Normal state but change the icon’s color (we chose orange). Position your custom icon at exactly the same location as you did for the Normal state. Repeat the same steps to skin the Down and Disabled states—we kept orange for the Down state and chose dark grey for the Disabled state. Now go back to the root stage (Scene 1), delete your custom Back icon, and position the BackButton at the left of the player.

STEP 10 Skin the Play/Pause Toggle
The steps for skinning the PlayPauseButton are nearly identical to the BackButton. Control-click (PC: Right-click) on the button, choose Edit in Place, and you’ll see two layers containing the play and pause buttons. Control-click on the play button and choose Edit in Place—you’ll see the four button states laid out like the BackButton. Follow the same steps to skin the Play button, then do the same to skin the Pause button (hide the play layer as needed). Now, go back to the root stage and delete your custom Play and Pause icons. Position the newly skinned PlayPauseButton and test it.

STEP 11 Skin the FullScreen Button
Copy your custom Full Screen icon, Control-click (PC: Right-click) on the FullScreenButton, and choose Edit in Place. Two buttons make up the FullScreenButton: one to go to full screen and one to return to normal size. As we won’t see our controls in full-screen mode, all we have to worry about is the FullScreenOn button, which is on the top layer. Skin it using the same method as we used on the other buttons. Leave the other button there—even though we won’t use it—and set its Alpha to 0 so we don’t have to see it while we design.

Step 12 Finishing Up
Position the video controls, making sure they all line up vertically by using the Align panel. Test the movie to see the finished skinned video player. Note: The full-screen functionality won’t work when you view it from within Flash. Go to your project folder and test the SWF file. Clicking on the FullScreenButton should scale your video to fit the screen. You’ll need to hit the Escape key to return to Normal mode.

The Video Controls

In this section, we’ll go over the other available video controls, all of which can be skinned using the techniques discussed above.

FLVPlayback is the primary video-player component. You can choose an existing skin or create your own.

FLVPlaybackCaptioning allows you to add closed-captioning information to your video player.

BackButton acts as a rewind or restart button for the video player.

BufferingBar contains a striped loading animation that will appear whenever your video buffer runs out—particularly useful when you’re streaming video using the Flash Media Server.

CaptionButton (toggle) allows you to turn the captions from the FLVPlaybackCaptioning on and off.

ForwardButton sends the play head to the end of the video—helpful when you have a playlist of videos and you want to see the next video in the list.

FullScreenButton (toggle) switches the video in and out of full-screen viewing mode.

MuteButton (toggle) turns the audio on or off.

PauseButton pauses the video if it’s currently playing and has no effect if it’s already paused.

PlayButton plays the video if it’s currently paused and has no effect if it’s already playing.

PlayPauseButton (toggle) plays the video if it’s paused and pauses the video if it’s playing.

SeekBar (also known as a scrubber) allows you to seek to any position in the video.

StopButton stops the video and sends the play head back to the beginning of the video.

VolumeBar provides a scrubber to lower and raise the audio from the video.

Back to Top

Get the latest tips, tricks and news delivered straight to your inbox.

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips