Créer une page web en flash sans une ligne de code  pour les grands débutants et d’autres astuces

CRÉER UN MINI SITE WEB EN FLASH (niveau TRÈS débutant)

1. Définir les dimensions de la page
Ouvrez une nouvelle page  (Ctrl+N) sur flash, nous allons dans un premier temps changer le format de la  page … Pour ce faire double cliquer sur le petit 12.0fps en dessous de la ligne de temps (scénario)…                                                

Une nouvelle fenêtre s’ouvre alors avec plusieurs options dont le format de la page …La valeur par défaut étant les valeurs de l’image ci-dessous : 550px par 400px

Changer les pour une valeur de 640px et 480px

A SAVOIR : Il est possible de changer ces données, mais préférable de choisir une dimension des le début. une fois tous les éléments mis en place sur notre scene, le fait de redimensionner la page, oblige a repositionner tous les éléments …

NOTE:les dimensions de pages les plus courantes sont :

–           1024px  par 768 px

–           800px par 600px 

Dans cet exemple, il n’ayant pas trop de contenu, je me limiterai à cette dimension pour des raisons de facilite de mise en page.

2. Définissons notre site
Définir ce que l’on veut consiste à s’ORGANISER. Vous  y gagnerez, du temps et des soucis en moins!!

Dans se projet on va créer un site avec 4 pages et 4 boutons qui mènent a ces pages, avec tous ce que ca comporte de fioritures esthétiques et graphiques dont :

–          un bandeau avec le nom de mon site

–          un bandeau pour le menu,

Ayant de commencer préparer à l’ avance sur un logiciel comme te que Photoshop et sauvegarder sous la forme JPEG (ou PNG ou GIF aussi le PNG est pratique pour gérer les éléments transparents)

Dans Flash, je les importe dans ma Bibliothèque flash (fichier >importer>importez dans la bibliothèque)

Note : j’ai une version en anglais de flash donc excusé la mauvaise traduction en français…

3. Etablissement et mise en page des éléments
Plaçons nos éléments graphiques sur la scène par un simple “drag and drop” (glisser-déposer) depuis la librairie… et renommons dans le scénario notre calque ou sont posez nos éléments par exemple “graphiques”

Note: J’ai choisi comme couleur de fond la même couleur que celle de mes éléments
(dans le panneau ou l’on a change les dimensions précédemment)

4. Créons nos boutons a nous
Ce qui est bien dans Flash c’est qu’il nous propose très simplement de créer des boutons avec juste les cases a remplir , donc pour se faire , aller dans le menu insérer, nouveau symbole, cocher la case bouton et nommer le “bouton1”

Puis cliquer sur “ok”

Vous devez arriver a une page vierge avec dans le scénario 4 images (les cases) nommes respectivement
UP/ OVER/ DOWN/ HIT

Petite explication: ces 4 cases représentent les statu des boutons en fonction de la souris, plus simplement quand vous êtes au dessus du bouton avec votre souris celui ci réagit et change d’apparence pareil que quand vous lui  cliquer dessus. Donc UP c’est quand il est normal, OVER quand la souris est au dessus, DOWN quand vous lui cliquer dessus et HIT définit la zone cliquable.

Cliquer sur la première image elle doit apparaitre en noir, avec l’outil texte, écrivez BOUTON1 sur la scène…

Remarque : notre bouton était apparut dans la librairie. Nous permettrons par la suite de le
positionner de la même façon que nos éléments graphiques.

Avec la image 1 sélectionnée appuyer 3 fois sur F6, comme vous avez put le constater de nouvelles images, que l’on appelle keyimage (images clé) viennent de se créer,

J’expliquerai plus tard le pourquoi du comment d’une keyimage, sachez juste que celle ci permet de différencier un image d’une autre dans son contenu.

Ces keyimages sont en réalités l’exact copie de la image1, pour mieux comprendre cliquer
sur les différentes images.

Vous ne voyez rien changer sur la scène, maintenant sélectionner la image 2 ou OVER et changer par exemple la couleur du texte…

Maintenant sélectionnez les autres images vous verrez que seule le image OVER est désormais différente ce qui signifie que le bouton aura cette apparence quand la souris sera au dessus du bouton.

Sélectionner le image HIT, puis créer un cadre avec l’outil rectangle
(en dessous de l’outil texte sur le menu de gauche) par dessus le texte BOUTON1 peut importe que l’on ne le voit plus ou non il est juste très important de bien l’englober dans le cadre (peut importe la couleur choisis) de toute façons cet état ne sera pas visible, il sert juste a définir la zone cliquable.

Si vous ne le faites pas votre souris devra passer exactement sur le trait du texte pour que le bouton soit cliquable … c’est un truc galère

Faites ce que vous désirer pour l’état DOWN, changement de couleur ou de taille, je décide de le laisser comme tel !

Voila notre bouton est fini.

