Flash Video Encoding, Skinning and Components in Wordpress

Exclusive offer: get 50% off this eBook here
WordPress and Flash 10x Cookbook

WordPress and Flash 10x Cookbook — Save 50%

Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress

$23.99    $12.00
by Peter Spannagle Sarah Soward | April 2010 | Content Management Open Source Web Development WordPress

In this article by Peter Spannagle and Sarah Soward, authors of the book Wordpress and Flash 10x Cookbook, we will cover the following:

  • Encoding with the Flash Media Encoder
  • Using preset skins
  • Hiding and Showing preset skins
  • Using Video Component buttons
  • Modifying Video Component buttons to customize your own skin

Encoding with the Adobe Media Encoder

If you have a video file, such as an MOV or MP4 file that you want to display as a SWF on the Web, simply encode (or compress) the video file into an FLV. With Flash CS4, you use the Adobe Media Encoder to do this. It can be accessed directly or through Flash's import video function. If you are using an earlier version of Flash, encoding is still possible, and the process is similar.

Getting ready

Make sure that you have a video file that is compatible with the Adobe Media Encoder. If you do not have a file to use, by all means, use the short.mov file. This file is a clip of the full length summer.mp4 file from www.archive.org that is listed on that website as being in the Public Domain. Use the MOV file because it is a short file, so the time it takes the encoder to render the video will be shorter. This is good for the purposes of learning and practicing. Also, do not worry if you cannot hear any of the sounds. There is nothing wrong with the speakers on your computer. This file does not have audio.

How to do it...

  1. Open the Adobe Media Encoder:
  2. Click on the Add button.

    Flash Video Encoding, Skinning and Components in Wordpress

  3. Navigate to the file you want to encode, such as short.move, and click on Choose/OK. It is now listed in the queue:
    Flash Video Encoding, Skinning and Components in Wordpress
  4. Click on the down arrow under Format to select into which file format you will encode the video. Choose FLV | F4V if not already selected.
  5. Click on the down arrow under Preset to choose one of the preset export setting options. The default of FLV - Same As Source (Flash 8 and Higher) is generally fine. If you have fewer standard video needs, make a different choice based on your needs. Also, there is an option to Edit Export Settings as well as a Settings button if you want to make your own decisions. See the Edit Export Settings section for more on that.
  6. Click on the file name under Output File to select the destination of your encoded file. You can also change the file name.
  7. Click on Start Queue, and the encoding process will begin. If you are encoding a long video, you might want to go take a walk or get a cup of tea. For short.mov, just sit tight. It should only take a minute or two to encode.
  8. Once encoding is complete, the FLV is saved in the location you chose under the Output File section. There is also a check mark under the encoder's Status section. Now, you can do what you want with the file. For instance, you can take it into Flash and import it into an SWF.

How it works...

The Adobe Media Encoder encodes the selected video file into the FLV format. It is similar to taking a Photoshop file or a TIFF and compressing either of them into a JPG. The process is simply more involved because the data is more complex.

There's more...

The Adobe Media Encoder has many options and capabilities. Among these is a wealth of export settings that can be edited to suit your needs. Also available to you is the ability to not only encode multiple files in one sitting but also to duplicate and remove files in your queue.

Edit Export Settings

With your file selected in the encoder, click on the Settings button. This gives you the Export Settings dialog box:

Flash Video Encoding, Skinning and Components in Wordpress

As you can see, it has a lot of options. Only some of the myriad of options will be discussed below.

At the top left of the dialog box are two buttons: Source and Output. Source shows the video file you have selected. Output shows a preview of the encoded version of the file.

On the bottom/middle left of the Export Settings dialog box, you can address the timeline. You are able to clip the movie if you want to export only part of it; and you can set up cue points.

To clip the movie, do the following:

  1. Drag the playback head back and forth to manually preview the movie. This helps you find the section you want to keep.
  2. Drag the in and out point triangles back and forth to isolate the section you want to keep. The triangle on the left is the in point, and the one on the right is the out point. Everything between the two triangles will be encoded.

    The timer keeps track of time in milliseconds.

  3. The right side of the dialog box allows you to change the desired file format; save your own preset with the button that looks like a computer disk circa 1996. You can also change the file name of the encoded video and choose if you are exporting only video, only audio, or both.

