Let’s get started by creating a new .FLA file.

First thing to do is to set up our layers. We will need one layer named “actions” that will hold all of our script and another that will have our video players on it, so we will name it “player”.

The size of the stage and any video players that you will use should depend on your personal project’s specs. For this tutorial, the video I will be delivering is 320×240, so I will set my stage to 320×300 just to have a little extra room at the bottom of the stage and make space for the FLVPlayback component’s controls.
Create a new folder on your desktop, name it anything you like, and save your .fla document to this new folder.

Next thing we will do is set up a local file structure. Usually this would be on a remote server, but for this tutorial we will be testing right off of our own desktop machine. The folder I just created will contain my working .fla document (for tutorial purposes), a .swf file, html file, and the FLV Playback player’s skin .swf. Also, inside of that folder I will create another folder labeled “video”, and in this folder I will keep the .flv video file that I will be delivering, which is named “psworld.flv”.

The scripting that is used to make this work, while very similar, differs slightly between the FLVPlayback Component and the MediaDisplay Component. I will show you how to set the FLVPlayer first, followed by the MediaDisplay.

FLVPlayback Component.

Step 1

Open the Components window, Window>Components (Ctl+F7), under FLV PLayback – Player 8, click-and-drag the FLVPlayback component onto the stage in frame 1 of the “player” layer.

Step 2

Now, what we would usually do here to set a video path would be to open the Component Inspector (Window>Component Inspector or Alt+F7), and enter the path to our video right where it says “contentPath” , as shown below. The path from my .swf file to the video would be “video/psworld.flv”. With this path set, when you test the movie (Ctl+Enter), you should see the video play.

The video I am using for demonstration purposes is courtesy of Photoshop World. It's a really awesome educational event for creative professionals, and I highly recommend it if you ever get a chance to go...anyway, back to the tutorial at hand...

This method of setting the content path works fine but does not allow for much flexibility in terms of updatability or dynamics. If I needed to change this .swf in anyway, say, to change the path of the video, or put in a new video, anything at all, I would have to find my original working .fla document (if you even can), open it up, change whatever I need to change, render out a new .swf, upload that .swf and possibly have to open the html document delivering that swf and change it too. As a web developer, we try to keep things as flexible and easy to update as possible, and that just doesn't cut it.

Instead we will use Actionscript to set the path of the video and pass a variable from html to the .swf telling it where to pull the video from. This allows me to just open that one html file, make my change and I’m done. This results in much less hassle than the other method and also conserves server disk space by using only one .swf to deliver multiple videos.

Step 3

Open the Component Inspector (Window>Component Inspector or Alt+F7), and delete the path from the "contentPath" field. Now, with the FLVPlayback component selected on the stage, give it an instance name of "player" in the Properties Inspector so that we may refer to it by this name in the Actionscript.

Step 4

Now we will set up our Actionscript.
Select the blank keyframe in frame 1 of the actions layer, and open the Actions window (Window>Actions or F9).

Insert this code:

stop();
var passed:String = video;
player.contentPath= video;

Line 1 is a stop function telling the play head to remain on this frame, since it’s the only frame of the movie, its not REALLY necessary...

Next, we define the variable we will use to set the path to our video. In this case, I am going to call the variable "video". Now, "var passed: string" is saying that the variable we will be creating is a string, or succession of letters and numbers, such as the word video is, and we set that equal to the word "video". Video, in this instance, could be called anything... waffles, tacos, anything... since we are setting a video, video is appropriate.

The next line sets the FLVPlayback component's (which we named "player" in the component spector) contentPath to equal the variable video, which we will set with our html code.

Step 5

Last thing left to do is to set the variable in the html. Go to File>Publish Preview>HTML. This will create a html file in the same folder that contains your other project files. As of right now, if you preview this file, you will notice it's not working. This is because we have not set the variable in our code yet. Open this newly-created html file with Dreamweaver or your other favorite code-editing program.

