Didacticiel de création d’un Portfolio sous Macromedia Flash 8BTS CV 2005-2006 Lycée Saint Exupery Marseille

Vite! vite! putain Alex

a besoin de moi pour

Egoutter ses nouilles...

lash pour les nouilles!

he he ! salut les potaux je vous presente un didacticiel

specialement fait pour les nouilles que vous etes.

Evidemment il faut avoir quelques notions comme le

dessin avec flash et les manipulations de base du

logiciel.

Suivez pas a pas les etapes et realisez votre portfolio

pasque pour trouver du boulot ca peut aider...

Création d’un Portfolio interactif sous flash

Un portfolio est un book qui comporte différentes rubriques, nous nous contenterons d’unearborescence simple. Une arborescence peut être plus complexe (cf. fig. 2), mais restons hum-bles...

Préparation du document:

Prenez soin de préparer vos images à insérer, au format jpg par souci de “légèreté”.

>Photoshop: enregistrer pour le web > format jpgenregistrer pour le web > format png 24 (image avec transparence)

Importez vos images dans la bibliothèque: fichier > importer > importer dans la bibliothèqueVos éléments apparaissent dans la bibliothèque. Ctrl+L si elle n’est pas affichéeRenommez les si nécessaire, attention pas de majuscules ni d’espace entre les caractères (rem-placer par _) cela peut nuire aux liens que vous allez définir entre les différents éléments.

Modifiez la taille de votre document: modification > documentSpécifiez le nom du document, la dimension (1024 x 500 maximum)la couleur d’arrière plan et éventuellemnt le nombre d’images par seconde.

12 images par seconde pour le web, 24 pour un dessin animé.

Page d’accueil ou homepage:

la page d’accueil comme son nom l’indique est la porte d’entrée de votre site, celle qui ouvre lasalle au trésor!! On y trouvera des boutons nous dirigeant vers d’autres pages et dans le casprésent un bouton de lien pour vous contacter via un mail.

Boutons:

Commençons par créer un bouton, simple mais animé. Dessinez un “rond” (le bouton maj. enfon-cé permet de faire un cercle ou un carré parfait). Spécifiez l’épaisseur du contour, les couleursetc...Cliquez à l’aide de la flêche noire sur l’élément et appuyez sur F8. Nommez votre bouton etdonné lui son statut de “bouton”.

Vous devriez obtenir ceci > fig.3

homepage

travaux cv

cont

act m

ail

Accueil ou homepage

travaux cv + contact (mail)

projet 1

esquisses colorisation

pre-home

fig. 2

1

Songez aux repères, c’est indispensable pour un travail soigné.le bouton est devenu bleu, il est donc reconnu en tant que tel.Cliquez 2 fois sur celui-ci, à l’aide de la flêche noire.

Vous pénétrez dans l’intimité du bouton.4 états se dévoilent. Insérez une image clé à chaque étape, clic droit insérer une image clé, effectuez les modifications nécessaires aux différents états, vous pouvez introduire du texte.

attention l’état cliqué correspond à la zoneréactive, définissez une surface de la même taille que votre bouton ou légèrement plus grande.

retournez sur la séquence, votre bouton est prêt, pour vérifier: contrôle > activer les boutons simples.Cliquez, ça marche! (heu, normalement ^^!)

Réalisez un deuxième bouton (cv par exemple...). Vous pouvez copier votre bouton(dans la bib-liothèque, clic droit > dupliquer) , mais ne modifiez pas le premier cela modifierait tous les bou-tons.

Si tout va bien nous en sommes lààààà >

Page travaux:

Nous allons dupliquer cette séquence, c’est bien plus simple...

Le panneau séquence est affiché, ou bien cliquez sur: fenêtre > autres panneaux > séquencesou Maj. + F2songez à noter les raccourcis aussi (Félicie!)

Cliquez sur le bouton avec deux carrés !

Formidable une copie de la séquence apparait, modifiez le nom: travaux par exemple.

Vous travaillez désormais sur une nouvelle séquence, celle sur laquelle vous allez disposer vos travaux.

fig. 3

2

Page travaux:

Pour commencer nous allons importer chaque image dans la scène à l’aide d’images clés,servez-vous encore une fois des repères. retirez les éléments inutiles et dupliquez un boutonpour diriger l’animation vers la séquence “accueil”Créez un “bouton suivant” il nous servira à faire défiler les images.

Nous en sommes donc là... Maintenant nous allons dupliquer cette séquence afin de conserver les boutons et réaliser la séquence cv.

Vous retirez les éléments inutiles par exemple “bouton suivant” et images clés.

Vous créez un “bouton contact” pour vous contacter par mail, forcément. N’oubliez de rajouter le bouton travaux à la place du bouton cv (logique...).

L’ensemble de vos séquences sont prêtes, il ne manque plus que la partie “action script”.

Action Script:

Sans nul doute la partie la plus difficile, mais bon comme vous avez la chance d’avoir des profsfabuleux ca facilite la tâche!

Nous allons en premier lieu stopper nos animations sinon l’ensemble va s’enchainer depuis lapremière jusqu’à la dernière séquence. Donc il faut mettre des “stops”.

