CodeS-SourceS
Rechercher un code, un tuto, une réponse

Les bases de l'as 1.0 [mx 6 et ulterieur]

Septembre 2017


Les bases de l'as 1.0 [mx 6 et ultérieur]



Introduction


L'action Script est le langage de script de Macromedia Flash.

Le langage a évolué avec le logiciel qui en est à sa version 6 (MX).


Il est utilisé pour contrôler les animations, gérer des fichiers XML, communiquer avec des scripts externes (écrits en PHP par exemple), etc.

Qu'est-ce que l'Action Script?


L'action Script est un langage développé par Macromédia pour son logiciel Flash.

Il permet de contrôler les animations flash, gérer des flux audio, vidéo, les fichiers XML, etc.

Ce langage n'est pas un langage compilé; C'est un langage de script encapsulé dans l'animation (au format swf).

Les animations flash tournent sur tous les systèmes disposant du plugin développé par Macromédia, ce qui inclus Windows, Mac OS, Linux et autre Unix.

Pré Requis


L'action Script étant un langage relativement simple et logique, aucune connaissance préalable du langage n'est requise pour aborder cet ouvrage. Toutefois, la connaissance d'autres langages tel que le JavaScript, le C ou le C++ en favorisera la compréhension.

Notez que pour aborder l'Action Script, une connaissance du logiciel Flash est requise.

Ce livre s'adresse essentiellement aux utilisateurs de Flash 6 MX.

Les utilisateurs de versions antérieures peuvent rencontrer des fonctions inconnues de leurs versions.

Accès au code Action Script


Le code s'intègre dans le panel "actions".

Pour ouvrir ce panel, sélectionnez l'objet concerné et pressez F9.

Généralités


Chaque instruction se termine par un ;

L'action Script est sensible à la casse. Pour éviter d'aller dans le menu des fonctions toutes les 2 minutes afin de retrouver l'orthographe, il faut savoir que généralement, la première lettre d'un nom de fonction est rarement en majuscule. Par contre la première lettre des autres parties du nom sont souvent en majuscule.
Exemple : onClipEvent().

Dans le cas des frames, on introduit le code directement dans le panel "Actions", mais on utilise on() dans le cas d'un bouton et onClipEvent() dans le cas d'unMovieClip.

Dans les exemples qui suivent, je n'indiquerai pas la manipulation à faire pour tester le code, mais uniquement le listing.

Afin de préparer et tester ces exemples, vous pouvez créer un bouton et un clip en créant 2 formes que vous transformerez en clip ou bouton grâce à la touche F8 et en appliquant le code de l'exemple à cet élément (onClipEvent() pour le clip, on() pour le bouton).

Intégration de code

Cas d'un bouton


On ne peut pas mettre du code directement sur le bouton. En effet, le bouton a plusieurs états (cliqué, relâché, etc.) et il faut préciser à flash à qu'elle action va correspondre le code.

On() prend un seul argument.

Le code va se situer entre les signes { et }.

Voici les argument pris par on() et leur signification.

ArgumentSignification
pressBouton gauche de la souris enfoncé.
releaseClic sur le bouton (cliqué relâché).
releaseOutsideClic sur le bouton, relâché a l'extérieur.
rollOverLe curseur passe au dessus du bouton sans cliquer.
rollOutLe curseur est passé au dessus du bouton.
dragOverGlissé Déplacé sur le bouton.
dragOut Glissé Déplacé en dehors du bouton.
keyPress"nom_de_touche"La touche "nom_de_touche" à été pressée.


Exemple
On (rollOver) {
        _root.gotoAndPlay(2);
}

Cas d'un MovieClip


onClipEvent() prend un seul argument.

Le code va se situer entre les signes { et }.

Voici les argument pris par onClipEvent() et leur signification.

ArgumentSignification
loadle MovieClip est chargé.
unLoadLe MovieClip est déchargé.
enterFrameMouvement de la souris
mouseDownClic de la souris sans relâcher
mouseUprelâchement du clic
mouseMovela souris bouge.
keyUpon lâche la touche.
keyDownon appuie sur la touche.


Exemple
OnClipEvent (load) {
        _root.gotoAndPlay(2);
}

Commentaires


L'Action Script utilise des commentaires familiers aux développeurs C, C++, PHP, etc.

Les commentaires se font de 2 manières.

En effet, on peut placer des commentaires sur une seule ligne, ou sur un nombre de ligne illimité.

Les commentaires sur une ligne sont précédés d'un double slash. Les commentaires sur plusieurs lignes sont placés entre /* et */ .


Exemple
// Suivi du commentaire


Exemple
/*
Commentaire
Sur plusieurs
Lignes
*/

Les types de données


La déclaration des variables n'est pas obligatoire mais fortement conseillée.

Pour déclarer une variable, on utilise la fonction var.

Utilisation : var nom_de_variable;

Le nom de la variable ne doit pas être un nom réservé (TRUE, function, release, _root, etc.) et doit commencer par une lettre ou un espace souligné _ (underscore).

Une variable n'a pas de type défini et peut donc contenir indifféremment du texte, un nom entier, un nombre décimal, un booléen, etc.