In my case, I have named my working .fla file "passvariables", so my .swf file and my html file both share this name. Yours will be dependant on what you named your file originally.

In the html code, you will see where it references the .swf file in 2 places.

To define and pass the "video" variable we created, we will add this onto the end of the .swf path:
?video=video/psworld.flv

which will result in the full path to the .swf being:
passvariables.swf?video=video/psworld.flv

We are defining video as the path "video/psworld.flv". So, inside the .swf file, where we referenced “video” in the code, that video variable is replaced with "video/psworld.flv".

Save your html file, and then open it with your favorite browser. The video should now be playing.
The best part is, if we ever need to change the video that is being delivered, all we have to do is edit this single html file.

You can accomplish the same thing using the MediaDisplay Component, however the action scripting varies slightly.

MediaDisplay Component

Delete the FLVPlayback Component off of the stage, open the Components window (Window>Components or Ctl+F7) and drag out the MediaDisplay Component onto the stage. With it selected, give it the instance name "player" in the Properties inspector. By using the same instance name as before, we will only have to alter our action script slightly.

Select the first frame of your actions layer, where you have place all of your code thus far, and open the Actions window. The only thing we will need to change here is the very last line of code.

We will replace this:
player.contentPath= video;

With this:
player.setMedia(video);

Export the new .swf, and simply hit Refresh on your browser. The same video will now play through the MediaDisplay Component.

That does it for this tutorial; hopefully it will save you some valuable time.

