> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Programmation

> AS / Flash / Flex

> Introduction à l'ActionScript

> Les bases de l'actionscript

> Fil rouge - le logo animé

> Lecture du tutoriel

Fil rouge - le logo animé

Par

SuprazZz

Mise à jour : 08/07/2010

Difficulté : Facile Facile

4 613 visites depuis 7 jours, dont 39 sur ce chapitre classé 39/786

Enfin la consécration de cette première partie ! Vous allez pouvoir appliquer tout ce que vous avez vu pour concevoir un logo animé pour le SDZ.

Et pour vous donner envie, voilà le résultat final.

LOGO FLASH DU SDZ.

Retour en haut

Sommaire du chapitre :

Point de départ
Bonnet de noël
Rotation des yeux
Contenu de la bulle
Récapitulatif

Retour en haut

Point de départ

Pour que vous ne perdiez pas de temps, voilà l'animation de base, avec tout sauf le code que nous allons ajouter. Il vous faut au minimum Flash Mx 2004 !

POINT DE DEPART (Flash MX 2004).

J'ai déjà donné aux clips et aux zones de texte un nom d'occurrence :

Image utilisateur

Notre but va être de rajouter de l'interactivité à chacun de ces objets.

Retour en haut

Bonnet de noël

Vous avez vu le petit bonnet ? Il est pas mignon ? :lol:

Notre premier travail va être de faire en sorte que ce bonnet n'apparaisse que pendant le mois de décembre. Et pour cela, nous allons faire un très rapide détour du côté de la classe Date, qui permet de jouer avec les dates (comme son nom l'indique), les heures, ...

Avant tout nous allons déclarer un nouvel objet Date.

Code : Actionscript

1	var date_noel:Date = new Date();

Maintenant, étudions la méthode getmonth() de la classe Date.
Cette fonction renvoie le numéro du mois courant, en commençant la numérotation à 0.
C'est-à-dire que janvier correspond à 0 et décembre à 11 (oui, les programmeurs n'ont jamais eu l'esprit très pratique...

).

Nous allons donc jouer avec une petite condition qui va rendre le bonnet visible ou non selon le numéro du mois renvoyé.

Comme ça :
Code : Actionscript

if (date_noel.getMonth() == 11) { //En ActionScript, décembre est le mois n°11, car janvier est le mois n°0
        // Si on est en décembre
} else {
        // Si on n'est pas en décembre
}

Et maintenant rajoutons l'action permettant de rendre invisible le bonnet. Dans la mesure où le bonnet n'est pas un bouton, utiliser _alpha=0 ou _visible=false (_visible) revient exactement au même.
J'ai choisi pour vous : on va utiliser _visible.

Ce qui nous donne en totalité :
Code : Actionscript

var date_noel:Date = new Date();
if (date_noel.getMonth() == 11) { //En ActionScript, décembre est le mois n°11, car janvier est le mois n°0
        bonnet._visible = true;
} else {
        bonnet._visible = false;
}

Et puisque vous êtes des pros avec les conditions, nous allons "compresser" tout ça en utilisant les ternaires :

Code : Actionscript

1 2	var date_noel:Date = new Date(); bonnet._visible = (date_noel.getMonth() == 11) ? true : false;

Ca prend déjà moins de place, non ?

Retour en haut

Rotation des yeux

Allez déjà faire un tour à l'intérieur des clips pupille1 et pupille2.
Zoomez un peu et vous pourrez constater que le point d'ancrage n'est pas au centre de la pupille mais légèrement à gauche.
Comme ça, si on fait tourner le clip, le point d'ancrage restant fixe, la pupille tournera autour.

Image utilisateur

Nous allons réutiliser le code que nous avions vu précédemment pour faire tourner un clip selon la position de la souris :

Code : Actionscript

1
2
3

pupille1.onEnterFrame = function () {
        this._rotation = Math.atan2(_ymouse-this._y, _xmouse-this._x)/(Math.PI/180);
};

Voilà qui va permettre de faire tourner pupille1 dans la direction de la souris.

Mais au lieu de copier-coller ce code pour pupille2, on va faire plus malin.

Code : Actionscript

orbites = function () {
        this._rotation = Math.atan2(_ymouse-this._y, _xmouse-this._x)/(Math.PI/180);
};
pupille1.onEnterFrame = orbites;
pupille2.onEnterFrame = orbites;

Et voilà, à ce stade là, vous avez ZoZor qui vous suit des yeux et qui sort son petit bonnet en décembre.

Retour en haut

Contenu de la bulle

