explainMe

Introduction |

Flash est un logiciel extraordinaire. Il est capable de faire énormément de choses, tellement de choses d’ailleurs, que lorsque l’on est confronté à son interface pour la première fois, on est un peu dérouté.
Dans ce cours, nous allons essayer d’explorer les principales fonctionnalités de Flash au travers de la réalisation d’un site portfolio.

Pour ce faire nous aborderons tout d’abord une grande partie « théorique » visant dans un premier temps à vous familiariser avec le logiciel, voire à le faire découvrir aux néophytes et aux grands novices. Ensuite nous aborderons chaque étape de la construction du site, nous permettant ainsi de voir, au fur et à mesure, les différentes possibilités offertes par la « bête ».

Demande personnelle |

Avant de commencer, j’ai une petite requête dont j’aimerais vous faire part.

Mon principal but ici est que vous sachiez aborder un projet avec Flash, et non que vous refassiez simplement les mêmes manipulations que celles montrées, c’est pourquoi je vous demande de jouer le jeu et de ne pas vous contenter de refaire le même site que celui que nous allons réaliser, mais de créer le vôtre en parallèle de sorte que vous soyez amené à adapter à vos propres besoins les notions que nous allons voir à vos propres besoins. Bien sûr personne n’est obligé de le faire, mais tout ceux qui voudront bien jouer le jeu seront les bien-venus, et en retireront je pense, du moins je l’espère, une meilleure connaissance de flash et seront plus à l’aise que s’ils s’étaient contentés de refaire simplement le tutoriel à l’identique.

Aussi postez-nous un lien vers vos créations et n’hésitez pas à poser des questions via les commentaires si jamais vous butez sur un point.

Évidement cette première partie étant surtout théorique, vous n’aurez pas immédiatement quelque chose à présenter, mais profitez-en pour réfléchir à ce que vous allez nous préparer…

Sur ce, Mesdames, Mesdemoiselles, Messieurs, accrochez-vous … c’est parti !

1 – Pourquoi un site en flash ?

Le web est un univers riche comportant un grand nombre de formats possibles pour le développement d’un site internet. Aussi la première question qui doit vous venir à l’esprit  est la suivante :

Pourquoi faire un site en flash ?

Si vous décidez de faire un site en flash, à mon sens, c’est parce que ce site nécessite d’être en flash. J’entends par là que si vous faites un site en flash et que le résultat final ne se compose que de rollovers* sur les boutons et quelques animations de chargement, alors vous avez perdu beaucoup de temps pour pas grand chose car votre site aurait très bien pu être fait en html et CSS.

*Le rollover désigne l’état d’un bouton lorsque la souris est positionnée au dessus de lui. Généralement en flash cela déclenche une animation du bouton lui-même ou autre…

Les avantages de flash :

Le principal avantage de flash est de permettre au « designer » de s’affranchir totalement de l’aspect statique du html où tout peut vite donner l’impression d’être cloisonné et statique, puisqu’à l’intérieur d’une animation flash, vous êtes totalement libre, limité uniquement par votre imagination.

La technologie de flash permet également de diffuser du son et de la vidéo (même si bien d’autres langages le permettent aussi), tout en laissant le soin au visiteur d’en prendre le contrôle.

Mais pour moi le gros point fort de Flash, en plus de l’animation, est de posséder un langage de programmation, (ActionScript pour les intimes) qui, couplé aux paramètres d’exportation, permet de réaliser non seulement des sites, mais aussi des exécutables autonomes sous la forme de fichier .exe sous Windows ou de projections Mac, et même des applications grâce au nouveau né : Adobe AIR. Mais là nous sortons du sujet du cours donc je m’arrête là…

Les inconvénients de flash :

Bien sûr flash n’a pas que des avantages (ce serait trop beau).

Le principal inconvénient de flash concerne directement internet, il s’agit du référencement. Le référencement c’est en quelque sorte le nerf de la guerre sur internet, et le référencement des sites en full-flash n’est pas aussi aisé que celui d’un site en html par exemple (encore qu’il existe des méthodes…).

Un autre souci, de moindre importance certes, mais quand-même, est le poids des fichiers, surtout sur internet. Bien sûr vous pouvez créer de magnifiques animations d’attente pendant que le lecteur charge l’animation dans le cache du navigateur, eh oui le débit de nos connexions internet ne cesse d’augmenter, mais pour autant, si vous ne segmentez pas votre travail, l’internaute pressé ne restera pas à attendre plus d’une minute que l’interface de votre site se charge.

