Image Viewer

In this tutorial i'm going (again) to show you, how to make communicate flash and javascript.

We'll make a ImageViewer : there are HTML links which call a method within the flash thanks to javascript.

So we have the flash side, and the js side.

output

Alternative content

Get Adobe Flash player

So let's start with the flash side : 

 package;

import flash.net.URLRequest;
import flash.display.Loader; 
import flash.events.Event;
import flash.external.ExternalInterface; 
import flash.Lib;


class Main {

	/*Image loaded*/
	public var image:Dynamic; 
	
	static function main()
	{
		new Main();
	}
	public function new()
	{
		/*check if the current flash player is in a container that offers an external interface.*/
		if (ExternalInterface.available) //BOOLEAN
		{
			/*This application contains a function named "view"
			 * we register it with the containing browser by using the addCallBack() method
			 * The javascript code running in the browser will be able to catch it*/
			ExternalInterface.addCallback("view",view );
	    }
	    
	    /*Display the first image*/
	    view("http://razaina.fr/images/panda.png");
	}
	public function view(url:String)
	{
		/*If image exists remove it from the scene
		 * image is a Dynamic value, it can be set as NULL
		 */
		if(image)
		{
			Lib.current.removeChild(image);
		}

		/*create a new Loader for the next image to load*/
		image = new Loader();
		image.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeContent);
		
		/*load it*/
		image.load(new URLRequest(url));
	}
	
	public function resizeContent(e:Event)
	{ 
		/*This function just resize and replace at the center of the scene the image*/
		var stageWidth:Float  = Lib.current.stage.stageWidth;
		var stageHeight:Float = Lib.current.stage.stageHeight;
		var imageWidth:Float  = image.width;
		var imageHeight:Float = image.height;

		if(imageWidth > stageWidth)
		{
			imageHeight = (stageWidth * imageHeight)/imageWidth;
			imageWidth  = stageWidth;
		}
		if(imageHeight > stageHeight)
		{ 
			imageWidth  = (stageHeight * imageWidth)/imageHeight; 
			imageHeight = stageHeight; 
		}

		image.x      = (stageWidth - imageWidth)/2;
		image.y      = (stageHeight - imageHeight)/2;
		image.width  = imageWidth;
		image.height = imageHeight;
		
		/*add it on the scene*/
		Lib.current.addChild(image);
	} 
}

Compile :

haxe -swf9 ImageViewer.swf -main Main

Ok, now the js part :

package;

import js.Lib; 
import Reflect;
class JS
{
	static function main(){}
	
	/*This function will call the view() method within the swf
	 */
	public static function view(url:String, ?swfID:String="ImageViewer")
	{
		/* Get the swf with its ID
		 * by Default its ID is ImageViewer*/
		var swf = Lib.document.getElementById(swfID);
		
		/*Use the Reflect.callMethod() method to call the view method
		 *check the API for details http://haxe.org/api/reflect*/
		Reflect.callMethod(swf, Reflect.field(swf, "view"), [url]);
	}
}

Compile it :

haxe -js JS.js -main JS

Ok then, let's create the HTML page in which we'll import our javascript script, and we'll display the swf.

I use SwfObject (js script) to display dynamiclly the swf, get it here

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>ImageViewer</title>
	<script type='text/javascript' src='swfobject.js'></script>
	<script type='text/javascript' src='JS.js'></script>
	</head>
	<body>  
		<div id="imageviewer"></div>
		<ul>
			<li><a href='#' onclick='JS.view("elephant.png"); return false;'>elephant</a></li> 
			<li><a href='#' onclick='JS.view("panda.png"); return false;'>panda</a></li>
		</ul> 
		<script type="text/javascript">

			var flashvars  = { background_color: "0xffffff" };
			var params     = { allowScriptAccess : "always"  };
			var attributes = { name: 'imageviewer', id:'ImageViewer'};
		swfobject.embedSWF("ImageViewer.swf", "imageviewer", "600", "300", "10.0.0", "expressInstall.swf", flashvars, params, attributes );

		</script>

	</body>
</html>
sources.zip
(35 times)