Version en ligne

Tutoriel : Introduction à l'ActionScript

Table des matières

Introduction à l'ActionScript
Flash bien / pas bien
Flash sous toutes ses coutures
Flash c'est pas bien
Flash c'est bien
Deux architectures classiques
L'Architecture Flashocentriste
L'architecture Flashoponctuelle
L'IDE de macromedia
Se familiariser avec l'interface
Le Scénario
Formes et Symboles
Où je le mets ce fichu code ?
Notion de "clip"
Créer un clip
Les zones de texte
La solution pratique
Ma première animation !
Un nouveau document
Dessine moi une balle
Interpolation de mouvement
Un soupçon d'ActionScript
Fil rouge
Cahier des charges
Architecture globale
Variables et fonction trace()
Structure et commentaires
Fonction trace()
Les numériques : int et Number
Les chaines de caractères : String
Les tableaux : Vector
MovieClip
_root , this et _parent
Positionnement
Taille absolue
Agrandissement
Rotation
Transparence
Visibilité
Les Conditions
Un nouveau type : Boolean
Opérateurs de test
Opérations sur les booléens
La structure conditionnelle
Récapitulatif
Les Boucles
Qu'est-ce qu'une boucle
Boucle while
Boucle for
Petits exercices de style
Les Fonctions
Déclarer une fonction
Des arguments
Retour de valeur
Méthodes et fonctions
Les Evénements
Vous avez dit "événement" ?
Evénements souris localisés
Evénements souris globaux
Evénements à tout faire !
Récapitulatif
Fil rouge - le logo animé
Point de départ
Bonnet de noël
Rotation des yeux
Contenu de la bulle
Récapitulatif
Créer et enlever des Clips
Clips dynamiques, statiques et profondeur
Créer un clip vide
Dupliquer un clip de la scène
Attacher un clip à la scène
Supprimer un clip
Une astuce en profondeur
La variable dans la variable
Publication et variables
Paramètres de publication Html
Le code Html expliqué
Envoie des variables
Réception des variables
Les caractères spéciaux
Dessiner avec Actionscript
Couleurs d'un clip
Dessinons sur des clips
Gribouillons un peu
Un peu de coloriage !
Gommez moi tout ça !
Utiliser le clavier
Les écouteurs
La touche enfoncée
Les raccourcis des touches
Une condition bien pratique !
Trichons avec les écouteurs
Les collisions
Approche des collisions
Collision rectangulaire
Collision circulaire
Collision ponctuelle
Collision bourrine
Fil rouge - On The Road Again
Point de départ
Faire mumuse avec la voiture
Les goals
Collisions inside
Fignolages
Des améliorations
Sécurité et Flash
crossdomain.xml
Structure de crossdomain.xml
Nouveautés de FlashPlayer 8
Contourner la protection
Images et Animations
Dans un clip ou un niveau
Un chargeur
Redimensionner l'image
Particularité du chargement des animations
Transfert de variables
La vieille technique
Chargement avec LoadVars
Envoyer des variables
Exercice : Zozor dynamique
Musique !
Préparation du terrain
Lecture
Curseur de lecture
Chargement dynamique
Vidéos
Riva FLV Encoder
Un nouvel objet
Trois classes pour le prix d'une
Contrôle du flux
Fil Rouge - Radio-Blog
Du côté de PHP
Chargement de la Playlist
Gestion de la musique
Le volume - startDrag() notre ami
L'ascenceur
Gestion du XML
Rappel sur le XML
Chargement
Une grande famille !
Types et attributs
XML tabulaire
Rotation d'un clip vers la souris
Création du clip
Explication géométrique
Le code

Introduction à l'ActionScript

Image utilisateur

Bonjour futurs flasheurs :D .

Depuis plusieurs années, vous pouvez voir fleurir sur les sites de la galaxie Web des petites animations colorées et interactives. Que ce soit des petits jeux, des radios, ou encore simplement de la publicité : Flash est maintenant omniprésent !

Dans Flash, on trouve deux parties distinctes : le graphisme et le scripting. Ce que ce tuto vous propose de faire c'est d'apprendre l'ActionScript, c'est-à-dire toute la partie dynamique d'une animation Flash !

Je vous souhaite bonne chance, et j'espère que vous prendrez autant de plaisir dans la lecture de ce tutoriel que moi pour l'écrire ;) .

Flash bien / pas bien

Flash sous toutes ses coutures

Nous allons dans ce chapitre apprendre à déjouer les pièges de Flash. Ces pièges qui entraînent de nombreux webmestres avides de rendre leur site flashy à leur perte !

Oui, car l'utilisation de Flash dans un site est souvent chaotique et mal organisée. C'est pour cela que de nombreuses personnes considèrent Flash comme l'arme du Malin ^^ .
Alors qu'en fait, si Flash commence à avoir une si mauvaise réputation c'est seulement parce qu'il est mal utilisé :) .

On va donc déjà voir les arguments des uns et des autres. Puis nous essayerons de tirer la première conclusion de ce tutoriel : pourquoi certains sites en Flash sombrent dans les abîmes du Web alors que d'autres atteignent des sommets ?

Flash sous toutes ses coutures

Flash bien / pas bien Flash c'est pas bien

Flash sous toutes ses coutures

Tout d'abord il me paraît impératif de resituer Flash pour pouvoir bien comprendre comment fonctionne ActionScript.

Le Flash est un format de fichier d'extension swf (=schockwave Flash) pouvant contenir de la vidéo, des images vectorielles ou bitmaps, du son, et encore du code pour l'interaction avec l'utilisateur. Depuis sa version 4, les spécifications SWF ont été rendues publiques, ce qui a conduit à la création de programmes comme Swish, ou des modules pour Eclipse permettant de créer une animation flash simple ou gratuite (impossible d'avoir les deux à la fois :D ). Mais l'outil le plus puissant (et le plus cher ! ) pour créer du Flash reste Macromedia Flash, et surtout sa dernière version 8 que nous utiliserons au cours de ce tutoriel !

SWF est un format de fichier binaire. On définit un fichier binaire comme ce qui n'est pas un fichier texte ;) . L'intérêt du binaire par rapport au texte, c'est qu'il prend beaucoup moins de place, et c'est justement le grand avantage des animations Flash : leur compacité. Le problème, c'est qu'un fichier SWF une fois compilé ne peut plus être modifié (du moins pas directement) !
C'est pourquoi vous enregistrez votre projet Flash au format FLA, binaire lui aussi et dépendant de votre version de Macromedia Flash, qui contient la source de votre animation que vous pouvez modifier.

Le langage de script de Flash est l'ActionScript, un dérivé de l'ECMAscript (= nom standardisé du javascript). Les connaisseurs retrouveront donc certains éléments, mais je vous garantis que la non-connaissance du Javascript n'est en aucun cas un frein à l'apprentissage de l'ActionScript ! Par contre vous devriez être capable de faire du Javascript une fois que vous connaîtrez l'AS ;) .


Flash bien / pas bien Flash c'est pas bien

Flash c'est pas bien

Flash sous toutes ses coutures Flash c'est bien

Flash c'est pas bien

Les démons de Flash sont en gros :

Pour toutes ces raisons, importantes dès qu'on rentre dans le cadre d'une application web (= ensemble des pages web, scripts, bases de données, contenus...) professionnelle ou semi-professionnelle, il faut savoir utiliser la technologie Flash avec parcimonie !


Flash sous toutes ses coutures Flash c'est bien

Flash c'est bien

Flash c'est pas bien Deux architectures classiques

Flash c'est bien

Mais Flash permet tout de même :

Et puis surtout Flash, comme son nom l'indique, attire l'oeil !
Si votre site comporte un petit jeu en accord avec le thème général ou des petits éléments rigolos, ça ne pourra être que du bon :D .

Comme vous pouvez le constater, Flash est en fin de compte une technologie à double tranchant. Pour résumer on peut énoncer 2 lois :

Flash ne doit pas être utilisé à outrance dans un site de type communautaire et sujet à de nombreuses évolutions

Flash est très adapté aux sites vitrines ou comme contenu semi-dynamique (affichage de graphiques, musiques, vidéos ...)

Voilà, j'espère que je ne vous ai pas trop démoralisé pour un premier chapitre, mais il me paraissait indispensable de vous donner tous les éléments avant de commencer la programmation :) .


Flash c'est pas bien Deux architectures classiques

Deux architectures classiques

Flash c'est bien L'Architecture Flashocentriste

Nous avons pu voir les 2 lois à ne pas enfreindre pour réaliser un site Web potable utilisant Flash. Nous allons maintenant voir que chaque loi conduit à un type possible d'architecture.

Ce sont les deux principales architectures utilisées impliquant Flash.

L'Architecture Flashocentriste

Deux architectures classiques L'architecture Flashoponctuelle

L'Architecture Flashocentriste

Vous vous demandez sûrement ce qui se cache sous ce nom pompeux que je viens d'inventer pour le besoin :p . Et bien en fait, il s'agit de l'architecture dans laquelle Flash est au centre du site web.
Voici donc l'architecture à ne surtout pas reproduire si on souhaite créer un site communautaire selon la première loi :
Flash ne doit pas être utilisé à outrance dans un site de type communautaire et sujet à de nombreuses évolutions.
Et selon la seconde loi :
Flash est très adapté aux sites vitrines ou comme contenu semi-dynamique.
Cette architecture est très intéressante dans le cas d'un site galerie/vitrine/portfolio

Image utilisateur

Flash est au centre de l'application Web. L'utilisateur ne navigue pas à travers différentes pages web mais dans un seul objet Flash, qui affichera le contenu en fonction des requêtes de l'utilisateur. Pour aller chercher des données, flash à travers son langage de script, l'ActionScript que nous verrons plus loin dans ce tuto, peut charger des pages et en récolter le contenu. Flash est donc capable d'aller formuler une requête à un script côté serveur, de type PHP, et d'afficher les données formatées (que nous appellerons des informations, terminologiquement les informations ce sont les données une fois triées et formatées).


Deux architectures classiques L'architecture Flashoponctuelle