Je ne vais pas définir les entiers et les décimaux.

Le booléen est le plus simple des types de variable; il propose 2 valeurs : TRUE ou FALSE.

Ce type de valeur est retourné par de nombreuses fonctions, indiquant le bon fonctionnement de l'opération (TRUE) ou non (FALSE).

Exemple
on (release) {
        // Déclaration des variables
        var var1_entier;
        var var2_float;
        var var3_text;
        var var4_bool;
        /*
        Attribution
        Des
        Valeurs
        */
        var1_entier = 10;
        var2_float = 3.14;
        var3_text = "ceci est une variable de type texte";
        var4_bool = TRUE;
}


Exemple
on (release) {
        // noms de variables faux et justes...
        var 22;        // erreur!
        var TRUE;      // erreur!
        var _nom;      // OK!
        var XXX;       // OK!
        var 22erreur;  // erreur!
        var aa.bb;     // erreur!
}


Exemple
on (release) {
        // Déclaration des variables
        var nom;
        var phrase;
        /*
        Attribution
        Des
        Valeurs
        */
        nom = "Julien";
        phrase = "mon nom est " + nom;
}


Lorsque l'on manipule les chaînes de caractères, on est appelé à utiliser des caractères spéciaux tels que la tabulation, le guillemet, le retour à la ligne, etc.

Pour cela, il y a les séquences d'échappements.
\nsaute une ligne (<BR> en html)
\ttabulation
\rretour à la ligne
\\Antislash
\"guillemet


Il existe une fonction qui permet d'afficher une information telle que le contenu d'une variable, le résultat d'une fonction, etc...

Cette fonction est très utile pour le debuggage, car elle affiche l'information dans une console externe à l'animation.

Cette fonction est trace().

Exemple d'utilisation
onClipEvent(load) {
        var test =  "voici un test";
        trace(test) ;
}

Les opérateurs

Les opérateurs arithmétiques


opérateuropération
+addition
-soustraction
*multiplication
/division
++incrémentation
--décrémentation

Les opérateurs de comparaison


opérateuropération
>>plus grand que
<<plus petit que
>=supérieur ou égal
<=inférieur ou égal

Les opérateurs logiques


opérateuropération
&&AND
||OR
!NOT

Les opérateurs d'égalité


opérateuropération
==égalité
===égalité stricte
!=inégalité
!==inégalité stricte

les opérateurs au niveau du bit


opérateuropération
&AND binaire
|OR binaire
^XOR binaire
~NOT binaire
>>décalage vers la droite
<<décalage vers la gauche
>>>décalage stricte vers la droite

Les opérateurs d'affectation


opérateuropération
=affectation
+=addition et affectation
-=soustraction et affectation
/=division et affectation
*=multiplication et affectation
%=modulo et affectation
<<=décalage à gauche et affectation
>>=décalage à droite et affectation
>>>=décalage strict à droite et affectation
&=AND binaire et affectation
|=OR binaire et affectation
^=XOR binaire et affectation

Instructions de contrôle


Les instructions de contrôle permettent de contrôler et de vérifier le bon déroulement du programme.

Structure de condition if


La structure if est utilisée pour vérifier une condition.

Si la condition est remplie, le code est exécuté, sinon, la fonction renvoie FALSE et le code est ignoré.

L'expression est placée entre parenthèses, associée à un opérateur compatible.

Exemple
if (condition) {
        // Code à exécuter
}


Remarque
Le bloc if exécute le code si la condition renvoie TRUE.
On peut donc se passer d'opérateur pour tester un booléen.

Exemple
onClipEvent (load) {
        var bool;
        bool = TRUE;
        if (bool) { // si bool = true, alors pas besoin de préciser \"== true\"
                // Code à exécuter.
        }
}


Exemple
onClipEvent (load) {
        /*
        Utilisation d'un opérateur à un seul opérande :
        Le NOT Logique
        */
        var bool;
        bool = FALSE;
        if (!bool) {
                // Code à exécuter.
        }
}

L'instruction else


L'instruction if, bien que fort pratique, reste limitée.

On peut ainsi l'étendre grâce à else qui permet d'exécuter un autre bloc de code si la condition n'est pas vérifiée.

Exemple
onClipEvent (load) {
        //utilisation du else dans la condition.
        var chiffre;
        chiffre =  85;
        if (chiffre >= 85) {
                // Code à exécuter si condition vérifiée.
        } else {
                // Code à exécuter si condition non vérifiée.
        }
}

L'instruction else if


L'instruction else if permet, si la condition n'est pas vérifiée, de tester une autre condition.

Exemple
onClipEvent (load) {
        //utilisation du else if dans la condition.
        var chiffre;
        chiffre =  85;
        if (chiffre >= 85) {
                // Code à exécuter si condition 1 vérifiée.
        } else if (chiffre << 85) {
                // Code à exécuter si condition 2 vérifiée.
        } else {
                // Code à exécuter si aucune condition n'est vérifiée.
        }
}

Structure de switch