Maintenant, il ne vous reste plus qu’a recommencer pour les 3 autres boutons en suivant la même procédure avec des noms différents : BOUTON2, BOUTON3, BOUTON4.

NB : il est possible d’utiliser des image cliquable a la place du texte. La procédure reste la même.

Cliquer sur l’icone  “scene1” à cote de “bouton1”.en haut de votre scénario.

Vous voici revenu dans la scène principale

5. Plaçons nos boutons
Dans votre librairie il y a 2 éléments graphiques et 4 boutons.
Nous allons placer les boutons sur la scène par simple “glisser-déposer”.

CEPENDANT, avant toute chose, vous aller créer un nouveau calque dans le scénario que vous nommerez “boutons”  et avec ce calque sélectionné, dépose vos boutons sur la scène.

Mettez les dans l’ordre et espacez-les un peu puis suivez les étapes suivantes :

Sélectionnez vos 4 boutons (ou cliquer juste sur la image contenant les boutons).
Dans le menu  “aligner et info et transformer”, choisissez aligner par le centre (image1) puis distribuer verticalement par le centre (image2).

Voila ca prend forme!! 

6. Scripts et contenu

OULA du script OULALA, ca va aller vous verrez ce n’est  pas plus compliquer qu’un lecteur CD donc nos 4 boutons place sur la scène, nos graphiques étant en place, que nous manque t’il ? bien le contenu !!
C’est là que l’on va devoir utiliser du script …rien de bien complexe
la fonction “stop” et “go to ” 

Préparons le terrain, nous avons donc 4 pages.
Dans un premier temps, nous allons donc créer 4 images clés dans le scénario sur un nouveau calque que l’on va nommer contenu, pour ce faire faites un clique droit sur la image 5
puis cliquer sur “insérer images”

Maintenant je désire que chaque image soit égal a une page donc différentes l’une de l’autre un peu a la manière des états de notre boutons OVER DOWN etc.

Pour ce faire nous avons besoins de créer des images clé
Pourquoi “clé”, les images clé, sont la en fait pour définir une action, un changement une image clé indique qu’a un moment précis du temps un changement ou une action s’opère. Vous comprendrez mieux par la suite du tutoriel!

Sélectionnez la image 1 puis en maintenant la touche “SHIFT” sélectionnez la image 5 comme dans l‘image qui suit.

Puis avec le click droit sur la sélection cliquer sur “convertir en images clé”
Hop vous avez vu tout vos images sont cloisonnées.
vous venez de créer des images clés

Nous allons nommez nos images pour pas nous perdre,
sélectionnez la première image, dans le panneau de propriétés (en bas)  tapez menu,
si tout a été fait correctement un petit drapeau s’inscrit dans la image 1
(voir sur limage ci-dessous les 3 étapes)

Et faites de même pour les autres images,
image2 écrivez y contenu1,
image3/contenu2,
image4/contenu3 et 
image5/contenu4,
4 contenus pour 4 pages.

Peut être aurez vous remarque que votre fond (bandeau et boutons) disparait des lors que vous sortez de la image 1.

C’est simple regardez dans votre scénario : vos boutons et vos bandeaux n’apparaissent qu’en image 1. Pour y remédier : sur le calque des boutons,
clique droit sur l’image 5 et “insérer images” et pareil pour le calque des bandeaux.

Vous devez avoir ca normalement.

Passons au script :
Ouvrez le panneau “actions” (F8) puis “global functions” (fonctions globales) et “scénario control” (contrôle de la ligne de temps) voir ci-dessous.

Alors qu’est ce qu’on a ? Pour simplifier, a gauche la liste des actions possibles et a droite la ou elles s’affichent une fois sélectionner…

Bref, sélectionner la image 1 et dans le panneau d’action double cliquer sur stop et faites ainsi pour tout les images clés du calque “contenu”

Sélectionner une par une et assignez leur un “stop”.
Quand vous cliquer sur une image du calque contenu vous devez avoir ca !
(un petit “a” comme “action” doit apparaitre dans chaque images)

Bon en gros l’action stop comme vous l’imaginez sert a stoppez comme un lecteur de casettes le bouton stop arrête la lecture mais reste la ou il s’est arrête (un lecteur cd fonctionne différemment) pareil ici.

Donc on a des boutons, des images pour les contenus (encore vierge) et nous faut juste faire le pont entre les 2, dire que 1 bouton, une fois clique nous emmènera a la image qu’on va lui designer…donc par exemple “bouton1” va a “contenu1” pas dur dans la théorie mais dans la pratique???? Comme dit précédemment FACILE!!

Sélectionner UN bouton (pas la image cette fois, mais bien  le bouton sur la scene) par exemple le bouton1 ok?
Ouvrez si ce n’est fait le panneau “behaviors” (je ne sais pas la traduction en français regarder l’image ci dessous pour voir si ca correspond sinon le raccourcis clavier est SHIFT+F3)