The Summary section gives you just that, a summary of your choices thus far.

The bottom right section gives you options for putting on a blur filter under the Filter tab and changing the format as applicable under the Format tab.

The Video tab lets you choose which Codec to use to encode the video. On2 VP6 is usually the best choice. Stick with that one. It is more advanced, gives better quality, and allows you to encode an Alpha Channel if you have one to encode.

Alpha Channels, areas of transparency in video (i.e., green screen), cannot be set up in Flash. They must be set up in a video editing program such as Premiere Pro or Final Cut Pro. The encoder can only honor them, not generate them.

If you need to resize your video, check the box for Resize Video, and change the values as needed. If you want to constrain the proportions of your video, leave the chain whole.

Frame rate can also be changed here. Generally, it is in your best interest to leave the video set to the same frame rate it was shot in. Same as source is a good choice. For Bitrate Settings, the defaults are usually pretty good. If you want higher quality and can take the additional file size, you can change Encoding Passes to Two.

For Advanced Settings, you can change overall quality by selecting either Quality for Speed, Good, or Best. It all depends on your needs.

For Audio, if you have it incorporated into your video file, choose Stereo. It sounds better. The only reason to go with Mono is if you have little sound, if it is a video of a talking head, or if your file size needs to be as small as possible.

For Bitrate Settings for audio, 128 kb per second is good. Again, only turn this lower if the audio is overly simple, not important, or your file size dictates it. Faster bitrate/higher number gives you better quality sound.

When you are finished making changes, click on OK. This gets you back to the encoder. Proceed from here as needed.

WordPress and Flash 10x Cookbook Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress
Published: April 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Encoding multiple files at once

This is a piece of cake. If you want to encode more than one file in a row, you absolutely can!

  1. Click on the Add button in the Adobe Media Encoder to add another file. In the Open dialog box, select the file—or Shift Click to select multiple files—and hit Open. Do this as many times as necessary to get all of the files you want to encode into your queue.
  2. Once the files are in the queue, change the format, preset, and output file name as needed.
  3. Click on tart Queue. Flash starts at the top of the queue and works its way down one file at a time.

This is also useful if you want to encode the same file with different settings to compare the quality, etc. For this, select the file that you want to test, and click Duplicate as many times as you need. Change the Preset, or click on Settings as needed for each copy of the file. When you are ready, click on Start Queue.

Removing files

  1. Select one file or more in the queue.
  2. Click Remove.

    You will get the following dialog box:

    Flash Video Encoding, Skinning and Components in Wordpress

  3. Click on Yes. Ta-Dah!

Files can be removed from the queue regardless of their status as either Waiting or complete.

Using preset skins

After you encode an FLV file, you can import it into Flash and use a preset skin to allow you and your viewers to control the finished product. Flash's preset skins consist of a rounded corner rectangle for a background panel and any of a number of different buttons. The design for these default skins is the same inside each type; only the kind and number of buttons changes. There are two types of preset skins: skins that show up over the top of your video and skins that show up under your video. Choose the one with the buttons you need. There are options for basics like play/pause and mute, as well as more advanced buttons to enable full screen mode and closed captions. Color can also be affected.

Getting ready

Make sure that you have access to an FLV file. If you completed the recipe for encoding with the Adobe Media Encoder, you can use that FLV. If you need an FLV file, use short.flv.

How to do it...

  1. In Flash, create a new file by going to File | New (Cmd/Ctrl N). Select Flash File (ActionScript 3.0), and hit on OK.
  2. Go to File | Import | Import Video. You should get the following dialog box:

    Flash Video Encoding, Skinning and Components in Wordpress

  3. Click on Browse, navigate to the video file of your choice (such as short.flv), and hit on Choose/OK.

    If you forgot to encode your video file as an FLV before attempting to import it, click on the Launch Adobe Media Encoder button. This opens the encoder so that you can remedy your forgetfulness. Once encoding is complete, just go back into Flash, click on OK if you get a warning dialog box, and browse to your FLV.

  4. Leave Load external video with playback component selected. This is the best choice if sound is involved in your video and also helps with load time.
  5. Click on Continue to get the following options for skinning your FLV:
    Flash Video Encoding, Skinning and Components in Wordpress
  6. Choose any skin you want/like/need.

    You can also choose None from the list if you do not want to use a preset skin but would prefer either none at all or to make your own.

  7. Choose a color for the skin by clicking on the color swatch to access the color picker.
  8. Click on Continue, and you get the Summary page.
  9. Click on Finish, and give Flash a moment to generate everything necessary on the stage.

    This is what shows up in Flash:

    Flash Video Encoding, Skinning and Components in Wordpress

  10. Save the file (Cmd/Ctrl S), and test the movie (Cmd/Ctrl Return) to generate the SWF and see the file in action.