Nous allons enregistrer dans un tableau tout ce que Zozor peut dire, je vous donne directement tout le contenu, il y a quelques lignes

:
Code : Actionscript

var contenu:Array = new Array();
contenu[0] = "Salut les <b>Zéros</b> !";
contenu[1] = "Ce <i>didacticiel</i> vous plaît-il ?";
contenu[2] = "Je me nomme <font color='#FF0000'>Zozor</font> et je sens des <font color='#FF0000'>pieds</font> !";
contenu[3] = "<b>Toufou</b> ? C'est un ami ! En tout cas il en était un avant ce terrible jour, où on était dans sa cave, et...";
contenu[4] = "<b>Hiii Haaan !</b>";
contenu[5] = "J'aime les <b>carottes</b> ! D'ailleurs je suis très copain avec l'avatar de SuprazZz";
contenu[6] = "Il paraît que je dis toujours la même chose... C'est vrai ?";
contenu[7] = "Une bande de gars, nommés <b>Zéros</b>, m'ont élu comme mascotte... C'est toujours mieux qu'être Canard WC";
contenu[8] = "Si j'attrapais <b>l'en*oiré</b> qui m'a fait une <b>tête de vache</b> !";
contenu[9] = "Toi, vu ta tête, je parie que tu es un <b>Zéro</b> !";
contenu[10] = "Tu connais la blague du fou qui repeint son plafond ? Non ? Dommage...";
contenu[11] = "Tu connais la blague du con qui dit non ?";
contenu[12] = "Le SDZ saturé ? Et ca t'étonne encore ? :D";
contenu[13] = "Enfin un peu de compagnie !";
contenu[14] = "Je veux pas dire, mais c'est un peu lassant de toujours parler et qu'on ne nous réponde pas";
contenu[15] = "Surtout n'écoutez pas les rumeurs comme quoi je sortirais avec Toufou !";
contenu[16] = "Sais-tu dancer la Carioca ?";
contenu[17] = "Aïe Caramba !";
contenu[18] = "Après m'avoir vu, Barney a arrêté de boire";
contenu[19] = "Derrière toi ! <b>Tahiti Bob !</b>";
contenu[20] = "Eh Manu ! Tu descends ?";

Comme vous le voyez, Zozor a 20 répliques possibles, vous pouvez en rajouter si vous le souhaitez, mais n'oubliez pas de changer le nombre juste avant.
J'ai aussi mis des balises HTML dans les répliques, et dans les propriétés du clip, j'ai activé le format HTML.

Pour afficher du code HTML dans une zone de texte il faut utiliser la propriété htmltext de la zone de texte pour lui transmettre le contenu avec les balises.

Code : Actionscript

1	_root.bulle.htmlText = contenu[0];// Affiche la première réplique

Et nous souhaitons afficher de façon aléatoire une réplique, pas que la première. :euh:

random(unnombre) renvoie un nombre au hasard entre 0 et le nombre unnombre.

Nous cherchons à afficher une entrée entre 0 et le nombre total d'entrées. Il va donc falloir transmettre à cette fonction le nombre total d'entrées du tableau (voir propriété length donnant la longueur d'un tableau).

Ce code affichera donc un nombre entre 0 et 20 compris (car nous avons 21 entrées) :
Code : Actionscript

1	trace( random(contenu.length) );

Il ne nous reste plus qu'à faire un mélange entre tout ce qu'on vient de faire, ce qui nous donne :

Code : Actionscript

1	_root.bulle.htmlText = contenu[random(contenu.length)];

Mais nous allons appeler ce code plusieurs fois dans l'animation puisque nous souhaitons pouvoir changer la réplique en cliquant sur l'animation. On va donc mettre ce code dans une fonction, et appeler cette fonction au démarrage de l'animation :

Code : Actionscript

//-- Déclaration de la fonction parlotte
parlotte = function () {
        _root.bulle.htmlText = contenu[random(contenu.length)];
};
//-- Au démarrage de l'animation, on appelle une première fois la fonction parlotte
parlotte();

Rajoutons ce qu'il faut pour que la fonction parlotte soit appelée quand on clique dans l'animation :

Code : Actionscript

1
2
3

_root.onMouseDown = function() {
        parlotte();
};

Et voilà.

C'était pas bien compliqué en fin de compte !
Et il est possible de rajouter autant de répliques qu'on le souhaite !

Retour en haut

Récapitulatif

Pour les fainéants, voici le code final et commenté :

Code : Actionscript

//-
//- POUR NOËL
//-
var date_noel:Date = new Date();
bonnet._visible = (date_noel.getMonth() == 11) ? true : false;
//-
//- ROTATION DES YEUX
//-
//-- Déclaration de la fonction "orbite" permettant d'exercer une rotation sur un clip vers une direction
orbites = function () {
        this._rotation = Math.atan2(_ymouse-this._y, _xmouse-this._x)/(Math.PI/180);
};
//-- Association de la fonction aux événements onEnterFrame des deux clips
pupille1.onEnterFrame = orbites;
pupille2.onEnterFrame = orbites;
//-
//- CONTENU DE LA BULLE
//-
//-- Tableau des contenus possibles
var contenu:Array = new Array();
contenu[0] = "Salut les <b>Zéros</b> !";
contenu[1] = "Ce <i>didacticiel</i> vous plaît-il ?";
contenu[2] = "Je me nomme <font color='#FF0000'>Zozor</font> et je sens des <font color='#FF0000'>pieds</font> !";
contenu[3] = "<b>Toufou</b> ? C'est un ami ! En tout cas il en était un avant ce terrible jour, où on était dans sa cave, et...";
contenu[4] = "<b>Hiii Haaan !</b>";
contenu[5] = "J'aime les <b>carottes</b> ! D'ailleurs je suis très copain avec l'avatar de SuprazZz";
contenu[6] = "Il parait que je dis toujours la même chose... C'est vrai ?";
contenu[7] = "Une bande de gars, nommés <b>Zéros</b>, m'ont élu comme mascotte... C'est toujours mieux qu'être Canard WC";
contenu[8] = "Si j'attrapais <b>l'en*oiré</b> qui m'a fait une <b>tête de vache</b> !";
contenu[9] = "Toi, vu ta tête, je paris que tu es un <b>Zéro</b> !";
contenu[10] = "Tu connais la blague du fou qui repeind son plafond ? Non ? Dommage...";
contenu[11] = "Tu connais la blague du con qui dit non ?";
contenu[12] = "Le SDZ saturé ? Et ça t'étonne encore ? :D";
contenu[13] = "Enfin un peu de compagnie !";
contenu[14] = "Je veux pas dire, mais c'est un peu lassant de toujours parler et qu'on ne nous réponde pas";
contenu[15] = "Surtout n'écoutez pas les rumeurs comme quoi je sortirais avec Toufou !";
contenu[16] = "Sais-tu dancer la Carioca ?";
contenu[17] = "Aïe Caramba !";
contenu[18] = "Après m'avoir vu, Barney a arrêté de boire";
contenu[19] = "Derrière toi ! <b>Tahiti Bob !</b>";
contenu[20] = "Et Manu, tu descends ?";
//-- Déclaration de la fonction parlotte
parlotte = function () {
        _root.bulle.htmlText = contenu[random(contenu.length)];
};
//-- Au démarage de l'animation, on appelle une première fois la fonction parlotte
parlotte();
//-- En cas de clic (n'importe où sur la scène)
_root.onMouseDown = function() {
        parlotte();
};

Retour en haut

N'hésitez pas à poser des questions complémentaires dans les commentaires ou sur le forum !
En espérant que vous trouverez des idées de logo pour votre site.

Retour en haut

Retour en haut

25 commentaires pour "Fil rouge - le logo animé"

Note moyenne : 3.24 / 4 (137 votes)

Pseudo	Commentaire
hbibiy	# Posté le 01/09/2009 à 22:39:36
	slt.... j'ai un petit probleme, je sais pas comment preciser le point d'ancrage ,car les 2 pepilles ne tourne pas comment je le souhaite ...!! aidez moi svp .. !!
Softx	# Posté le 12/09/2009 à 16:46:25
	Salut Svp quelqu'un m'envoi les fichier (.fla) car les liens ne marchent pas je sais pas Pourquoi Mon msn yas-softx@hotmail.fr Softx P's'd 'I'D'E
kamerlino	# Posté le 23/09/2009 à 13:22:45
	pour tous ceux qui veulent le .fla, veuillez consulter le post de Attonde plus haut Les esprits sont comme des parachutes. Ils fonctionnent seulement quand ils sont ouverts.
bzt	# Posté le 03/05/2010 à 18:21:30
	Bonjour, je ne comprend pas: le texte à l'air de s'afficher hors de la bulle (invisible) je n'ai que la fin des phrases.. j'ai beau bouger la bulle ou le contenu, ça ne change pas.. (j'utilise flash Pro CS5) On peut m'aider??
toto_toto69	# Posté le 13/03/2012 à 18:54:37
Avis : Très bon	A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/ Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.