Loading External Video: flv

Using the NetStream and NetConnection Classes

The NetConnection class lets you play streaming FLV files from either an HTTP address or a local drive. The NetStream object takes a NetConnection object as a parameter to specify which FLV file you want to load. The FLV file will inherit the position, rotation, and scale properties of the targeted video object it replaces. The upper left corner of the loaded image or FLV file aligns with the registration point of the targeted video object.

The NetStream class has a play variable that is assigned the FLV to be played.

ns.play(url);
  • url: String – This should contain the URL (absolute or relative) to the FLV file to be loaded into the video object. If the ad server will be passing the URL as a variable, please use _level0.moviePath

Example of assigning the ns.play value with a hard-coded FLV url:

ns.play("http://www.server.com/video.flv");

Example of assigning the ns.play value with a variable url value (to be set by the site):

my_ns.play(_level0.moviePath);

 

A Working Example of the NetStream and NetConnection classes

The following example expects a variable, _level0.moviePath, to be set externally when the SWF file is published to the page.

When the user clicks the play button the ad will replace the my_videoobject with the FLV file defined by the _level0.moviePath, in this case clouds.flv.

Click on the play button to view the example. The code is briefly explained below. Click here for a zip file containing the original files for reference.

The actionscript code associated to the play button in the main SWF file:

on (release) {
   my_ns.play("_level0.moviePath");
}

Initializing the _level0.moviePath variable upon page render:

SOB.flashVars = "&moviePath=clouds.flv";
References

Adobe LiveDocs AS2 – The official documentation on the Adobe Flash NetStream and NetConnection classes for AS2.

Adobe LiveDocs AS3 – The official documentation on the Adobe Flahs NetStream and NetConnection classes for AS3.

Zip File (10k) – A file containing the original Adobe Flash FLA file used for the example above.

Loading External Video: swf

The loadMovie() function is used to replace a movie clip object in Flash with a SWF video file. The SWF file will inherit the position, rotation, and scale properties of the targeted movie clip it replaces. The upper left corner of the loaded image or SWF file aligns with the registration point of the targeted movie clip.

Three parameters can be passed to the loadMovie() function:

loadMovie(url, target, method);
  • url: String – This should contain the URL (absolute or relative) to the SWF file to be loaded into the movie clip object. If WDIG will be passing the URL as a variable, please use _level0.moviePath
  • target: Object – This is a reference to a movie clip object to be replaced by the SWF video file
  • method: String (optional) – This specifies an HTTP method for sending variables (either the string GET or POST). Omit this parameter if there are no variables to be sent.

Example of the loadMovie() function with a hard-coded SWF url:

loadMovie("http://www.server.com/video.swf", "movie_placeholder");

Example of the loadMovie() function with a variable url value (to be set by the site):

loadMovie(_level0.moviePath, "movie_placeholder");

The following example expects a variable, _level0.moviePath, to be set externally when the SWF file is published to the page.

When the user clicks the play button the ad will replace the movie_placeholder object with the SWF file defined by the _level0.moviePath, in this case test_movie.swf.

Click on the play button to view the example. The code is briefly explained below. Click here for a zip file containing the original files for reference.

The actionscript code associated to the play button in the main SWF file:

on (release) {
   loadMovie(_level0.moviePath, "movie_placeholder");
}

Initializing the _level0.moviePath variable upon page render:

SOB.flashVars = "&moviePath=test_movie.swf";

Adobe LiveDocs – The official documentation on the Adobe Flash loadMovie() function.

Zip File (10k) – A file containing the original Adobe Flash FLA file used for the example above.

Polite Download

When utilizing Polite Download, a small initial download takes place with the page load. A larger secondary download occurs after the page has loaded completely. This allows the page content to load normally and protects the user experience.

Flash Wmode

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order (“z-index”) of those layers. By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. In older browsers, attempts to place a DHTML layer on top of a Flash layer would fail.

Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content (see below). Use the wmode parameter to allow layering of Flash content with DHTML layers. The wmode parameter can be ‘window’ (default), ‘opaque’, or ‘transparent’.

Using a wmode value of ‘opaque’ or ‘transparent’ will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.

Note: The wmode parameter is supported only on some browser/Flash Player version combinations. If the wmode parameter is not supported, the Flash movie will always display on top.

The wmode attribute/parameter lets you use the transparent Flash content, absolute positioning, and layering capabilities available in Internet Explorer 4.0+. This attribute/parameter works only in Windows with the Flash Player ActiveX control.

“window” plays the application in its own rectangular window on a web page. Window indicates that the Flash application has no interaction with HTML layers and is always the topmost item.

“opaque” makes the application hide everything behind it on the page.

“transparent” makes the background of the HTML page show through all the transparent portions of the application and can slow animation performance.

“opaque windowless” and “transparent windowless” both interact with HTML layers, letting layers above the SWF file block out the application. The difference between the two is that transparent allows transparency so that HTML layers below the SWF file might show through if a section of the SWF file has transparency; opaque does not. The default value is window if this attribute is omitted. Applies to object only.

Multiple ClickTags

If you have several url’s that an ad will drive traffic to, use the same clicktag code found in developement details for the ad, but for each different clicking url, utilize a different name for the clicktag – example below. Essentially, you just need to use a different clicktag so our system can react accordingly:

  • url1 – clicktag or clickTag
  • url2 – clicktag2 or clickTag2
  • url3 – clicktag3 or clickTag3
  • url4 – clicktag4 or clickTag4

Tip #1: Creative serving on the Disney sites, Family Portfolio or Playdom should use “clickTag” instead of “clicktag”

Tip #2: When using multiple clicktags, be sure to designate each clickable area with a button of its own and make sure that you don’t overlap buttons.

CPU Usage

Adobe’s Flash Player utilizes a computer’s CPU (central processing unit) in handling all animation, masking, and computation contained within a Flash file. If a Flash file contains heavy amounts of mathematical computation for elements such as animation, loops, or timers, it will require a much greater percentage of CPU usage. As a result, the Flash file is forced to compete with other Flash files and other applications for CPU usage, which causes all Flash elements on the page to slow down significantly. There are several ways to help cut down on the CPU usage your Flash file requires. One way is to limit the amount of “math-based” animation – animation which is controlled by mathematical-based action script. Another way is to limit or eliminate looping functions in action script. Looping functions are usually associated with timers. Masking and animated masking techniques can also require a large amount of CPU resources.

One way to estimate how CPU intensive your Flash file may be is to open your computer “Task Manager” and view the “Performance” tab — this gives a graphical estimate of CPU usage. With the Task Manager open, then open your swf file in the Flash player – you may see a spike as your Flash file is animating.

A small spike of 20-30% is normal; if your CPU usage jumps up to 80-100% the Flash file may need revising until it uses less CPU resources. Developers often have more powerful machines so this test would be better performed on a machine closer to what the average user would use.

For more information on optimizing Flash files, see Adobe’s help page, “Optimize Flash documents“.

The Walt Disney Company reserves the right to reject creative if it requires a higher than normal percentage of CPU resources and would, as a result of this, cause other page elements to slow down.