Non seulement il est très réussi visuellement, et en plus il est gratuit

Pour la mise en place, il faut passer par la manipulation d’un fichier XML.

Rien de bien sorcier, il suffit de correctement assimiler la syntaxe qui n’est la traduction de « tu prend cette image, puis celle-ci en effectuant telle transition ».

Bon, ce qui donne quand même une structure de ce genre :

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
	<settings>
    	<prev_button></prev_button>
    	<prev_symbol></prev_symbol>
    	<next_button></next_button>
    	<next_symbol></next_symbol>
	</settings>

    <slides>
        <slide>
            <url>images/slide_1.jpg</url>
        </slide>
		<!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" />
        <slide>
       		<url>images/slide_2.jpg</url>
        </slide>
		<!-- changing transition between second & third slide -->
		<transition num="4" direction="right" shader="phong" />
		<slide>
            <url>images/slide_3.jpg</url>
        </slide>
        <!-- transitions properties defined in transitions template -->
	</slides>

</cu3er>

L’image suivante vous montre les « découpages » et transitions possibles :

Allez, je vous laisse regarder la documentation ainsi que les démos sur le site officiel.

Lien :

• cu3er

Les 2 fonctionnent avec le même objectif : remplacer un bloc par un objet flash (swf).

Le premier est sans doute le plus connu : SWFObject.

<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

Le second se nomme FlashReplace.

<script src="js/FlashReplace.js" type="text/javascript"></script>
<script type="text/javascript">
    FlashReplace.replace("flash-content", "/flash/my-movie.swf", "flash-element-id", 800, 200);
</script>

A vous de choisir

Liens :

• FlashReplace
• SWFObject

Coté Photoshop, l’accent semble avoir été mis sur la retouche photos.

La vidéo de démonstration :

Coté Flash, grosse nouveauté : la possibilité de réaliser des applications iphone ! Oui, vous avez bien lu. Les flashers vont envahir la planète iphone…

La vidéo de démonstration :

A noter qu’il existe un site internet où vous pouvez suivre toutes les annonces du projet CS5.

Lien :

• cs5.org

Nous allons voir, dans cet article, un préchargement simple via une zone de texte (TextField) en mettant l’accent sur son fonctionnement.

Nous aborderons cette technique qui affiche la progression sous forme de pourcentage en introduisant quelques principes de base de conception d’une animation Flash.

I. Préparation

1. Créez un fichier Flash (AS 2.0)
2. Renommez le seul calque présent en Préchargement
3. Ajoutez 2 nouveaux calques nommés AS2 et Animation
4. Munissez-vous d’une grande photo (200 Ko suffiront)

Cette première étape permet d’organiser son projet :

• les symboles du préchargement (1 zone de texte dans notre cas) seront placés sur la première image du calque Préchargement
• le code du préchargement sera inséré sur la première image du calque AS2
• les symboles de l’animation (1 photo dans notre cas) seront placés sur la deuxième image du claque Animation

Organisé ainsi, le calque AS2 est destiné à contenir l’ensemble de votre code AS2.0.

II. Partie graphique

a. La zone de texte de préchargement (TextField)

1. Sélectionner la 1ère image du calque Préchargement
2. Sélectionnez l’outil Texte (racc : ‘T’)
3. Créez, sur la scène, une zone de texte dynamique au contenu centré.
4. Nommez l’occurrence prechargementTF
5. Choisissez la police et sélectionnez l’option Anti-alias pour la lisibilité comme méthode de rendu
6. Intégrez les caractères 0,1,2,3,4,5,6,7,8,9,%

L’option Anti-alias permet l’utilisation de polices embarquées. Autrement dit, lors de la publication, les caractères sont vectorisés puis intégrés à votre animation. Le swf rompt ainsi le lien avec les polices présentes sur le poste client et permet un affichage de qualité (lissage du texte).

Ce fonctionnement pourrait être assimilé à une fonction JavaScript qui remplacerait chaque caractère d’une page par une image.

Pour une zone de texte dynamique dont le contenu n’est pas défini à l’avance, Flash exige la déclaration des caractères utilisés pour qu’il puisse les vectoriser et les intégrer. Bien sûr cette option alourdit l’animation, il est donc nécessaire de s’interroger sur son utilité pour le préchargement d’une animation de petite taille.

b. L’insertion de la photo

1. Sélectionner la 2ème image du calque Animation, faites un clic droit puis sélectionnez Insérez une image clé vide.
2. Glissez/déposez la photo sur la scène.

Par défaut un swf est lu de la 1ère image de la scène jusqu’à la dernière puis revient à la première et ainsi de suite selon une cadence que l’on peut définir (par défaut : 12 images par seconde). En positionnant notre animation sur la 2ème image nous nous assurons que le lecteur affiche dans l’ordre le préchargement puis notre photo.

Il faudra donc piloter notre animation sous peine de voir défiler indéfiniment le préchargement puis la photo.

III. Le code (AS 2.0)

1. Sélectionner la 1ère image du calque AS2
2. Dans le fenêtre Actions (racc : ‘F9′) insérer le code ci-dessous

//On stoppe la lecture du swf
stop();

//A la cadence définie (12 fois par seconde dans notre cas)
_root.onEnterFrame = function() {
    //On renseigne le ratio contenu téléchargé / contenu total à télécharger
    _root.prechargementTF.text = Math.round( _root.getBytesLoaded() / _root.getBytesTotal() * 100 )+"%";

    //Si tout est téléchargé
    if(_root.getBytesLoaded() == _root.getBytesTotal()) {
        //On supprime cette fonction
        delete _root.onEnterFrame;

        //On passe à la 2ème image du swf et on stoppe à nouveau la lecture
        _root.gotoAndStop(2);
    }
}

stop(); permet d’arrêter la lecture sur l’image où est inséré le code.

_root correspond grossièrement au symbole « maître », celui qui contient tous les autres symboles de l’animation. Il permet donc de cibler les symboles que nous avons placé sur la scène. Ainsi _root.prechargementTF permet de cibler le symbole qui a pour nom d’occurence prechargementTF et qui est positionné sur la scène.

onEnterFrame est un événement invoqué continuellement à la cadence de l’animation (événement affecté dans notre cas sur le symbole « maître »).

IV. Test

1. Faites une 1ère fois ‘Ctrl+Maj’ pour visualiser votre animation
2. Faites  ‘Ctrl+B’ pour afficher le testeur de bande passante
3. Faite une 2ème fois ‘Ctrl+Maj’ pour simuler le téléchargement

Nous verrons dans un prochain article comment effectuer un préchargement via une barre de progression.