Animation Timeline ou ActionScript : 2 méthodes pour un même résultat :

Comme nous l’avons évoqué plus haut, la principale fonction de flash est de concevoir des contenus (sites ou autres) animés.

Mais alors comment qu’on s’y prend ?

Il y a deux façons d’animer les éléments dans flash :

1. L’animation que j’appelle ‘timeline’, qui consiste à créer des interpolations d’objets directement dans la scène (« physiquement » si vous préférez) grâce aux outils fournis par flash.
2. L’animation via ActionScript, c’est-à-dire que les éléments s’animent grâce à des fonctions de programmation.

A vrai dire vous pouvez obtenir le même résultat quelle que soit la méthode utilisée.

Les différences résident dans les points suivants :

• L’animation Timeline est relativement aisée à mettre en place car elle est basée sur le visuel, vous réglez vos animation directement et visuellement (à la volée si vous préférez).
• Elle est également (du moins c’est le cas pour les animations simples) plus rapide à mettre en œuvre, du fait notamment que vous réglez tout de visu.
• L’animation en AS (ActionScript), est  plus lourde à mettre en œuvre car elle nécessite de connaître un minimum de fonctions permettant de produire les effets escomptés (ou de ne pas avoir peur de fouiller dans la documentation de flash).
• Ce mode d’animation est d’autant plus compliqué à mettre en œuvre (en tout cas les premiers temps) qu’il n’est pas visuel : vous devez saisir tous vos réglages avant de pouvoir tester l’animation. Donc vous êtes obligés de conceptualiser vos animations pour pouvoir les transcrire en code.

Il est évident que dans certains cas (si vous souhaitez réaliser un petit cartoon par exemple), l’animation timeline est indéniablement la meilleure solution qui s’offre à vous.

Pour autant, je ne saurais que trop vous conseiller de vous essayer à l’animation en AS.

Pourquoi ?

Parce que pour tout ce qui est de l’animation des éléments d’une interface, il est bien plus pratique et rapide de modifier quelques portions de code AS que de devoir refaire plusieurs combinaisons d’interpolations.

Principe du cours :

Pour que l’on puisse voir le maximum de choses, j’ai décidé de scinder chaque explication en 3 sous-parties. Ceci dans le but de vous proposer différentes manières de faire une seule et même chose.

Ainsi chaque explication sera déclinée en 3 méthodes (3 niveaux si vous préférez) :

1. Dans le premier niveau j’essaierais d’utiliser le minimum d’AS pour expliquer les techniques ‘traditionnelles’.
2. Dans le deuxième niveau nous verrons comment réaliser la majorité des choses en AS2.
3. Et enfin dans le troisième niveau nous verrons comment réaliser la même chose que dans le niveau 2, mais en AS3.

En effet, Adobe a profondément repensé le langage de programmation de flash, ce qui fait que l’AS3 n’a plus grand-chose à voir avec l’AS2, alors quitte à y être, autant parler des 2.

Voilà, toutes ces bonnes choses dites, il est temps d’ouvrir flash…

2 – L’interface de Flash |

Menus, fenêtres, où ça se trouve et à quoi ça sert :

La barre d’outils :

Flash est un logiciel à deux facettes, d’un côté il permet de réaliser des animations et autres actions grâce à son code, et de l’autre il contient tout un arsenal d’outils prêts à vous aider à dessiner de magnifiques cartoons, interfaces, …