Revenons à la première séquence: accueil, rajoutez un peu de sel... heu non. Ajoutez un calqueque vous nommerez actions, il contiendra les ordres donnés au scénario. Sélectionnez uneframe, ici il n’y en a qu’une et cliquez sur actions-image en bas puis fonctions globales > contrôledu scénario > stop. Un petit signe en forme de a, c’est un alpha apparait. Cela signifie que lescénario va se dérouler jusqu’à l’image 1 et stopper. 3

Vous pouvez tester votre animation à tout instant en appuyant sur F12.

Maintenant il faut donner des actions et des liens à nos boutons. Sélectionnez le bouton travauxpuis actions-bouton > fonctions globales > actions sur les clips > on > release > revenez devantl’accolade { contrôle du scénario > gotoAndPlay > entre parenthèse > “travaux” ,1

vous devriez obtenir ceci:

on (release) {gotoAndPlay("travaux",1);

}

Cela signifie que lorsque l’on appuie sur le bouton (on) et que l’on relâche (release) l’animationse dirige vers la séquence travaux, frame 1. Ouf, ça y est!!

Attention n’oubliez pas les “ pour une séquence puis une virgule et le numéro de frame.

ex: “nom de ma séquence”,12

testez: F12

Procédez de même pour le bouton cv, le code deviendra:

on (release) {gotoAndPlay("cv",1);

}

Si vous avez testé votre animation, vous remarquez que l’ensemble de vos séquences, s’enchaî-nent, toujours le problème du stop. Nous allons donc insérer des stops sur l’ensemble desimages de la séquence travaux.

Pour les boutons de navigation procédez comme pour les précédents.

Sélectionnez le “bouton suivant”, il est conseillé de le disposer sur un calque qui lui sera dédiécar nous allons lui donner différentes actions.

Insérez une image clé à la dernière frame, sélectionnez la première frame et l’objet bouton entrezles actions suivantes:

fonctions globale > contrôle des clips > on > release > contrôle du scénario > devant l’accolade {> next frame

à l’écran s’affiche ceci:

on (release) {nextFrame();

}

cela signifie que lorsque l’on appuie et que l’on relâche le scénario va à l’image suivante (nextframe).Et l’ensemble de l’action est stoppée par les “stops” disposés sur le scénario.

4

la dernière image clé permettra de donner un ordre différent, en l’occurence celui de revenir à lapremière image.

Sélectionnez donc la dernière frame puis le bouton et entrez le code suivant:

on (release) {gotoAndPlay(2);

}

Comme pour les boutons de navigation, le scénario va à l’image indiquée entre parenthèses, laboucle est bouclée! Et vous obtenez ce type de configuration!

maintenant travaillez sur la “séquence cv”, dirigez vos boutons de navigation, insérez un calque actions, n’oubliez pas le stop!

Pour finir il nous faut un code pour le “bouton mail”.

Sélectionnez le et entrez ces actions:

actions-boutons > contrôle sur les clips > on > press > navigateur réseau > devant l’accolade { > getURL > entre parenthèses > "mailto:votremail@gnagnagna.fr"

Le code sera donc le suivant:

on (press) {getURL("mailto:votremail@gnagnagna.fr");

}

Ce bouton sert à déclencher la messagerie installée sur l’ordinateur de l’internaute, pas depanique si cela ne marche pas quand vous lancez l’exécution. l’animation n’étant pas en lignecela ne peut fonctionner.

Pour ce qui est de la mise en ligne il vous faut un espace d’hébergement sur lequel vousdéposez votre anim flash plus la page html correspondante. L’idéal est d’utiliser dreamweaverpour générer votre page. Enfin il est conseillé de transférer vos fichiers à l’aide d’un client FTPtype “filezilla” (logiciel gratuit). En effet votre site est déposé sur un serveur FTP, en somme unespace de stockage de données. Cet espace vous est délivré par les différents fournisseurs (free,wanadoo, 9 télécom, alice...) et les procédures peuvent différer.

Tout est fini, bien sûr vous pouvez rajouter musique, clips, vidéo, interpolations et filtres, adaptezvotre Portfolio à vos capacités, mais n’en faites pas trop car on peut tromper un homme mille foismais heu non on peut tromper une fois...

5

ah ah casserole-

man grace a nos

pouvoirs

conjugues nous

allons inonder

le monde de

nouilles...

arf!arf!

arf! je vais

prendre ma

revanche sur

ces feignants

d’etudiants!

L’application de ce didacticiel en ligne:http://perso.wanadoo.fr/gersland/portfolio/

Un site type flash pour les nuls:http://www.surf.to/fpln

Un tutoriel simple mais efficace qui récapitule les actions de base de flash:http://www.flashkod.com/tutorial.aspx?ID=132

Site sur dreamweaver:http://membres.lycos.fr/omnipres/didacdw/modeles/

Des bouquins vraiment pas mal:

Pour débuter c’est très bien attention tout de même il y’a quelques différences avec Flash 8.“Flash Mx 2004 pour les nuls”, Gurdy Leete et Ellen inkelstein, Ed. First Interactive,11€90.

Bon ouvrage de mise à jour vers Flash 8 complet pour débutants et intermédiaires.“Flash 8 et actions Script 2”, Eric Charton, Campus Press, 24€90.