L'architecture Flashoponctuelle

L'Architecture Flashocentriste L'IDE de macromedia

L'architecture Flashoponctuelle

Une toute autre approche dans l'utilisation de Flash n'est plus son utilisation comme fournisseur de contenu, mais comme contenu lui même. Bien entendu, l'utilisation en sera complètement différente.
En fait, si on suit les deux lois, cette architecture est à privilégier dans le cas d'un site fournisseur de contenu riche, ou communautaire.

Image utilisateur

Cette fois les animations Flash sont considérées non pas comme l'unique moyen d'afficher les informations, mais plutôt comme des images. On peut voir sur le schéma qu'il existe alors 2 principaux moyens pour transmettre une donnée à l'animation qui devra l'afficher. Soit comme précédemment l'animation va chercher toute seule les données et les met en forme, soit dans le code xhtml de la page on complète le lien vers l'animation par la transmission de une ou plusieurs variables au format GET ( mavar1=salut&mavar2=comment+ca+va ).
Mais rien n'empêche de combiner les deux pour indiquer à l'animation son rôle dans la page et la laisser ensuite chercher elle même ce qu'il manque ! :D

Voilà j'espère que vous avez pu choisir quelle architecture était la plus adaptée pour votre site Web.

En résumé pour les feignants, voici la conclusion du second tutoriel :

Flash en tant que site web complet dans le cadre d'un site vitrine/galerie. Flash en tant que "images" incluses dans le site web.


L'Architecture Flashocentriste L'IDE de macromedia

L'IDE de macromedia

L'architecture Flashoponctuelle Se familiariser avec l'interface

IDE (= Integrated Development Environment) est une abréviation caractérisant les logiciels qui facilitent le développement d'applications sur ordinateur.
Dans ce chapitre, nous nous intéresserons au plus connu des IDEs pour le Flash : il s'agit d'Adobe Flash 8 (plus connu sous le nom de Macromedia Flash 8, mais Macromedia s'est fait racheter il y a quelques temps maintenant par Adobe).

Se familiariser avec l'interface

L'IDE de macromedia Le Scénario

Se familiariser avec l'interface

Pour que vous puissiez convenablement suivre ce tutoriel, on va essayer de se mettre d'accord sur la disposition des différentes fenêtres de Flash.

Utilisez le menu Fenêtre dans la barre des menus du haut, pour disposer les fenêtres de la façon suivante :

Image utilisateur

En plein milieu, le gros carré blanc, représente la Scène. C'est ce que verra l'utilisateur de votre animation, et c'est là que nous dessinerons et jouerons avec des formes.

On remarquera le panneau Actions tout en haut, dans lequel nous écrirons le code ActionScript.
Juste en dessous se trouve le Scénario (souvent appelé timeline en anglais). Il permet de naviguer dans le temps et dans les calques, nous reviendrons dessus plus loin.

Tout en bas, deux panneaux très importants :
- L'aide de Flash, qui est extrêmement claire et détaillée. Quand je vous présente une nouvelle fonction ou une nouvelle classe, n'hésitez pas à aller voir ce qu'en dit l'aide qui apportera un complément d'informations ainsi que des exemples pratiques.
- Les propriétés, qui permettent de modifier justement les "propriétés" des objets que l'on peut manipuler dans Flash.

A gauche vous trouvez comme d'habitude la classique barre d'outils, très similaire à celle de logiciels comme photoshop, par exemple.

Et enfin à droite encore d'autres fenêtres. Celle qui nous intéresse étant la Bibliothèque.

Ainsi se termine le petit tour d'horizon des différentes fenêtres de Flash.


L'IDE de macromedia Le Scénario

Le Scénario

Se familiariser avec l'interface Formes et Symboles

Le Scénario

Image utilisateur

Maintenant, mettez votre casquette, Spielberg n'a qu'à bien se tenir ! :p
Nous allons attaquer le scénario ! Le gros bloc plein de carrés noirs et blancs en haut.

Nous avons vu que la scène permettait de dessiner en deux dimensions : largeur et hauteur.

Le scénario rajoute deux dimensions :

La profondeur

La profondeur se gère à l'aide des Calques, à gauche dans le scénario. Vous pouvez en créer autant que vous le souhaitez, mais vous devrez toujours en garder un au minimum.

En fait, leur utilisation est toute simple : vous pouvez dessiner sur chacun, mais les formes(=les dessins) de chaque calque sont indépendantes entre elles. Elles ne peuvent donc pas "s'écraser" mutuellement. Essayez donc de dessiner un carré plein dans un calque et un disque dans un autre et superposez les deux formes. Elles se chevauchent sans problème et ne s'effacent pas comme elles l'auraient fait si elles avaient été sur un seul calque.

Vous remarquerez aussi que la forme qui est dans le calque du dessus, est aussi au dessus dans la scène. L'ordre dans lequel vous rangez vos calques permet donc de gérer la profondeur de vos formes les unes par rapport aux autres.

Si vous mettez un calque au dessus de tous les autres, alors les dessins placés sur ce calque seront au dessus de tous les autres dans la scène.

Le temps

Chaque petite case que vous voyez est une image, que nous appellerons quelques fois frame ("trame" en anglais) pour éviter les confusions. Le curseur rouge contrôlable à la souris permet de se déplacer dans le scénario : c'est à dire dans le temps.
Il existe plusieurs types de frames.

Image utilisateur

Dans l'image ci-dessus, vous pouvez voir en position 1 ce qu'on appelle une image-clé pleine. Je sais qu'elle est clée parce qu'elle a un petit point noir et qu'elle est pleine parce qu'elle est grisée.
Je suppose que vous avez compris que pleine signifie que dans cette frame on a dessiné quelque chose. Cette image-clé continue jusqu'en position 16, le carré blanc en indiquant la fin. Toutes les images entre le point noir et le carré blanc sont donc les mêmes.

Quel type d'image avons-nous en position 32 ?

Une image-clé vide ! Qui se termine en position 40.

Il faut bien comprendre que chaque image correspond à la scène à un instant donné.

On va prendre l'exemple d'un petit dessin-animé avec un bonhomme en fil de fer :
Mettez vous à la position 1 (avec une image-clé vide) et dessinez un personnage à tête jaune.
Créez une nouvelle image-clé en position 6 et changez la couleur de la tête du personnage pour du rouge. Ajoutez une image simple à la position 10 pour que le personnage rouge reste quelques instants et ne s'en aille pas tout de suite à cause de la lecture en boucle de l'animation.

Si vous exécutez l'animation (Contrôle->Tester l'animation), vous verrez que chaque personnage reste affiché le temps de 5 frames.

Si vous avez un peu de mal au début, vous pouvez vous aider du mode Aperçu du scénario. Il faut cliquer sur le petit bouton en haut à droite du scénario comme ci-dessous et sélectionner Aperçu. Vous devriez obtenir un scénario semblable à celui ci :

Image utilisateur

Ce mode est pratique pour débuter, mais pas vraiment pour travailler ;) .

J'en profite pour vous parler des ips (images par secondes) ou encore en anglais : fps (frames per seconds).
Sur la photo ci-dessus, on peut lire en bas : 12.0 ips.
Cela signifie, que durant 1 seconde, Flash lira 12 images. En clair une frame durera 1/12 = 0.083 seconde !

On estime la durée de la persistance rétinienne à 50ms, ce qui donne 40 images par secondes pour avoir une fluidité quasi-optimale.
Personnellement j'utilise souvent 24 ips dans mes animations, c'est d'ailleurs la fréquence utilisée à la télévision.
Pour modifier cette valeur dans votre animation, il vous suffit de double-cliquer dessus.


Se familiariser avec l'interface Formes et Symboles

Formes et Symboles

Le Scénario Où je le mets ce fichu code ?

Formes et Symboles

Tous les objets présents dans la scène sont :

Les formes

Je passerai rapidement dessus, car je pense que vous savez déjà dessiner ;) . La particularité des formes dans Flash, c'est qu'elles sont vectorielles.

Les images Bitmaps

Prenons un exemple : ouvrez paint, dessinez une droite, puis zoomez à fond dessus !

Image utilisateur

Vous remarquez que la droite est "crénelée", ou "pixelisée" : on peut distinguer chaque pixel aisément.
C'est ce qu'on appelle une image bitmap, qu'on peut traduire par "carte de bit" en français.
C'est vrai que ce n'est pas beaucoup plus parlant ;) . En fait, il faut se représenter l'image comme une grille, où chaque case possède des coordonnées. Ensuite dans votre image Bitmap, à chaque case, c'est à dire à chaque pixel, on associe une couleur.

Donc en clair, plus on zoom, plus c'est moche :p

Les images vectorielles
Image utilisateur

On peut bien sûr importer des images Bitmaps dans Flash, mais non seulement c'est moche quand on zoom dessus, mais en plus ça prend beaucoup de place, car il faut stocker la couleur de chaque pixel de l'image !
A la base, les animations Flash sont censées être très légères, car elles sont faites pour le Web, et tout le monde ne possède pas du 100Mbit/s comme connexion internet :D .
En Flash on dessine donc avec des vecteurs. Vous pouvez dessiner une droite dans Flash, et vous verrez que même en zoomant à fond, elle reste lisse !

Dans une image vectorielle on ne stocke donc pas la couleur de chaque pixel, mais seulement les coordonnées d'un vecteur et de son origine. Si vous regardez le schéma à côté, le vecteur est représenté par la flèche orange. Son origine correspond au point A.
On a juste besoin d'enregistrer la position du point A et les coordonnées (la longueur et l'orientation si vous préférez) du vecteur. Ensuite, le lecteur Flash interprétera les données et dessinera une droite partant de A et suivant le vecteur.

Le principe reste le même si vous dessinez des courbes ou des formes complexes, les vecteurs permettent alors d'indiquer en plus la "courbure" d'une droite.

A vous de jouer

Maintenant que vous savez ce qu'est une image vectorielle, je vais vous laisser jouer avec les pinceaux et stylos de la barre d'outils. Ils se manipulent presque comme ceux de Paint ou de Photoshop, mais vous devez garder à l'esprit qu'ils fonctionnent avec des vecteurs, vous ne pourrez donc pas faire de Pixel-Art dans Flash :D .

