How to embed a movie using Flash and create a custom video player interface.

Level: Intermediate

Firstly what is the difference between embedding a movie and downloading it?

For the purpose of this tutorial the difference is defined as such:
A downloaded movie needs to exist in it's entirety (or a reasonable portion of it, depending on the file type of the movie and the player used to view the movie) on your local machine in order for the video to play. This could mean that you have to wait a while before watching the movie, while it downloads.

On the other hand embedding a movie through Flash provides the viewer with much quicker feedback as the movie does not need to be downloaded in it's entirety before it can be watched. Typically the movie “downloads” while the viewer is watching it.

In order to complete this tutorial you will need

• A movie for embedding (Image sequences with a separate sound track will also work)

• Flash 8 (although it will work with older versions of Flash as far back as ver.6 (unsupported))

• Quicktime (optional)

Open Flash and create a new document (if it doesn't already exist).

Click > Modify > Document

In the Document Properties Dialogue box enter the size of your Flash movie.

To determine a size for the movie consider the size (in pixels) of the movie you are going to stream. Outside of Flash (in a file browser) right click (or crtl-click for mac users) on the movie you want to stream and choose Properties, Meta info or whatever tab will give you a summary of the file's dimensions.

Look for a width and height reading for the movie in pixels. This is exactly what we need. On a Mac the key combination "cmd-i" will sometimes give you information about the selected file similar to this procedure on Windows and Linux.

Back in Flash, in the Document Properties Dialogue box set the width of your Flash movie to match your movie to be streamed and set the height value to be slightly larger. This is because you will need some room at the bottom of your Flash movie for the playback navigation controls and a progress bar. I added about 25 extra pixels.

Add a Title and description for your movie in the appropriate fields, without these fields your movie will not be very searchable by a search engine such as Google.

Set the background colour to the background colour of the webpage the SWF movie will be embedded in.

Finally set the frame rate of the Flash movie to match the frame rate of the movie to be streamed. Generally this will be somewhere between 24 to 30fps. You should try to match the frame rate of your SWF to the frame rate of your movie as accurately as possible, failing to do so will result in your sound track not syncing correctly with your video.

Click OK when done.

With your new stage set it's time to import the video.

Click File > Import > Import Video

In the Import Video Dialogue Box make sure you have a copy of the file on your computer and the On Your Computer radio button is selected.

Click > Browse

Locate the file and accept it. Then click Next to go to the Deployment Method settings. The method we're using is Embed Video in SWF and Play in Timeline. Although this method can be a little tricky to work with it offers us the most amount of flexibility for manipulating our video in our authoring environment.

Click Next to go to the Embedding Options.

We'd like the symbol type to be Embedded Video and the Audio Track to be Integrated.

Back to the Embedding Options in the Import Video Dialogue Box. The other options in this Dialogue box are self explanatory just make sure that you have Expand Time Line if Needed Checked. The Edit Video First Radio Button allows you to import a section of the video file defined by yourself. I've chosen to Embed the Entire Video.

Click Next to go to the Encoding Options.

In the Encoding options choose Flash 7 Medium Quality from the first drop down list. This is a good template to start off with and since all the actions we will be adding will be compatible with Flash 7, it would be better to export our SWF using this format as opposed to a newer version of Flash which will invariably have a smaller user base.

Click the Show Advanced Settings Button

Make sure Sorenson spark is chosen as the Video Codec.

I also increased the Bitrate of my movie to 700. Since my video is just over 2 minutes that leaves my file size at approximately 9 MB, which is still pretty reasonable for this type of animation and my target audience. Please Note however this estimation does not include the audio, even if it is integrated into the video!

Make sure Encode Audio is checked.

I upped the audio data rate to 128kbps for a better quality sounding file. You don't need to do this as 96kbps should be fine under most circumstances. After all we're not trying to achieve CD quality sound. My video is an animated music video so the sound plays quite an important part.

Only increase the Video Bit Rate and Audio Data rate if you feel the quality of the file is too highly compromised. Don't worry about getting these settings 100 percent accurate at this stage as we'll be editing them again a little later.

Click Next Then Finish Flash will go through Encoding the Video and writing it to a temporary FLV file so that you can work with it on the main Timeline.

Once Flash has finished encoding the file it places an instance on our stage, as per request of our settings, and places the main file in our Library.

The Timeline has also been extended to include the entire animation. Excellent!

At this stage I'll do a test export to check out the size of my SWF with the settings I've just chosen.

Test your movie with Control > Test Movie

Flash exports the SWF with the embedded movie.

Let's have a look at the movie's stats. With the Flash Player as the active window (not the Flash Authoring Application) click View > Bandwidth Profiler.

The Bandwidth Profiler gives us some useful information about our SWF file like it's size and the Bitrate of the movie on a per frame representation. It's a very useful tool to have activated when testing SWF's.

Immediately I can see that my movie is 11MB (a little more than I'd anticipated).

I can also see that most of my frames are averaging not more than 4KB(Kilobytes) per frame. My maximum Bitrate, if you can recall, was set too 700Kb(Kilobits). Which seems to be way more than I need, so I'm going to reduce it.

Back in Flash's authoring environment go to the library (Window > Library) and double click the movie file you just imported to open the video Properties Dialogue box. Click Update and the familiar video encoding settings should reappear. Click the Show Advanced Settings button and you should see all the settings you previously set in the Import video Dialogue box.

I reduced my Video Data Rate to 500Kbps. This should give me a video that has pretty much the same quality as the video I just test exported with a smaller file size.

Click OK and Flash re-encodes the original video file.

Test export the video again to check the file size and quality.

This time the file is about 8MB and the quality is reasonable at Internet standards.

Now the fun really begins :-)

Since I'm happy with the video I can start designing my Navigation controls, Loader and Seek bar!

We're going to start with the loader bar.

This is a graphical representation depicting how much of the file (SWF) has loaded and how much more of the file still needs to be loaded. You can think of it as a preloader bar, kind of like on those websites that take some time to download and you see a progress bar loading the site and usually some text asking you politely to please be patient while the site loads. The difference with our loader bar is it will not be asking the user to wait as the movie will start playing automatically as soon as a few frames load.

First I start by creating a thin rectangular strip at the bottom of the stage that stretches across the width of the stage. The actions that follow are written so that you can make your loader bar any length you like. If you do however choose to change the instance names of the symbols please make sure you reflect these changes in your ActionScript. Alternatively just follow the tutorial as it is.

Place the outline(grey) and the fill(white) (see following image) on two separate layers. I called the fill layer loader and the outline layer, well, outline (no surprises there).

Select the fill and convert it to a movie clip. I called the movie clip LoaderMovieClip.

With the movie clip selected give it the Instance name preloader. Modify this property in the property inspector.

Double click the LoaderMovieClip to enter it's edit symbol mode.

Select the fill and convert it to another Movie Clip. This time I called it LoaderB

With LoaderBar selected change it's instance name to loader.

So to recap on our graphical representation of how many frames are loaded (which is what we're attempting to indicate for those that missed out on that part of the tutorial). We have a movie clip on our main stage called LoaderMovieClip with the instance name preloader. Inside this Movie Clip we have another Movie Clip containing the fill. This Movie Clip is called LoaderBar and it's instance name is loader.

With the LoaderBar selected invoke the free transform tool and move the objects transform pivot to the extreme left edge of the clip. The transform pivot is the little circle in the middle of the movie clip.

This is the pivot point around which our LoaderBar will scale.

Make LoaderMovieClip a two frame animation by inserting a Keyframe at the second frame.

Select the second frame and go to the actions panel (Window > Actions)

add this ActionScript to the frame:

This simply creates a loop. The playback head will play the movie clip from frame 1 by default, get to frame 2 read the action telling it to go back to frame 1. From frame 1 move onto frame 2 and so on. This is a useful way of repeating an action. And the action we will be repeating will be the ActionScript on frame 1.

select frame 1 and in the Actions Panel type:

This basically sets the x scale property of the LoaderBar to graphically represent the amount of frames that have been loaded onto the viewers computer expressed as a percentage of the total amount of frames that the animation is comprised of. So if half the animation is loaded then the x scale property of the LoaderBar will be half of it's original size and so on.

We're almost done with the LoaderBar. You might have noticed that if you exported the animation although the LoaderBar is scaling it is perhaps not scaling from the right place. We'd like it to scale outwards from the far left corner of the LoaderBar movie clip, however it seems to be scaling from it's centre.

To correct this double click LoaderBar to go into it's symbol editing mode. You'll find the shape that comprises the contents of the movie clip.

In the centre of the shape is a little cross (looks similar to a registration point). You can't edit the position of the cross, but what you can do is select the shape fill and move it all the way to the right so that it's left edge lines up with the cross.

When you go back to the LoaderBar movie clip you'll notice that the contents of the movie has been moved. This is predictable, as modifying the contents of a Movie Clip will have ramifications at all the levels containing those contents that preceded it (but you already knew that). Move the movie clip, LoaderBar, back into place.

Test Export the movie and the LoaderBar creates a predictable result.

Easy as that!

Adding Seek Functionality

The seek functionality will allow us to move to any location in the movie once it's loaded (or partially loaded) by clicking on a graphical representation of a playback head and dragging it to a location along the LoaderBar. This is known as the seek feature in some video players.

To begin create; a rectangular shape (or custom graphic) at the far left corner of the LoaderBar. Make sure the graphic is on it's own layer, adding layers in your authoring environment does not increase the size of your SWF and makes for a smoother workflow. Select the graphic and covert it into a Symbol.

This time, however make it a Button. Call the button SeekButton and give it the instance name seek.

Select this button and open the actions panel add this action script to the button:

If you're not familiar with ActionScript this code could look a little daunting at first glance but lets take a look at what's happening here step by step.

The first statement is an on event which simply tells Flash to execute/do whatever code follows when the left mouse button is pressed over the SeekButton.

Then the magic happens, we tell Flash to start dragging the button we've just clicked (called “seek” as per it's instance name) and give Flash some coordinates pertaining to the area that the button can be dragged within. This is the text inside the parenthesis (someone you know might say something like “inside the brackets”, but that would not be very accurate so we'll refer to them as parenthesis from now on). We don't want the button to move anywhere except along the x axis within a region somewhere between the extreme left edge of our LoaderBar to the extreme right edge of our LoaderBar. Reason being because our LoaderBar's width equates to the amount of frames that make up our streaming movie, and graphically it wouldn't make sense to be able to drag the SeekButton off an area not encompassed by the LoaderBar this would mean we were trying to play frames that don't exist. If we know the dimensions along the x axis we could simply just type them in.

However since we are making these actions as generic as possible so that you can customize your own players we're going to use expressions instead.

L:Left R:Right T:Top B:Bottom

These are the constrainable values we need to input in order to control the draggability of our SeekButton.

The first value for Left is a variable. We have not defined this variable yet but we will at another place in our movie. So for now we'll move on to the other values and come back to this a little later. If you are not familiar with the term variable don't worry we'll be examining this mysterious jargon soon.

Since we don't want the user to be able to move the seek bar past a region that has not been graphically represented as loaded by our LoaderBar, we get the far right edge of the LoaderBar by accessing a property it's width. In order to get Flash to tell you the value of some thing's width you provide Flash with the instance name of the object followed by _width. In our case we need to supply Flash with a path to our SeekButton instance so that Flash knows where to look for it. The path we've given Flash is an absolute path it's not always the best choice using absolute paths as opposed to relative paths but for the sake of simplicity all our paths will be absolute using dot notation, so that you can get used to reading this syntax. For the Right value we use the LoaderBar's width as opposed to explicitly giving Flash a number equating to the width of our LoaderBar (e.g. 360 which is the length of my LoaderBar). This also means that our SeekButton will not be able to be dragged past a point representing a frame that has not been loaded, which is sort of a double bonus for using an expression :-)

The T: and B: values would be how high or low we are able to drag the SeekButton on the y axis. We don't want to be able to move the seek bar on the y axis so we reference the SeekButton's current y position using it's instance name seek and the keyword _y. If we wanted to reference it's x axis we would write: seek._x

_level0.dragSwitch = 0;
Next in this line we access a variable and assign it a value. We simply use variables as containment units that store information in our computers memory, temporarily. The information that this variable, we've called dragSwitch, stores is the numeric value 0. We'll be coming back to this variable because this is, in fact, not where Flash first creates this variable. We're simply changing the value of this variable from it's original value which used to be 1. But, unless you're clairvoyant, you could not have known that. It will become a lot clearer once you've seen where the variable has been created (or rather initialized).

on (release, releaseOutside)
Next we provide Flash with another on event telling Flash to execute the code that follows when the user releases the left mouse button and ultimately stops dragging the SeekButton.

We then create the variable seekPos and set it's value to the x position of our SeekButton. You can create as many variables as your computers memory will allow you which could be hundreds of thousands or even millions of variables, but when writing your scripts try to keep this number as streamlined as possible, it will ultimately lead to a faster running application. Flash stores this variable, like all others, in it's memory along with it's value which, to recap, is the x position of the SeekButton at the current frame. As you'll see Flash allows us to create variables at just about any place in our scripts so be aware of where you “declare” your variables. For example this variable of seekPos has been created here because the value of the variable (i.e. the x position of the SeekButton) will update every time the user clicks the SeekButton and releases it, this is because of our on event. This is exactly what we want because assuming the user has clicked, dragged and released the SeekButton the position of the SeekButton would have changed, this new value is thus represented by the variable seekPos which contains the new value which has just overridden the old.

We then create a new variable which will also be updated each time the user clicks and releases the SeekButton. This variable is called seekFrame.

Flash derives the value of this variable from an expression we create.

Flash uses three variables to calculate the answer of this expression and subsequently assign this value to the variable seekFrame. Two of these variables will be unfamiliar to you as we have not declared their value yet but the third seekPos you should already be familiar with. The other two variables have not been declared in this script because they do not need to be regularly updated. This would be an unnecessary computation for your computer if they were declared in this script.

The variable totFrames (referred to in our script by it's path _level0.totFrames) refers to the total amount of frames that our streaming movie is comprised of. You'll see the full expression for this variable a little later.

The other unfamiliar variable loaderWidth simply refers to the length of our LoaderBar. Although this value seems like it needs to be updated because our LoaderBar's width changes to reflect how many frames have been loaded onto a users local machine this, however, is not the appropriate place for that. If you think back to our startDrag command which followed our on(Press) event we specified that the SeekButton would not be allowed to be dragged past a point on the x axis that exceeds the width of our LoaderBar by setting the Right draggable area to the LoaderBar's width. This “double bonus” (as previously stated) is actually in fact a “triple bonus” :-o .It saves us having to declare the variable again and have it's value updated when the user releases the seek button, so that we can send the playback head to this new location as the user will not be able to drag the SeekButton past an area representing frames that have not loaded yet. This seems quite obvious to us, how can you play a part of a movie that hasn't been loaded yet? Not so obvious to Flash though. It would not cause a serious error, like causing our application to halt or crash, but where errors, inaccurate values or the like can be avoided they should be.

By dividing the total amount of frames by the width of the LoaderBar and multiplying the result by the x position of the SeekButton (which will not be larger than the width of the LoaderBar) we get a value equating to a frame number that the user has dragged the SeekButton to. You'll have to think about that for a while if it does not make sense immediately, it will eventually even if your maths knowledge is as basic as mine ;-). We then use the Math.round() function to round the value off to an integer, and assign this value to the seekFrame variable. The Math.round() function is a convenient command built into ActionScript that rounds any floating number up. For example the value 2.7 will be rounded to 3, the value 2.5 will also round off to 3 and and the value 2.3 will round off to 2. Integers do not have decimal places floating point numbers do, just to clarify that :-)

We then use a condition (otherwise known as an “if statement”) to make sure that the value returned by seekFrame is not higher than the total amount of frames. If it is higher for, whatever the reason, we reassign the value of seekFrame back to the total amount of frames. Conditions are useful programming tools that are used to compare values or expressions on either side of a comparison operator. In our case we are checking the value of seekFrame which we just evaluated in the previous expression to see if it's greater than (>)or equal to(=) the total amount of frames. If it is then the condition evaluates to True which would cause Flash to execute the code in the curly brackets that follow. However if seekFrame is not greater than or equal to the total amount of frames then the condition evaluates to False. Flash will therefore ignore the code that follows in the curly brackets and read the next line of code which brings us to the else if clause. This clause is used to catch another possible, predictable result, this time we check to see if seekFrame is less than(<) or equal to(=) 1. like with our “if statement” if the condition is true Flash will execute the code that follows in the curly brackets which simply tell Flash to set the vale of seekFrame, in this case, to 1.

So what if both conditions evaluate to False? Well if they do, and hopefully they do evaluate to False most of the time, then Flash will ignore both blocks of code in the curly brackets and look for the next line. So what's the purpose of this section, then?

This condition section might seem a little trivial but it is an important part of writing code called error checking. We try to predict what could go wrong and provide the application with a means of counteracting the erroneous code to prevent our application from seizing or printing a harsh complaint for us to ponder in a strange computer jargon.

After the condition we tell Flash to go to the frame that seekFrame equates to in our code and continue playing from there.

_level0.dragSwitch = 1;
Finally we access the variable dragSwitch again and set it's value back to 1. You'll soon see that this results in the SeekButton continuing with it's usual function of tracking the progress of the movie. But for now just bare in mind that we have changed the value of this variable once when the button was pressed to 0 which it stayed at throughout the dragging process. We then set the variable back to 1 when the button was released.

Next we turn our attention to the main Timeline.

A very important visual clue is missing from the functionality of our SeekButton. The SeekButton does not follow the frames played as the movie progresses.

We're going to fix this with a Function.

A Function is typically used when several commands, that you have defined, need to be executed repeatedly. Instead of typing out each line of code over and over again, a Function allows us to associate all that code with a single line. We simply call the function by it's name when needed and all the associated code is executed without us having to type it out and have the computer go through it line by line. This probably sounds a bit like some of the variables we've been using, kind of like the variables that we assigned expressions to, however a function can do a lot more it can accept arguments and can be made up of many variables each having expressions assigned to their values. It makes reading code easier and when used correctly can improve the performance of your application.

We're going to define our function at the beginning of the movie and set it up so that is executes at every frame of our movie. The type of call to this function in Flash is a little different to a standard function call, but as you'll see it's actually just as easy!

Create a layer above all the other layers of your movie and call it actions. This is not imperatively necessary but certainly creates a smoother workflow, and makes it easier to locate all actions that exist on our Timeline, as long as you place all Timeline specific actions on this layer or similar layer structures within Movie Clips.

Select the first Keyframe. When adding actions to a Timeline is is important that you have a Keyframe selected because Flash will only add actions to Keyframes. If a Keyframe does not exist at your selection Flash will not create one, instead it will attach the action to the first Keyframe that preceded your selection.

Type or Copy/Paste the following actions into the action panel:

The first four lines of code define variables.

At last we come to the initialization of the dragSwitch variable. Remember we were first introduced to this variable when we created the actions for the SeekButton. This ActionScript is at the first frame of our movie and will therefore be the first set of actions Flash reads for our movie. The initialization of a variable at this point is usually to assign a starting value to the variable to kick some code off that will need a certain value at a later stage. In our case we will be using this variable to create a switch, meaning this variable will “switch” between one of two possible values, 0 and 1, sort of like a light switch which is either off or on. If the variable is equal to 0 a certain set of actions will be executed, on the other hand if the variable is equal to 1 a different set of actions will be executed. In other words assigning a variable either one of two possible values is basically what creates the switch.

The loaderWidth variable is assigned the width of the LoaderBar. Since I know that I am going to have to reference this value several times throughout the movie and have the value update automatically, I declare the variable here and assign it the expression preloader.loader._width. You should, by now, recognise what's going on here, firstly we're accessing the LoaderBar Movie Clip through it's path using instance names and dot notation. The underscore should also be a visual clue indicating that we are accessing a Property of this object. So I can assign it to a variable at the first frame and reference this value via it's variable name throughout the movie.

On the next line of code yet another mysterious variable is revealed, totFrames refers to the total amount of frames in the entire movie. This is a really simple expression, I think it's pretty self explanatory. None the less... _totalframes is a built in Flash command that gets the number of frames making up the movie it is called within, so if we wanted to reference another Movie Clips total frame count we would simply add the path to the Movie Clip before the command.

Finally we get to the variable dragLconstr. The first place we saw this variable appear was in our Left constraint position for SeekButton's draggability feature. The variable is assigned the x position of SeekButton. In order for this to work properly SeekButton would need to be aligned to LoaderBar's parent movie clip in our case this would be LoaderMovieClip. Select the symbols and either align them with the Alignment Inspector or simply type the same x values for both symbols in their respective Property Inspectors. If they are not accurately matched it will result in frames being shaved off the beginning of the movie when the drag feature is initialized. Although the frames will still play when the SWF movie starts and plays automatically upon loading.

The next eight lines are the actual Function. This Function executes at every frame because of the _root.onEnterFrame assignment that precedes it. This is a really useful feature of ActionScript, if you use it resourcefully. The bulk of the function comprises of a condition.

Firstly the condition checks to see if dragSwitch, that we declared in our first line, is equal to 1. When you see two equal signs next to each other (==) they are not an assignment operator but in fact a type of comparison operator, comparing a value on the left side of the operator to a value on the right side of the operator. This is as opposed to assigning a value on the right side of the operator to something (like a variable) on the left side of the operator, this would be an assignment operator and will always only be a single equals sign(=).

If this code was to be executed as is then the comparison would return a value of True, dragSwitch would indeed equal 1, as is stated in our first line of code. Therefore because the comparison is True the next two lines of code in the curly brackets are executed.

A variable called thisFrame is created and assigned the value of the current frame with an expression (which by no co-incidence bears a similar syntax to the expression for totFrames). This variable needs to be declared within the function as opposed to those variables we declared in our first four lines of code, which exist outside of our Function, this is because the variable's value will change for every frame and needs to be updated and accessed within the Function. Although this is an expression and therefore the value will be re-evaluated when the variable is referenced anyway. So because of this the placement issue might seem a little odd and inconsequential but placing the variable inside the Function makes the code easier to read and implies that this variable is declared here specifically for the purpose of this Function.

We then set the x position of the seek button with an expression that multiplies the current frame value (thisFrame) with the width of the LoaderBar (loaderWidth) and divides the sum by the total amount of frames (totFrames). As you can see this is just a variation on the expression we used earlier to get the frame number returned to us when the user drags the seek button.

Secondly we have an else clause which comprises of several lines of code to be executed if the if condition evaluates to False. In other words if dragSwitch is not equal to 1.

Because the else clause exists within our Function it will follow the same rules our if condition had to and that is that it's block of code will also be executed at every frame for as long as the if condition evaluates to False.

So lets have a look at whats happening here:

So far we have the SeekButton following the progress of the movie like we would expect it to.

We are able at any point to click the seek button and drag it along the LoaderBar.

If we stop dragging the SeekButton the playback head will jump to a frame representing the position we dropped the SeekButton at and start playing.

Sounds good, so what does the else part do?

Remember the actions for SeekButton had two events a Press event that set our dragSwitch variable to 0, amongst other things, and a Release event of which one of it's requirements was to set the dragSwitch variable back to 1. This is where the else clause comes into play. When the SeekButton is pressed dragSwitch will no longer equate to 1 and therefore return a value of False causing Flash to ignore it's if condition and proceed straight to the block of code in the else clause.

Firstly the variable seekPos is created and assigned the x position of the SeekButton. This is useful because while the user is dragging the button around the value is updating due to the fact that the function executes at every frame because we used the _root.onEnterFrame assignment.

Secondly we create an expression for seekFrame, this should look familiar to you. If not check it out in SeekButton's Release events.

Using the value that seekFrame returns we tell Flash to go to and stop at the frame equating to the position the user has dragged SeekButton to, along the LoaderBar. We want Flash to stop at this frame and wait for the user to release this button.

Once the user releases the button the value of dragSwitch is set back to 1 as per the actions of the release event for SeekButton, and the SeekButton continues with it's normal functionality of tracking the progress of the movie as it plays.

As a final measure the value of thisFrame is assigned to itself as a precautionary measure, so as not to interfere with the else clause's assignment of this value..

This concludes the ActionScript for our LoaderBar and SeekButton. Well done if you got this far :-)

The Navigation Buttons

The rest of the actions from here should be pretty easy to understand so I won't dwell on the code too much but rather provide a brief over view of the functionality of it.

Create a new layer on the main Timeline and call it Buttons. Lock the other layers so as not to interfere with them and create the Navigation buttons you wish every player would have! I made a Play, Pause, Next Frame, Previous Frame, Stop and End buttons. Make sure that once you've created the buttons that you select each one individually and convert them into Button symbols, with appropriate names. I simply appended the word Button after each buttons type for their respective names e.g. StopButton, PlayButton etc.

We'll start with the Play/Pause button. This is the most interesting button as it's actually two buttons rolled into one.

Select the PauseButton and convert/place it into a movie clip called PlayPauseMovieClip. Give the movie clip the instance name playpause.

Double click it to enter it's symbol editing mode.

Add a frame after the first frame so that PlayPauseMovieClip now has two frames.

At the second frame select the PauseButton and click Modify > Symbol > Swap Symbol. This will bring up the swap symbol Dialogue box. Double click the PlayButton to swap it with the PauseButton

at frame 2.

Add another layer above the layer with your buttons and call it actions.

Add a stop to the first frame. This is so that the Movie Clip does not start playing automatically, as is the default with Flash.

With the PauseButton selected at the first frame add the following actions.

This simply stops or rather “pauses” the movie on the main Timeline and advances the playback head of the current movie clip , PlayPauseMovieClip, by one frame taking the viewer to the PlayButton.

Go to the next frame and select the PlayButton add the following actions to this button.

The button plays the main movie clip and steps back a frame on the current Timeline.

At frame 2 on the actions layer add a Keyframe and the frame label play. We will be accessing this frame through other buttons which will control this movies playback head too.

From here things are pretty easy and self explanatory. All the remaining buttons will have their actions applied to the buttons on the main Timeline (no need to put these buttons into Movie Clips). Select each individual button on the main Timeline and apply their respective actions.

StopButton:

NextFrameButton:

PreviousFrameButton:

EndButton:

Because all these buttons result in the main Timeline playback head stopping at a certain frame it would only make sense that the playPauseButton, regardless of what frame it is on, be set to the play frame as clicking pause after one of these buttons will have no effect. _root.playpause.gotoAndStop("play"); this line of code accesses the playPauseMovieClip's play frame for this reason.

As you can see I was once again able to use the totFrames variable in the EndButton.

I also chose to omit a go to start frame button as this would be redundant due to the same functionality of the stop button.

The stop button starts the movie from the second frame so as not to initialize the variables we declared at the beginning of the movie before the movie has been downloaded in it's entirety, the same goes for the go to previous frame button. Another workaround for this instead of forcing the movie to start at frame 2 before it's completed downloading, would be to start your movie at frame 2 and use frame 1 to display a title for the movie.

The completed player, simple but effective :-)

