Visionneuse de photos

Dans ce tuto je vais montrer dans un petit exemple de "visionneuse de photo" comment faire communiquer flash et le javascript.

Des liens HTML appellent une fonction dans le flash grâce au javascript.

Ainsi nous avons d'une part le flash, et de l'autre le javascript.

output

Alternative content

Get Adobe Flash player

Commençons par voir le côté flash :

 package;

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


class Main {

	/*la photo*/
	public var image:Dynamic; 
	
	static function main()
	{
		new Main();
	}
	public function new()
	{
		/*vérifiez si le flash player courrant est dans un conteneur qui offre une interface externe*/
		if (ExternalInterface.available) //BOOLEAN
		{
			/*Cette application contient une fonction appelée view()
			 * On enregistre ce dernieren utilisant la méthode addCallBack()pour qu'il soit accessible de l'extèrieur
			 * Le javascript sera désormais capable de capturer cette fonction*/
			ExternalInterface.addCallback("view",view );
	    }
	    
	    /*Affichons la première image*/
	    view("http://razaina.fr/images/panda.png");
	}
	public function view(url:String)
	{
		/*Si l'image existait déjà précédement on la retire de la scene
		 * image est une valeur de type Dynamic et peut prendre la valeur NULL
		 */
		if(image)
		{
			Lib.current.removeChild(image);
		}

		/*Créez un nouveau Loader pour pouvoir charger la prochaine photo*/
		image = new Loader();
		image.contentLoaderInfo.addEventListener(Event.COMPLETE, resizeContent);
		
		/*Chargez la photo*/
		image.load(new URLRequest(url));
	}
	
	public function resizeContent(e:Event)
	{ 
		/*Cette fonction replace et redimensionne au centre de la scene l'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;
		
		/*rajoutez la sur la scene*/
		Lib.current.addChild(image);
	} 
}

Compilez :

haxe -swf9 ImageViewer.swf -main Main

Maintenant la partie JS :

package;

import js.Lib; 
import Reflect;
class JS
{
	static function main(){}
	
	/*Cette fonction appelera la fonction view() à l'intèrieur du flash
	 */
	public static function view(url:String, ?swfID:String="ImageViewer")
	{
		/* Récupérez le swf grâce à son ID
		 * par défaut je l'ai définit comme étant égale ) "ImageViewer"*/
		var swf = Lib.document.getElementById(swfID);
		
		/*Uitilisez la fonctino Reflect.callMethod() pour appeler la fonction view() du flash
		 *pour plus de détails allez voir l'API http://haxe.org/api/reflect*/
		Reflect.callMethod(swf, Reflect.field(swf, "view"), [url]);
	}
}

Compilez :

haxe -js JS.js -main JS

Maintenant créez la page HTML dans laquelle nous importerons le script javascript, et nous y afficherons aussi notre flash.

J'utilise le script javascript SwfObject pour afficher dynamiquement le swf. Vous pourrez le récupérer ici.

<?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>

(33 fois )