Les symboles

Tout ce qui n'est pas une forme est nécessairement un symbole. Première particularité des symboles : ils sont tous listés dans la bibliothèque.

Prenons un exemple. Dessinez un carré rouge sur la scène avec l'outil rectangle, sélectionnez votre joli carré et cliquez dans les menus sur Modification -> Convertir en Symbole.

Image utilisateur

Vous pouvez donner un nom à votre symbole. Ce nom permettra de le retrouver dans la bibliothèque, on l'appellera donc nom de bibliothèque.
La fenêtre vous demande aussi l'alignement de la forme sélectionnée dans le symbole. Soit vous centrez le symbole avec la forme, soit vous mettez la forme dans un des coins du symbole. A vous de choisir pour l'instant.

Image utilisateur

Comme vous pouvez le voir, il existe 3 types de symboles. Nous allons les détailler plus bas.
Pour l'instant votre nouveau symbole apparaît dans la bibliothèque.
Ce qu'il y a sur votre scène n'est donc plus une forme, mais un symbole, vous ne pouvez donc plus le modifier directement avec les outils.
En fait la forme est maintenant contenue dans le symbole. Pour la modifier, il faut rentrer dans le symbole. Vous pouvez pour cela double-cliquer soit sur l'occurrence du symbole dans la scène soit sur son nom dans la bibliothèque.

Maintenant, glissez-déplacez plusieurs fois le symbole de la bibliothèque vers la scène. Vous remarquez qu'on peut en mettre autant qu'on veut ! En fait, le symbole dans la bibliothèque est le "modèle" et tous ceux sur la scène sont des occurrences de ce modèle.
D'ailleurs si vous modifiez un seul de ces symboles, la modification se répercute sur tous les autres !

Il est possible de placer un symbole dans un autre, puis dans un autre, puis dans un autre etc..., à l'infini ! Par contre, n'essayez pas de placer un symbole dans lui même : ça ne fonctionnera pas !

Voyons maintenant les différences entre les différents symboles :

Le graphique

Le graphique est le symbole le plus simple ! Il permet de convertir une forme en symbole et de le réutiliser le nombre de fois voulu sur la scène. Un graphique n'apporte aucune interactivité et doit donc être utilisé décorativement seulement.
Les graphiques peuvent aussi être animés, il faudra alors préciser s'ils doivent l'être en boucle ou pas dans les propriétés de l'occurrence. (Vous sélectionnez l'occurrence sur la scène et vous pouvez modifier ses propriétés dans le panneau justement nommé Propriétés).

Le bouton

Les boutons permettent de rajouter un peu d'interactivité dans votre animation, en permettant à l'utilisateur de cliquer dessus. On peut ensuite lier le bouton à un Script.

Vous pouvez remarquer que le scénario d'un bouton est différent de celui de la scène ou d'un graphique. On ne peut y mettre que 4 images, qui correspondent aux 3 états du bouton plus sa zone de réactivité.

Image utilisateur

Le premier état Haut correspond à l'aspect du bouton quand on n'y touche pas. Dessus correspond à la forme du bouton quand on passe la souris dessus, et Abaissé c'est tout bêtement quand on clique dessus. Vous pouvez ainsi créer 3 images-clés pour chaque état et constater par vous même.

La dernière image : cliqué, ne sera jamais visible par l'utilisateur, elle permet de spécifier la zone cliquable. Ainsi, si vous n'avez que du texte dans votre bouton, pour cliquer dessus, il faudra viser une lettre précisément, pas à côté ! Alors que si vous rajoutez un rectangle qui encadre le texte dans l'image-clé Cliqué, alors il suffira de passer la souris sur ce rectangle (invisible dans l'animation) pour que le bouton s'active !

Les boutons ne peuvent pas être directement "animés" (avec une seule image, ça va être dur). Mais rien ne vous empêche de créer un graphique animé, et de le placer dans un des états du bouton :) .

Les Clips

Aussi appelés quelquefois MovieClip, il sont la crème des symboles ! (c'est pour ça que je les garde pour la fin).
Il est en tout point commun avec la scène (d'ailleurs, la scène est un clip par convention...) et c'est celui qu'on utilise le plus. Si on le souhaite, il peut se comporter comme un bouton, on peut aussi lui adjoindre du code, et en plus il peut être animé !

Bref, le symbole à tout faire. Pour l'instant je n'en dit pas plus, vous le découvrirez vous même plus tard.

Vous connaissez maintenant les bases du maniement de Flash. Maintenant, essayez de vous débrouiller tout seul et surtout : expérimentez ! Touchez à tous les boutons, et si vous ne comprenez pas l'utilité de l'un d'eux, allez voir dans l'aide de Flash !

Pareil pour le dessin, je ne vais pas vous montrer comment manier ces outils. C'est à vous de les essayer et de comprendre leur maniement.


Le Scénario Où je le mets ce fichu code ?

Où je le mets ce fichu code ?

Formes et Symboles Notion de "clip"

La principale difficulté du flasheur débutant est la position de son code dans l'application.

On va donc déjà aborder la notion de clip chère à Flash pour ensuite s'attarder sur la meilleure posture à adopter. :D

Notion de "clip"

Où je le mets ce fichu code ? Créer un clip

Notion de "clip"

On appelle la scène principale de votre application, le carré blanc au centre de l'écran quand vous créez un nouveau document.
Retenez que son nom est _root.

Il faut considérer les clips comme les "briques" d'une animation Flash. Les clips sont des petites animations à part entière, dans la mesure où ils ont leur propre scénario indépendant du scénario de la scène principale.

Il est possible de créer des clips sur la scène (Insertion->Nouveau symbole ou Modification->Convertir en symbole). Les clips présents sur scène sont des symboles auxquels on peut donner un nom d'occurrence.

Chaque clip peut lui même comprendre d'autres clips, qui peuvent eux aussi avoir des clips, qui peuvent... Enfin bref, vous m'avez compris. :D On peut imbriquer des clips les uns dans les autres !

Voyons maintenant comment se place le code par rapport aux clips, il est possible de placer de l'ActionScript :

Par convention, _root (la scène principale) est un clip, on peut donc lui assigner du code en sélectionnant une image clé dans le scénario et en codant dans l'onglet action (et c'est ce qu'on fera ;) ).

Et le cauchemar ne s'arrête pas là !
Car si on peut mettre du code sur une image clé d'un clip, ça veut dire qu'on peut mettre du code différent sur chaque image clé dans un même clip... :D

Bref que de réjouissances en perspective. :p


Où je le mets ce fichu code ? Créer un clip

Créer un clip

Notion de "clip" Les zones de texte

Créer un clip

Nous allons brièvement voir comment créer un clip.

Dans la barre des menus, cliquez sur "Nouveau Symbole" ou alors utilisez le raccourci Ctrl+F8 :

Image utilisateur

Une boîte de dialogue apparaît pour vous demander le nom que vous souhaitez donner au nouveau clip. Le nom qu'on donne là n'a pas d'influence en ActionScript, ce nom n'est là que pour "décorer", c'est à dire vous faciliter la vie pour retrouver ce clip qui va s'ajouter dans la bibliothèque. Au cours de ce big-tuto, on appellera ce nom nom de bibliothèque. La plupart du temps, ça sera à vous de choisir ce nom, dans la mesure où il n'a pas d'utilité en ActionScript.

Image utilisateur

Maintenant toujours dans cette même boîte de dialogue, si vous cliquez sur avancé, vous obtiendrez de nouvelles options, dont une qui nous intéressera plus particulièrement par la suite : le nom de liaison. Pour pouvoir donner un identifiant à notre clip, il va falloir cocher la case "Exporter pour ActionScript". Le nom que vous donnez là est très important, car il permettra de créer le clip sur la scène en utilisant ActionScript. Au long de ce tuto nous appellerons cet identifiant : nom de liaison.

Image utilisateur

Une fois le clip créé, il apparaît dans la bibliothèque où tous les clips sont classés par ordre alphabétique suivant leur nom de bibliothèque.

Image utilisateur

Vous pouvez ensuite glisser un clip sur la scène ce qui va créer une occurrence de ce clip.

Il peut y avoir un nombre virtuellement infini d'occurrences d'un même clip. Et chaque occurrence possède un nom d'occurrence que vous devez assigner dans les propriétés de l'occurrence. Pour cela vous devez sélectionner l'occurrence du clip et aller changer la zone Nom de l'occurrence dans l'onglet Propriétés.

Image utilisateur

Chaque occurrence de clip peut contenir d'autres occurrences d'autres clips (mais pas de lui même). On retrouve une structure arborescente. Le premier de tous les clips, c'est à dire celui qui contient tous les autres, est appelé dans ce tuto scène principale ou encore par son petit nom : _root

Pour rentrer dans un clip : vous double-cliquez dessus.
Pour sortir d'un clip : vous double-cliquez dans une zone vide.
Vous savez en permanence où vous êtes en regardant le scénario, par exemple dans l'image ci-dessous, je suis dans une occurrence de a_monclip qui est lui même dans une occurrence de c_monclip qui est lui-même dans la scène principale !

Image utilisateur

Notion de "clip" Les zones de texte

Les zones de texte

Créer un clip La solution pratique

Les zones de texte

Deux notions à comprendre pour la suite du cours. Nous avons vu que quand je vous demanderai de nommer un clip, je parlerai toujours de son nom d'occurrence. Une occurrence d'un clip possède un nom d'occurrence qui permet d'y accéder par ActionScript, il possède aussi comme nous l'avons vu un nom dans la bibliothèque qui n'a aucune utilité en ActionScript, ainsi qu'un nom de liaison que nous étudierons plus tard.

Il existe trois types de zone de texte :

Nom d'occurrence d'une zone de texte

Les zones de texte, à l'instar des clips, possèdent un nom d'occurrence, qu'on peut modifier exactement de la même façon (sauf pour les zones de texte statiques qui n'ont pas besoin d'identifiant).
Je le rappelle, vous pouvez le modifier ici :

Image utilisateur
Les zones de texte

Les champs de texte possèdent aussi une variable associée. Cette variable permet d'accéder au contenu textuel de la zone de texte.
On peut modifier cette variable comme cela :

Image utilisateur

Créer un clip La solution pratique

La solution pratique

Les zones de texte Ma première animation !

La solution pratique

Comme vous l'avez vu : c'est un peu le bordel. :euh:

Donc nous on va simplifier tout ça grâce à quelques conseils simples :

Jamais de code sur un clip tu ne mettras.
En effet, ça complexifie énormément la gestion du code, et la façon de coder sur un clip diffère de celle dans un clip.

Toujours dans la scène principale _root tu coderas.

Alors là, c'est quand même fort ! On peut mettre du code où on veut, et toi tu nous dis de ne le mettre que dans la scène principale !

Mais non, vous allez voir, ça va vous simplifier la vie ! Parce que comme cela, vous aurez tout votre code au même endroit !

Sur la scène principale, un calque "action" tu créeras, où tout ton code tu mettras.
Eh oui, non seulement on va mettre tout le code sur la scène principale, mais en plus on le mettra dans un calque à part. ActionScript se fiche royalement des calques, on pourrait donc mettre le code n'importe où : ça ne changerait rien. C'est juste une question de propreté de mettre toujours son code dans un endroit facilement accessible.

Ces 3 conseils de base sont très très importants, et j'essayerai (je dis bien "essayerai") de m'y tenir dans mes tutoriels. :D

Alors, il était facile ce QCM, non ? ;)


Les zones de texte Ma première animation !

Ma première animation !

La solution pratique Un nouveau document

Nous allons créer votre toute première animation avec un soupçon d'ActionScript. Je vous guiderai surtout pas à pas avec un maximum d'images pour que vous ne vous perdiez pas.
Ce premier tuto vous permettra donc de vous familiariser de façon concrète avec Macromedia Flash 8.

Un nouveau document

Ma première animation ! Dessine moi une balle

Un nouveau document

Commencez par ouvrir Flash. :)

