Introduction - Symboles - Programmer en Flash - Les objets - Les variables

	Cours du Flash pour les débutants
	Programmation en Flash   Développer et déployer facilement vos sites web Télécharger gratuitement Office 2013 Héberger votre site web sur des serveurs gratuits Visual Studio 2013 Télécharger et apprenez gratuitement Trucs et Astuces Découvrez Windows 8.1 et télécharger le gratuitement     La programmation consiste à placer des commandes (des mots) dans un ordre bien défini aux endroits précis (sur l'une des images d'une animation, sur un bouton* ou sur un movie clip*) d'une animation afin d'obtenir de l'interactivité. * (L'occurrence d'un bouton ou d'un movie clip) Les puristes du C++ et autres langages sauteront au plafond en lisant cette "pseudo-définition" mais il faut comprendre que cette explication s'adresse à des débutants en programmation qui veulent faire leurs premiers pas. Essayons cette métaphore : Le dessin animé est à la télévision ce que l'animation est à Flash, alors que les jeux vidéos sont à la télé ce que les animations interactives sont à Flash. Les animations sont interactives grâce à la programmation. Pour être plus précis, définissons les termes officiels utilisés en programmation : La commande est un mot (généralement un verbe) qui définit une "action" à faire (Ex. : Déplacer ou agrandir un symbole sur la scène, changer le contenu d'un texte sur la scène...) La propriété est un mot (généralement un qualificatif) qui indique une caractéristique Une instruction est une ligne de commandes Un script est un ensemble de lignes d'instructions Flash était à l'origine un logiciel d'animation mais il s'est doté peu à peu de fonctions de "programmation". Comprenez le terme "fonction" par "possibilité" et celui de "programmation" par "interactivité". Pour être plus précis, les animations peuvent être interactives si l'utilisateur clique sur des boutons de l'animation, fait certains choix dans le déroulement de l'animation. etc. Au fur et à mesure des différentes versions de Flash, des fonctionnalités ont été ajoutées. Aujourd'hui, Flash 5 permet une très grande interactivité. Celle-ci est possible grâce à de la programmation placé sur des boutons, des movie clips et sur des images. Les scripts sont plus ou moins longs. Voyons à présent quelques exemples : Script : Voici des exemples de scripts. stop (); temps=12; on (press) { gotoAndStop (2); } on (press) { for ( val=0; val<=4; val++ ) { setProperty ( "forme"+(val+1), _x, oux[val] ); setProperty ( "forme"+(val+1), _y, ouy[val] ); } } On pourra parler de la fenêtre des scripts, sous entendu, la fenêtre des actions où on place des scripts. ATTENTION : On ne peut pas placer un script sur un symbole, il est obligatoirement placé sur l'occurrence d'un symbole. Sur l'occurrence d'un bouton ou l'occurrence d'un movie clip. Actions : Ce terme est utilisé au pluriel principalement dans Flash pour définir la "programmation". Lorsqu'on parle d'une action, on parle alors d'une commande en programmation classique. "SetProperty" est une action. Mais on peut aussi parler d'une action lorsqu'on parle d'un groupe d'actions faisant une tache précise. Il faut reconnaître que tout ceci est quelque peu ambigu mais cela est dû au fait que dès le départ, pour simplifier la programmation dans Flash, les créateurs de ce logiciels ont utilisé un vocabulaire plus parlant mais moins technique. Donc, pour résumer, voici un tableau récapitulatif. Action (une) > Peut être compris comme un "Ensemble d'actions" > Ensemble d'instructions Actions (Les) > Peut être compris comme l'ensemble des actions disponibles dans Flash > L'ensemble des commandes, propriétés, mots clés, etc disponibles dans Flash Actions (Des) > Peut être compris comme des lignes d'instructions Script (Un ou le) > Peut être compris comme l'ensemble des instructions placées sur une image ou un bouton. A présent, pour programmer dans Flash, deux modes sont possibles. En effet, selon votre niveau en programmation, vous pouvez utiliser une méthode relativement intuitive ou bien taper le code vous même (il faut comprendre par "code" le mot "scripts"). Les deux méthodes vous sont présentées aux chapitres ci-dessous : - Le mode Expert - Le mode Normal CONSEIL : MEME SI VOUS ETES DEBUTANT EN PROGRAMMATION, IL EST FORTEMENT CONSEILLE DE PROGRAMMER EN MODE EXPERT ET NON EN MODE NORMAL AFIN DE PRENDRE DE BONNES HABITUDES. Où placer les actions ? Nous devrions commencer par nous poser la question suivante : Que veux-je faire ? En effet, en fonction du mode de déclenchement de l'action que vous souhaitez réaliser, l'emplacement diffère. On fait la différence entre le mode manuel (l'utilisateur doit cliquer ou appuyer sur une touche du clavier) et le mode automatique (l'utilisateur n'a rien à faire. Seul le déplacement de la tête de lecture déclenche l'action). Sur une image : La timeline que vous voyez est celle d'une animation et non celle d'un symbole. Il serait néanmoins possible de placer cette action sur l'image d'un movie clip. Dans l'exemple ci-dessous, une variable intitulée "tempo" est initialisée à 1 et une occurrence de type movie clip intitulée "coche" est masquée. Sur un bouton : Le bouton suivant déplacera la tête de lecture sur l'image 15 de la timeline de l'animation dès que l'utilisateur Il faut reconnaître qu'il existe une certaine ambiguïté relative au movie clip par rapport au bouton. Vous pourrez constater que dans certains cas, cela revient presque au même de placer une action sur un bouton ou un movie clip. Seule la programmation change. En effet, vous pourriez vous dire "mais quelle différence entre les deux exemple ci-dessus ?" Permettez-nous de vous le rappeler. Il y a plusieurs timeline dans une animation. Celle de l'animation elle-même et celle des movie clips. Donc, dans le cas du bouton, l'action "gotoAndStop (15);" aura pour effet de déplacer la tête de lecture à l'image 15 de la timeline de l'animation. Dans le cas du movie clip, même si le movie clip est placé sur la scène, même si ce script est placé sur l'occurrence, l'instruction "gotoAndStop (15);" aura pour effet de d'afficher l'image 15 de la timeline du movie clip sans que la tête de lecture de l'animation ne bouge. En clair, si vous démarrez avec Flash, il est fortement déconseillé d'utiliser "on clipevent". Utilisez plutôt l'action "tell target". Elle est plus limitée mais plus facile à comprendre. Lorsque le code est placé sur un bouton ou un movie clip, les actions peuvent se déclencher à différents moments. Ces moments s'ont appelés des événements. Il faut donc une syntaxe qui permet de gérer ces événements avant d'exécuter les instructions. On appelle alors cela des "Gestionnaires d'événements". Mode Débutant : Programme facile : Afin que tout le monde puisse accéder à la programmation dans Flash, le logiciel dispose d'un mode de programmation simplifié. La fenêtre de scripts est alors divisée en 3 parties : Dans la partie gauche de la fenêtre, vous pouvez sélectionner une commande. Celle-ci vient se placer automatiquement dans la partie supérieure droite de la fenêtre. Si vous avez besoin d'effectuer certains réglages, ils se feront via la zone de dialogue située en bas de la fenêtre. Exemple 1 : Placer un stop sur une image. Clic sur l'image clé de votre choix 1. Clic sur le bouton "+" et sélectionner la commande "Stop" via la commande "Actions Basiques" (Basic actions) 2.  ou Clic sur l'image clé de votre choix 1. Maintenez la touche "Esc" ou "Echapp" et taper les lettres "s" et "t" l'une derrière l'autre. 2. ou Clic sur l'image clé de votre choix 1. Cliquer sur la rubrique "Actions Basiques" (Basic actions) 2. Double-cliquer sur la commande "Stop" ou la faire glisser sur la partie droite de la fenêtre des scripts. 3.   Fonctions intermédiaires > telltarget > A quoi ça sert : - Cette commande permet de contrôler la tête de lecture d'un movie clip. - Cette commande est obsolète, il est préférable d'utiliser la syntaxe pointée. Comment l'utiliser ? Comme vous venez de le lire ci-dessus, cette utilisation du "Tell target" est obsolète dans Flash 5, même si la commande fonctionne. Voici tout de même le code : on (press) { tellTarget ("ici") { gotoAndStop (2); } } Analysons la structure : Ligne 1 : TellTarget ("ici") la commande prévient Flash que les instructions qui vont suivre s'adressent au movie clip nommé "ici". Les guillemets sont indispensables. N'oubliez pas non plus l'ouverture de l'accolade. Ligne 2 : Vous placez les commandes (sur plusieurs lignes si nécessaire pour plusieurs commandes). Ligne 3 : Vous fermez l'accolade que vous avez ouverte sur la première ligne. Si nous devions utiliser la syntaxe pointée, voici le code ci-dessous : on (press) { ici.gotoAndStop (2); } Outre une syntaxe plus courte, elle est surtout plus simple mais vous pouvez comprendre son fonctionnement au chapitre sur la syntaxe pointée. Syntaxe pointée Comment programmer ? Flash 5 aura été un tournant dans l'histoire du logiciel. En effet, les langages de programmation les plus avancés utilisent une syntaxe qualifiée de pointée. Elle compose "ses phrases" appelées des "instructions" à partir d'objets, de movie clips, de méthodes, de propriétés et de variables. Les variables peuvent se trouver au même emplacement que les méthodes et propriétés. Ce sont des mots séparés par des points, d'où le nom de syntaxe pointée. Il est évident que si vous lisez ces termes pour la première fois, cela ne vous avancera pas. Lorsque vous aurez compris le mécanisme et aurez fait la différence entre ces termes là, vous comprendrez ce que vous venez de lire. En attendant, simplifions les explications et commençons par quelques exemples : objet.méthode lamain.setRGB(0xCCFF66); Dans cet exemple, "lamain" est un objet couleur. Une occurrence de type movie clip sur la scène, est contrôlée par cet objet. "setRGB..." est une méthode de l'objet "lamain". Cette méthode consiste notamment dans ce cas à changer la couleur de l'occurrence contrôlée par l'objet "lamain". movieclip.méthode diapo.gotoAndStop(2); Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "gotoAndStop" est une méthode du movie clip "diapo" qui consiste a lui ordonner de placer sa tête de lecture sur l'image 2 (sur la timeline interne du movie clip). movieclip.propriété diapo._x=15 Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "_x" est une propriété du movie clip "diapo". Cette propriété lit et change la position horizontale (par rapport au bord gauche de la scène) du movie clip "diapo". Dans l'exemple ci-dessus, l'occurrence de type movie clip intitulé "diapo" via la palette des occurrences, est placée à 15 pixels du bord gauche de la scène. Lorsque vous placez des actions dans vos animations, sur vos boutons et movie clips, vous avez pû constater qu'il existe deux modes de programmation. Le mode "Normal" et le mode "Expert". Dans ce dernier cas, vous pouvez taper votre code de deux façons. Voyons l'exemple suivant : on (press) { tellTarget ("ici") { gotoAndStop (2); } } Et : on (press) { ici.gotoAndStop (2); } Nous ne nous étendrons pas sur la première syntaxe qui utilise "tell target". Reportez vous à ce chapitre pour de plus amples informations. Retenez tout de même que cette syntaxe est obsolète même si elle fonctionne. Penchons-nous donc plutôt sur la syntaxe pointée : Le premier mot "ici" est le nom d'une occurrence de type movie clip qui est concerné par "gotoAndStop (2). Le point sépare les différentes "parties" (animation, objets, movie clips, méthodes, propriétés et variables) qui composent la ligne d'instruction. "gotoAndStop est appelée "méthode" de l'objet "ici". Une instructionest, comme nous l'avons vu ci-dessus, composée de plusieurs parties séparées par des points. xxxxxx.yyyyyy xxxxxx : Vous pouvez saisir le nom d'un objet ou d'un movie clip. yyyyyy : Vous pouvez placer le nom d'une méthode ou d'une propriété. Dans certains cas, yyyyyy pourrait aussi être une variable rattachée à un movie clip. xxxxxx.yyyyyy.zzzzzz Dans le cas ci-dessus, cela signifie qu'une imbrication a été effectuée. xxxxxx est un movie clip et yyyyyy un autre qui est contenu dans le premier. Dans ce cas, zzzzzz est une méthode, une propriété ou une variable rattachée à yyyyyy. Exemples : corps.tete.oeil._x=12 "corps" est un movie clip qui contient un autre movie clip "tete" qui en contient lui même un autre, "oeil". C'est ce dernier dont la propriété "_x" (position horizontale d'un objet sur la scène) est réglée à 12 (pixels). corps.tete=12 Nous aurions pu aussi avoir un movie clip "corps" qui contient une variable intitulée "tete" qui a pour valeur 12. Cette méthode de rédaction du code est une méthode universelle utilisée dans de nombreux langages que nous vous invitons donc à utiliser au détriment d'une syntaxe plus longue et qui devrait être obsolète sur Flash 6 ou 7. Les gestionnaires d'événements Qu'est ce que c'est ? Les actions que vous placez sur un bouton ou un movie clip peuvent se déclencher à différents moments. Pour contrôler ce moment, vous devez toujours commencer par insérer le code suivant sur un bouton ou un movie clip : on (event) { ... } ou on clipevent (event) { ... } On appelle ces lignes de code, des gestionnaires. Ils gèrent des ÈvÈnements (event(s)). Le mot "on" introduit l'ÈvÈnement qui suit. Dans le cas d'un bouton, l'ÈvÈnement sera placé entre parenthèses (Premier exemple). Dans le cas d'un movie clip l'événement doit contenir le mot clipevent (afin de le différencier du bouton) puis l'événement entre parenthèses (Deuxième exemple). Selon le symbole, "Bouton" ou "Movie clip", les événements diffèrent : Les événements : D'un movie clip : load : au chargement de l'animation unload : au déchargement de l'animation enterFrame : lorsque la tête de lecture entre sur une image mouseDown : lorsque l'utilisateur clique sur l'occurrence mouseUp : lorsque l'utilisateur relâche le clic de l'occurrence mouseMove : lorsque l'utilisateur bouge la souris keyDown : lorsque l'utilisateur enfonce une touche du clavier keyUp : lorsque l'utilisateur relâche une touche du clavier (data : lorsque le movie clip reçoit des données) - Au moment où nous écrivons cet article, nus ne sommes pas sûr du fonctionnement de cet événement. D'un bouton : press : lorsque l'utilisateur clique sur l'occurrence release : lorsque l'utilisateur relâche le clic de l'occurrence releaseOutside : lorsque l'utilisateur relâche le clic de l'occurrence en dehors de celle-ci rollOver : lorsque l'utilisateur passe le curseur de la souris au dessus de l'occurrence rollOut : lorsque l'utilisateur sort le curseur de la souris en dehors de l'occurrence dragOver : lorsque l'utilisateur déplace et lâche le curseur au dessus d'une occurrence dragOut : Idem dragOver mais relâche en dehors keyPress : lorsque l'utilisateur enfonce une touche du clavier -  Déposez votre CV -  lien de téléchargement direct -  50 tirages offerts à l'inscription chez myPIX.com! -  Dépot de CV gratuit sur Touslesemplois -  Logiciel de référencement automatique