May
26
2009

 

  • Create a new Project.
  • Make sure the Components window is open.  If not, open it using Window->Components.componentflv
  • Drag component from the Components window into the stage.  Resize it to the size you want.  In the next step, you can decide the scaling mode of the video, such as maintainAspectRatio or noScale.
  • Open the Parameters window.  Use Properties->Parameters if it is not open.  Here you can see options that you can change to customize the player (if the window is blank, select the player movie on the stage to select it).  For example, let’s change the skin.customizeflvplayer
  • Change the scaleMode if you like, if you use noScale, you need to make sure the video fits into the player.  The options are quite self explanatory.  skinAutoHide causes the player control to be hidden unless you mouse over into the player.  Double click or click the Magnifying Glass icon on the right side of skin, a dialog should pop up.  Select a skin.selectskinflvplayer
  • The source parameter is the most important parameters.  This is where you specify what video to play.  Enter the flv filename there.  You can pass a full URL or a relative path.

Reusing the same swf for multiple videos

You can pass the source parameter via FlashVars by writing code that reads the value and pass it to the FLVPlayback component.

  • Create a document class, for example, I named mine FlvPlayer.
  • flvplayerdocclassCreate the FlvPlayer.as file and enter the following (this assumes that I use videoFilename as the variable name for the source).
    [c]
    package
    {
    	import flash.display.Sprite;
    	
    	public class FlvPlayer extends Sprite
    	{
    		
    		public function FlvPlayer()
    		{
    			trace("this.loaderInfo.parameters.videoFilename="+this.root.loaderInfo.parameters.videoFilename);
    			var parameters=this.loaderInfo.parameters;
    			flvPlayer.source=parameters.videoFilename;
    			if (parameters.autoPlay=="1")
    				flvPlayer.autoPlay=false;
    			else	
    				flvPlayer.autoPlay=true;
    		}
    	}
    }
    [/c]

    While at it, I also added the ability to turn on or off the autoPlay.

  • Then add the FlashVars into the html. For example, if I want the source to be video1.flv and no autoPlay, then the FlashVars is like this: videoFilename=video1.flv&autoPlay=0
    More about FlashVars: http://permadi.com/blog/?p=1206

    [c]
    <script language="JavaScript" type="text/javascript">
    <!--
    if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
    	alert("This page requires AC_RunActiveContent.js.");
    } else {
    	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,115,0',
    			'width', '550',
    			'height', '400',
    			'src', 'FLVplayer',
    			'quality', 'high',
    			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
    			'align', 'middle',
    			'play', 'true',
    			'loop', 'true',
    			'scale', 'showall',
    			'wmode', 'window',
    			'devicefont', 'false',
    			'id', 'FLVplayer',
    			'bgcolor', '#ffffff',
    			'name', 'FLVplayer',
    			'menu', 'true',
    			'allowScriptAccess','sameDomain',
    			'allowFullScreen','false',
    			'movie', 'FLVplayer',
    			'salign', '',
    			'FlashVars', 'videoFilename=video1.flv&autoPlay=0'
    			); //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.macromedia.com/go/getflash/>Get Flash</a>';
    		document.write(alternateContent);  // insert non-flash content
    	}
    }
    // -->
    </script>
    [/c]

Example

Video content from: www.archieve.org.
The first video is from 1984 Computer Chronicles, about Computer Games.
The full video can be found at: http://www.archive.org/details/Computer1984_4

The second video is from 1985 Computer Chronicles, about Amiga and Atari.
The full video can be found at: http://www.archive.org/details/Amigaand1985

2 Responses to “Using FLVPlayback Component in Flash CS3 Professional”

  1. [...] Example This example is written in Flash CS4 in order to demonstrate F4V playback, but the steps are the same in CS3 (just replace the video filename: example.f4v with a flv file.  Starting with a new Flash project, insert a Video object into the Library.  The option is in the Library window option menu. Name the symbol. Add it onto the stage, and name it.  In this example, I name it: video. Add the code below.  It’s a barebone code to play FLV, and not designed to be robust.  A related post on how to use Flash Component is here: http://permadi.com/blog/2009/05/using-flvplayback-component-in-flash-cs3-professional/ [...]

  2. [...] Using flvplayback component in flash cs3 professional on Permadi.com [...]