Étant donné que vous allez être amenés à utiliser les outils de dessin de flash très souvent, il est important que nous prenions le temps de regarder ces outils.

	L’outil Sélection [V] : il permet de sélectionner n’importe quel élément sur la scène.
	L’outil Sous-sélection [A] : il permet de sélectionner un sous-ensemble d’une forme comme un point sur un rectangle par exemple.
	L’outil Transformation libre [Q] : il permet de modifier l’échelle de l’objet (ou la forme) sélectionné (sur un axe ou les 2). Il permet aussi de faire effectuer une rotation à l’objet.
	L’outil Transformation de dégradé [F] : il permet de modifier certains réglages d’un dégradé de couleur affecté à une forme.
	L’outil Lasso [L] : il permet de réaliser une sélection à main levée (permet de sélectionner une partie d’une forme).
	L’outil Plume [P] : il permet de réaliser des formes vectorielsle simples ou complexes comme sous Illustrator.
	L’outil Plume plus [=] : il permet de rajouter un point sur une courbe (un objet vectoriel).
	L’outil Plume moins[rien] : il permet de retirer un point sur une courbe (un objet vectoriel).
	L’outil Convertir un point d’encrage [C] : il permet de modifier le « type »d’un point d’une courbe (d’un objet vectoriel). Le point d’ancrage peut donc être un point de Béziers, un point de Béziers « cassé » (où chaque tangente est indépendante de l’autre), ou un point « coin » (sans tangentes).
	L’outil Texte [T] : il permet de créer un champ de texte (qui sera ensuite défini comme statique ou dynamique dans le panneau des propriétés.
	L’outil Trait [N] : il permet de dessiner un trait (contour).
	L’outil Rectangle [R] : il permet de dessiner un rectangle ou un carré (Maj enfoncé).
	L’outil Ovale [O] : il permet de dessiner un ovale ou un rond (Maj enfoncé).
	L’outil Primitive rectangle [O] : il permet de dessiner un rectangle avec des options configurables dans le panneau de propriétés, comme l’arrondi des angles par exemple.
	L’outil Primitive ovale [O] : il permet de dessiner un ovale avec des options configurables dans le panneau de propriétés.
	L’outil Polygone [rien] : il permet de dessiner un polygone.
	L’outil Crayon [Y] : il permet de dessiner des contours à main levée.
	L’outil Pinceau [B] : il permet de dessiner des formes à main levée.
	L’outil Encrier [S] : il permet d’ajouter un contour à une forme qui n’en a pas.
	L’outil Pot de peinture [K] : il permet de remplir une forme avec une couleur (lorsque la forme n’est composée que d’un contour et n’a pas de contenu).
	L’outil Pipette [I] : il permet de récupérer la couleur d’une forme, ou d’un objet (et même d’une partie de l’interface !).
	L’outil Gomme [E] : il permet d’effacer une partie d’une forme et/ou d’un contour.
	L’outil Mains [H] : il permet de se déplacer dans la scène.
	L’outil Loupe [M ou Z] : il permet de zoomer (ou dé-zoomer) sur une partie de la scène.
	Les outils de couleurs : Couleur du trait permet de définir la couleur du contour de la forme sélectionnée ou à défaut de la prochaine forme dessinée. Couleur de remplissage permet de définir la couleur de la forme sélectionnée ou à défaut de la prochaine forme dessinée. Les 2 icônes en dessous permettent respectivement de réinitialiser les couleurs par défaut (noir et blanc), et de permuter les couleurs (trait/remplissage).

Les objets dans flash :

Flash est un logiciel qui fonctionne avec des objets. Je ne fais pas ici référence à son langage de programmation qui est « orienté objet », car ce n’est pas du tout la même chose, mais bien à des objets « graphiques » (aussi appelés Symboles graphiques). Les objets dans flash peuvent êtres de 3 types : le graphique le clip le bouton

Avant les objets, lorsque vous dessinez  sur la scène,vous créez des « formes ».

Ces formes sont les éléments les plus basiques de flash. Elles NE PEUVENT PAS être animées.

J’insiste sur ce point car bien souvent les débutants tentent d’animer des formes et ça marche !

Oui, ça marche, car flash créé automatiquement des symboles graphiques pour pouvoir les animer, le seul problème c’est que vous vous retrouverez avec une bibliothèque remplie de symboles graphiques nommés interpolation 1 , interpolation 2,…

Bref c’est le bazar.

Vous l’aurez donc compris, avant d’animer quoi que ce soit, vous devez le transformer en objet.

Le symbole graphique est une sorte de « clip light », en bref il est animable via les interpolations de mouvement dans la timeline tout comme le clip. En revanche il n’est pas possible de lui affecter un nom d’occurrence, donc il n’est pas manipulable depuis l’actionscript.

Le clip est clairement l’objet le plus utile de flash. Il est également le plus polyvalent, et j’irai même jusqu’à ajouter qu’il est capable de remplacer complètement les 2 autres qui en sont dérivés.

Le clip a l’avantage de pouvoir être animé, ce qui le place déjà en bonne position car un élément « animable » est toujours plus intéressant qu’un élément statique.

Mais le clip est aussi capable de répondre à des actions comme un clic de souris ou autre. Donc il est capable de remplacer un objet bouton.

Le bouton se différencie du clip par sa timeline (voir illustration). En effet cette dernière, au lieu de contenir un timecode classique, se scinde en 4 sections qui correspondent aux états du bouton :

• Haut : état initial du bouton
• Dessus : état du bouton lorsque la souris le survole
• Abaissé : état du bouton lorsque la souris est placée au dessus et que le clic gauche est enfoncé
• Cliqué : état du bouton lorsqu’il a déjà été cliqué

Le bouton est donc très pratique pour le débutant, mais je le répète, le clip est l’objet principal de flash car il peut tout faire.

Notez toutefois qu’il est possible d’animer une forme géométrique. C’est ce qu’on appelle une « interpolation de forme » (et non une « interpolation de mouvement » comme pour le clip). Ce procédé est utilisé lorsque l’on veut créer une animation de type « morphing » comme transformer un rectangle en rond par exemple.

Où placer son code, ou comment ne pas s’éparpiller :

Lorsque vous commencerez à travailler sous flash (si ce n’est pas déjà fait), vous vous rendrez vite compte que mieux vaut être organisé si vous ne voulez pas perdre un temps précieux à chercher vos petits… Nous l’avons déjà évoqué, l’ActionScript est quasi-indispensable dans un projet flash. Ne serait-ce que pour définir les actions des boutons. De plus, dans flash, vous pouvez placer le code à divers endroits : Sur une image-clé Sur un clip Sur un bouton

ATTENTION : je vous déconseille très fortement d’éparpiller votre code !

En effet, Flash permettant d’imbriquer les éléments les uns dans les autres, placer un petit bout de code sur chaque objet devient à la longue contre-productif car vous passerez plus de temps à chercher où vous avez bien pu coller ce @ !$*% de code que vous cherchez depuis 20 minutes plutôt que d’avancer dans votre projet.

Bref, la seule bonne méthode est de placer systématiquement son code sur une image-clé. D’ailleurs je vous conseille même de créer systématiquement un calque que vous nommerez CODE ou AS (enfin comme vous voudrez) qui sera dédié à ça.

Bien placer son code permet à la fois de centraliser les actions, mais aussi de vous y retrouver facilement, surtout si vous travaillez à plusieurs sur un projet, ou si vous reprenez un projet sur lequel vous n’avez pas travaillé depuis un certain temps.

Enfin, prenez très tôt l’habitude de placer votre code sur une image-clé, c’est impératif pour ceux qui souhaitent apprendre l’AS, car à partir de Flash CS3, si vous décidez de créer un projet en AS3, vous ne pourrez plus placer votre code ni sur un clip, ni sur un bouton, car la fenêtre d’action vous affichera le message suivant :

« Aucune action ne peut être appliquée à la sélection en cours »

Donc autant prendre les bons réflexes dès le début !

Attention enfin, placer son code sur une image clé plutôt que sur un clip ou un bouton change quelque peu la manière dont on doit « cibler » les éléments, mais nous en reparlerons dans le prochain chapitre lorsque nous commencerons à coder…

3 – L’organisation et la hiérarchie : les 2 maîtres-mots de flash |

Je le dis et je le répète, travailler sous flash est d’abord une histoire d’O.R.G.A.N.I.S.A.T.I.O.N !

Nous venons d’effleurer le sujet en parlant du positionnement du code, mais il s’agit aussi d’organiser ses fichiers.

La bibliothèque, ou comment organiser ses fichiers pour s’y retrouver :

Nous l’avons vu lors de la présentation des différentes fenêtres du logiciel, la bibliothèque est un élément essentiel de flash. En effet flash fonctionne avec ce que l’on appelle des « occurrences » (ce mot est important car nous le réutiliserons lorsque nous commencerons à coder, et vous verrez qu’il n’est pas anodin). Mais une occurrence, c’est quoi ? Une occurrence c’est une « copie » d’un objet qui se trouve dans votre bibliothèque. QUOI ???? Dans flash, lorsque vous créez un objet tel qu’un clip ou un bouton, celui-ci s’enregistre dans la bibliothèque, donc l’objet est stocké dans votre bibliothèque. Et l’occurrence, c’est la copie de l’objet dans la scène. Pourquoi cette distinction ? Parce que vous pouvez avoir plusieurs occurrences d’un même objet sur la scène. Mais quel que soit le nombre d’occurrences d’un même objet, pour flash vous n’avez toujours qu’un seul objet. L’intérêt est énorme car imaginons que vous deviez réaliser un menu avec 10 boutons, tous basés sur le même principe graphique : Allez-vous réaliser 10 boutons différents ou bien créer un bouton (ou du moins sa forme de base), que vous utiliserez plusieurs fois via les occurrences ?

Dernier point sur la bibliothèque : rangez la ! La bibliothèque de flash ne doit pas être un dépotoir à clips et autres boutons (voir symboles graphiques) avec des noms tels que sans-titre 1 ou encore interpolation3. Utilisez les dossiers pour regrouper vos objets et mettez au point un système de « nommage » intelligent (voir illustration). Le choix vous appartient, mais gardez à l’esprit une chose : Vais-je m’y retrouver si je dois retravailler sur ce fichier dans un an ?

La logique de flash : les poupées russes

Organiser ses fichiers est important dans flash car flash fonctionne un peu comme les poupées russes. Je m’explique : Dans flash vous créez vos interfaces (ou autre) avec des objets (clips, boutons,…) que vous pouvez imbriquer les uns dans les autres. Par exemple vous allez avoir un clip interface qui contiendra 2 clips : un clip menu un clip contenu Dans le clip menu vous aurez : un symbole graphique pour la structure graphique du menu un bouton accueil un bouton portfolio … Et dans le clip contenu vous allez charger des swf externes, donc récupérer leurs arborescences internes. Et ainsi de suite… C’est là qu’entre en jeu le panneau de gestion de la scène qui vous permet de savoir dans quel objet vous vous trouvez, et où vous êtes par rapport à la scène principale.

Les calques… et sur 2 axes s’il vous plaît !

En plus de l’imbrication des objets, flash travaille avec les calques.

Vous pouvez travailler sur plusieurs calques dans la scène principale, mais aussi dans chaque CLIP / BOUTON / SYMBOLE GRAPHIQUE.

Travailler avec les calques est bien évidemment très pratique car cela vous permet une fois de plus d’organiser vos fichiers.

Par exemple, comme nous l’avons vu (mais nous y reviendrons le moment venu), il est plus pratique de centraliser son code sur une image-clé plutôt que de l’éparpiller sur chaque élément, mais il est également très pratique de pouvoir décomposer l’aspect d’un clip sur plusieurs calques.

Pour reprendre l’exemple du clip MC_MENU qui se composerait d’un symbole graphique S_FOND et de boutons B_01,  B_02, … nous pourrions créer 2 calques dans le clip MC_MENU, un calque FOND et un claque BOUTONS, qui contiendraient donc respectivement, tous les éléments constitutifs du fond du menu, et toutes les occurrences de bouton (of course !).

Mais les calques de flash fonctionnent aussi sur un second axe, le temps.

En effet, non seulement vous pouvez organiser votre contenu sur plusieurs calques les uns au dessus des autres, mais vous pouvez également organiser vos calques dans le temps.

Flash est un logiciel qui permet de faire des animations, donc il permet de placer les éléments « dans le temps ».

Ainsi rien ne vous empêche de placer un objet sur un calque pour qu’il soit visible depuis les images 1 à 29, alors que sur un second calque, vous placeriez un autre objet qui lui n’apparaîtrait qu’à partir de l’image 30, donc il resterait invisible tant que la tête de lecture n’aurait pas atteint l’image 30.

Enfin, les calques sont également très pratiques pour organiser une scène en « sections », grâce aux étiquettes.

Mais qu’est-ce que c’est que ça les étiquettes ?

Les étiquettes, ou plus précisément les étiquettes d’images sont un moyen fort pratique d’organiser sa scène en plusieurs parties. Pour créer une étiquette d’image, rien de plus simple, suivez la manipulation de l’illustration et vous aurez votre étiquette en moins de temps qu’il n’en faut pour l’écrire…

Conclusion |

Et voilà, c’est ici que s’achève ce premier chapitre. J’ai volontairement regroupé tout ce qui concerne les concepts à connaître pour travailler avec flash comme ça on est débarrassé.

Certains seront peut-être un peu déçus car nous n’avons pour ainsi dire rien fait pour le moment, mais n’ayez crainte, dès le prochain chapitre nous commencerons à dessiner l’interface du site et même à coder un peu.

En attendant j’espère que toutes les notions qui ont été développées ici vous auront au moins éclairés sur le fonctionnement de flash, de sorte que la suite se fasse naturellement.

Je vous donne donc rendez-vous dans le prochain chapitre où nous définirons le site que nous allons réaliser (enfin surtout moi, car n’oubliez pas vous devez créer le vôtre ;)) et nous réaliserons l’interface principale.