SWF Files With Custom HTML Templates

– taterboy | June 9th, 2008

Filed under: Flash, Flash AS2 to AS3, Tutorials

AS3 Super Loader Part 2
This post is a continuation of the Action Script 3 Super Loader, though this tip could have many adaptations besides the example below.

Many may already know that when you go to the Publish Settings/ HTML window, there is a drop-down that allows for the choice of HTML templates to use with your .swf. When Flash publishes the HTML page along with the .swf, it dynamically creates the new HTML file that will host your Flash movie, with the correct width, height, file name, background color of the .swf in the source code. Many developers use this HTML page to copy the embed code into another file. Some people ignore this feature all together and use Dreamweaver to produce the code or have a custom HTML template that they modify manually.

There are other options in this drop-down that include things like Flash version checking, scorm support, and SSL encryption. But the reality is, most of us would not use these files in a website or to show a client without at least a little modification. That is why we all probably have a few HTML templates of our own laying around.

Why not take those templates and make Flash HTML Templates, which is super easy. My default template has some custom css styles, javascript functions and centers the .swf on the page. I can use this HTML file to show development progress to a client.

I also have some custom scorm templates that work with a few different tracking systems. A lot of us use swfObject, you can even build a template that produces the correct code for swfObject on export. This may not be a huge time savings, but it is part of a smoother workflow.

This hint is about hooking up our Super Loader to an HTML template, but it should be enough information to build any kind of template.

First off, you should backup your existing HTML template files in case of any errors and more importantly, back up your custom templates in case a Flash update replaces them or a system crash. Plus you may want to share you templates or use them to standardize the workflow of your development team.

The templates are located in User Folder/Library/Application Support/Adobe/Flash CS3/en/Configuration/HTML/ on the mac, or C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ on the PC.

Inside the default.html file, you will see the script for embedding the .swf using AC_RunActiveContent. This script shows the best description of what most of the variables are.

Other Variables that are not well defined below:
$TT = the name that will show up in the drop down menu.
$DX, $DS, and $DF = flash version detection and the AC_RunActiveContent generation.
$CS = metedata tag
$PO = param tags for width, height, quality and color.
The rest is just HTML, so go crazy.

Modifying the Super Loader Stage class:
The first thing we need to do is modify the Super Stage class to allow for a dynamic source file, with a variable check.

class original source here.

?View Code ACTIONSCRIPT
package com.HDI.stage {
	/*import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageDisplayState;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;*/
	import flash.display.Stage;
	import flash.display.StageDisplayState;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	import flash.display.MovieClip;
 
	public class SuperStage extends MovieClip {
		//External Variables:
		var fps:Number = 30;
		/* remove the variable definition from swfURL*/
		var swfURL:String;
		var ldrURL:String = "loaderbar.swf";
 
		//Loader Variables:
		var loadComplete:Boolean = false;
		var loadPerc:Number;
		var loaderCnt:Number = 0;
 
		//Internal Objects:
		var mainMovie:Object;
		var mainLdr:Object;
		var mainContainer:MovieClip;
		var loaderMC:MovieClip;
 
		public function SuperStage():void{
			init();
		}
		private function init():void{
			/* Add variable check here and use a default swf name if swfURL does not exist.*/
			if(loaderInfo.parameters.swfURL){
				swfURL = loaderInfo.parameters.swfURL;
			}
			else{
				swfURL = "sample.swf";
			}
			//Set all the stage properties onload
			stage.showDefaultContextMenu = false;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			//load the main container and the loader container
			/*
			this is not manditory and can make things more complex,
			but so that the loader always stays on top, I add these to MovieClips
			then load everything else inside these clips.
			Load the loaderMC second so that it remains on top.
			*/
			mainContainer = new MovieClip();
			addChild(mainContainer);
			loaderMC = new MovieClip();
			addChild(loaderMC);
 
			//setup stage init incase I need it later.
			loaderInfo.addEventListener(Event.INIT,initStage);
 
			//start to load the loader bar.
			loadObject(loaderMC,ldrURL,null);
			stop();
		}
		function initStage(ev:Event):void{
			//stage.stageWidth = thisWidth;
			//stage.stageHeight = thisHeight;
		}
		//main loader method
		function loadObject(targ:Object,path:String,mon:Object):void{
			var ldr:Loader = new Loader();
			var ldrReq:URLRequest = new URLRequest(path);
			ldr.load(ldrReq);
			ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, ldrFin);
			ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, ldrProgress);
			ldr.name = "ldr" + loaderCnt;
			targ.addChild(ldr);
			loaderCnt ++;
		}
		//finish loading. first two items loaded will be ldr0(loader bar) and ldr1(main content)
		function ldrFin(ev:Event):void{
			if(ev.target.loader.name == "ldr0"){
				mainLdr = ev.target.content;
				mainLdr.loadStat = true;
				mainLdr.x = (stage.stageWidth/2)-(mainLdr.width/2);
				mainLdr.y = (stage.stageHeight/2)-(mainLdr.height/2);
				loadObject(mainContainer,swfURL,mainLdr);
			}
			else if(ev.target.loader.name == "ldr1"){
				mainMovie = ev.target.content;
				stage.frameRate = ev.target.frameRate;
			}
		}
		//progress handler, sends loading info to loader bar.
		function ldrProgress(ev:ProgressEvent):void{
			if(mainLdr){
				mainLdr.ldrMon(ev.bytesLoaded/ev.bytesTotal);
			}
		}
	}
}

