Flash Video Tutorials

[enpstudios]

Embedded Video in Macromedia Flash MX:
http://www.macromedia.com/desdev/mx/...hmx_video.html

Add a video controller for Macromedia Flash MX:

http://www.macromedia.com/desdev/tip/019.html


Squeeze" your video for Macromedia Flash MX:

http://www.macromedia.com/desdev/tip/017.html


Using the local video object in Macromedia Flash MX:

http://www.macromedia.com/support/fl...dded_video.htm

Tips for Deploying Video in Flash MX

http://www.macromedia.com/desdev/mx/...ideo_tips.html

How to create a series of Bitmaps from video with Flash.

http://www.macromedia.com/support/fl...te_video01.htm

[Jonathan_B]

Hi.
We also have a number of tutorials on our site for working with video in flash. These include optimizing the quality of your video, creating players for your video, creating jukeboxes for your video, adding video to email, adding video to banner ads, etc.
You can check them out here:
http://www.wildform.com/resources/tutorials.php
jb

[Wheels]

Here's a link to the Ben Waggoner's book on video compression, there's a link at the bottom of the description to a sample chapter in .pdf format that just happens to be the one about Flash Video.

Ignore what he says about CD delivery, the rest is very good.

http://www.benwaggoner.com/books.htm

[Wheels]

Link to Macromedia's white paper on video in Flash MX 2004. Also covers issues with video in MX.

http://www.macromedia.com/devnet/mx/.../flash_flv.pdf

[Wheels]

Tutorial on video in MX 2004 Pro.

http://www.ultrashock.com/ff.htm?htt...2004/video.php

[Wheels]

Thanks to mrtriangulo

Making a QTVR with a Flash layer.


http://www.eventshorizon.com/vrzone/howto_vrflash.htm


I've used this one before, it nails it. Wheels

[Wheels]

Well, I've been seriously neglecting this area of the forum so I thought I'd answer one of the questions with a bit of a tutorial.

You can download the .fla here (.zip file)

This is an example of how to dynamically create buttons on the stage, and have them respond by loading a video from the library to the stage using attachMovie. This may not be a good method for large videos, but it can be very helpful when you want to load everything up front - and call small clips to the stage upon request.

Here's the idea - let's say you have 12 short video clips in your library, or you import a .swf containing more than one .flv in the library - either way, you want to load them all at the same time, and give the view a choice of clips to view with buttons.

It's pretty amazing what you can do with just a few lines of code, a button, and some well organized data.This is the great thing about Flash, reading data and performing repetive tasks can be easily automated. You simply create an array, import an .xml file, or pull the information from a database.

So, let's keep it simple and just build an array with the imformation we know we'll need to display the video the user selects, and position it on the stage where we want it.

Here we go:

First, create a new .fla and name the default layer Actions. We're only going to have one frame for this movie, so click on the single frame, open the AS editor and type or paste the first lines of code.

// it never hurts to say "this"
this.stop();
// set _root as a _global.MAIN, easier to transfer this code - good practice, easier targeting.
_global.MAIN = this;
// set button depth
MAIN.depth = 0;
// set video depth
MAIN.vidDepth = 100;

It's not a bad practice to use _global variables to make it easier to target main elements of your movie. I use MAIN for the _root, VIEW for my all my media elements, and NAV for navigation. Don't go overboard, I seldom use more than 6 _globals - but they're very handy when it comes to targeting from clips attached dynamically. For now, we'll just use MAIN to reference the _root.


So now we'll need some buttons, start by creating a standard button with rollovers - or a movie clip type button if that's your style. Once you have your button, create a new movie clip in the library named vidButton and insert the following information:



This tells Flash to export the clip on the first frame, and sets a name to use with the attachMovie() command.

Now, create two layers in the new movie clip, and drag an instance of your button to layer 2 and make sure to set the _x and _y to 0. Then, create a dynamic textfield and name it buttonText in the properties window, and you're done with that.

Now, import a couple of videos to the library then create two new movieclips named vid1_mc, and vid2_mc and set the export settings the same as you did for the vidButton.

Drag your videos to each respective movieclip and check "yes" when Flash asks if you'd like to add more frames. Set the _x and _y to 0;

You're library should now look like this:



So now we'll need to create a data array containing all the information we need to display our buttons and the videos associated with them. We'll need to know the following parameters for each instance we want to show:

1. The button text we want to display
2. The _x position where we want the video to be located
3. The _y position where we want the video to be located
4. The _x position of the button
5. The _y position of the button
6. The Export ID of the video movieclip

So an array of this information looks like this:

// [button text, vid._x, vid._y, button._x, button._y, video instance in library
MAIN.vidParams = ["Video 1", 200, 100, 22, 68, "vid1_mc"];

If we want to add another set of data for another clip, we simply create a compound array (containing more than one array - or arrays inside of arrays)

MAIN.vidParams = [["Video 1", 200, 100, 22, 68, "vid1_mc"], ["Video 2", 200, 100, 22, 116, "vid2_mc"]];

You can include as much or as little information as you want - but keep in mind, it does take Flash some time to loop through longer arrays - if you are using large amounts of data - there are better methods for creating arrays or objects to store the data in an easier to process object.parameter format.

So most of the dirty work is done, now it's just a couple of lines of code to tell Flash what to do with all this information. So we'll define our one an only method, MAIN.makeButtons(), like this:

MAIN.makeButtons = function(a) {
    for (i=0; i<a.length; i++) {
        var b = MAIN.attachMovie("vidButton", "vidButton"+i, MAIN.depth+i, {vidx:a[i][1], vidy:a[i][2], _x:a[i][3], _y:a[i][4], vid:a[i][5]});
        b.buttonText.text = a[i][0];
        b.onRelease = function() {
            MAIN.attachMovie(this.vid, "currentVid", MAIN.vidDepth, {_x:this.vidx, _y:this.vidy});
        };
    }
}; 

NOTE - use of php tags is only to beat the VBcode on the forum - looks kind of pretty too.

OK, that's a bit deep - I know. But here's what's going on. The "a" in the brackets is a parameter we pass to the function - and that parameter is our array. So we would call our function like:

MAIN.makeButtons(MAIN.vidParams);

Then we use a for statement to loop through the array - if this were a simple array the first item in the array would be vidParams[0], which is the button text, but since we are using a complex array - vidParams[0] is the first array (0 is the first postion in an array) so if we want to look at the first location of the first array we want to look at vidParams[0][0] So we're just looping through the array, and while attaching the button - we're using the attachMovie init object feature to assign the parameters we've set in the array to be properties of the buttons.

So here's the whole thing in one shot - the last line get's everything going.

this.stop();
// set _root as a _global.MAIN, easier to transfer this code - good practice, easier targeting.
_global.MAIN = this;
// set button depth
MAIN.depth = 0;
// set video depth
MAIN.vidDepth = 100;
// Video and button parameters
// [button text, vid._x, vid._y, button._x, button._y, video instance in library]
MAIN.vidParams = [["Video 1", 200, 100, 22, 68, "vid1_mc"], ["Video 2", 200, 100, 22, 116, "vid2_mc"]];
// methods
MAIN.makeButtons = function(a) {
    for (i=0; i<a.length; i++) {
        var b = MAIN.attachMovie("vidButton", "vidButton"+i, MAIN.depth+i, {vidx:a[i][1], vidy:a[i][2], _x:a[i][3], _y:a[i][4], vid:a[i][5]});
        b.buttonText.text = a[i][0];
        b.onRelease = function() {
            MAIN.attachMovie(this.vid, "currentVid", MAIN.vidDepth, {_x:this.vidx, _y:this.vidy});
        };
    }
};
// get things rolling
MAIN.makeButtons(MAIN.vidParams); 

Your AS editor should look like this:



If you take a look at the .fla you'll notice that I've added a couple of extra layers to one of the video movieClips - as simple as this is to do, it's often overlooked. You can add anything to a movie clip's timeline, but most importantly - it's a good place to put code. Back to the reasoning behind using MAIN as a _global, the last frame could tell the main timeline to do some nice things - like this:

this.stop();
this._visible = false;
MAIN.loadNext();

Then you create another method for MAIN:

MAIN.next = 0;
MAIN.loadNext  = function(){
   this.currentVid.removeMovieClip();
   this.vidButton[++MAIN.next].onRelease();
};

But that might be another tutorial...

[Wheels]

Here's a tutorial on creating an .flv player that plays multiple movies using the stock Macromedia components:

http://www.flashscript.biz/MX2004/fl...lv_player.html

[Wheels]

Here's a good tutorial on converting source video to .mp4 (as used in Apple's movie trailers).

These are good guidelines for doing the same thing in Flash.

http://quicktime.wikicities.com/wiki..._low_bit_rates