How To Convert A Video To An FLV And Create A Flash Player For It Using Flash and Adobe Media Encoder

This was posted on 02/23/2011 and was filed in Tips And Tricks, Guides and Information, Blogging, Flash, Dreamweaver, Video, How-Tos | (No Comments Yet)

Student requested this one - he has a movie file ( .avi ) that he wants to upload to his website with controls and a player for his visitors to be able to watch. I'm going to show how to take a video file ( any format should work - .avi, .mpg, .mov, etc. ), convert it to an FLV to reduce filesize and then create a video player in flash for it and embed it in your page using Dreamweaver CS5. The actual amount of work you need to do for this is going to take about five minutes.

 

The first thing we are going to want to do is make sure out video is formatted properly for the web. This involves taking our video file and converting it into either an FLV. We are going to open up a program called Adobe Media Encoder to take care of this for us.

Go ahead and open up the encoder and you should see a blank screen like the one above. Click 'Add...' and select the video file you want to convert. That will add it to the video convert que.

We want to convert our video to an FLV, so check the drop down arrow in the FORMAT column and choose FLV | F4V.

We also want to change the preset we are working with so this thing exports correctly. Under PRESET, choose FLV - Web Medium. There is going to be a HUGE amount of presets in here, but we will use this one for this session. Going into different sizes and formats is for another discussion on another day.

One that is setup, go ahead and hit Start Queve. By default, the exporter will simply save the created file in the same folder of your document.

Depending on the specs of your machine and the size and type of your video, this process can take from a few minutes to a few hours. Sit back and let it run. Once its done we get to move on to the next step.

Once our video is good to go, go ahead and open Flash. We want to use Flash to import our video and automatically create a nice and clean player for us. While we can create our own players, it does tend to be somewhat time consuming, so this is the easiest step for now. Navigate to File > Import > Import Video...

We want to choose the file located on our computer, so make sure the first option it checked and click browse. Choose your video.

Once your video has been chosen, open the file and click Next.

Here we get to choose the options for our video player skin. All of these are great and they all have a different set of options, though I would use only elements that start with 'SkinOver', for the sake of this tutorial. Anything starting with 'SkinOver' puts the playback controls on top of the video, while 'SkinUnder' places them below, making the file a little bit taller than expected. In this example, we are going to choose SkinOverPlaySeekFullscreen, which creates a playback controller on top of the video with seek controls, a play/pause button, and a fullscreen button. Click Next and go through the next screen.

This will go ahead and place our video on the stage in a nice player for us. We want to take note of two areas on the screen now. The first is the ALIGN panel. If you don't have it, head to Window > Align to make it appear. Click the two options boxed above to align our video to the top left of the document. We do this so when we resize, parts of the video get cut off.

This next step is SUPER important, so make sure you follow through with it. BY DEFAULT, Flash will use the ABSOLUTE path of your computer when placing video files. This will cause it to break when the video file moves or you upload it to your server? Why does it do this? I have no idea, but its dumb and ANNOYING! Edit the source and pull out the folder structure from the path.

Now, take a look at the 'Position and Size' tab. IF you dont see this, click on your video ONCE for it to re-appear. Take a not of the width (W:) and height (H:) and we are going to make the document the correct size for the video.Head over to Modify > Document and make our document settings match the dimensions from the 'Position and Size' tab outlined in the previous step. click 'OK' to make the changes.

We are essentially done with flash now and are going to create our .swf file to handle this. Head to File > Export > Export Movie.

Save the exported movie in the same folder as your video clip. If you don't we will have issues trying to play it back. When you export the movie, you will notice that TWO files get created. One is the name of your movie player ( MyVideo.swf ) and the other is the name of the skin you chose ( SkinOverPlaySeekFullscreen.swf ). This is normal. Do not delete any file, as they are BOTH needed. Once saved, we are going to open dreamweaver and place our video player into our document.

Open dreamweaver and either create a new document, or load a previous file. I'm using a blank document for this example.

We want to use an embed code to put the file onto our page. The example below uses one of the most simple examples of an embed code you'll find. Go ahead and link to the correct file and make sure the dimensions match your movie. Save this new page into the SAME folder as your movie and the player., and you're set. Open your web page and you'll see our player placed right onto the page.

Keep in mind this is one of the more basic ways to include a file on your page using flash. There are many many ways to encode video and even many ways to place them on the page. I have just shown you one way to do it.

Have I Helped You? Share Some Love!

Comments

» No Comments have been made on this. How about you start us off?

Comment On This

Your Name (Required)

Your Email (Required)

Your Website (Optional)

Captcha Verification

Your Comment (Required)