You now have your FLV, the SWF file of your movie, and a SWF file of your skin. You will need to bring all of these pieces into WordPress for the movie to play accurately.

How it works...

The Adobe Media Encoder encodes the selected video file into the FLV format. The FLV file format is highly compatible with the Adobe Flash Player and is generally a small file size for video. Once FLV encoding is complete, the Import Video function of Flash imports the FLV into Flash and wraps it inside an SWF when you test or publish your Flash movie. If you choose a skin, Flash also generates an SWF file for the skin. The buttons in the skin are coded and pretty much ready to go. Some of the more advanced buttons, like the one for full screen mode, require a little more effort on your part. See the section on Setting up Fullscreen mode below.

You get all of this functionality without typing a single line of code.

There's more...

The different buttons available in the preset skins have different capabilities. Choosing different buttons allows your viewer to interact with your movie to varying degrees. Some of the default settings for the movie can be changed using the Component Inspector panel. Below are a few suggestions for ways to edit the default settings.

Hiding and showing preset skins

Just because you chose a skin, it does not mean that you always want it to be visible. Flash has settings to allow you to hide and show your chosen skin If you want to hide/show your skin, use the following steps:

  1. In Flash, have a file open that has a preset skin. If you do not have a file, use skinning.fla.
  2. Use the Selection Tool to select the FLVPlayback component on the stage.
  3. Go to Window | Component Inspector if it is not already open:

    Flash Video Encoding, Skinning and Components in Wordpress

  4. Make sure that Parameters is selected at the top of the panel. This panel allows you to change settings for the FLVPlayback component skin without messing around with code. There are a number of things you can change.
  5. To allow the skin to hide when the viewer's mouse is not over the movie and show when the mouse is over the movie, click on the word false to the right of skinAutoHide. Change false to true.
  6. Test the movie (Cmd/Ctrl Return), and move your cursor over and away from the movie to see hide and show in action.

Stopping AutoPlay

If you want your movie to load in the stopped position, rather than playing as soon as it loads, do the following:

  1. In Flash, have a file open that has a preset skin. If you do not have a file, use skinning.fla.
  2. Use the Selection Tool to select the FLVPlayback component.
  3. Go to Window | Component Inspector if it is not already open:

    Flash Video Encoding, Skinning and Components in Wordpress

  4. Make sure that Parameters is selected at the top of the panel.
  5. Click on the word true to the right of autoPlay. Change true to false.
  6. Test the movie (Cmd/Ctrl Return) to check that it does not automatically start playing. The viewer must hit the play button to get the movie to play.

Setting up Fullscreen mode through Flash

By default, fullscreen mode is enabled in the SWF. In order for it to work, however, you need to add some code to your PHP file in WordPress that will hold the SWF. Follow with us as we go through the necessary steps:

  1. In Flash, have a file open that has a preset skin with the fullscreen button on it. If you do not have a file, use skinning.fla.
  2. Go to File | Publish Settings:
    Flash Video Encoding, Skinning and Components in Wordpress
  3. Select the HTML tab to see the settings.
  4. For Template, select Flash Only - Allow Fullscreen Mode.
  5. Check the box for Detect Flash Version; for Version, set it to at least 9.0.28. It can also be set to a later version of the Flash player.
  6. Click on Publish to generate the HTML page with the necessary code.
  7. Preview this page in your browser by double clicking on the HTML file. This is just to make sure it is working.

    According to Adobe, you will need Flash Player version 9.0.28 or later for the fullscreen mode to work.

  8. View the code for the HTML file. This is easily done by going to View | Page Source (or something similar) when the file is open in your browser. There should be JavaScript in the <head>; section and the <body> section. This needs to be copied and pasted into your WordPress file that is going to house your SWF.

The code in the <head> section is quite lengthy, so it is reproduced here only in part. Copy all of the JavaScript elements in the <head> of the HTML file to the <head> of your file in WordPress. The code begins and ends as follows (the middle is not included due to its length. Also, there may be some differences in your code depending on settings, etc.):

<script language="JavaScript" type="text/javascript">
<!--
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2008 Adobe Systems Incorporated. All rights
reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true :
false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1)
? true : false;
-------- code excerpted due to length --------
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// ------------------------------------------------------------------
-----------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 28;
// ------------------------------------------------------------------
-----------
// -->
</script>

The <body> section code, similar to what is below, needs to be pasted into the <body> of your file in WordPress and should look something like this:

<script language="JavaScript" type="text/javascript">
<!--
var hasRightVersion = DetectFlashVer(requiredMajorVersion,
requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=9,0,28,0',
'width', '550',
'height', '400',
'src', 'skinning',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'skinning',
'bgcolor', '#ffffff',
'name', 'skinning',
'menu', 'true',
'allowFullScreen', 'true',
'allowScriptAccess','sameDomain',
'movie', 'skinning',
'salign', ''
); //end AC code
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed
here.'
+ 'This content requires the Adobe Flash Player.'
+ '<a href="http://www.adobe.com/go/getflashplayer/">Get Flash</
a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
// Provide alternate content for browsers that do not support
scripting
// or for those that have scripting disabled.
Alternate HTML content should be placed here. This content
requires the Adobe Flash Player.
<a href="http://www.adobe.com/go/getflashplayer/">Get Flash</a>
</noscript>

Only incorporate the code inside the <script> </script> and <noscript> </noscript> tags for each sections. The two sections of code work together to allow fullscreen mode to function properly in different browsers.

WordPress and Flash 10x Cookbook Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress
Published: April 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Using Video Component buttons to customize your skin

It is possible that you might prefer to make a skin look the way you want it to look, rather than the way that Adobe designed it to look. There are ways to make this happen. In addition to the preset skins used in previous recipes, you can also use individual component buttons to customize your skin.

Getting ready

Make sure that you have access to an FLV file. If you completed the recipe for Encoding with the Adobe Media Encoder, you can use that FLV. If you need an FLV file, use short.flv.

How to do it...

  1. In Flash, create a new file by going to File | New (Cmd/Ctrl N).
  2. Select Flash File (ActionScript 3.0), and hit on OK.
  3. Go to File | Import | Import Vide.
  4. Click on Browse, navigate to the video file of your choice (such as short.flv), and hit on Choose/OK.
  5. Leave Load external video with playback component selected. This is the best choice if sound is involved in your video and also helps with load time.
  6. Click on Continue, to get the options for skinning your FLV. For Skin, choose None.
  7. Click on Continue, and you get the summary page.
  8. Click on Finish, and give Flash a moment to import the file to the stage.
  9. If the Components panel is not already open, go to Window | Components. Click on the triangle next to Video, as shown in the following screenshot, to get the full list of preset Video components that you can use and ultimately alter:

    Flash Video Encoding, Skinning and Components in Wordpress

  10. To use any one of the component buttons, simply drag it from the Components panel onto the stage. Place it where you want it. It can be on top of, below, or beside your FLV. Unlike with the preset skin, you get to choose the placement.

    If you want more control over placement, create a new layer for the components. Also, you can create a layer below the components and design a panel for the components to sit on. The panel can be as simple as the rounded corner rectangle of the preset skins or more complex with opacity settings and gradation. It is up to you!

  11. As an example, drag the PlayPauseButton onto the stage, and test your movie (Cmd/ Ctrl Return). Click on the button in the SWF. It toggles between being a pause button when the movie is playing and a play button when the movie is paused.
  12. Go back into Flash and drag out the BackButton. Test the movie (Cmd/Ctrl Return). Click on this button to jump back to the start of the movie.

How it works...

These components are pre-coded and ready to go. All you have to do to get the video components to work is have one FLV on the stage for them to affect. The components take care of the rest themselves.

There's more...

Want more diversity in your design? Check out the next section on editing the look of the component buttons.