Nouveau document

Si vous n'avez pas devant vous une nouvelle scène vierge, nous allons nous même créer une nouvelle animation.
Allez donc dans Fichier->Nouveau...
Cette boîte de dialogue devrait s'ouvrir :

Image utilisateur

Sélectionnez Document Flash dans la liste si ce n'est pas déjà fait, puis cliquez sur OK.

Propriétés du document

Normalement, en cliquant sur un espace vide de votre scène, vous devriez avoir un panneau Propriétés ressemblant à celui ci-dessous :

Image utilisateur

Il contient plusieurs informations importantes sur votre animation. Déjà vous trouvez sa taille. Ça tombe bien, j'aimerais bien la réduire un peu. Cliquez donc sur le bouton indiquant la taille de l'animation pour ouvrir la boîte de dialogue suivante :

Image utilisateur

Vous pouvez mettre un titre si vous le souhaitez, je me suis contenté de mettre 300pixels en largeur et 100pixels en hauteur pour mon animation.
Si vous le désirez vous pouvez aussi changer la couleur d'arrière-plan pour des tonalités plus exotiques. :p


Ma première animation ! Dessine moi une balle

Dessine moi une balle

Un nouveau document Interpolation de mouvement

Dessine moi une balle

Dessine moi une balle

Sélectionnez dans la barre d'outils à gauche l'outil ovale :

Image utilisateur
Image utilisateur

Ensuite avant de dessiner votre balle, choisissez les couleurs qui vous plaisent.

La couleur du haut, avec le petit crayon à côté, représente la couleur de la bordure de votre futur cercle. Dans notre exemple nous prendrons un bleu foncé.

La couleur du bas, avec le seau de peinture à côté, représente la couleur de remplissage, c'est à dire de l'intérieur de votre cercle. Prenez un bleu clair/turquoise. ;)

Maintenant, vous pouvez dessiner votre ovale sur la scène, si vous enfoncez la touche Majuscule pendant que vous tracez l'ovale, celui-là deviendra un cercle. :)

Voilà à quoi ressemble notre balle :

Image utilisateur
Lui mettre un numéro
Image utilisateur

On va dessiner un petit numéro sur notre balle. Il faut donc utiliser l'outil texte juste au dessus à droite de l'outil ovale qu'on vient d'utiliser. Il est représenté par un A majuscule.

Vous pouvez alors écrire un 1 sur la balle, comme ci-dessous :

Image utilisateur

Sélectionnez votre champ de texte, vous pouvez modifier ses propriétés en bas. Comme dans n'importe quel éditeur de texte, vous pouvez choisir une police, une taille, une couleur... Je pense que vous êtes en terrain connu !

Image utilisateur
Transformation !

Par la suite, je voudrais que la balle puisse bouger sur la scène pendant l'exécution de l'animation. Une forme ne peut pas bouger, on va donc devoir transformer notre balle en symbole !

Sélectionnez donc la forme plus la zone de texte, et cliquez sur Modification->Convertir en symbole (ou faites F8 tout simplement).

Image utilisateur

Ici, un simple graphique suffira pour ce que nous voulons faire ! Cliquez sur OK.


Un nouveau document Interpolation de mouvement

Interpolation de mouvement

Dessine moi une balle Un soupçon d'ActionScript

Interpolation de mouvement

Imaginez que vous ayez un clip dans une position à un moment puis dans une autre plus tard, et que vous vouliez créer une transition entre les deux états ? Oui, vous avez deviné, c'est l'interpolation de mouvement qui va s'occuper de ça !

Placez votre graphique "balle" tout à gauche de votre animation.
Votre scénario devrait ressembler à ça pour l'instant :

Image utilisateur

Il n'y a qu'une seule image clé, nous allons en créer une seconde en position 10.
Pour cela, cliquez sur la case 10 avec le bouton droit de la souris et cliquez sur Insérer une image-clé.
Voilà à quoi ressemblera votre scénario :

Image utilisateur

Pour l'image-clé 1, laissez votre balle à gauche de la scène. Pour l'image-clé 10 mettez la balle complètement à droite.

Maintenant, cliquez avec le bouton droit sur l'espace grisé entre les deux images-clés, et dans le menu sélectionnez Créer une interpolation de mouvement. L'espace devrait devenir bleu avec une flèche continue, comme ci-dessous :

Image utilisateur

Si vous appuyez sur Entrée, vous pourrez voir le déplacement de la balle de gauche à droite ! :D

Tester l'animation

Flash possède un outil complet pour tester votre animation. Pour compiler puis prévisualiser l'animation, vous pouvez soit cliquer sur Contrôle->Tester l'animation soit utiliser la combinaison de touches Ctrl+Entrée.

Image utilisateur

Comme vous pouvez le constater, la lecture de l'animation se fait en boucle. ;)


Dessine moi une balle Un soupçon d'ActionScript

Un soupçon d'ActionScript

Interpolation de mouvement Fil rouge

Un soupçon d'ActionScript

Il serait dommage de ne pas parler d'ActionScript dans ce chapitre d'introduction. Je vais donc montrer les deux, trois trucs à absolument connaître.

Arrêter la lecture

On va voir comment arrêter la lecture en boucle de l'animation. Placez-vous sur la dernière image-clé (en position 10).

Ouvrez le panneau Action en haut de votre IDE si vous l'avez placé comme moi.
C'est là que l'on va taper notre code :

Image utilisateur

Tapez ce code tout simple ;) :

stop();

Et lancez votre animation (Ctrl+Entrée).
Vous devriez voir que la balle arrête sa course une fois à droite.

C'est normal, stop() est une fonction d'ActionScript qui arrête la lecture de l'animation. Vous remarquez aussi que la ligne se termine par un ;

Pour l'instant, ne vous attardez pas sur les détails, ça sera le contenu des prochains chapitres. Essayez seulement de retenir comment on écrit du code et de comprendre son domaine d'action.

Un bouton pour la suite

Créez un second calque "Action" dans votre scénario et créez une seconde image-clé aussi en position 10.

Image utilisateur

Vous remarquez au passage la présence du petit a sur l'image-clé où nous avons écrit le code.

Supprimez le stop(); de là où il est, et mettez le sur l'image-clé 10 du calque "Action", car c'est là que nous mettrons tout le code.

Image utilisateur

Bien entendu, cette manipulation n'a strictement rien changé dans l'animation. Elle permet juste de centraliser le code pour une meilleure organisation.

Sélectionnez l'image-clé 10 du claque "Action" et dessinez sur la scène un petit carré.

Image utilisateur

Transformez ce carré en bouton :

Image utilisateur

Puis retournez sur la scène principale en double-cliquant sur un espace vide de la scène.
Et donnez à ce bouton un nom d'occurrence, en le sélectionnant puis en allant regarder dans ses propriétés. Appelez le : monbouton

Image utilisateur

Maintenant, allez dans l'onglet Action où vous aviez déjà écris stop();.
En dessous rajoutez ce code :

monbouton.onRelease = function() {
        play();
};

Vous ne pouvez pas encore comprendre tout le code. Sachez que monbouton.onRelease va exécuter le code entre les crochets { } quand on cliquera sur monbouton.
Entre les crochets on a la fonction play() que vous devez connaître, qui va reprendre la lecture de l'animation.

En gros, ce qui se passe si vous exécutez l'animation :
- lecture de l'animation
- arrêt à l'image 10 car rencontre du stop();
- apparition du bouton rouge car positionné sur une image-clé en position 10
- si on clique sur le bouton, exécution de play(), qui reprend la lecture. :D

Voilà, c'est tout pour ce court, mais très imagé, mini-tuto.
Ce que vous devez avoir absolument retenu, c'est comment écrire du code dans Flash !
Vous devriez aussi savoir, de façon très rapide et sans explication, créer un nouveau symbole : graphique, bouton ou clip. Je ne l'expliquerai plus. ;)


Interpolation de mouvement Fil rouge

Fil rouge

Un soupçon d'ActionScript Cahier des charges