Changing the Video

Once you have your player set up changing your video and updating your SWF is a snap! Let's take a look at the procedure.

Open your FLA file that you've been working on with your completed player, if you have not created your own then you can download the FLA here.

Select your video from the main Timeline and delete it.

Next shift select all frames across all layers except for the first frames and delete them. We do this so that we can have Flash automatically extend the Timeline for us to match the frame count of our new movie.

So we now only have the first Keyframe for each layer and an empty video layer. With the video layer selected click File > Import Video

go through the normal import settings choosing all the same options as before, obviously you can play around with the compression settings as you wish. The main settings are that you have embed video as the deployment choice with expand Timeline checked.

Once your instance is on the stage shift it into place, if necessary.

Scroll along the Timeline to the end of the movie, Flash has conveniently added the correct number of frames according to how long your video is. Select the last frame of all the layers that need to be extended (buttons, actions,graphics etc.) and click Insert > Timeline > Frame

Flash adds frames for the rest of the layers and you're done with setting it up.
Export or Publish the movie, anything from Flash ver 6 and up will work and that's it.
Hope you had as much fun with this tutorial as I did making it.

Any comments or questions can be emailed to me at my contact page here

Download the FLA used in this tut here use it in your own websites, customize it or make your own. It's Free!

Benefits of using this method:

Although are are other methods of deploying video over the Internet that require less set up, such as using a built-in Flash component. There is no comparison to the level of customization that you get from using this method and backwards compatibility for deploying imported video in Flash over the internet.
Also once the player is set up you can add movies really quickly with a few simple changes.
This method does not require any special Browser PlugIns other than a SWF PlugIn which can be as old as Flash version 6. This ensures reaching the widest audience possible for a "Flash Video".
Other than uploading, no additional server side set-up is required (as long as your server allows you to use SWF's and most current servers do).