Modifying Video Component buttons for further customization

The components can be visually altered to make your FLV player even more individualized and unique.

Very simply, you can use the Transform Tool to change the size of the component. Just select a component with the Free Transform Tool, and drag the bounding box to make the component larger or smaller.

The components are movie clip symbols, so you can use the Properties panel to apply a Color Effect. Select the component(s) you want to change, choose a Style of Color Effect, and change the settings for that Color Effect. The selected component(s) will be affected.

Less simply, you can edit the parts of the component discretely. These are movie clip symbols. You can double click on the symbol instance on the stage or double click on the icon for the symbol in the Library to edit the symbol.

Do not delete the symbols that make up the component. This can break the component. If you do not want part of a component to be visible and if it is a symbol itself, then lower the opacity of that symbol instance. Do not delete the symbol instance(s) inside the component.

To reduce confusion, this section uses one of the components with a simpler design: the BackButton. Also, to keep things simpler, the symbols that make up the BackButton component are going to be accessed through the Library panel and referred to by the name that is applied by default, as we see below:

Flash Video Encoding, Skinning and Components in Wordpress
  1. The Library should have a folder called FLV Playback Skins. Click on the triangle next to that folder to open it. It holds all the pieces that make up the different video components that you placed on the stage.
  2. Open the folder for the Forward and Back Buttons and for the Back Button to gain access to the pieces of the BackButton component.
  3. The Back Button folder contains a folder of Assets that are used in the other movie clip symbols outside the Assets folder. Start by editing the elements in the Assets folder.
  4. For instance, double click on the icon next to BackBgOver to change the look of the background elements of the rollover state, such as the color of the glow. In the Timeline, click on the keyframe for the Glow layer to select the outer glow:

    Flash Video Encoding, Skinning and Components in Wordpress

  5. In the Properties panel, change the fill color to anything you want.
  6. Test the movie (Cmd/Ctrl Return) to see that when you roll over the back button with your mouse, you get a different color glow/border than you did before. You get the color you chose.
  7. Double click on the icon beside BackBgDown, and do the same thing to it. Test the movie (Cmd/Ctrl Return). Now, when you click and hold your mouse button down on the button, the glow/outline is the color you chose.
  8. Double click on BackIcon to change the look of the double arrows on the button. Make them larger or smaller with the Transform Tool, or change their color. Since this icon inside of the movie clip symbol is just a merged shape, you can delete this and replace it with something else.

You can even add more layers to any of the movie clips that make up the component. Just do not delete any of the movie clip symbols on the stage or in the library!

Summary

In this article, we learnt encoding through the use of the Flash Media Encoder for reduced file sizes and creation of .flv files along with using Flash's default skinning options and editable video components.

If you have read this article you may be interested to view :

About the Author :


Peter Spannagle

Peter Spannagle is a WordPress Consultant and technology trainer, specializing in client-side coding, design using the Adobe Creative Suite, and online marketing. He is based in Oakland, California and works with clients in the San Francisco Bay Area, statewide, nationally, and internationally. In over 12 years of consulting experience he has enjoyed working with small businesses, non-profits, green businesses, artists, and independent professionals. He invites you to contact him for help with your next WordPress project.

Sarah Soward

Sarah Soward develops the curriculum for and teaches the Adobe Creative Suite and design theory at the Bay Area Video Coalition (http://www.bavc.org). She has 5 years experience as a technology trainer and is Adobe Certified. She specializes in creating web and print collateral for small businesses and non-profits. She is the Art Director for The Pagan Alliance, a non-profit organization, and a working fine artist (oil painting and drawing). In addition to teaching Flash, she is also an expert in the use of Dreamweaver, Fireworks, Photoshop, Illustrator, and InDesign.

Books From Packt

MediaWiki 1.1 Beginner's Guide
MediaWiki 1.1 Beginner's Guide

TYPO3 4.3 Multimedia Cookbook
TYPO3 4.3 Multimedia Cookbook

GlassFish Security
GlassFish Security

Getting started with Audacity 1.3
Getting started with Audacity 1.3

Apache MyFaces 1.2 Web Application   Development
Apache MyFaces 1.2 Web Application Development

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

WordPress 2.8 Themes Cookbook
WordPress 2.8 Themes Cookbook

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software