Et voilà le début de notre Fil Rouge, à savoir l'élaboration de petites animations incluant les fonctionnalités les plus usuelles utilisant la technologie Flash. :D

Si vous avez bien suivi les deux précédents tutoriels, nous avons en gros deux possibilités :
- soit un site uniquement en Flash
- soit un site constitué de pages Web Xhtml classiques avec intégration d'objets Flash.

Et bien certains seront peut-être déçus, mais pour des raisons bassement pédagogiques, on va prendre la deuxième solution. :) Mais ne me huez pas ! :p
Car si un site tout en Flash empêche l'intégration d'éléments Xhtml (ou du moins presque, nous verrons cela par la suite), un site en Xhtml classique n'empêche pas l'intégration d'applications Flash complètes. Il vous suffira alors d'extrapoler un peu le cours pour faire votre site Flashocentriste. :D

Cahier des charges

Fil rouge Architecture globale

Cahier des charges

Eh oui, comme dans tout projet qui se respecte, la première chose à faire est la laborieuse et lassante, mais néanmoins inévitable, rédaction du célèbre cahier des charges. ;)

Définition du cahier des charges (pour nos Zéros analphabètes comme leurs pieds :D ) :
Document qui décrit en terme de fonctions, d'aptitudes de qualité ce que l'on attend d'un produit.

C'est plus clair pour tout le monde ? Ça reste tout de même très théorique.

On va donc dans un premier temps rédiger tout ce que nous allons demander à nos petites animations :

L'ordre dans lequel on va le faire est l'ordre dans lequel je l'ai écrit, et vous allez voir que vous allez vite progresser. :)


Fil rouge Architecture globale

Architecture globale

Cahier des charges Variables et fonction trace()

Architecture globale

On a le cahier des charges, alors maintenant il va falloir se demander comment on va agencer tout ça d'un point de vue liaisons entre interface (=côté utilisateur) et serveur.

Le Logo

Le logo ne nécessite aucune donnée externe, ce sera donc une bête animation flash sans liaison.
Il faudra penser à l'intégrer en haut de chaque page grâce à la fonction include() de PHP.

Un jeu de voiture basique

Ça sera un tout petit jeu vraiment basique, mais il permettra une première synthèse de vos connaissances en les utilisant toutes dans un projet comportant quelques lignes de codes. :D

Un lecteur Mp3

Dans le cas d'une playlist de dizaines de Mp3, Flash va devoir se débrouiller lui même pour aller chercher d'abord la liste des musiques, puis ensuite les charger bien entendu pour pouvoir les écouter. :D
Il faudra donc prévoir une page PHP qui sera appelée par l'application Flash et qui retournera une Playlist.

Une galerie d'images

Bon, à priori pas de grandes différences entre un lecteur mp3 et une galerie d'images... Sauf que les musiques du lecteur sont présentées sous la forme d'une liste textuelle, alors que dans une galerie il faudra afficher des miniatures.
Et pour la déconnade, on fera vite fait un script d'upload des images conjuguant PHP côté serveur et la toute nouvelle fonction d'upload de Flash côté client (aïe va falloir que je me documente, je connais pas encore :p ).

Le Mini-jeu

Vous l'attendiez : vous l'avez !
Le mini jeu permettra une synthèse de vos connaissances. Il nous faudra donc une bonne idée de jeu sympathique et un système de high-score (pour toute idée de jeu sympa et pas trop dure à réaliser, envoyez moi un MP ou laissez un commentaire).

Voilà, on a donc une idée des liaisons que chaque application Flash nécessitera. :)

Schéma fonctionnel des liaisons :

Image utilisateur

Dans ce chapitre, nous avons donc délimité les champs d'application de Flash, et nous avons vu d'un point de vue très théorique ce qu'allait être notre travail tout au long de notre Fil Rouge


Cahier des charges Variables et fonction trace()

Variables et fonction trace()

Architecture globale Structure et commentaires

Nous allons regarder sur des exemples simples comment fonctionnent les variables en AS 3.0

Structure et commentaires

Variables et fonction trace() Fonction trace()

Structure et commentaires

Tout langage informatique repose sur la gestion des variables, AS ne déroge pas à la règle.
Les variables sont là pour qu'on leur affecte des valeurs, numériques, textuelles, graphiques, ...
Il faut aussi savoir que chaque instruction en AS se termine par un ; ce qui permet de préciser à l'interpréteur AS que la ligne est finie, et qu'une nouvelle instruction commence.

En AS 3.0, il est obligatoire de déclarer les variables, ce qui était très optionnel à l'époque de l'AS 1.0. Il est aussi nécessaire de faire attention aux majuscules et minuscules, car l'AS est sensible à la casse. Ainsi si vous écrivez mavar et Mavar, Flash comprendra deux instructions différentes.
Voilà comment attribuer la valeur 5 à la variable mavar

var mavar = 5;

Vous noterez que c'est l'opérateur = qui permet d'attribuer une valeur à une variable. On l'appelle opérateur d'assignement : il assigne la valeur de droite à la variable de gauche. :)

Vous constatez aussi qu'il est tout à fait autorisé en AS d'ajouter des espaces entre les différentes expressions, ainsi tous ces codes reviennent au même :

var mavar = 5;
var mavar=5;
var mavar= 5 ;

Autre point important, il est possible de commenter votre code, et c'est même recommandé.
Deux techniques possibles, utiliser /* mon commentaire */ sur plusieurs lignes ou // mon commentaire sur une seule ligne.

var mavar = 5; // On assigne 5 à mavar
/* Je blablate sur
plusieurs lignes */

Variables et fonction trace() Fonction trace()

Fonction trace()

Structure et commentaires Les numériques : int et Number

Fonction trace()

Avant de faire quoique ce soit il faut que je vous présente la fonction trace(). C'est, à mon sens, la fonction la plus utile de AS ;)
Grâce à elle vous pourrez aisément construire, vérifier et déboguer vos scripts. trace() va nous permettre de savoir à tout moment ce qu'il y a dans nos variables !

Pour commencer créez un nouveau fichier Flash et tapez dans l'onglet action :

trace("Hello World !");

Si vous exécutez cette animation (Ctrl+F11), vous constaterez que Flash ouvre une fenêtre nommée Sortie. C'est dans cette fenêtre que s'affichera le contenu de tous les arguments que vous passerez à la fonction trace.

Abordons dans la suite les trois types de variables les plus simples !


Structure et commentaires Les numériques : int et Number

Les numériques : int et Number

Fonction trace() Les chaines de caractères : String

Les numériques : int et Number

Type int

int est la contraction du mot anglais integer se traduisant par entier en français. Pour les moins aguerris d'entre vous en mathématiques, les nombres entiers sont les nombres de la forme ... -4, -3, -2, -1, 0, 1, 2, 3, 4 ...

En mathématiques, il y en a bien entendu une infinité, mais nos pauvres ordinateurs auront du mal pour aller si loin ;) Le type int peut en fait stocker tous les nombres entre - 2 147 483 648 (-231) et 2 147 483 647. En clair on a de la marge :D

Voici trois possibilités pour déclarer notre variable de type int et pour lui donner une valeur (bien entendu ne mettez pas les trois lignes d'un coup dans Flash, mais l'une après l'autre) :

var monEntier:int = new int(123); // La totale
var monEntier:int = 123;          // Plus court
var monEntier     = 123;          // Trop court

Comment est-il possible que la troisième ligne fonctionne alors qu'on ne précise pas le type de la variable ? En fait, Flash va détecter tout seul que 123 est un nombre et va lui même rajouter le :int. Malheureusement, dans certain cas, il risquerait de choisir un type qui ne convient pas : bref vous l'avez compris, on va préférez la solution intermédiaire :)

var monEntier:int = 666;
trace(monEntier);                 // Affiche 666 dans la fenêtre Sortie

Voyons ce qu'on peut faire avec ces variables...
Commençons avec les opérations simples :

var monEntier:int = 10;      //On déclare monEntieret on lui assigne 10 comme valeur
monEntier = monEntier + 5;    // on rajoute 5 à la variable
trace(monEntier)             // ce qui donne ... 15 !

monEntier = 10;              // Une fois déclarée, surtout ne pas remettre :int !
monEntier = monEntier - 5;   // En toute logique ...
trace(monEntier)             // ... ca donne 5

monEntier = 10;               // Remettons encore à 10 la variable
monEntier = monEntier * 5 ;   // on multiplie par 5 la variable
trace(monEntier)              // affiche 50

monEntier = 10;               // Remettons encore à 10 la variable
monEntier = monEntier / 2 ;   // On divise par 2
trace(monEntier)              // affiche 5

monEntier = monEntier / 2 ;   // On divise encore par 2
trace(monEntier)              // affiche ... 2 !!!

Mais, mais, mais ... :o Comment 5/2 peut-il faire 2 ?
Souvenez-vous, monEntier est une variable qui est typée int. Le résultat de la division doit donc être converti en entier avant d'être stocké dans monEntier. Pour cette conversion, Flash fait simple : il prend les chiffres qui sont avant la virgule !

var monEntier:int = 1.6;
trace(monEntier);            // Renvoie 1
monEntier = -1.6;
trace(monEntier);            // Renvoie -1

Il existe d'autres opérateurs très intéressants, il permettent d'éviter de répéter monEntier dans le membre de droite.
Prenons un exemple :

var monEntier:int= 10;
monEntier += 5;           // Ca revient au même que monEntier = monEntier + 5;
monEntier *= 5;           // Même chose que monEntier = monEntier * 5;

Ça va quand même plus vite, non ? :D
Bien entendu vous trouverez aussi les opérateurs -= et /=, opérateurs d'affectation de soustraction et d'affectation de division.

Type Number

Nous avons vu comment enregistrer des entiers (naturels et relatifs), malheureusement beaucoup de quantités s'expriment avec des chiffres après la virgule dont les nombres décimaux (ceux avec un nombre fini de chiffres après la virgule). Le type correspondant à ces derniers est Number.

Bien entendu, tous les opérateurs vus jusque là s'appliquent encore :

