|
|
|
Le menu local déroulant de la fenêtre Actions vous permet de configurer cette dernière et notamment faire le choix du mode de programmation. Choisissez le "mode Expert". |
Depuis Flash MX, cette question a un double sens.
Dans le cas où vous auriez déjà l'habitude de programmer dans un autre langage, une partie des experts de la communauté Flash préfère placer tous les scripts (uniquement) sur les images clé des timelines afin de centraliser le code. Cela facilite la relecture et la correction de ces scripts. En revanche, les scripts risquent de devenir rapidement longs.
Si vous programmez en ActionScript pour la première fois et que vous n'avez jamais rédigé le moindre script auparavant, nous ne pouvons pas vous conseiller une telle méthode de programmation. En effet, la logique de développement en Flash est déjà très complexe, si nous ne vous conseillons pas de placer vos scripts de boutons sur des occurrences de boutons, ce sera une difficulté supplémentaire pour votre apprentissage de l'ActionScript. Il sera toujours temps de vous adapter à une méthode supplémentaire.
Si un expert vous force à programmer en plaçant tous vos scripts sur les images clé, ne vous laissez pas influencer. Commencez par maîtriser la syntaxe pointée, vous familiariser avec l'ActionScript, vous pourrez alors facilement changer vos habitudes . Yazo.net est composé d'enseignants et nous savons à l'avance où vous rencontrerez des difficultés lors de votre apprentissage. Evitez cette première difficulté pour commencer.
D'un point de vue général, vous avez le choix entre 2 possibilités d'emplacement de scripts. Sur une image clé ou sur une occurrence. Dans ce dernier cas, vous devez faire la différence entre les occurrences de type Bouton et celles de type Clip.
> Méthodologie : Placer un script sur la timeline
1. Sélectionnez une image clé (Img 1.2)
2. Cliquez dans la fenêtre Actions
3. Saisissez votre code
Effectuez un simple clic sur le rond blanc ou noir représentant l'image clé dans la timeline.
Rappel : Un rond noir précise que l'image clé contient quelque chose sur la scène (une occurrence, un dessin, un texte ou une image) sur le calque spécifié. Un rond blanc précise à l'inverse que rien n'a encore été placé sur la scène sur ce calque. Une image clé est donc l'intersection d'un calque et d'une image. Dans cet exemple, l'image clé 1 de la timeline est vide.
> Méthodologie : Placer un script sur une occurrence
1. Sélectionnez une occurrence située sur la scène (Simple clic et non un double clic)
2. Cliquez dans la fenêtre Actions
3. Saisissez votre code
En fonction de votre choix (image clé ou occurrence), la saisie de votre script varie. En effet, dans le cas d'un script placé sur une occurrence, vous devez utiliser un gestionnaire, ce qui n'est pas forcement le cas sur une image clé (Cf "Les différents scripts et gestionnaires").
Qu'est-ce qu'un gestionnaire ?
Lorsque vous placez votre souris sur un bouton, vous pouvez vous contenter de le survoler mais vous pouvez aussi cliquer dessus. Un clic est d'ailleurs composé de deux étapes : Le clic (Press) et le fait de relâcher le clic (Release). Afin de délimiter les instructions à exécuter selon les événements (ex. : press, release, rollOver, etc.) vous devez définir un gestionnaire qui se compose du mot "on" (que nous pourrions traduire par l'expression "Au moment où"), suivi d'un événement compris entre parenthèses puis d'une paire d'accolades.
Script d'occurrence de type bouton : Lorsque vous placez un bouton sur la scène, l'occurrence que vous obtenez ne peut recevoir qu'un seul type de gestionnaire, mais avec plusieurs configurations.
on (press) {
Instruction
}
Il est très important de respecter la syntaxe ci-dessus. Vous ne devez omettre aucune parenthèse, ni les accolades. La première accolade peut être ramenée à la ligne si vous le souhaitez.
Autres événements qui peuvent être placés en lieu et place du press de l'exemple ci-dessus : rollOver, rollOut, release, releaseOutside, keyPress"s".
Pour l'événement keypress, il s'agit d'une lettre que devra taper l'utilisateur pour que l'(es) instruction(s) contenue(s) dans le gestionnaire se déclenche(nt). Vous pouvez donc remplacer la lettre "s" par n'importe quelle autre touche du clavier. Si vous souhaitez utiliser les flèches de déplacement ou d'autres touches (Espace, Tabulation, etc.), remplacez la lettre "s" par : "<Left>" pour gauche, "<Space>" pour la barre d'espace, "<Enter>" pour a touche entrée, "<Tab>", etc.
Exemples :
on (keyPress "<Left>") {
gotoAndStop(5);
}on (keyPress "d") {
gotoAndStop(5);
}
Tapez le raccourci ESC - O - N dans la fenêtre des Actions afin d'insérer directement ce gestionnaire (Pensez à bien cliquer dans la fenêtre Actions avant d'exécuter ce raccourci).
Dans le cas où vous devez surveiller l'activité relative au clavier (touche enfoncée) il sera conseillé d'utiliser les gestionnaires lorsque vous serez familiarisé ave l'ActionScript. Nous évoquions quelques lignes plus haut, la possibilité d'avoir plusieurs configurations. Nous voulions parler de la possibilité d'avoir plusieurs gestionnaires dans le même script.
on (press) {
Instruction
}
on (release) {
Instruction
}
Script d'occurrence de type clip : Lorsque vous placez un clip sur la scène, l'occurrence que vous obtenez ne peut recevoir qu'un seul type de gestionnaire.
ATTENTION, CETTE TECHNIQUE EST COMPATIBLE AVEC FLASH MX 2004 MAIS ELLE RESTE FORTEMENT DECONSEILLEE. IL EST PREFERABLE D'UTILISER LE GESTIONNAIRE ONENTERFRAME DEPUIS FLASH MX.
onClipEvent (enterFrame) {
Instruction
}
Si vous devez impérativement développer une animation compatible Flash 5, les scripts que vous placez sur une image clé ne peuvent pas recevoir les gestionnaires que nous allons vous présenter quelques lignes plus bas. Dans ce cas, il ne vous reste plus que la méthode des scripts placés sur une occurrence de type clip.
Il est important de souligner également que les lignes d'instructions contenues dans ce gestionnaire ont une portée limitée (sont valables pour) à la timeline du clip et le clip lui même. Si vous devez faire référence à une occurrence ou une variable qui se trouvent sur la scène, vous devez utiliser le mot _root qu'on peut traduire par "sur la scène" ou encore _parent si votre animation doit un jour faire l'objet d'un chargement avec la commande loadMovie().
Il est aussi très important de respecter la syntaxe ci-dessus. Vous ne devez omettre aucune parenthèse, ni les accolades. La première accolade peut être ramenée à la ligne si vous le souhaitez.
Autres événements qui peuvent être placés en lieu et place du enterFrame de l'exemple ci-dessus : load et unLoad, keyDown, data. Cette liste n'est volontairement pas exhaustive car les novices n'utilisent que ces événements. Les développeurs plus expérimentés utilisent quant à eux d'autres techniques et non ces événements et ce type de gestionnaire (objets d'écoute (listeners), setInterval(), méthodes de gestionnaire, etc.).
Analysons quelques exemples :
onClipEvent (enterFrame) {
this._x = this._x+5
}Commentaire : Dans un gestionnaire onClipEvent(), this fait référence à l'occurrence sur laquelle ce script est placé. L'occurrence va donc être déplacée de 5 en 5 pixels vers la droite, de façon continue grace à l'évènement onEnterFrame.
onClipEvent (enterFrame) {
_x +=5
}Commentaire : Dans cet autre exemple, le résultat sera le même que celui du dessus. En effet, lorsqu'il est fait référence à une propriété sans préciser de nom d'occurrence, le clip qui porte ce script est concerné par l'instruction (Ce n'est pas valable pour l'occurrence de type bouton).
onClipEvent (load) {
maballe._visible=false
}Commentaire : A l'intérieur du clip qui porte ce script, sur sa timeline, il y a un l'occurrence d'un clip qui porte le nom maballe. Elle va être masquée au chargement du clip sur la scène (grace au gestionnaire load).
onClipEvent (load) {
_root.maballe._rotation = 35
}Commentaire : Sur la scène, plus précisément à côté de l'occurrence du clip qui porte ce script, il y a un occurrence qui porte le nom maballe. Pour faire référence à cette dernière, il est indispensable d'utiliser _root.
onClipEvent (data) {
_rotation = valrotate
}Commentaire : Dans cet autre exemple, l'événement data est utilisé lorsque la commande loadVariables() a été utilisée. Cet événement permet de temporiser le chargement de données.
Détails : Le clip qui contient le script ci-dessus s'intitule "biblio". Sur la scène, la ligne d'instruction ci-dessous a été exécutée. (A partir d'un script d'image ou d'occurrence).
loadVariables("tarifs.txt","biblio")
Lorsque le chargement du fichier contenant les variables (dont la variable valrotate) sera terminé, le clip va exécuté la ligne d'instruction (_rotation = valrotate).
Tapez le raccourci ESC - O - C dans la fenêtre des Actions afin d'insérer directement ce gestionnaire (Pensez à bien cliquer dans la fenêtre Actions avant d'exécuter ce raccourci).
Script d'image clé : Des script sans gestionnaires et d' autres avec...
Faut-il utiliser des gestionnaires dans un script d'image ? A sa sortie, Flash MX présentait une nouveauté qui a, depuis, changé nos habitudes de programmation. En effet, nous pouvions jusqu'à Flash 5 placer nos scripts sur une image sans être obligé d'utiliser le moindre gestionnaire. Il était même impossible d'utiliser les gestionnaires.
Lorsque vous souhaitez placer un script qui devra s'exécuter au passage de la tête de lecture sur l'image sur laquelle elle se trouve, vous ne devez pas utiliser de gestionnaire.
En revanche, si vous souhaitez associer un événement à une occurrence, vous devez utiliser l'une des méthodes de gestionnaires suivantes :
Méthodes pour les boutons
onPress
onRelease
onReleaseOutside
onRollOut
onRollOver
onSetFocus
onKillFocus
Méthodes pour les clips
onLoad
onUnload
onEnterFrame
onMouseDown
onMouseUp
onMouseMove
onKeyDown
onKeyUp
onData
onSetFocus
onKillFocus
onRollOver
onRollOut
onPress
onRelease
Vous pouvez constater grâce au tableau ci-dessus que vous pouvez à présent rendre un clip cliquable avec onPress (et non onMouseDown) !!!
oiseau.onPress = function() {
oiseau._x += 5;
};
Pour exécuter en boucle une instruction, vous pouvez même associer la méthode onEnterFrame à _root (ou au nom d'une autre occurrence). Préférez tout de même l'utilisation de la fonction setInterval(). Utilisez this au lieu de _root si l'animation qui contient ce code est susceptible d'être chargée avec la commande loadMovie().
_root.onEnterFrame = function() {
oiseau._x += 5;
};
Pour détecter un clic sur la scène, vous pouvez aussi utiliser le script suivant :
_root.onMouseDown = function() {
oiseau._x = _root._xmouse;
oiseau._y = _root._ymouse;
};A chaque clic sur la scène, l'occurrence intitulée oiseau est positionnée à la place de la souris.
Cette technique s'adresse vraiment aux utilisateurs qui maîtrisent bien les bases de la programmation en ActionScript ainsi que les fonctions plus avancées. Vous devez aussi bien comprendre le système de timeline propre à chaque symbole.
Lorsque vous placez un symbole de type clip sur la scène, vous devez ensuite le programmer si vous souhaitez le contrôler. Imaginons que le fait de déposer un symbole de type clip sur la scène vous permette d'utiliser l'occurrence obtenue comme un bouton qui nous mènerait toujours à l'adresse d'un site précis lorsqu'on clique dessus. Deuxième et dernier exemple, lorsque vous placez un clip sur la scène, il tourne de façon continue dans le sens des aiguilles d'une montre. Voici les deux scripts qu'il faudrait placer sur la première image clé de deux clips différents (Vous pourriez aussi placer ces deux scripts sur la même image clé de la timeline d'un clip. Le résultat serait double.). Le mot this permet de faire référence à l'occurrence qui sera issue (déposée sur la scène ou dans un clip) de ce symbole qui contient le code.
this.onPress = function() {
getURL("http://www.nomdusite.com");
};
this.onEnterFrame = function() {
this._rotation+=3
};
Cette technique sera très utile, surtout si vous devez placer des clips dynamiquement sur la scène. Placer un symbole dynamiquement sur la scène.
Pour la rédaction des scripts, vous devez respecter impérativement une syntaxe précise au même titre que vous devez respecter la structure d'une phrase (en français par exemple). Sujet, verbe, complément ! Vous devez remplacer les espaces conventionnelles par des points.
Ex. : Placer l'occurrencce à 3 pixels du bord gauche de la scène > Placer.ocurrence.3pixelsde.bordgauchescene
L'exemple donné ci-dessus se traduirait par : nomoccurrence._x=3
L'explication d'un tel concept est légèrement abstrait, plutôt difficile à comprendre pour des novices en programmation. Choisissons alors d'analyser plusieurs exemples afin de mieux comprendre. Imaginons que les lignes d'instructions ci-dessous se trouvent sur un bouton qui se trouve lui même sur la scène.
balle._x = 12 (Une occurrence intitulée balle est placée à 12 pixels du bord gauche de la scène).
tableau.balle._x = 12 (Un clip intitulé tableau contient une occurrence intitulée balle qui est placée à 12 pixels (vers la droite) du centre de l'occurrence Tableau).
balle._x=balle._x + 3 (On règle la position horizontale de l'occurrence balle à 3 pixels de sa position actuelle).
balle.score = 12 ( Une variable cintitulée scoreontenue dans le clip intitulé balle e,st initialiséeà 12).
balle.gotoAndStop(5) ( La tête de lecture du clip intitulé balle est placée sur l'image 5).
La lecture se fait de gauche à droite. Vous trouvez à gauche de la ligne d'instruction, le nom d'une occurrence de type clip ou bouton, puis peuvent suivre ensuite un autre nom d'occurrence (dans le cas de clips imbriqués), une propriété, un nom de variable, une fonction ou une commande.
Lorsque vous développerez à un autre niveau de programmation, vous pourrez relativiser les propos que vous venez de lire et vous comprendrez ainsi qu'il ne s'agit pas obligatoirement du nom d'une occurrence pour commencer la ligne d'instruction d'un script, il peut s'agir d'un nom d'objet (d'instance) crée avec le constructeur new.
Lorsque vous devez rédiger vos propres scripts, cela sous entend bien évidemment que vous connaissez le langage, mais connaissez vous la saisie "simplifiée" ? Depuis Flash 5, il est possible d'insérer dans vos lignes d'instructions, certaines commandes/fonctions par un simple raccourci clavier.
Ex. : gotoAndStop(5) contient 14 caractères, donc 14 touches du clavier à taper.
Pour gagner du temps, vous pouvez procéder ainsi :Alors que vous vous apprêtez à taper la lettre "g" de gotoAndStop(5), tapez plutôt sur la touche Escape (ou Echappe) de votre clavier*. Tapez ensuite successivement sur les 2 touches (lettres) du clavier qui permettent d'insérer la commande automatiquement. (Ex. : g et s).
* Relâchez cette touche, vous ne devez surtout pas la garder enfoncée comme vous le feriez dans le cas d'un raccourci clavier classique (Ex. : CTRL-S ou Commande-S pour sauvegarder un document).
Certaines commandes et fonctions peuvent donc être saisies très rapidement grâce à ce type de raccourcis. Voici quelques exemples supplémentaires :
O - N : Taper le gestionnaire rattaché à l'occurrence d'un bouton (on () {..})
O - C : Taper le gestionnaire rattaché à l'occurrence d'un clip (onClipEvent() {...})
G - S : gotoAndStop()
G - U : getURL()
S - T : stop()
Nous vous conseillons fortement un tel usage des raccourcis clavier.
Pour une plus grande optimisation de votre travail (production) vous pouvez
aussi utiliser les touches ci-dessous pour la sélection de vos
outils, la manipulation de votre timeline et celle de vos occurrences
sur la scène. Bien sûr, il ne s'agit pas d'une liste exhaustive
mais au contraire des raccourcis minimums à connaître.
Raccourcis Mac et PC : CTRL pour PC et Commande pour Mac. Ex. : CTRL-Entrée (PC) ou Commande-Entrée (Mac)
OUTILS (Tapez uniquement les lettres ci-dessous sans CTRL (PC) ou Commande (Mac))
V : Flèche noire
T : Outil texte
O : Ovale
R : Rectangle
TIMELINE
F6 : Créer une image clé
F7 : Créer une image-clé vide
F5 : Créer/Insérer des images
CTRL-Entrée ou Commande-Entrée : Lecture de votre animation dans une nouvelle fenêtre.
CTRL-Shift-Entrée ou Commande-Shift-Entrée : Lecture en activant le mode deboggage
(Pensez à cliquer sur le triangle vert de lecture pour lancer votre animation)
SCENE
F8 : Créer un symbole (à partir d'une sélection)
Shift-F8 : Créer un symbole vide (A composer juste après l'execution du raccourci)
CTRL-Shift-V ou Commande-Shift-V : Coller une occurrence à la même place que sa copie (Commande-C)
MISE EN FORME DU TEXTE
CTRL-Shift-B ou Commande-Shift-B : Mettre une sélection de texte en gras (P > Normal- I > Italique)
CTRL-Shift-C ou Commande-Shift-C : Centrer un texte dans sa zone de texte (J > Justifier - L > Gauche)
Il est une autre technique qui permet une aide supplémentaire relative au méthodes et propriétés que vous pouvez associer à un nom d'instance ou _root. Cette technique est très contraignante car cela vous oblige à nommer vos noms d'instances avec un suffixe supplémentaire. Le principe reste simple. La liste ci-dessous répertorie toutes les classes et leurs suffixes disponibles dans Flash MX et MX 2004.
Objets
Suffixes à placer derrière le nom de l'instance
Array
_array
Button
_btn
Camera
_cam
Color
_color
ContextMenu
_cm
ContextMenuItem
_cmi
Date
_date
Error
_err
LoadVars
_lv
LocalConnection
_lc
Microphone
_mic
MovieClip
_mc
MovieClipLoader
_mcl
PrintJob
_pj
NetConnection
_nc
NetStream
_ns
SharedObject
_so
Sound
_sound
String
_str
TextField
_txt
TextFormat
_fmt
Video
_video
XML
_xml
XMLNode
_xmlnode
XMLSocket
_xmlsocket
Liste extraite de l'aide en ligne de Flash MX 2004
Il est clair que vous devez impérativement donner des noms représentatifs pour vos noms d'instance et de variable dans vos développements, surtout si vous devez travailler en équipe et/ou travailler sur des projets contenants de nombreuses lignes de code. Alors un peu plus ou un peu moins, on est pas à quelques lettres... Au lieu de nommer votre instance sonFond = new Sound(), vous pouvez la nommer sonFond_sound = new Sound(). Vous pourrez alors obtenir le menu ci-dessous. A vous de voir si vous voulez vous contraindre à ajouter des suffixes à vos noms d'instances pour obtenir ce menu dès que vous saisissez le point situé derrière le nom d'instance. Selon vos habitudes de développements, selon la nature des développements, il est intéressant de se contraindre à une telle nomenclature. Les suffixes des classes ci-dessus figurant en gras valent la peine d'être retenus et utilisés.
Lorsque vous réaliserez des projets contenants de nombreuses lignes de code avec de nombreux scripts, vous rencontrerez alors l'obligation de vous déplacer de scripts en scripts (pas obligatoirement sur la même timeline). Vous allez donc passer une bonne partie de votre temps à rechercher et sélectionner les images clés (et occurrences) qui contiennent les scripts à modifier, puis vous rechercherez enfin la bonne ligne d'instruction en utilisant l'ascenseur de la fenêtre Actions. Pour vous éviter tout ce travail, vous pouvez "mémoriser des scripts" (et leur position dans la fenêtre Actions) dans des onglets situés en bas de la fenêtre Actions.
> Méthodologie : Mémoriser un script et sa position dans la fenêtre Actions
1. Sélectionnez le script à mémoriser
2. Cliquez sur l'icône ci-dessous
Vous obtenez alors une fenêtre Actions qui contient autant d'onglets (dans sa partie basse) que vous avez fait de clics.
Cliquez sur les onglets de l'animation ci-dessous (ce n'est pas une image).