The rest happens in the HTML Template:
The new template is a modified copy of the default template.
It will set the stage swf as the source, then we will use flashVars to load in the current project name that will be used by the loader to display our current file.

$TTSuper Loader
$DXDefaultDetection.html
$DS
Display Adobe Flash Movies in HTML files updated for Active Content. NOTE: Publishing this template also creates AC_RunActiveContent.js in your HTML output folder which must be uploaded with the HTML.
$DF
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
$CS
<title>$TI</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
	body{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		font-family: Arial;
		font-size: 11px;
	}
	center{
		margin: 10% 0px 0px 0px;
	}
</style>
</head>
<body bgcolor="$BG">
<!--url's used in the movie-->
$MU
<!--text used in the movie-->
$MT
<!-- saved from url=(0013)about:internet -->
<center>
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=$FV,$JR,$NR,0',
			'width', '$WI',
			'height', '$HE',
			'src', 'mainFlash',
			'quality', '$QU',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', '$HA',
			'play', '$PL',
			'loop', '$LO',
			'scale', '$SC',
			'wmode', '$WM',
			'devicefont', '$DE',
			'id', 'mainFlash',
			'bgcolor', '$BG',
			'name', 'mainFlash',
			'menu', '$ME',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', '$MO',
			'salign', '$SA' ,
			'FlashVars', 'swfURL=$TI' + '.swf'
			); //end AC code
	}
</script>
<br/>&copy;2008 taterboy, Inc. All Rights Reserved
</center>
</body>
</html>

Pretty Simple.
source

UPDATE

Updated the following code in “com/HDI/stage/SuperStage.as” so that the Loader will actually work with FlashVars. Also updated “FlashVars” in the HTML template code to have a capital “F”. The source files have been updated as well.

?View Code ACTIONSCRIPT
if(loaderInfo.parameters.swfURL){
	swfURL = loaderInfo.parameters.swfURL;
}
else{
	swfURL = "sample.swf";
}

Technorati Tags: , , , , ,

| 5 Comments » | facebook:

5 Comments »

  1. thanks alot

    Comment by anudeep — August 26, 2008 @ 1:49 am

  2. Its all depend on the thing that how much you know about this coding. I thing it is not that much easy. but if you know, than it will be easy. And this tips are really helpful thanks.

    Comment by flash templates — October 29, 2008 @ 1:45 pm

  3. Hello TaterBoy,

    thanks for this beautiful loader, im studying it but i have a doubt related to this piece of code

    function loadObject(targ:Object,path:String,mon:Object,funFunction:Function):void{
    var ldr:Loader = new Loader();
    var ldrReq:URLRequest = new URLRequest(path);
    ldr.load(ldrReq);
    ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, funFunction);
    ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, ldrProgress);
    ldr.name = “ldr” + loaderCnt;
    targ.addChild(ldr);
    loaderCnt ++;
    }

    what is the mean of “mon:Object” arguments?? It seems to has not been used anywhere.

    Please let me know, im struggling about it!

    Thanks

    Francesco

    Comment by Francesco — February 1, 2009 @ 12:09 am

  4. That is a good catch, sorry about that. “mon” would point to a loader bar; we do not need it in this sample because we are using the same loader for everything. I should have removed it. I must have thought to make that dynamic originally but neglected to hook it up and realized it was not needed.

    In theory, you could add this line to the loadObject method to change the loader bar you are using to show the progress.
    mainLdr = mon;

    Comment by taterboy — February 1, 2009 @ 11:04 am

  5. thanks

    Francesco

    Comment by Francesco — February 2, 2009 @ 1:26 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

*