var monDecimal:Number = 5;
monDecimal /= 2;             // On divise 5 par 2
trace(monDecimal);           // et miracle, on trouve 2.5 !

Fonction trace() Les chaines de caractères : String

Les chaines de caractères : String

Les numériques : int et Number Les tableaux : Vector

Les chaines de caractères : String

Le type String permet d'enregistrer des chaînes de caractères, c'est-à-dire du texte.

Déclarons un String, comme toujours dans l'ordre du plus académique au plus fainéant :D

var maChaine:String = new String("Salut la compagnie"); // Académique
var maChaine:String = "Salut la compagnie";             // Pratique
var maChaine        = "Salut la compagnie";             // indécent ;)

Pour les nombres, nous avions des opérateurs mathématiques permettant d'effectuer des calculs.
Ici pas de maths (snifff :( ), mais un opérateur de concaténation. La concaténation permet de "coller" deux chaînes de caractères, en Flash on utilise le +.

Exemple :

var maChaine:String = "";              // On ne met rien pour l'instant
maChaine = "Salut" + " la compagnie";  // On concatène
trace(maChaine);                       // Ce qui donne "Salut la compagnie"

On aurait aussi pu donner la valeur "Salut" à machaine puis rajouter le reste après :

var maChaine:String = "Salut";
maChaine += " la compagnie";

Supposons maintenant que vous vouliez mettre dans votre texte le caractère ". Ça risque d'être embêtant puisqu'on l'utilise déjà comme caractère délimitant la chaîne...
Encore une fois, on a plusieurs solutions.

On peut utiliser le caractère d'échappement\, en le plaçant devant le guillemet à échapper. On aurait donc :

var maChaine:String = "Il m'a dit \"Bonjour !\" ";

Ou alors on peut utiliser l'apostrophe pour délimiter le texte, dans ce cas là il faudra échapper les apostrophes ;) :

var maChaine:String = 'Il m\'a dit "Bonjour !" ';

Une petite question pour vous, que se passe-t-il si j'exécute le code suivant ?

var maChaine:String = "Vive le pastis ";
var monEntier:int = 51;
maChaine = maChaine + monEntier;
trace(maChaine);

Comme Flash est malin, il va convertir automatiquement le type monEntier en chaine de caractères puis fait la concaténation. Cela-dit, il aurait été possible de faire cette opération explicitement grâce à la méthode toString() qui permet de convertir un nombre en texte :

var maChaine:String = "Vive le pastis ";
var monEntier:int = 51;
maChaine = maChaine + monEntier.toString();
trace(maChaine);

Ne vous inquiétez pas si vous ne comprenez pas toute la syntaxe, nous y reviendrons :)


Les numériques : int et Number Les tableaux : Vector

Les tableaux : Vector

Les chaines de caractères : String MovieClip

Les tableaux : Vector

Créer un objet Vector contenant des entier :

var monVecteur:Vector.<int> = new Vector.<int>(); // Déclaration et instanciation de notre vecteur contenant des entiers

Comme vous pouvez le constater, la création de l'objet utilise une syntaxe particulière qui permet de préciser le type des données qui seront contenues dans le vecteur.

La construction de l'instance peut en fait être plus détaillée, puisqu'il est possible de préciser si le vecteur doit être fixé (c'est à dire si le nombre total d'éléments qu'il peut contenir doit être limité) :

var monVecteur:Vector.<int> = new Vector.<int>(10, true); // On créé un vecteur étant limité à 10 entiers

Comment affecter des valeurs aux cellules du tableau ?

Dans tous les cas, la syntaxe avec les crochets [] fonctionne :

var monVecteur:Vector.<int> = new Vector.<int>(3, true);
monVecteur[0] = 5;
monVecteur[1] = 10;
monVecteur[2] = 15;
trace(monVecteur);

Dans le cas des vecteurs à taille variable, il est possible d'utiliser la méthode push() qui rajoute un élément à la fin :

var monVecteur:Vector.<int> = new Vector.<int>();
monVecteur.push(5);
monVecteur.push(10);
monVecteur.push(15);
trace(monVecteur);

Comment connaître le nombre d'entrées dans un tableau ?

Il vous faut utiliser la propriété length

var monVecteur:Vector.<int> = new Vector.<int>();
monVecteur[0] = 5;
monVecteur[1] = 10;
monVecteur[2] = 15;
trace(monVecteur.length); // Affiche 3

On remarquera que dans le cas d'un tableau dont la taille est fixée, la longueur est constante. Même si des cellules sont vides, elles existent quand même !

var monVecteur:Vector.<int> = new Vector.<int>(3, true);
trace(monVecteur.length); // Affiche 3 quand même !

Comme vous avez pu le constater dans cette partie, l'AS 3.0 diffère assez peu pour des exemples aussi simples des langages modernes comme Java ou C#.
Je ne peux donc que vous conseiller de souvent visiter l'aide, qui vous permettra de vous en sortir souvent sans aller demander du secours sur les forums. :p


Les chaines de caractères : String MovieClip

MovieClip

Les tableaux : Vector _root , this et _parent

Les MovieClip étaient les structures de bases de Flash à l'époque de l'AS 1.0 ainsi qu'en 2.0. Maintenant il pourrait presque s'agir d'une classe comme une autre, cependant en connaissant quelques-unes de ses propriétés nous allons pouvoir très rapidement nous amuser avec Flash :D

_root , this et _parent

MovieClip Positionnement

_root , this et _parent

_root

Nous avons déjà vu dans le premier chapitre que le clip parent à tous les autres clips, qu'on appelle la scène principale, se nommait _root.

Maintenant que nous avons quelques notions d'ActionScript, intéressons-nous à la signification de ce _root.

var monnombre:Number = 10;
trace(monnombre);
trace(_root.monnombre);

La fenêtre de sortie va vous afficher deux fois 10.
Cela signifie que sur la scène principale, _root.monnombre = monnombre
C'est logique, puisque vu qu'on est dans _root, on a pas besoin de le repréciser !

Le . entre _root et monnombre, permet de dire au compilateur que l'un est inclus dans l'autre. En effet la variable appartient à l'objet _root (en Mathématiques on parlerait d'ensemble).

Maintenant, on va faire une chose ignoble, mais nécessaire à l'apprentissage : on va mettre du code dans un clip ! :p

