Insérer proprement une animation Flash avec SWFObject

Insérer proprement une animation Flash dans une Vue n’est pas simple. Il existe heureusement un outil qui peut prendre en charge cette tâche délicate, SWFObject. Gwoo, développeur de la core team de CakePHP, avait il y a bien longtemps proposé un Helper pour intégrer facilement SWFObject dans Cake. Nous proposons ici au lecteur un Helper optimisé et mis à jour pour convenir à la dernière version de SWFObject.

1. Pré-requis

Pour faire fonctionner le Helper, nous devons commencer par télécharger la dernière version de SWFObject : Télécharger SWFObject Nous récupérons une archive dans laquelle nous trouvons le fichier swfobject.js à placer dans {app}/www/js/, et le fichier expressInstall.swf à placer où bon nous semble dans {app}/www/ (nous choisissons de le placer dans {app}/www/img/).

2. SwfobjectHelper

Voici sans plus tarder le Helper Swfobject, à recopier dans un fichier {app}/views/helpers/swfobject.php :

<?php
/**
 * Insertion d'une animation Flash avec SWFObject
 * http://code.google.com/p/swfobject/
 */
class SwfobjectHelper extends Helper
{
/**
* Swfobject Flash vars.
*
* @var array
*/
    var $__flashvars = array();
/**
* Swfobject params.
*
* @var array
*/
    var $__swfparams = array();
/**
* Swfobject Attributes.
* 
* @var array
*/
    var $__attributes = array();
 
/**
* Options par défaut
*
* @var array
*/
    var $__baseOptions = array(
    	'width'   => '640',
    	'height'  => '480',
    	'version' => '9.0.0',
    	'express' => 'expressInstall.swf'
    );  
 
/**
* Création de l'objet Flash
*
* @param string $path Chemin vers l'animation Flash
* @param string $id Id de l'élément HTML qui sera remplacé par l'animation
* @param array $options
* @return Code HTML à insérer entre <head>...</head>
*/
	function create($path, $id = 'flashcontent', $options = array())
	{
		$options = am($this->__baseOptions, $options);
 
		$out = '<script type="text/javascript">';
		$out .= "\n";
 
		// Flashvars
		$out .= $this->javascriptObject('flashvars', $this->__flashvars);
 
		// Params
		$out .= $this->javascriptObject('params', $this->__swfparams);
 
		// Attributes
		$out .= $this->javascriptObject('attributes', $this->__attributes);
 
		// SWF Object
		$out .= 'swfobject.embedSWF("';
		$out .= str_replace('//', '/', $this->webroot.$path);
		$out .= '", "';
		$out .= $id;
		$out .= '", "';
		$out .= join('", "', $options);
		$out .= '", flashvars, params, attributes';
		$out .= ');';
		$out .= "\n";
		$out .='</script>';
 
		return $out;
	}
 
/**
* Ajout d'une Flashvar
*
* @param string $var
* @param mixed $value
*/
	function addFlashvar($var, $value = null)
	{
		if(is_array($var))
		{
			$this->__flashvars = am($var, $this->__flashvars);  
		}
		else if($value !== null)
		{
			$this->__flashvars[$var] = $value;
		}
	}
 
/**
* Ajout d'un Param
*
* @param string $var
* @param mixed $value
*/
	function addParam($var, $value)
	{
		if(is_array($var))
		{
			$this->__swfparams = am($var, $this->__swfparams);  
		}
		else if($value !== null)
		{
			$this->__swfparams[$var] = $value;
		}
	}
 
/**
* Ajout d'un Attribut
*
* @param string $var
* @param mixed $value
*/
	function addAttribute($var, $value)
	{
		if(is_array($var))
		{
			$this->__attributes = am($var, $this->__attributes);	
		}
		else if($value !== null)
		{
			$this->__attributes[$var] = $value;
		}
	}
 
/**
* Renvoie une liste de valeurs sous forme d'un objet Javascript
*
* @param string $name Nom de l'objet
* @param mixed $values
*/
	function javascriptObject($name, $values = array())
	{
		$params = array();
 
		foreach ($values as $key => $value)
		{
			$params[] = $key . ': "' . $value . '"';
		}
 
		return 'var ' . $name . ' = {' . join(",\n", $params) . "};\n";
	}
}
?>

3. Utilisation

Nous devons devons inclure le Helper dans le Contrôler qui en aura besoin, ou dans le AppController si l’animation Flash sera présente partout.

// {app}/app_controller.php
class AppController extends Controller
{
	var $helpers = array ('Html', 'Form', 'Javascript', 'Swfobject');
}

Dans notre layout principal, nous ajoutons un lien vers le fichier javascript de SWFObject, quelque part entre <head> et </head> :

// {app}/views/layouts/default.ctp
echo $javascript->link('swfobject');

La marche à suivre pour insérer une animation Flash est différente selon qu’elle doive se trouver dans le layout commun à toutes les pages du site ou dans une seule page.

3.1. Dans le layout

Imaginons que notre animation Flash soit le logo du site : elle est donc présente sur toutes les pages du site, et nous allons la placer dans le layout principal. Nous commençons par afficher une simple image Gif pour les visiteurs chez qui le lecteur Flash est absent, en prenant soin de donner un id à l’élément parent, ici un div.

// {app}/views/layouts/default.ctp
<div id="logo">
	<a href="/"><img src="/img/logo.gif" alt="Mon logo"></a>
</div>

Puis quelque part entre dans l’entête HTML :

// {app}/views/layouts/default.ctp
<head>
	<?php
	echo $javascript->link('swfobject');
	echo $swfobject->create('/img/logo.swf', 'logo', array('width' => 200, 'height' => 100, 'express' => '/img/expressInstall.swf'));
	?> 
</head>

3.2. Dans une Vue

Imaginons maintenant une animation Flash à insérer dans une page : cette fois nous allons passer par la méthode View::addScript pour ajouter du code dans l’entête HTML :

// {app}/views/layouts/default.ctp
<head>
	<?php
	echo $javascript->link('swfobject');
	echo $scripts_for_layout;
	?> 
</head>
// {app}/views/pages/flashpage.ctp
<?php
$this->addScript('flash', $swfobject->create('/img/anim.swf', 'anim', array('width' => 640, 'height' => 480, 'express' => '/img/expressInstall.swf')));
?> 
 
<div id="anim">
	<p>Ici le texte alternatif qui sera affiché si le lecteur Flash n'est pas présent.</p>
</div>
Pierre-Emmanuel Fringant

Articles connexes

Commentaires

rosti
3 janvier 2011 à 21:41

bravo pour ce tuto, juste un détail.

j’aimerais savoir comment passer des paramètre à swfobject pour que mon menu passe au dessus de l’animation.

j’ai essayé

echo $swfobject->addParam(‘WMODE’,'transparent’);

mais ça ne marche pas.

si tu peux m’aider, ça serait sympa.

Merci d’avance.

Participez

Pour insérer une portion de code, utilisez <pre lang="php">...</pre>