Sure! I set up a Crop Area in Illustrator with just the favorite logo centered in the Crops. (Select preferred logo with Selection tool, drag Ruler Guides to the center Bounding Box points horizontally and vertically to find the logo’s center. Draw a Rectangle from this center outward by click-dragging using the Rectangle tool with the Option (Alt) key pressed. With the Rectangle still selected, go to Object > Crop Area > Make and Save the file. When bringing the logo into InDesign (File > Place), check Show Import Options and in the window that opens in the General Options section choose Crop in the Crop To section. InDesign will place ONLY the part of the Illustrator file within the Crop Area, ignoring all of the alternate versions as if they don’t exist. So when I go to Object > Fitting > Center Content, it works perfectly to center my preferred logo.

Tip provided by Jeff Witchel, Certified Adobe® Training Provider.

One of the most effective ways of adding interactivity to your flash website or interface is to have animated button rollovers, also known as "complex buttons".  A complex button has the same up, over and down state that your standard "simple button" would have, but allows you to join the different states with animation.

There are a few different ways to achieve this same effect within Flash. I’m going to show you my personal favorite. I prefer this technique because it allows the flexibility of having one animation from the "up" to the "over" state and a different animation going backwards from the "over" to "up" state if you wish.

STEP 1: Prepare Flash Document

First, I’m going to set up my Flash document. The button that I created in Photoshop will require a 170 x 50 stage, and I will set my frame rate to 30 frames per second.

STEP 2: Create Movie Clip Container

Next, we are going to create a movie clip that will contain the assembly of our button. Go to Insert > New Symbol… (Ctl+F8) to create the container clip. In the Create New Symbol dialog, select Movie Clip and give it the name "mc_aboutContainer". I am assuming this button will be my "About" link, hence the name.

STEP 3: Create Button

Rename Layer 1, "BG", as it will contain our button graphic. Now, in the first frame of the BG layer, either create a background for your button or Import one you’ve already made in Photoshop. This should be just the background of the button, no text. If you plan on animating anything about this background (color, transparency, etc.) you should convert it to a movie clip as well. To convert your button background to a movie clip, select it and hit F8 or Modify > Convert to Symbol. Select movie clip, and name it "mc_aboutButton".

STEP 4: Create Button Label

Next, we will create the text that will be on our button. Create a new layer and name it "Label". In the first frame of this new layer use the Text tool to add text to your button. Mine will say ABOUT since this is the link to my "about us" page. If you plan on animating the text (I do), convert it to a Movie clip by selecting the newly-created text and hitting F8 (Modify > Convert to Symbol), select Movie Clip and name it "mc_about".

STEP 5: Set Up Frame Labels

Now we are going to set up a layer that contains frame labels. You can use these labels as cue points and to give direction to the play head.

Create a new layer and name it "Frame Labels" . In the 2nd frame insert a blank keyframe (Insert > Timeline > Blank Keyframe or right-click on the frame itself and select Insert Blank Keyframe). With the blank keyframe in frame 2 selected, go to the Properties Inspector window and where it says FRAME enter "s1" in the box. Do the same thing in frame 11, but name this one "s2". You should now see these frame labels displayed in your Timeline window. Now select frame 20, right-click and select Insert Frame. I am planning on having a 20-frame animation and this will signify the end of it. So "s1" should extend from frame 2 to frame 10 and "s2" should be from frame 11 to 20, as shown below.

STEP 6: Actions Layer

Create a new layer above your Frame Labels layer and name it "Actions". In the first frame, open the script window (F9) and add a stop; stop(); or (ESC+S+T). Now add another stop function to frame 10. The Actions layer layout and the Frame Labels layer layout should look like this:

STEP 7: Create a Hit Area

Now we will need to create a hit area for the button which will also contain the scripting that will make our button animation work.

Create a new layer, name it "Hit Area". Select the first frame of this new layer, then select your Rectangle Tool from the tool bar and draw out a rectangle over the top of the button. This represents the clickable area of the button. Select frame 20 of the HIT AREA layer, right-click and choose Insert Frame to extend the hit area out to frame 20, the duration of our animation. Select the rectangle, hit F8 (Modify > Convert to Symbol) to convert it to a Symbol. In the dialog that appears, select Button and name it "btn_aboutHitArea".

Now double-click your hit area button to enter its Editing Mode. Drag the keyframe that is under the "UP" label to under the "HIT" label, thus defining the hit area. (Note: This is also the place you would add sounds to the Up, Over, Down or Hit states by adding blank keyframes and attaching the sounds to them; however, this process is not covered in this tutorial.)

STEP 8: Scripting

Now we will add script to our button. With nothing else selected on the Stage, click the hit area of the button one time to select it. Hit F9 to open the Script window and place the following code:

on (rollOver, dragOver) {
gotoAndPlay("s1");
}
on (rollOut, dragOut) {
gotoAndPlay("s2");
}
on (release) {
getURL("index.php")
}


This tells the play head that when the hit area is rolled over – go to frame label "s1" and play. When the mouse is taken away, (rollout) – go to frame label "s2" and play. When the button is hit on (release) – proceed to index.php. This example assumes that the button will be controlling a web page navigation. If you were using this button to control the play head inside of a .FLA doc, you would replace the getURL with a gotoAndPlay (frame number or label), or whatever your desired function for clicking the button would be.

STEP 9: Animating

Now that our button is assembled and coded properly, we must create the animation for the rollover and rollout effects.

Hide the hit area that is covering the button so you can work on the other elements freely. Hold Alt + click-and-drag the first frame of your button’s background layer to frame 10, so that it lines up beneath the 2nd stop in the Actions layer. We are going to make the button appear to change colors when it is rolled over. When the button is rolled over, the play head will play this first animation ("s1") and the play head will stop on frame 10 because of the stop function we placed in the actions layer. It will remain there until the button is either rolled out or clicked. Hence, Frame 10 would then be considered your "Up" state.

To change the color of the button, I selected the button background in frame 10, went down to TINT in the properties inspector, and changed it to a darker color.

Now, go back to frame 1 of the button’s background layer and hold Alt + click-and-drag a copy of frame 1 to frame 20. This will give the effect of the button changing to a darker color on rollover and then returning back to its original color on rollout. Right-click on the first frame and select Create Motion Tween. This will now make it fade between the colors. Do the same on frame 10: select it, right-click, and select Create Motion Tween.

If you choose to do so, you may apply the same sort of effect to the button’s text. I changed the color of my text and the position for the "Up" state, as shown in the diagram below. This diagram also illustrates the frame layout you should have so far.

You have now successfully created a functional "complex" button and if you wanted, you could leave it at this step. I will take it just a bit further to illustrate why I prefer this technique over others. The reason is that this technique gives you the ability to have 2 separate animations for rollover and roll out.

STEP 10: Going Further: Adding an Additional Design Element

Create a new layer and name it "Star". On the 10th frame or your "up state" of this new layer, right-click and choose Insert Blank Keyframe. Select the PolyStar Tool from the tool bar (shares the same spot as the Rectangle Tool) and hit the Options button in the Properties Inspector window. In the Tool Settings dialog that appears, set Style to star, Number of Sides to 5, and Star Point Size to 0.50. Drag out the star on your button and position it how you would like it to appear when the button is in its "up" state.

With the newly-created star selected, hit F8 to open the Convert to Symbol window. You may give the star a name of whatever you’d like. It is important to convert it to a movie clip so that you can apply effects to it. Now hold down Alt + click-and-drag a copy of frame 10 to frame 1. Manipulate the star in someway so that it looks different in frame 1 than in frame 10. I lowered the opacity on mine and shrunk it so it will appear to have the effect of "popping up" when the button is rolled over. Now, hold Alt + click-and-drag a copy of frame 1 to frame 20. Right-click frame 1 and choose Create Motion Tween. Now go to frame 10, create a Motion Tween, go down the Properties Inspector and this time, set Rotate to CCW (counter clockwise) and set the Times to 3. This will give the effect of the star fading in and getting bigger on rollover. Then on rollout, the star will rotate and disappear. Being able to have 2 separate animations on roll over and rollout adds an extra bit of customization that is nice to include and is very useful at times.

That concludes this tutorial. You are now ready to export your movie and bask in your button’s animated glory

Rollover the button below to see it in action!

But how do you apply this Scribble Effect to just a Stroke or a Fill of the object? Ah! That’s where the Appearance palette comes in. It’s kind of like the “Layers” palette of Effects in that it shows all Effects that have been applied to a selected object and in what order. It also allows you to choose what part of the object (Fill or Stroke) to which an Effect will be applied. To apply an Effect, such as a Scribble, to just the Stroke of a selected object, simply click on the Stroke listing in the Appearance palette and apply the effect in the Effects menu. After the effect is applied, it is listed in the Appearance palette, under the Stroke listing, so you can alter it at anytime simply by double-clicking on the Effect listing.

Tip provided by Jeff Witchel, Certified Adobe® Training Provider.

This tutorial will show you how to make a simple, yet effective, slideshow-type image gallery using Flash with minimal scripting.

This is great for displaying your portfolio online, sharing personal photos, or for anywhere else you may need an image gallery or slideshow. What is important for you to take away from this tutorial is the theory and script behind making this slideshow work so you can apply it in your own situations. My example will be a pretty simple layout but the techniques can be applied to something much more involved.

STEP 1: Prepare Flash Document

As usual, the first thing to do is set up the .FLA document. My settings for this one are 530 x 540 at 30 frames per second. It’s not very important that you adhear to these settings as they should reflect your specific needs.

STEP 2: Create Background.

Rename layer 1 to “background”. In the first frame of this background layer create a background or "container" for the slideshow. You can either make something in Flash or import a background if you already have one made in Photoshop. After you are done creating your background or "container", lock the layer so you can’t select it by accident.

STEP 3: Import Assets

Assuming you have already prepared all of your images that are to be in this gallery, it is time to import them. Go to File > Import to Library, find the files you will be using in this project (images and graphical assets alike) and click Open. The assets you selected should now appear in your Library window (PC: Ctl+L, Apple: Command+L).

STEP 4: Laying Out Gallery

Create a new layer and name it “content”. This will hold our images. Drag the first image you want displayed in your gallery to the stage and position it. Select it, hit F8 to Convert to Symbol, name it “mc_content”, hit OK. In the Properties Inspector window give it the instance name “mc_content” as well.

Double-click your new mc_content movie clip to enter editing mode. Rename layer 1, the layer currently holding your image, to "images". This will hold all your images that are to be displayed in the slideshow. Also, I’m going to add a small content area to explain the images. Create a new layer, name it “textbg”. In the first frame of this new layer, I am going to drag out a pre-made text background from my library. I tend to separate my elements as much as possible before bringing them into Flash which allows me the flexibility to animate each element separately if I want to.

Now, create a layer, name it "text". This will hold our descriptions of each image. On the first frame of this new layer, take the Text tool and type out a description of your image and any other information you want displayed with that image.

STEP 5: Adding Content

Now we will put the rest of our images and descriptions in place. Since we have the layout set up, all we are going to do is swap images and text in each frame. To save some time, instead of doing each new image from scratch, I am going to select all 3 frames on all 3 layers by shift-clicking. Then I will hold ALT and click-and-drag copies of the keyframes on to frame 2. Now you should have the same 3 keyframes in frame 1 and 2.

Now, on frame 2 select your image that is displayed (currently the same image as in frame 1), right-click on it and go down to "Swap Bitmap.." (or in Properties Inspector click the "Swap.." button). A dialog will open allowing you to select an image to swap out the current one with. This allows you to keep the exact same positioning (granted your images are the same size) and easily swap out each image with just a few clicks. Select the image you want to be next in your portfolio and hit OK. You should see that your image has swapped. Now select the text on this 2nd keyframe and change it to match your new image. That’s all you have to do for each new image. Duplicate the 3 previous frames, swap the image for the next one in line, replace the text to match and that’s it. Do this until you have all the images with their descriptions in place.

Finally, create a new layer, name it “actions”, select the first frame, and hit F9 to open the scripting window. Add a stop(); to the window (Shortcut: Escape key then S then T).

STEP 6: Add Controls

Go back to the root timeline by clicking the back arrow located up where the file name is displayed. Create a new layer on the root timeline, name it "controls". In frame 1 on the controls layer, drag out pre-made Next and Back buttons from your library that you have made in Photoshop, or create them from scratch using the drawing tools inside of Flash.

Position them and then select the button that will act as your Back button. Hit F8 to Convert to Symbol, select button, then name it “last_btn”. Also, give it an instance name of “last_btn” in the Properties Inspector window.

Double-click the new button to enter editing mode. If you would like, you can give it a simple rollover effect like you would any button. This is also the place where you would add sound effects for rollover or click, however both are optional. What is most important is to give it a decent sized hit area. Do this by dragging a duplicate of the key frame in the UP position to the HIT position by Alt + clicking-and-dragging. Now, with the Hit key frame selected, draw a hit area over the arrow with the rectangle drawing tool.

Follow the same process for the next button. Name the movie clip “next_btn” and give it an instance name of the same in the Properties Inspector window.

STEP 7: Scripting

Now it’s time to add the script that will make this slideshow work. On the root timeline create a new layer, name it "actions". Select the first keyframe of this layer and hit F9 to open the scripting window. Insert this code:


stop();
//next button
next_btn.onPress=function(){
if(mc_content._currentframe==mc_content._totalframes){
mc_content.gotoAndStop(1)
}else{
mc_content.nextFrame()
}
}

//last button
last_btn.onPress=function(){
if(mc_content._currentframe==1){
mc_content.gotoAndStop(mc_content._totalframes)
}else{
mc_content.prevFrame()
}
}


The script is saying that when the Next button is pressed, if the current frame that the play head is on equals the total number of frames present in mc_content, then return the play head to frame 1 of mc_content. This will make it appear to loop. Else, if the play head is not on the total number of frames, then it will go on to the next. The Last button is essentially the same, but in reverse. It says if the current frame is frame 1 then go back to the last frame. If it’s not (else) on frame 1, go back 1 frame.

STEP 8: Finishing Touches

One thing you will definitely need is the ability to launch a bigger version of your image or a link to a website if it’s a gallery of web work. Double-click your content_mc movie clip to enter editing mode. I’m going to create a new layer underneath the Actions layer and name it "launch". I am going to use the Text tool to create what will be a button for launching a higher res image. When finished with the type, select it, hit F8 to Convert to Symbol, select button, name it launch_btn and give it an instance name of the same in the Properties Inspector window. As with the arrows, you can give this button a simple rollover, sounds, and most importantly, a hit area if you wish.

Go to your Actions layer and insert this code underneath the stop that that is already there:

launch_btn.onRelease=function(){
getURL("http://www.yourwebsite.com/images/image.jpg","_blank");
};

The path should be to where your larger version of the image lives on the internet. You can repeat this process for each image that needs to be able to launch in a new window.

That should do it. Now export your movie and check it out. The Next and Back buttons should scroll through the images seemlessly and your Launch button should launch your higher res version in a new browser window, depending of course, on the fact that you put the correct path in the getURL function.

Click the Next or Back button below to see the gallery slideshow in action!

Create your own custom flash video player (complete with controls) for times when the stock players won’t cut it.

The stock video players and skins inside of Flash look and work great, but at sometime in your designing journey, you may run into a situation where they just do not fit your needs for a particular situation or project. Perhaps you have a web page that has a certain look and the stock flash player doesn’t match it. Or maybe you just want to have a more organic, custom looking player. In this tutorial I will show you the process of making your own custom flash video player with play and pause controls, and a scrub bar. What you should take away from this tutorial is the theory and the scripting behind making this work.

STEP 1: Prepare the Video

The first step is to prepare the video to be displayed by converting it to FLV format. Open up the Flash 8 Video Encoder application and drag the movie file you want to convert into the Queue window, then click Settings.

Note: QuickTime Pro also supports exporting files to .flv format.

These settings should be set to fit your own personal needs. I will be converting my video from a QuickTime.mov file and will set the settings as if I were going to post it for viewing on the web. Again, feel free to use your own settings as your needs may differ.

After the video has been converted to .flv, we will need to set up a folder structure. Create a new folder on your desktop and name it whatever you’d like. Inside that new folder, create another folder and name it "video". Drag your shiny new .flv file into this folder and rename the file itself "video.flv" after it is placed.
So, now the file structure for your new video should be YourNewFolder > video > video.flv.

Note: The above graphic also shows the placement of your new FLA document you will be creating in a future step.

STEP 2: Prepare Assets

You may choose to create your graphical assets inside of Flash or use another program such as Photoshop or Illustrator to create them and then import them into Flash. For the sake of time, instead of creating my assets by hand, I grabbed a vector TV graphic from iStockPhoto.com. I then added a play and pause button, and a scrub bar; all on their own layers inside of Photoshop. Next, using whatever method you like best, export each element separately. I prefer working with .pngs to preserve transparency but again, do what works for you.

STEP 3: Prepare Flash Document

Create a new flash document and name it whatever you prefer. Place it on the root of the new folder you created in Step 1, but outside of the video file. (Refer to the 3rd graphic of Step 1 for an image of the structure you’re going for.)

My personal settings for my new Flash doc are 457 x 468 (the size of the background image I want to use)  and the frame rate is set to 30fps. Again, your needs may differ.

STEP 4: Import Assets

If you created your graphical elements outside of Flash, now is the time to import them. If however, you plan on making them inside of Flash, you may skip this importing step.

Go to File > Import to Library. Locate and select the elements you want to import and select Import. They will now be visible in your Library.
Command+L  (PC: Ctl+L) to open and close library window.

After importing my assets, I am going to drag my background image onto the first frame in Layer 1, position it, then rename the layer "background" and lock the layer so I can’t select it by accident.

STEP 5: Set up the MediaDisplay Component

Create a new layer to hold the MediaDisplay Component and name it what you’d like. I’ve named mine "screen".  Open the Components window, Window > Components or Command + F7 (PC: Control + F7). Under the Media drop-down select and drag the MediaDisplay Component on to the first frame of the new "screen" layer.

In the Properties Inspector, Command + F3 (PC: Ctl + F3), give the component the instance name "video".

Open the Component Inspector window using Window > Component Inspector, or Option + F7 (PC: Alt + F7), uncheck "Automatically Play".

Create a new layer, rename it "actions", select the first keyframe, then open the Actions window. (Window > Actions or F9)

Type in the script window:

video.setmedia("video/video.flv","FLV")

This attaches the path of our .flv file to the MediaDisplay Component we named "video".

STEP 6: Control Buttons

Create a new layer for the control buttons and name it what you like. I’ve named mine “buttons”. On the first keyframe of this buttons layer, create a pause button or drag out your pre-made pause button from your library. Select your pause button and hit F8 to Convert to Symbol. Select button, name it “btn_pause” and then give it an instance name of “pause_btn” in the Properties Inspector window. It is important that you use the same names in order for the scripting to work.

On the same layer, repeat the process for the play button. Name it “btn_play” in the Convert to Symbol window and then give it an instance name of “play_btn” in the Properties Inspector window.

Now select both buttons by holding shift and clicking on them. Hit F8 to convert both of them together into a new movie clip. Select MovieClip and name it “mc_controls”.

Double-click your newly created mc_controls movie clip to enter its editing mode. Then create a new actions layer (inside mc_controls), select the first keyframe, open the Actions window (F9), and place this code:

video = _root.video;

STEP 7: Scrubber Bar

Create a new layer for the scrub bar, name it what you’d like. I’ve named mine "scrubber". On the first keyframe of this layer, create or drag out a track for the scrubber. Select the track, hit F8 to Convert to Symbol, select movie clip, name it “mc_track” and now, what is different here: you must make sure to set the registration point to the left, NOT CENTER. This ensures that the left edge is seen as zero or our beginning point. Now, give it an instance name of “track_mc” in the Properties Inspector window. It is important for the scripting that you use these names.

On the same layer, repeat the process for the knob. Use F8 to convert to symbol, this time making sure to go back to a center registration point, name it “mc_knob”, and then give it an instance name of “knob_mc” in the Properties Inspector.

Now, position the knob on top of the track with the knob situated to the left edge of the track below. Select both the knob and the track by shift-clicking them. Hit F8 to convert them both into a movieclip. Make sure the registration point of this clip is set to the left edge like you did to the track.

Now, double-click the new mc_scrubber movieclip to enter editing mode (just like you did with the control buttons). Create a new Actions layer, select the first keyframe, open the Actions window (F9) and apply this script:

video = _root.video;
knob_mc.onPress = function(){
            mdown=true;
            this.startDrag(false,0, 0, track_mc._width, 0);
};

STEP 8: Finishing Touches

In my particular case, I have a rounded TV screen so I would like the video to appear to have rounded corners instead of square. In your situation it may be okay to leave it square. Again, it all depends on you. In order to round my edges, I am going to create a new layer above my screen layer (the one that houses my MediaDisplay Component) and name it "screenmask". I will then select the rectangle tool ( R ) and set the corner radius (bottom of toolbar under Options ) to around 50px. Now that you have a shape on that layer, right-click on the layer label and choose "mask" , turning the shape you just created into a mask for the "screen" layer. The layers beneath ("screen") will now only show through the shape you have created on the layer above ("screenmask"). I then add a border around the video for an extra touch and now I’m ready to export a .swf and bask in the glory of my custom video player.

Hit play. The movie should begin to play and the scrubber to move. Click-and-drag the scrubber knob to navigate around the movie, click pause to.. well, pause.

It may take a few times of exporting, seeing where the video is, and then repositioning the MediaDisplay Component accordingly to get the exact position of where the video should be. It’s kind of hard to tell by only seeing the blue outline of the component while working in the Flash document.

Click the play button on the .swf below to see the player in action!
(video shown is a segment of Adobe&reg Photoshop TV.)