Créez une nouveau clip, mettez-le sur la scène principale et nommez le monclip (oui, je sais, l'originalité n'est pas mon fort :-° et au passage, je précise que je parle de son nom d'occurrence).

Allez dans une image clé de ce clip (double-cliquez sur le clip), et tapez dans l'onglet action :

trace(" monnombre => "+monnombre);
trace(" _root.monnombre => "+_root.monnombre);

Et laissez seulement ça sur la scène principale :

var monnombre:Number = 10;

Voyons ce que nous affiche la fenêtre de sortie :

monnombre => undefined

 _root.monnombre => 10

Et là on constate en effet qu'essayer d'afficher la variable qui est déclarée dans _root, mais pas dans le clip, ne fonctionne pas si on ne précise pas que cette variable se trouve sur _root. Le undefined signifie que la variable n'est pas définie, car elle n'existe pas dans le clip monclip.

En clair, la variable monnombre existe dans _root.
Mais elle n'existe pas dans _root.monclip.
Pour y accéder à partir de _root.monclip, il faut préciser où elle se trouve : _root.monnombre.

this

Voilà une propriété que nous allons TOUT LE TEMPS utiliser.

this permet de préciser au compilateur qu'on travaille sur l'objet qui contient le script.

Bah, ça sert à rien, il suffit de rien mettre ! o_O

Souvent, en effet, this est optionnel. Mais vous verrez par la suite, quand on abordera les évènements, que cette propriété se révèle fort utile, pour préciser au compilateur que malgré que le code soit dans _root, il s'applique à un autre clip.

Il est en effet possible d'écrire du code dans l'onglet action de _root qui se rapporte pourtant à un autre clip. Dans ce cas, si on ne met pas this, la variable appartiendra à _root, et si on précise this, la variable appartiendra au clip dont on parle (pour l'instant c'est normal que ça vous paraisse abstrait, nous prendrons des exemples par la suite).

_parent

_parent, renvoie au clip parent.

Et si on reprend l'exemple précédent, en remplaçant le _root.monnombre par this._parent.monnombre, que se passera-t-il ?

Et bien ça fonctionnera ! :D En effet le clip parent de _root.monclip c'est la scène principale (_root).

Vous vous demandez peut-être si _root._parent.monnombre fonctionnerait ? La réponse est : non. En effet, il n'existe pas de niveau "en dessous" de root. _root._parent renvoie donc à un objet qui n'existe pas !

_parent devient donc intéressant en cas d'imbrication d'un clip, dans un clip, dans un clip ...
Et c'est pour éviter d'utiliser cette propriété en spaghetti qu'on met tout le code au même endroit. ;) En effet, si vous commencez à mettre du code un peu partout dans des clips, vous devrez utiliser _parent plus souvent, et votre code deviendra rapidement incompréhensible, aussi mal "ordonné" qu'un plat de spaghettis. :p


MovieClip Positionnement

Positionnement

_root , this et _parent Taille absolue

Positionnement

Maintenant que nous savons comment accéder aux clips, nous allons apprendre à manipuler leurs propriétés, commençons par les propriétés _x et _y des clips, qui permettent de positionner un clip au pixel près sur la scène.

Positionnement d'un clip sur _root

Dans un nouveau document créez un nouveau clip que vous nommerez dans l'onglet propriétés monclip (ce qui nous intéresse ici c'est le nom d'occurrence du clip, pas son nom dans la bibliothèque qui lui ne sert à rien en ActionScript. Mais ça vous le savez déjà ;) allez voir ici pour un rapide rappel).
Tapez dans l'onglet action (si je ne donne pas d'indication c'est que le code doit être placé dans la scène principale) :

monclip._x=0;
monclip._y=0;

En exécutant l'animation vous verrez que le clip se placera en haut à gauche de l'écran.

Pour ceux qui n'auraient pas compris, la syntaxe à point permet de séparer le nom du clip de sa propriété, ici on utilise deux propriétés du clip. Sa position sur l'axe horizontal (axe des abscisse) est la propriété _x et _y est sa position sur l'axe vertical (axe des ordonnées).

Image utilisateur

Voilà un petit schéma simple expliquant comment Flash et la plupart des langages que je connaisse conçoivent le placement d'un clip dans un plan, c'est-à-dire sur l'écran.

Vous pouvez ainsi donner n'importe quelle position au clip que vous souhaitez en utilisant ce système.

Positionnement d'un clip dans un autre

Complexifions un petit peu la chose, entrez dans le clip monclip et créez à l'intérieur un second clip que vous nommerez clipdansleclip.

Maintenant retournons dans le code et voyons comment faire pour bouger ce clip à l'intérieur de l'autre.

monclip._y = 50;
monclip._x = 50;
monclip.clipdansleclip._y = 25;
monclip.clipdansleclip._x = 50;
Image utilisateur

A votre avis, où va être placé le clip clipdansleclip ?
Eh bien, il sera à 50 pixels à droite du point d'ancrage de monclip.
Et monclip lui même sera à 50 pixels à droite du point d'ancrage de la scène principale.

Donc par rapport au point d'ancrage de la scène principale, le clip clipdansleclip sera à 50+50=100 pixels à droite et à 75 pixels vers le bas.


_root , this et _parent Taille absolue

Taille absolue

Positionnement Agrandissement

Taille absolue

Les clips possèdent aussi les propriétés _width et _height (respectivement largeur et hauteur en français).
Ces propriétés permettent d'indiquer la taille des clips en pixels. Le clip sera alors redimensionné par le lecteur Flash.
N'oubliez pas que _width représente la largeur sur l'axe horizontal. Et donc que la hauteur _height correspond à l'axe horizontal.

Reprenez l'exemple précédent, et rajoutez :

monclip._width = 300; // Largeur : 300px
monclip._height = 100; // Hauteur : 100px

Comme vous le constatez, la figure devient très allongée.
Si on voulait rendre le clip carré, il suffirait de prendre la même largeur et hauteur :

monclip._width = 100; // Largeur : 100px
monclip._height = 100; // Hauteur : 100px

Voilà, le clip est carré.

Imaginons maintenant que nous voulions agrandir le clip de façon à garder ses proportions, c'est-à-dire conserver le rapport largeur/hauteur d'origine.

Il faudrait alors suivre cette bête règle de trois :

_width/*de départ*/ / _height/*de départ*/ = _width/*d'arrivée*/ / _height/*d'arrivée*/

Il s'agit là d'une équation qui n'a rien de mathématique, arrangeons-la pour que Flash la comprenne. Prenons l'exemple d'une boîte de largeur 100px et de hauteur 50px. Nous voulons que cette boîte deviennent large de 200px, en conservant les proportions. On cherche donc la hauteur (x sur le schéma) qu'on va devoir lui donner pour conserver ce rapport.

Image utilisateur

Bon là, c'est facile, on voit qu'il suffit de multiplier par deux, mais dans des cas plus complexes, voilà le code qui permettrait d'assigner la bonne hauteur à monclip :

monclip._height = 200*monclip._height/monclip._width;

Vous avez donc brièvement vu comment assigner une taille absolue à un clip, et même comment conserver ses proportions lors d'un agrandissement.


Positionnement Agrandissement

Agrandissement

Taille absolue Rotation

Agrandissement

Pourquoi s'embêter avec des calculs pour conserver la proportion d'une image ou d'un clip ? Utilisons les propriétés _xscale et _yscale.

Ces deux propriétés permettent d'agrandir en pourcentage un clip sur l'axe horizontal _xscale ou vertical _yscale.

La valeur d'origine pour un clip est _xscale = _yscale = 100 puisque l'agrandissement se fait en pourcentage.

Reprenez l'exemple précédent, supprimez tout le code et tapez :

trace("Agrandissement horizontal avant changement : "+monclip._xscale); // Affiche 100
monclip._xscale = 200; // on agrandit 2 fois en longueur le clip (100*2=200)
trace("Agrandissement horizontal après changement : "+monclip._xscale); // Affiche 200

Intéressant, n'est-ce pas ? :D
Maintenant, réduisons ce clip en conservant ses proportions, c'est-à-dire que son agrandissement horizontal et vertical doivent être les mêmes.

monclip._xscale = 50; // on réduit la taille de moitié (100 / 2 = 50)
monclip._yscale = monclip._xscale; // on conserve les proportions

On peut encore plus compresser ce code comme ça :

monclip._xscale = monclip._yscale = 50;

Taille absolue Rotation

Rotation

Agrandissement Transparence

Rotation

Avant dernière propriété que nous allons étudier : _rotation

_rotation s'exprime en degrés, et ses valeurs vont de -180 à 180 degrés. Si vous donnez une valeur supérieure, Flash fera la transformation qu'il faut pour que ça tombe juste.
En effet n'oubliez pas qu'une rotation de 360° équivaut à une rotation de 0 degré, puisque 360° c'est un tour complet.

Reprenons encore et toujours l'exemple précédent, mais je vous conseille de mettre une photo dans le clip, pour mieux voir l'effet de _rotation en faisant Ficher->Importer->Importer dans la scène quand vous êtes en train d'éditer le clip.
Supprimez tout le code précédent, et essayez les différents codes suivants ligne après ligne (ne mettez pas tout d'un coup, sinon, seule la dernière ligne aura un effet ;) ) :

monclip._rotation = 180 ; // On le retourne complétement
monclip._rotation = 90 ; // La tête en bas
monclip._rotation = -90 ; // La tête en haut
monclip._rotation = 45 ; // En biais

C'est bien beau tout ça, mais on va passer à plus complexe et surtout à plus utile ! On va demander à notre clip d'effectuer une rotation dans la direction d'un autre clip :D

Pour ce faire, créez une nouvelle scène, un clip monclip et un clip cible, mettez ce que vous voulez dedans.

Image utilisateur

Tapez ce code :

_root.monclip._rotation = Math.atan2(_root.cible._y-_root.monclip._y, _root.cible._x-_root.monclip._x)/(Math.PI/180);

Et si vous exécutez l'animation, vous devriez obtenir cela :

Image utilisateur

Bon expliquons cette petite formule. :p
_root.cible._y-_root.monclip._y => renvoie la distance verticale entre les deux clips
_root.cible._x-_root.monclip._x => renvoie la distance horizontale entre les deux clips
La fonction Math.atan2 inclue dans Flash, va renvoyer l'angle que le clip doit adopter en Radians. Or on cherche cet angle en degrés.

La classe Math de Flash contient non seulement cette magnifique fonction atan2, mais aussi la valeur approchée de pi : Math.PI

Surtout gardez cette formule dans un coin, elle nous servira par la suite. :D
Si vous ne l'avez pas compris, ce n'est pas bien grave. Mais suivez bien vos cours de Maths qui parlent de trigonométrie et vous devriez en saisir le fonctionnement !


Agrandissement Transparence

Transparence

Rotation Visibilité

Transparence

Dernière des propriétés importantes que nous allons voir dans ce chapitre : _alpha

Flash est souvent utilisé pour ses effets visuels dynamiques. Or en voici un bien pratique : la transparence !

_alpha détermine la transparence d'un clip :

Allez faites donc quelques tests vous même. ;) Je suis sûr que vous avez compris le truc.


Rotation Visibilité

Visibilité

Transparence Les Conditions

Visibilité

Une propriété très intéressante : _visible
Vous pouvez lui assigner la valeur true (le clip est visible) ou false (le clip est invisible).

Par exemple :

monclip._visible = false; //Le clip va devenir invisible

Quelle est alors la différence entre _visible=false et _alpha=0 ?

En fait non seulement _visible peut rendre un clip invisible comme le ferait _alpha, mais en plus il désactive le clip. Imaginez un bouton sur la scène principale, si vous utilisiez _alpha=0, alors le clip serait invisible mais vous pourriez encore cliquer dessus. Mais si vous utilisez _visible=false alors le clip deviendra invisible et en plus il deviendra impossible de cliquer dessus.


Transparence Les Conditions

Les Conditions

Visibilité Un nouveau type : Boolean

Les conditions sont à la base de tout langage de programmation. En effet, la seule chose qu'on peut demander à une machine c'est de faire ça si telle ou telle condition et remplie.
On va donc voir dans ce chapitre comment "tester" une variable, et exécuter une action selon le résultat du test ! :D

Un nouveau type : Boolean

Les Conditions Opérateurs de test

Un nouveau type : Boolean

Vous m'excuserez de ne pas suivre un ordre "intuitif", mais avant de commencer à utiliser les conditions, je veux que vous les compreniez. Et pour cela nous allons faire appel à un nouveau type de variable : les variables booléennes, ou Boolean en anglais.

Vous avez dit booléen ?

C'est le type de variable le plus simple. Il n'a que deux valeurs possibles : true ou false (vrai ou faux en français).

Déclarons une variable booléenne, comme d'habitude, 3 techniques possibles :

var mabool:Boolean = new Boolean(true); //Méthode complète
var mabool:Boolean = false; //Méthode plus simple, mais correcte
mabool = true; //Méthode courte, moins stricte, car on ne donne pas le type de variable

Maintenant, imaginons que nous ayons deux variables numériques, et que nous voulions savoir si elles ont la même valeur ou non.

var mabool:Boolean = new Boolean(); // On définit une variable booléenne. En l'absence de valeur, elle prend d'elle même la valeur false
var nombre_a:Number = 100;
var nombre_b:Number = 50;
mabool = (nombre_a==nombre_b); // On assigne à mabool la valeur résultante du test
trace(mabool);

Et vous allez voir apparaître dans la fenêtre de sortie : false. Ce qui est tout à fait logique puisque 100 est différent de 50. :D
Vous avez pu constater qu'entre nombre_a et nombre_b on a intercalé l'opérateur ==. Cet opérateur permet de tester l'égalité entre deux variables.

Maintenant, refaisons le test de façon un peu plus rapide, sans passer par les variables :

var mabool:Boolean = new Boolean(); // On définit une variable booléenne. En l'absence de valeur, elle prend d'elle même la valeur false
mabool = (100==100); // On assigne à mabool la valeur résultante du test
trace(mabool);

Et là, miracle, la fenêtre sortie nous gratifie d'un beau true.

Conversion vers Number ou String

Chose utile à savoir, mais qui ne devrait pas nous gêner puisqu'on code proprement en indiquant le type de chaque variable, pour Flash true et 1 et false et 0 sont la même chose.

Ainsi, testez donc cette ligne :

var mabool:Boolean = true;
trace(mabool+mabool); // Horreur, on additionne deux booléens

Mais Flash ne se laisse pas démonter, et nous affiche 2. o_O
En effet Flash va adapter la variable selon les besoins. Là il s'agit d'un calcul numérique, il va donc modifier le true en 1. Ce qui explique le 2.

Et pour transformer le true en "true" et le false en "false" ?

Il faut utiliser la méthode toString() qui va transformer votre variable en chaîne de caractères.

Voilà ce qui ne marchera pas :

var mabool:Boolean = true;
var monstring:String = "valeur : ";
monstring+=mabool; // on concatène un String avec un Boolean -> aïe caramba
trace(monstring);

Un beau message d'erreur d'incompatibilité des types s'affichera à vous.

Voilà ce qui fonctionnera :

var mabool:Boolean = true;
var monstring:String = "valeur : ";
monstring+=mabool.toString(); // on concatène deux String -> no problemo
trace(monstring);

Les Conditions Opérateurs de test

Opérateurs de test

Un nouveau type : Boolean Opérations sur les booléens

Opérateurs de test

Nous avons donc vu le célébrissime == qui permet de tester l'égalité. Passons à du plus lourd :

1. "N'est pas égal à"

Voilà l'exact opposé à ==, je parle bien sûr de !=.
Cet opérateur permet de vérifier que les valeurs de deux variables sont bien différentes.

var mabool_a:Boolean = true;
var mabool_b:Boolean = false;
trace( mabool_a!=mabool_b);

Ce qui renvoie true, car true est différent de false.

On aurait pu aussi essayer cet opérateur avec des valeurs numériques ou des chaînes de caractères.

2. "Plus petit que" - "Plus grand que"

Il serait intéressant de pouvoir tester si un nombre est plus grand qu'un autre. Pas besoin de chercher dans le manuel de Flash l'opérateur, c'est le même que dans votre cours de Maths. :D

L'opérateur < correspond en français à "plus petit que" et à l'inverse, l'opérateur > correspond à "plus grand que".
Cela va nous permettre de comparer deux valeurs numériques. Testez chez vous ces différents lignes :

trace (100<50); // Renvoie false, car 50 n'est pas plus grand que 100 !
trace (50<100); // Renvoie true, car 50 est plus petit que 100
trace (100<100); // Renvoie false, car 100 n'est pas plus petit que 100, mais égal
trace (500>10); // Renvoie true

Intéressant, non ? ;)
Mais je suis sûr qu'un détail vous a plus intéressé que le reste : le test sur 100<100