Puis cliquer sur le petit “+” aller a “movieclip” puis sélectionner le “go to image or label” (aller a l’image ou label).

Une nouvelle fenêtre vient de s’ouvrir vous demandant a qu’elle image ou label désirez vous aller (par défaut il est écrit 1)
Tapez “contenu1” , vous avez devinez pourquoi?

Précédemment nous avons nomme toutes nos images contenu 1, 2, 3, 4 et “menu” (mais ce dernier n’a  pas  d’importance maintenant) et donc nous demandons juste par cette action au boutons de se déplacer a la image  nommer “contenu1”

Donc faites de même, en sélectionnant le bouton2 > opération précédente > contenu2 etc….

Ce qui fait que tous les boutons sont relies a leur contenu….si vous ouvrez le panneau d’action en ayant sélectionne un bouton vous y verrez apparaitre ce code …

C’est fini.

7. Finaliser le tout
Aller on termine tout ca proprement …
Donc comme je disais le plus facile reste à faire. Nos boutons renvoient a des pages (encore vierges) et tout ca  sans problèmes….reste à remplir ces pages.
Créons un nouveau calque bon on va vous faire prendre les bonnes habitudes tout de suite , renommer le calque “contenu” en “AS” ce qui signifie “ActionScript”  puisque ce calque ne contient que ca ….et nommons notre nouveau  calque … ben “contenu” justement (dans un premier temps il était bien d’avoir nomme notre calque contenu puis que les images se nommait comme tel , c’était facile de faire le rapprochement , maintenant que vous avez compris que  il n’y avait que du script on le renomme en “AS” pour faciliter les futurs éventuelles modifications)

Note : le script des boutons est associes a ces dernier et non pas a une image si vous le cherchez cliquer sur un  boutons et non pas la image des boutons

Donc nous avons un nouveau calque, ou un futur contenu y pointera le bout du nez …
Pour cela on a besoin de créer des images clé (oui encore) comme fait précédemment (sélectionnez toutes les images, clique droit, et “insérer images clés”, vous devez obtenir ceci

Donc  maintenant ajoutons du contenu, sélectionner la image2, tracez un cadre qui définira votre zone ou placer vos éléments.

Cliquer sur votre image et faites CTRL+C (copier) et sur les autres images encore vierge faites SHIFT+CTRL+V
(coller au même emplacement ) sur toutes les images du calque “contenu” (sauf la image “menu” bien sur)

A partir de la vous pouvez y placer du texte et des images. Pourquoi avoir reproduit sur tous les calques le meme emplacement ? Pour une cohérence graphique !! Si vous passez d’une page a une autre et que votre texte se retrouve décale par rapport a la page précédente ca fait tout de suite un peu brouillon (si ce n’est pas maitriser)

La du coup vous avez tout  bien ordonne, vous avez l’emplacement pour y mettre ce que vous désirez, n’hésiter pas a utiliser des guides aussi qui vous permettrons de caler vos élément ou textes au même endroit que les pages précédentes….les guides n’apparaissent pas lors du rendu final!!

Une fois que vous avez bien fait toutes vos pages  faites CTRL+ENTRE pour ainsi visualiser votre site comme si il  était sur la toile!!!

Si vous désirez le publier sur internet sauvegardez votre fichier sous le nom de index et faites “publier” !! Dans le répertoire dans lequel vous venez de sauvegardez votre fichier, doit apparaitre 3 fichiers.
Le index.fla qui est le fichier source sur lequel vous travaillez, le index.swf qui est le fichier compresse du fichier d’origine et qui ne peut être que lut , et le index.html qui est le fichier qui va appeler votre fichier index.swf, donc si vous désirez l’uploader sur un serveur, uploader le fichier index.html et index.swf seulement.

SI vous n’avez pas de fichier index.html aller dans les options de publications dans Flash et vérifier que la case html est bien coche. Et cliquer sur “publier”!!   

Voila vous voila fin prêt pour faire votre propre site !!

Petits conseil :
1.éviter de rétrécir et agrandir vos images importe avec flash, essayer de les faire directement de la bonne dimension ca sera plus propre!!
2. N’hésiter pas à créer plusieurs calques, nommez les cas ne fera rien que vous évitez de cherchez des heures.
3. Je ne l’ai pas dit mais N’OUBLIEZ PAS DE SAUVEGARDER EN COURS
4.Vous pouvez essayer de déplacer vos boutons n’ importe où du moment que vous ne touchez pas a son script il fera toujours effet de la même manière !!
5. Vous pouvez bien sur placer des images à la place d’un texte pour les états des boutons.

Voila bon courage

Pour aller plus loin : 

Tutoriel: créer une interface complète en AS3
http://www.artkabis.net/t217-tutoriel-creer-une-interface-complete-en-as3

Création de jeux :
Flash : http://www.stencyl.com/

Actualité : 
Adobe n’a jamais voulu confronter Flash et HTML 5_ – LeMonde.pdf