Switch est aussi une structure de condition mais il ne peut tester qu'une seule valeur à la fois et exécutera un bloc de code différent pour chaque valeur.

Exemple
on (release) {
        switch (1+1) {
                case 1:
                // bloc si le résultat est 1.
                break;

                case 2:
                // bloc si le résultat est 2.
                break;

                case 3:
                // bloc si le résultat est 3.
                break;
        }
}


L'instruction break sert à réguler l'exécution du code. S'il n'etait pas présent, les instructions suivants celle vérifiée seraient exécutées aussi.

La boucle while


La boucle while sert à exécuter le code tant que la condition est vérifiée.

Exemple
on (release) {
        var i;
        i = 1;
        while (i<=10) { // tant que i est plus petit que 10
                i++; //incrémentation
        }
}

La boucle do...while


La boucle do...while est presque identique à while dans la fonction, mais pas dans la structure.

Elle sert à exécuter le code tant que la condition est vérifiée.

La différence entre while et do...while, c'est qu'avec la première, si la condition n'est pas vérifié, le code ne sera pas exécuté, alors qu'avec do...while, le code sera exécuté au moins une fois.

Exemple
on (release) {
        var i;
        i = 1;
        do {
                i++;
        } while (i<=10);
}

La boucle for


La boucle for sert à exécuterun code un certain nombre de fois.

Sa fonction n'est pas très éloignée de while.

for() demande 3 arguments pour fonctionner :
  • valeur de départ
  • condition
  • valeur suivante


Un exemple est plus parlant...

Exemple
on (release) {
        var i;
        i = 1;
        for (i=0;i<=10;i++) {
                /* pour i=0 et tant que i est plus petit que 10, 
                   on incrémente i, on exécute le code 
                   et on re-teste avec la nouvelle valeur de i... */

                // Code à exécuter 
        }
}

L'instruction break


Nous avons vu break avec l'instruction switch.

break sert à stopper l'exécution du code, mais pas seulement dans un switch.

Il sert à sortir de la fonction ou de l'instruction en cours.

Exemple
on (release) {
        var i;
        i = 1;
        for (i=0;i<=10;i++) {
                if (i == 5) {
                        break; // si i = 5, on sort de la fonction for.
                }
        }
}

Les propriétés


Afin d'avoir un total contrôle sur l'animation, flash met à la disposition des développeurs des propriétés, qui servent à modifier l'apparence ou la position d'un bouton, d'un MovieClip.

Les propriétés éditables


PropriétéFonction
_alphachange l'opacité
_focusrecttrue = un rectangle jaune apparaît lors de la navigation entre les control avec tab;
false = pas de rectangle de sélection.
_heightchange la hauteur
_qualitychange la qualité
_rotationchange la rotation
_soundbuftime définie en secondes le temps du pre-buffer du son en streaming
_visible0 = invisible; 1 = visible
_widthchange la largeur
_xchange la position x
_ychange la position y

Les propriétés non éditables


PropriétéFonction
_currentframenuméro de la frame en lecture
_framesloadednombre de frames téléchargées
_namenom du clip
_targetchemin du clip dans l'animation
_totalframesnombre total de frames
_urlurl du clip

Accès aux objets


Une animation flash est constituée d'une multitude d'objets que sont les MovieClips, les boutons, le document lui même, etc.

L'action script permet d'accéder à ces objets.

PropriétéFonction
_rootaccès à la scène complète
_level0accès à la scène ou aux objets chargés via loadMovie ou loadMovieNum
_parentaccès au MovieClip parent.
thisaccès à l'objet courant
root.nom_du_movieaccès au MovieClip "nom_du_movie"


Les objets pouvant être emboîtés les un dans les autres comme des poupées russes, pour y accéder depuis un objet distant, on doit préciser le chemin complet de l'objet.

Exemple

Ouvrez un nouveau document.

Créez une forme, pressez F8 et choisissez "Movie Clip".

Sélectionnez le MovieClip ainsi créé, allez dans le panel "propriétés" et mettez "MC1" en nom d'instance.

Double-cliquez sur le Movie Clip et créez une autre forme. Recommencez l'opération précédente et choisissez "MC2" en nom d'instance.

Créez maintenant un bouton (dessinez une forme, puis F8 >> bouton).

Sélectionnez le bouton, ouvrez le panel "Actions".

Insérez ce code:


on (release) {
        _root.MC1.MC2._alpha - = 10;
        /*
        On accède à la propriété _alpha du clip MC2, 
        qui se trouve dans MC1, 
        qui se trouve sur la scène _root.
        */

}



Tutoriel écrit par Julien Loutre, alias BlackWizzard.

Diffusion électronique autorisée en l'état.

Toute modification doit faire l'objet d'un accord écrit de l'auteur.

L'impression ou la diffusion dans un but lucratif est strictement interdite sans autorisation préalable.

A voir également

Publié par BlackWizzard.
Ce document intitulé «  Les bases de l'as 1.0 [mx 6 et ulterieur]  » issu de CodeS-SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
[flash] approche de l'as par le dessin (avec l'api de flash)
Introduction au xml (mx 6 et ulterieurs)