(Page 3 of 3 pages for this article  <  1 2 3)

Filed under: CS4 •Tips •Training •Web Video •

ADHD Guide to Flash Video for the Web

I’m at the point where I can test my movie. I select “Control > Test” and the following window appears:

There’s one more step before we can export files. Go to “WIndow > Component Inspector” and click on the video window on the stage:

It’s very important that the “source” tag reflect a local file. It should contain ONLY the file name of the video file without showing any path. If there’s any path information in front of the file name, remove it.

All looks well. It’s time to export my final Flash files. First, I save the Flash project to the SAME DIRECTORY that contains my encoded F4V video file. Select “File > Publish Settings” and this page appears:

In this case the two elements that I’m looking for, the .swf Flash movie file and the HTML file, are both selected. Select “Publish” from the bottom left and the following files appear in the empty directory to which you’ve saved your Flash project.

“Rachel Williams 60p ProRes Final.f4v” is the video asset.

“Rachel Williams.fla” is the Flash project that I created above. All the following files, that were generated by the “Publish” process, will be created in the same directory as this file. This is the ONLY file you won’t upload to your web server.

“Rachel Williams.html” is a web page that contains instructions for embedding the Flash movie. I can pull the embed code from this web page and place it in another page, or I can simply open this HTML page from a link—possibly in a smaller window floating on top of the link page. Gray Box is a neat tool for that. This page is optional.

“Rachel Williams.swf” is the Flash movie that contains the stage and my video file.

“SkinUnderAll.swf” is the player skin.

VERY IMPORTANT: In order for the “Rachel Williams.swf” Flash movie to play properly, IT MUST BE IN THE SAME DIRECTORY as the video file (“Rachel Williams 60p ProRes Final.f4v”) and the player skin (“SkinUnderAll.swf”). Remember the step where we used the Component Window to remove any path names from the video file name? That simplifies matters by allowing the main .swf Flash file to easily find the video asset file and the player skin .swf as long as they are all in the same directory.

If you use the “Rachel Williams.html” page, it too should be in the same directory as the others. The only file you wouldn’t upload to your web server would be the .fla Flash project file.

Flash allows direct embedding of video into an .swf file, reducing the number of files that must be placed in the same server directory to the final .swf file and the player skin .swf file. The advantage of keeping the actual video asset (.F4V file) separate is that it allows for progressive downloading. This means the Flash player will automatically buffer the download and start playing the video as soon as it has enough of it loaded. Otherwise, embedding the full video in the .swf requires the entire .swf file to be downloaded before playback can begin.

Here’s the “Rachel Williams.html” web page in action.

And here’s an article about the video project used in this demonstration.

Art Adams is a DP who is too cheap to hire a web designer. His web site is at www.artadams.net.

(Page 3 of 3 pages for this article  <  1 2 3)

                   

 

10 Final Cut Pro things FCP editors might be missing in Adobe Premiere Pro CS6 Scott Simmons | 05/11 These are a few of the things that I found myself searching for as I’ve been moving over to Premiere Pro CS6 as a FCP 7 replacement Adobe is making a big play for Final Cut Pro users with their CS6 release of Premiere Pro. It’s vastly improved over the Premiere Pro of old and is a lot like Final…

Color Correction Practice Game Steve Hullfish | 05/05 Test your skills, improve your eye I found a very cool little site that tests your ability to match a specific color based on hue, saturation and brightness. At first, I thought it was just kind of cute,…

Putting the After Effects CS6 3D Camera Tracker to the Test Jeff Foster | 04/30 I give the new 3D Camera Tracker some pretty crazy footage to track Since the announcement of the Adobe CS6 Production Premium was made, there are a lot of great tutorials and examples made with the product to show off the new features. Most use nicely shot footage with dolly shots or smooth steady-cam work with lots of great contrasting detail to track, which…

You must be registered to comment. This is an effort to reduce spam. Please REGISTER HERE.

Good article art but one thing worth pointing out is that H.264, like On2, is a codec optimized with a bock size of 16. So your suggestion of a frame size of 720x404 for 16:9 frames would be better served by a frame of 768x432 (1024x576 if you wanna go bigger, 512x288 to go smaller).

If you dont work in even multiples of 16 you do trade off some encoding speed and decoding playback efficiency as well as some spatial quality.

Cheers

Mike

Posted by MikeJ  on  10/29  at  06:57 PM

---

Thanks Art for that quick-start guide. I know just enough to be dangerous in Flash so this fits right in!

I find if you click on the Edit button to the right of the Size values in the Properties panel, that you can select the “Match size to Contents” option. Click ok, and the stage will be resized to the movie and the movie will be centered. Then add 37 px to the height to allow for the skin at the bottom. (Though why Flash doesn’t realize there’s a skin there when it’s looking for the size of the Contents escapes me.)

There must be a way to make the bottom corners transparent I would think. Anyone?

Posted by Crish  on  10/29  at  09:11 PM

---

You will also save yourself a world of pain if you remove spaces from filenames for anything destined for a web server. Use dashes or underscores. Many web servers are not as smart as desktop and laptop machines and will interpret a space as ” ” so that “My File.mp4” becomes “My File.mp4”
Annoying at best, but you may find your combo or Flash file, Server and browser unable to resolve the file name correctly resulting in broken links!

Jason

Posted by Wyld Stallyons  on  11/03  at  01:53 PM

---

Thanks for that walk-through. The video plays extremely smoothly too. Does PVC have a flash server?

Posted by DanConklin  on  11/09  at  09:10 AM

---

Name:

Email:

Location:

URL:

Smileys

Remember my personal information

Notify me of follow-up comments?

Submit the word you see below: