A) Le pilier du site

Alors dans ce premier chapitre on va voir à quoi ressemblera globalement notre site, de quoi sera-t-il composé,comment est-ce qu'il marchera, et nous commencerons par poser ses bases.

1)Composition du site

Alors soyons d'accord tout de suite durant ce cours on va prendre une composition banal d'un site, cependant si vous avez bien compris le fonctionnement de celui-ci à la fin du cours, vous pourrez changer comme bon vous le semble la composition. Donc voici une image pour illustrer la notre:

Le site fera une taille de 700x500 (700px horizontalement et 500px verticalement) sera composé:
1)D'une bannière de 140px de hauteur et 700px de longueur.
2) et 3)Des menus latéraux gauche et droite.
4)Du corps du site, là où on mettra les news, articles, dossiers, tutos, galeries...
5)Et enfin le pied de page.

Pourquoi avoir choisi cette taille, parce que je trouve que dans l'ensemble ça rentre bien dans la fenêtre (agrandit) du navigateur, et pas besoin de barre de défilement dans le navigateur. En revanche vous vous en doutez bien, il y aura une barre de défilement interne à l'animation flash ce qui permettra d'avoir un espace de travail plus conséquent. Pourquoi une barre de défilement interne et pas tout simplement utiliser celle du navigateur ? Tout simplement car notre site flash aura une taille fixe donc on ne changera plus sa taille en fonction des pages (ce qui est relativement lourd, imaginer que pour la page des tutos vous avez besoin d'une anim fesant 1500px de hauteur, puis pour celle de votre galerie 1000px etc on ne s'en sort plus ).

2)Le mécanisme du site

Alors là je vous le dis tout de suite, il y a des milliards de possibilités, la mienne n'est nullement la meilleur. Je vais d'abord vous expliquer quels sont mes critères pour le mécanisme du site:

-Tout d'abord très modulable, c'est à dire pas besoin de refaire toute l'animation flash juste pour rajouter un lien dans le menu par exemple.
-Très simple à créer, très peu de programmation (juste un petit bout de code).
-Tout en étant le plus complet possible, facilité pour mettre une news, tout ce qu'il faut.

Tout cela étant dit, je vais maintenant vous présentez le principe:
Alors l'idée est simple on aura un fichier.swf qui sera le pilier du site, celui là on y touche très peu une fois que l'on en a finit avec, il sert surtout pour la mise en page des parties du sites, leur emplacement, c'est à partir de celui ci que l'on va inclure les parties du site (menu, corps, bannière...), chacune correspondant à un fichier .swf. En disant comme ça ce n'est peut-être pas très clair , allez cadeau une petite image pour bien comprendre :

Bon voilà maintenant reste à savoir comment faire.

3)Créer l'anim principal

Alors on va enfin (il était pas trop top ) commencer à débuter la création de notre site . Alors vous allez voir c'est très simple, tout d'abord ouvrer E-anim. Changeons tout de suite la taille de l'animation en 700x500 (cliquer sur ecranDeBase -> une fenêtre s'ouvre -> entrons la taille voulu):

Créons maintenant le premier groupe qui accueillera la bannière. Donc cliquons sur le bouton créer un groupe , puis ajoutons un rectangle plein dans ce même groupe (profitons en pour modifier la couleur de ce rectangle en rouge afin de mieux différencier les parties pour cela cliquons sur le bouton qui ouvre la palette de couleur , une fenêtre s'ouvre dans laquelle on peut sélectionner la couleur souhaitée):

Ensuite nous allons modifier la taille de ce rectangle pour qu'il fasse 700x140, nous n'allons pas modifier la taille comme on a l'habitude de le faire, mais en inscrivant la taille manuellement ainsi que la position du rectagnle dans un champs qui peut ne pas être affiché par défaut. Cliquez
pour cela sur les coordonnés du rectangle situés à gauche de la fenêtre, jusqu'à ce que les champs apparaissent:

Ensuite, il ne nous reste plus qu'à rentrer la taille et les coordonnés du rectangle (x:0,y:0,largeur:700,hauteur:140), on doit avoir ça (remarque: le point origine est au coin haut-gauche):

Maintenant revenons à l'écran de base, nommons le groupe:"banniere", et plaçons le en haut:

Voilà maintenant faites de même pour les autres parties, la position de tous les rectangles à l'intérieur du groupe sont de 0x, 0y:

-menu_gauche, taille du rectangle:140x360, position du rectangle dans le groupe:0x,0y
-menu_droite, taille du rectangle:140x360, position du rectangle dans le groupe:0x,0y
-corps, taille du rectangle:420x300, position du rectangle dans le groupe:0x,0y
-pied, taille du rectangle:420x60, position du rectangle dans le groupe:0x,0y

En résumé, les actions a effectuées sont les suivantes:
-Ajouter un groupe
-Ajouter un rectangle dans ce groupe(mettre éventuellement une couleur au rectangle)
-Agrandir ce rectangle à la taille voulue et positionner le avec le point origine en haut à gauche.
-Revenez à l'écran de base et modifier le nom du groupe.
-Positionner le groupe à la bonne position.

Voilà ce que vous devriez obtenir à la fin:

Courage on a presque fini , il ne nous reste plus qu'à rajouter une chose, non deux en fait .
Alors retournons à "l'écranDeBase" et ajoutons un rectangle transparent:

Puis ajoutons une action à ce rectangle , une fenêtre s'ouvre, appuyons sur le long bouton orange, pour choisir quand l'action se déclenche, nous, on veut qu'elle se déclenche automatiquement donc choisissons:l'objet déclenche l'action immédiatement, au temps indiqué. Ensuite cliquons sur le bouton Programmer, et on va mettre ce bout de code:

Code:

Une petite explication s'impose. Alors on commence par mettre "->" pour indiquer que l'adresse est écrite avec la syntaxe SWF (Flash), ensuite on indique le groupe dans lequel on veux importer un fichier .swf externe, d'où le "_root/banniere", ".loadMovie" indique l'action de l'importation du fichier .swf et on met entre les parenthèses le nom du fichier (ou le chemin tel que:"dossier/animation/banniere.swf" par exemple) à charger.Et on recommence pour chaque groupe.

4)Les masques pour...masquer

Avant de finir, on va créer des masques qui permettent à nos anims importés de ne pas déborder de la zone qui leur est réservée. Concrètement comment marche un masque? Un masque est en général une image, une forme géométrique... qui sera appliqué à une autre image. Exemple:

Le but du masque est de ne révéler qu'une partie de l'image à laquelle on l'applique. Si on superpose le masque sur la tête du personnage dans l'image on obtient:

On peut aussi le mettre où on veut:

Donc c'est ce que l'on veut réaliser dans E-anim. Voici comment procéder:
1)Créons un groupe dans l'écran de base qui contiendra le masque.
2)Ajoutons dans ce groupe un rectangle de la même taille que celui du groupe corps(420x300) ainsi qu'à la même position(x:0, y:0).
3)Nommons ce rectangle "masque".

4)Ensuite ajoutons lui une action qui se déclenche automatiquement et qui sera un programme, donc mettons dans le champs programmer ce code:
Code:

5)Ensuite ne surtout pas oublier d'ajouter un temps dans le groupe, en cliquant tout simplement sur le temps 1 (merci à tofff pour cette remarque).

6)Retournons à l'écran de base et nommons le groupe avec le même nom que celui du rectangle qu'il contient et qui servira de masque, c'est-à-dire "masque".

Dans cette même fenêtre attribut, cochons la case "Est un masque", et inscrivons le chemin du groupe que va masquer notre masque: "_root/corps" pour le corps, "_root/menu_gauche" pour le menu gauche etc...

7)Déplacer le groupe masque pour le superposer au groupe qu'il doit masquer.

8)Mettons l'opacité de ce groupe à 0 avec le bouton .

On refait la même chose pour chaque élément de l'anim:

La bannière
Nom du groupe et du rectangle:"masque_banniere"
Pour les versions E-anim FX: Chemin à mettre dans le champs "Est un masque" de la fenêtre Attribut du groupe masque_banniere: _root/banniere
Pour les versions E-anim non FX: Programme du rectangle masque_banniere :
Code:

Le menu de gauche
Nom du groupe et du rectangle:"masque_menu_gauche"
Pour les versions E-anim FX: Chemin à mettre dans le champs "Est un masque" de la fenêtre Attribut du groupe masque_menu_gauche: _root/menu_gauche
Pour les versions E-anim non FX: Programme du rectangle masque_menu_gauche :
Code:

Le menu de droite
Nom du groupe et du rectangle:"masque_menu_droite"
Pour les versions E-anim FX: Chemin à mettre dans le champs "Est un masque" de la fenêtre Attribut du groupe masque_menu_droite: _root/menu_droite
Pour les versions E-anim non FX: Programme du rectangle masque_menu_droite :
Code:

Le pied de page
Nom du groupe et du rectangle:"masque_pied"
Pour les versions E-anim FX: Chemin à mettre dans le champs "Est un masque" de la fenêtre Attribut du groupe masque_pied: _root/pied
Pour les versions E-anim non FX: Programme du rectangle masque_pied :
Code:

Nous avons à la fin 5 masques:

Voilà on a finit, comme vous le voyez, on aura besoin au minimum de 5 fichiers externes on verra comment on les construira dans les prochains chapitres. Vous pouvez si vous le souhaitez, et c'est très conseillé de mettre un fond à l'anim, pour cela c'est simple, ajouter une image de la taille de l'anim et aller dans Objet>Changer de couche>Poser dans le fond.

Et bien pour finir, je vous offre un petit cadeau, le fichier .phi de l'anim !!!! Je ne vous l'ai pas donner au début pour que vous lisiez le chapitre, et que vous compreniez le principe, il n'y aurait eu aucun n'intérêt si je vous avais balancé dès le début le fichier .phi .

N'oublions pas ensuite de sauvegarder une page html pour générer le fichier .swf qui va avec, on nommera la page html "anim_principal.html" (ne surtout pas oublier le .html )

SOMMAIRE

Les cours sont la propriété de leurs auteurs respectifs.
Toute reproduction totale ou partielle sans l'accord des auteurs est interdite.