VOTRE PREMIER PROJET FLASH PAS A PAS
Voici le second numéro d'HelioFlash Mag.
Dans ce numéro...
Dans ce numéro, nous allons voir comment mener un projet Flash de A à Z, c'est-à-dire de la cogitation à la publication. Sachez qu'une animation Flash nécessite autant de préparation que tout autre projet. Si vous désirez construire la maison de vos rêves, vous allez d'abord l'imaginer, puis réaliser ses plans, et enfin la construire ; avec Flash les mêmes étapes sont indispensables : imagination, recueillement des données, réalisation. Prenons comme exemple d'objectif : réaliser une animation de bienvenue pour un site ayant comme sujet " l'êle de Molène " (Bretagne). Imaginez donc une animation en rapport avec la mer, les poissons, les bateaux, les phares, les sirènes... etc. Mais procédons plutôt par étapes...
Au sommaire...
|
|
1. Préparation du projet
Il est évident que nous n'allons pas ouvrir le logiciel Flash dès maintenant, une phase préparatoire du projet s'impose. Tout d'abord, si vous n'avez pas d'idées précises sur le sujet, car il peut vous être imposé (ici l'île de Molène), vous allez devoir être curieux et effectuer des recherches afin de bien connaître le sujet. Voici donc quelques solutions :
> Google - Images
Très utile et très rapide, il vous permet d'avoir directement un aspect graphique du sujet. Droits d'auteur et règles d'utilisation sont tout de même à respecter. Attention à la véridiction des images.
> Livres et revues
Si vous avez un délai assez long pour réaliser l'animation, il vous est aussi possible de vous renseigner sur des livres ou des revues. Si vous comptez vendre votre animation et ainsi gagner un profit, n'hésitez pas à consacrer un budget pour en acheter, car mieux seront la qualité et la crédibilité.
> Cliparts
Si le sujet est assez vague (par exemple : une êle, pardonnez le jeu de mot) vous pouvez aussi effectuer une recherche de cliparts sur Internet ou dans un logiciel de Microsoft. Ainsi vous pourrez imaginer des aspects graphiques de votre future animation.
a. Imaginer des scénarios
Lorsque vous avez une petite idée de ce que vous allez faire, à vous d'imaginer le (ou les) scénario(s) de l'animation. Pour cela, il vous faut en même temps penser aux difficultés que vous allez rencontrer à le(s) réaliser.
Par exemple, si une scène doit représenter un lever de soleil, il va vous falloir utiliser une interpolation de mouvement avec des effets de couleurs (du rouge au jaune).
Bien sur, si vous n'avez pas acquis assez de connaissances en Flash, à vous d'adapter le scénario à votre niveau.
b. Créer une "Fiche Projet"
Maintenant que vous avez décidé du scénario à réaliser, il est conseillé de noter vos idées sur une feuille, ou au mieux de réaliser un schéma des différentes scènes du scénario.
Dans l'exemple ici présent, voici ce que nous pourrions schématiser :
" Les vagues s'agitent doucement, un poisson saute et replonge (A), puis le soleil se lève laissant disparaêtrent les vagues (B) et apparaêtre le mot 'Bienvenue' (C), enfin par un effet de transition horizontal de droite à gauche, l'internaute est invité à cliquer sur le bouton 'Entrer' (D), les bords du cadre s'illuminant progressivement... "
Cela peut paraêtre un vrai brouillon, mais il n'est pas nécessaire de s'appliquer, puisque ce travail n'est qu'un " mémento personnel " afin de ne rien oublier.
c. Préparer le document Flash
Préparer le document Flash est tout aussi conseillé afin de mieux vous organiser. Se lancer directement dans la création d'interpolations et d'actions ne serait pas très soigneux ; mieux vaut vous habituer à collecter/créer d'abord les ressources et les intégrer, puis classer, dans la bibliothèque de votre document Flash. Ainsi vous travaillerez plus méthodiquement.
Commencez d'abord par lancer le logiciel Flash et créer un nouveau document. Utilisez les valeurs suivantes pour les propriétés du document :
Dimensions : 550 x 400 px
Couleur d'arrière plan : #ffffff
Cadence : 20 ips
Appuyez sur OK. Maintenant il va nous falloir réaliser un poisson, un soleil, les vagues et un cadre.
Pour ceci, voici les différentes méthodes utilisées :
> Le poisson
Utilisez le crayon ou la plume pour les rebords, puis le pinceau pour l'œil. Remplissez à l'aide du pot d'encre.
> Le soleil
Utilisez l'outil Ovale, puis remplissez le rond avec l'effet " Radial ".
> Les vagues
Utilisez la plume sur un calque/vague. Finissez par des lignes pour rendre la mer en couleur (fermez la forme des vagues).
> Le cadre
Ici, le cadre a été pris dans les ressources de formes de Macromedia Fireworks MX 2004.
2. Création du projet
Maintenant que les éléments sont prêts, la phase n°2 consiste à créer l'animation tout simplement. Le but n'étant pas d'apprendre comment créer une intro, mais comment s'organiser dans son premier projet, nous n'allons pas voir en détails la réalisation, mais plutôt passer en revue quelques conseils...
a. Conseils de réalisation
> Utilisation des symboles
Encore une fois pour travailler plus méthodiquement, utilisez systématiquement les symboles. Méthode et explications : Lorsque vous voulez animer un élément (ex : les vagues), convertissez-le d'abord en symbole (Sélection > Clique droit > Convertir en symbole... > Graphique). Cela vous permettra de pouvoir réutiliser l'élément sans qu'il n'y ait de poids supplémentaire dans l'animation. Le symbole sera ajouté à la bibliothèque (F11).
> Organisation dans la bibliothèque
N'hésitez pas à classer vos symboles, bitmaps et sons dans des dossiers
(
).
Macromedia a pris la peine de créer cette fonction et ce n'est pas pour rien, car cela vous
apportera de l'ergonomie dans la réalisation.
(Utilisation des dossiers dans une intro sur Warcraft)
> Organisation des calques
Dans le même sens que le conseil précédent,
n'hésitez pas à utiliser des dossiers pour le regroupage de calques
().
b. Finaliser l'animation
Vous avez maintenant terminé l'animation (aperçu en bas de page). Si elle est destinée à être sur Internet, il va vous falloir lui rajouter un " preloader " afin que vos visiteurs ne s'impatiente pas trop longuement. Aussi va-t-il vous falloir penser à assigner l'action " getURL " au bouton 'Entrer'.
> Preloader
Téléchargeable ici : http://www.helioflash.com/dl/preloader.fla
Voici un preloader facile d'utilisation. Placé en début d'animation, il affichera
le pourcentage de téléchargement de celle-ci.
> GetURL
Cette action est indispensable pour une intro car elle permet de rediriger le visiteur vers la page d'accueil de votre site. Voici sa syntaxe :
Si vous souhaitez l'assigner à un bouton 'Entrer' :
on (press) {
getURL("./home.php");
}
Si vous souhaitez l'assigner directement au scénario :
getURL("./home.php");
3. Publication du projet
Maintenant deux choix s'offrent à vous : Soit vous exportez votre animation sur Internet, soit sur un CD-ROM. Ces deux opérations sont différentes et ne nécessitent pas la même durée. Dans l'exemple, nous devons entreprendre une exportation sur Internet.
a. Exporter l'animation sur Internet
Pour exporter l'animation sur Internet, vous devez passer par trois étapes :
1) Préparer la page HTML
Pour ceci, vous devez utiliser un programme de création de pages Internet tel que Dreamweaver, Golive, ou FrontPage. Tout d'abord, remplissez vous-même la partie <HEAD> selon votre site. Ensuite, pour une meilleure présentation, il va vous falloir créer une structure en HTML dans la partie <BODY> pour que l'animation soit centrée quelque soit le navigateur utilisé. En voici le code :
<table style="width:100%;height:100%;">
<tr>
<td valign="middle"></td>
</tr>
<table>
2) Exporter l'animation
Vous devez utiliser le mode d'exportation suivant : Fichier > Paramètres de publication. Cochez les cases " Flash " et " HTML " dans l'onglet " Formats ", puis allez dans l'onglet " Flash ". Paramétrez votre animation, puis cliquez sur " Publier ".
3) Intégrer l'animation sur la page HTML
Récupérez les balises
Puis insérez-les entre les balises <TD> et </TD> de votre page HTML.
Enfin, placez le fichier de l'animation dans le même dossier que votre page.
Regardez!
b. Exporter l'animation sur un CD-ROM
Ici il vous suffit de faire l'opération suivante : Fichier > Paramètres de publication > Formats > Projection Windows OU Projection Macintosh > Publier.
4. Bonus Mag
Jean-Michel Gigault
Webmaster d'helioflash.com
Achetez des jetons poker sur Pokchips.com
