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 refaire simplement les mêmes manipulations que celles montrées, sans réellement comprendre ce que vous faites, comme cela pourrait être le cas dans un tut étape par étape. 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és à adapter les notions que nous allons voir à vos propres besoins. Bien sûr personne n’est obligé mais tous ceux qui voudront bien jouer le jeu seront les bienvenus, et en retireront je pense, du moins je l’éspè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 si jamais vous butez sur un point, via le topic dédié à ce cours dans le forum.

Évidement cette premiere 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 ou tout peut vite donner l’impression d’être cloisonné et statique, puisqu’à l’intérieur d’une animation flash, vous êtes totalement libres, limités uniquement par votre imagination.

La technologie de flash permet également de diffuser du son et de la vidéo (même si 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’exportations, permet de réaliser non seulement des sites, mais aussi des exécutables autonomes sous la forme de fichiers .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 ici…

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, et oui le débit de nos connexions internet ne cessent 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 :

• 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.
• L’animation via ActionScript, c'est-a-dire que les éléments s’animent grâce à des fonctions de programmation.

• L’animation Timeline est relativement aisée à mettre en place car elle est basée sur le visuel, vous réglez vos animations 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é à utiliser (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.

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’essaierai 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, mais en AS3

2 - L’interface de Flash |

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

La barre de menu

La barre d'outils

La timeline

La barre de gestion de la scène

La scène

Le panneau des couleurs

La bibliothèque

La barre de propriétés

Le panneau actions

Les autres panneaux

Les outils de flash :

  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électionnnée (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 vectorielles simples ou complèxes comme sous Illustrator.

  L'outil Plume plus (=) : il permet de rajouter un point sur une courbe (un objet vetoriel).

  L'outil Plume moins (rien) : il permet de retirer un point sur une courbe (un objet vetoriel).

  L'outil Convertir un point d'encrage (C) : il permet de modifier le "type" d'un point d'une courbe (d'un objet verctoriel). Le point d'ancrage peut donc être un point de bezier, un point de bezier "cassé" (où chaque tangente est indépendante de l'autre), ou un point "coin" (sans tangente).

  L'outil Texte (T) : il permet de créer un champ texte (qui sera ensuite définit 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 ouvale ou un rond (Maj enfoncé).

  L'outil Primitive rectangle (O) : il permet de déssiner 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 traits à 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 coutour 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 le scène.

  L'outil Loupe (M, 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 déssinée.
 Les 2 icônes en dessous permettent respectivement de réinitialiser les couleurs par défaut (noir et blanc), et de permuter les couleuts (trait/remplissage).

Les objets dans flash :

Flash est un logiciel qui fonctionne avec des objets. Je ne fait 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 ».

Les objets dans flash peuvent êtres de 3 types :

• le symbole graphique
• le clip
• le bouton

• Haut : état initial du bouton
• Dessus : état du bouton lorsque la souris le survol
• 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éja été cliqué

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 vue lors de la présentation des différentes fenêtres du logiciel, la bibliotheque 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 quelque 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 interpolation 3.

Utilisez les dossiers pour regroupez 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 ?"

Organiser ses fichiers est important dans flash car il 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

• un symbole graphique pour la structure graphique du menu
• un bouton accueil
• un bouton portfolio
• …

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 GRAHIQUE.

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

Par exemple, comme nous avons vue (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éments, 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 contiendront 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 des images 1 à 29, alors que sur un second calque, vous placeriez un autre objet qui lui n’apparaîtrait qu’a partir de l’image 30, donc il resterait invisible tant que la tête de lecture n’aura pas atteint l’image 30.

Enfin, les calques sont également tres 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, craintes, 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 aurons au moins éclairci 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 votre ;)) et nous réaliserons l’interface principale.

D'ici là si vous avez des questions ou autres, direction le forum...