3. "Plus petit ou égal à" - "Plus grand ou égal à"

Il s'agit cette fois de l'opérateur >= ou à l'inverse <=
Testons :

trace (100>=50); // Renvoie true, car 100 plus grand que 50
trace (100>=100); // Renvoie true, car 100 égal à 100

Et si on utilise > ou < avec des chaînes de caractères ?

Alors Flash comparera en fonction de la place de la lettre dans l'alphabet (en fait selon la place de la lettre dans la table des caractères ASCII (TABLE ASCII).
Quelques exemples enrichissants :

trace("A"<"B"); //true car A avant B dans l'alphabet
trace("a"<"B"); //false car pour Flash, les majuscules sont avant les minuscules.
trace("ab"<"ac"); //true car b avant le c dans l'alphabet
4. "Égalité stricte"

Voilà un opérateur qu'on utilise assez rarement, mais qui peut se révéler utile.
Pour comprendre son intérêt, testons cela :

var mabool:Boolean = true;
var monnombre:Number = 1;
trace(mabool==monnombre);

Ce qui nous renvoie true, car comme on l'a vu précédemment, pour Flash le booléen true équivaut au numérique 1.

Mais maintenant tapons :

var mabool:Boolean = true;
var monnombre:Number = 1;
trace(mabool===monnombre);

Ce qui nous renvoie false ! L'opérateur === (oui, ça en fait beaucoup ;) ) va non seulement comparer l'égalité des valeurs contenues dans les variables mais aussi l'égalité des types des variables. Or ici, le type Boolean est différent de Number, d'où le false.

Existe-il une inégalité stricte ?

Eh oui, elle est assez rarement utilisé : !==
Cet opérateur renverra true si les valeurs ou les types sont différents.

C'était le petit tour des opérateurs de conditions les plus usités. :)


Un nouveau type : Boolean Opérations sur les booléens

Opérations sur les booléens

Opérateurs de test La structure conditionnelle

Opérations sur les booléens

Eh oui, tout comme les nombres, les booléens ont leurs opérations.
Pour les nombres on a 4 opérations, qu'on peut réduire à 2 (la somme et le produit).
Eh bien chez les booléens c'est pareil, on a deux opérations : ET et OU.

La logique binaire (c'est-à-dire les opérations sur les booléens) pourrait faire l'objet de plusieurs chapitres, je vais donc faire simple et n'expliquerai pas toutes les possibilités de la logique binaire.
Nous nous en tiendrons aux bases, c'est-à-dire :

1. Opposé
2. ET
3. OU

1. "Opposé"

Celui là, il est bien pratique, il s'agit du petit !
Ce dernier inverse tout simplement la valeur d'une variable booléenne.
Par exemple :

var mabool:Boolean = false;
trace(!mabool); // Renvoie true

ou encore

var mabool:Boolean = true;
trace(!mabool); // Renvoie false
2. "ET"

Vous voulez vérifier qu'une variable est égale à telle valeur ET une autre est égale à telle autre valeur ?
Utilisez l'opérateur &&
Imaginez, vous êtes directeur d'une boîte branchée. A chaque client vous demandez la variable age et argent. Vous ne voulez laisser rentrer (true) que les majeurs et ceux qui ont plus de 50 ¬.

En semi-français on aurait :
(age PLUS GRAND OU EGAL 18) ET (argent PLUS GRAND 50)

Ce qui nous donne en Actionscript :
(age>=18) && (argent>50)

Un petit exemple :

var age:Number = 10;
var argent:Number = 100;
trace((age>=18) && (argent>50));

Le jeune garçon a bien l'argent, mais n'est pas majeur, donc éjection. :D Flash renvoie false.

3. "OU"

Opérateur : || (Ctrl+alt+6 pour les plus zéros d'entre nous).

Maintenant, imaginez-vous chef de casting :p pour la Zéros Académie. :lol:
Vous cherchez un Zéro qui soit possède un Q.I. inférieur au Q.I. d'une limace, ou alors un zéro qui possède une ancienneté supérieure à 3 ans sur le SDZ (un geek en somme ^^ ).

En semi-français :
(qi du zéro PLUS PETIT QUE qi de la limace) OU (ancienneté PLUS GRANDE QUE 3)

En Flash :
(zero_qi < limace_qi) || (zero_ancien > 3)

Et le petit exemple qui va bien :D :

var zero_qi:Number = 90;
var limace_qi:Number = 2;
var zero_ancien:Number = 3.5;
trace((zero_qi < limace_qi) || (zero_ancien > 3));

Cela nous renvoie true, car le Zéro a beau posséder un QI approchant de la moyenne mondiale, son ancienneté le sauve. :D

Voilà c'était tout sur les opérations de logique booléenne. Sachez que si vous aimez vous triturer les méninges, vous pouvez combiner toutes ces opérations et même démontrer que le ET possède les mêmes propriétés que la multiplication (distributivité...) et le OU les mêmes que la somme.


Opérateurs de test La structure conditionnelle

La structure conditionnelle

Opérations sur les booléens Récapitulatif

La structure conditionnelle

On arrive enfin au lourd. :D
Regardons maintenant comment utiliser tout ce que nous avons appris sur ses booléens !

1. if

Intéressons-nous à la structure conditionnelle la plus classique : if
(if veut dire si en français pour les plus anglophobes d'entre nous :) )

L'instruction if va vérifier si une variable booléenne est vraie, si c'est le cas, elle va effectuer une action.
Vous pouvez voir la structure dans l'exemple ci-dessous. Entre parenthèses, on met la variable booléeene qui va être testée : ici c'est mabool. Dans le bloc d'instructions délimité par les accolades, on va écrire l'action qui se produira, si la variable booléenne est vraie.

if (mabool) {
//l'action à effectuer si mabool vaut true
}

Petit exemple facile :

if (50<100) {
trace("en effet, 50 plus petit que 100");
}
2. if else

else signifie en français sinon
Il va nous permettre d'ajouter une action dans le cas où la condition renvoie false

if (50>100) {
trace("si la condition était vraie");
} else {
trace("mais en fait elle est fausse");
}

Ce code exécutera l'action contenue dans le else car la condition renvoie false

3. if else if

Et si on a plusieurs cas à éplucher ?

var monnombre:Number = 2;
if (monnombre==0) {
trace("monnombre vaut 0");
} else if (monnombre==1) {
trace("monnombre vaut 1");
} else if (monnombre==2) {
trace("monnombre vaut 2");
} else if (monnombre==3) {
trace("monnombre vaut 3");
} else {
trace("je sais pas ce que vaut monnombre");
}

Ce code affichera "monnombre vaut 2".
Mais amusez-vous à changer la valeur de monnombre pour comprendre le système.
La dernière action else sera exécutée si aucune condition précédente s'est révélée vraie.
N'oubliez pas que les tests s'effectuent dans l'ordre. Et Flash s'arrêtera à la première condition vraie, il n'ira pas voir plus loin.

4. les ternaires

Voilà une structure conditionelle qui va nous faire gagner du temps :p
Prenons cet exemple :

if (mo