Maintenant que vous êtes en mode expert, introduisez ce code :

- Explications : on(press) signifie : "Lorsque l'on appuie sur le bouton" . Ce qui se trouve entre les accolades d'ouverture et de fermeture "{ }" donc : chiffre = Number(chiffre)+1; signifie : "la variable chiffre est égale à chiffre + 1 , ce qui incrémente de 1 le nombre dans votre champs de saisie.


Il ne vous reste plus qu'à tester le tout. Pour cela, allez dans : Fichier » Aperçu avant publication » Flash.
Appuyez sur votre bouton ... et si tout c'est bien passé, la valeur change ! Voila ce que vous devez obtenir :

- explications : Cette fonction vous permet de décharger l'animation se trouvant sur niveau désiré, en l'occurence le niveau 1 .

Il ne vous reste plus qu'à exporter cette animation au format .swf . Appellez cette animation comme vous le désirez. Placez vos deux animations dans le même dossier, et lancez votre animation principale. Cliquez sur "Charger" et load.swf se lancera. Pour décharger load.swf, il vous suffira d'appuyer sur le bouton "Décharger" .

Voila ce que ca donne ci-dessous :

// La création d'objet

En tant qu'utilisateur de Flash, vous connaissez les trois grands types d'objet utilisés par Flash.

-Les Clips

-Les Boutons

-Les Graphiques

Aussi étrange que cela puisse vous paraître, il faudra bannir l'utilisation des graphiques. Je m'explique: un dessin statique devrait être enregistré sous forme d'un graphique. Mais ( allez savoir pourquoi ! ) ce même dessin, enregistré sous la forme d'un Clip, prendra non seulement moins de place dans votre animation mais sera aussi plus facile à manipuler.

Si vous aviez l'habitude de créer un objet dans la bibliothèque, il faudra aussi revoir cela. Il existe une solution bien plus simple qui vous permettra en plus de bien calibrer la taille de l'objet créer. Il suffit simplement de créer la forme de votre objet, de le sélectionner et de faire un clic droit dessus, pour choisir "Convertir en symbole" :

Votre objet va donc s'intégrer à la bibliothèque, mais il reste à déterminer son type. Dans ce cas là on choisira bien évidemment "Clip". Dans un souci d'intégration de l'ActionScript dans cette animation, on en profitera pour cocher la case "Exporter pour ActionScript" et on laissera la case "Exporter dans la première image" cochée :

Voilà une bonne chose de faite ! Désormais on dispose d'un clip répondant au doux nom de PloumPloum, intégrable en ActionScript et prenant moins de place qu'un graphique. N'oubliez pas que la touche pour faire apparaître votre bibliothèque de symboles est la touche F11.

// De l'utilisation d'un langage correct...

ActionScript et Flash ont à eux seul une quantité de termes propres, et je vais m'évertuer à vous les expliquer ici. Notez bien que ce sont des termes que vous retrouverez partout, veillez donc à bien les connaître sous peine de ne rien comprendre à ce que l'on vous expliquera.

Animation : Votre fichier Flash, l'ensemble de vos clips, images, instances et boutons.

Clip : Un des grands types d'objets de Flash, représenté dans la bibliothèque par ce symbole :

Bouton : Un autre type d'objet de Flash, permettant l'interactivité :

Symbole : Nom que l'on donnera à un bouton, un clip ou un graphique, dans la bibliothèque.

Objet : Beaucoup de choses ! Un objet peut être un symbole, un son, une couleur, un tableau, une chaîne, une date ou encore un objet créer de toute pièce par le concepteur. Concrètement un objet en ActionScript se caractérise par un ensemble de méthodes et de propriétés.

Propriétés : Ensemble de ce qui caractérise un objet. Par exemple, la position d'un clip, la valeur d'une couleur, la longueur d'un tableau. Modifiables la plupart du temps, les propriétés sont un des piliers de la POO ( Programmation Orientée Objet )

Méthodes : Ensemble des fonctions propres à un type d'objet. Par exemple, la concaténation d'une chaîne, le tri d'un tableau, la transformation d'un clip.

Fonctions : Ensemble de commandes, de séries de commandes incluant des paramètres ou non. Une fonction est obligatoirement créée par l'utilisateur, les fonctions intégrées à ActionScript sont des méthodes d'Objet. Par exemple, on peut très bien imaginer une fonction, nécessitant en paramètre une date d'anniversaire, faisant le calcul du temps restant entre la date actuelle et cette date d'anniversaire.

Prototype : Les prototypes sont des méthodes personnalisées pour des objets personnalisés.

Instance : Une instance est la copie d'un symbole de la bibliothèque sur le scénario de l'animation. Imaginez que vous avez crée un symbole de voiture. Chaque voiture que vous glisserez sur le scénario sera une instance du symbole voiture. Vous trouverez aussi le mot Occurrence pour designer le même concept.

Image et Image-clé : Cela fait partie des bases de l'animation dans Flash, dans la partie Scénario. Si vous ne maîtrisez pas cette base, inutile d'aller plus loin, concentrez-vous d'abord sur la maîtrise de Flash en lui-même. Il est important de faire la distinction entre images, symboles, formes et objet.

Forme : Dessin présent sur l'animation.

Voilà, si vous maîtrisez déjà ce vocabulaire, vous pouvez vous lancer sans hésiter dans la création de vos premières lignes de codes et l'étude des tutoriaux !

// Chemins et Instances

Devant la quantité d'objets utilisés lors d'une animation, il est très vite possible de se perdre et des lors, le déboguage devient impossible.

Pour bien comprendre les informations de déboguage envoyées par Flash et pour aussi simplifier votre programmation, je ne saurais trop vous conseiller de bien maîtriser les concepts de chemin absolu et relatif et de nom d'instance. Rassurez-vous si vous ne les connaissez pas, je vais me charger de vous les rappeler tout de suite.

Dans la création d'une animation Flash, vous aurez des clips contenus dans d'autres clips, des boutons contenant eux-mêmes des clips. Des lors le ciblage précis de chaque objet devient indispensable pour écrire un code sain.

- Instances:

Pour comprendre le concept d'instance, rien de tel que la pratique !

Dessinez une forme carrée, faites-en un symbole de type Clip et donnez-lui le nom de "Carré". Vous avez donc en bibliothèque un Clip du nom de Carré et sur votre animation, vous avez une instance de ce symbole. Faites apparaître le panneau de propriétés et cliquez sur cette instance.

N'oubliez pas qu'Occurrence et Instance signifient EXACTEMENT la même chose ! Vous pouvez donc voir que la forme sélectionnée est une occurrence ( ou instance ) du symbole Carré. Cliquez sur la partie "Nom de l'occurrence" et affectez le nom de Carré1 à cette instance.

Faites ensuite glisser une nouvelle instance de votre carré sur votre animation, mais ne lui donnez pas de nom cette fois-çi.

Nous allons voir maintenant la façon dont Flash perçoit ces deux instances. Lancez votre animation ( Ctrl + Entrée ) et faites lister les objets présents dans l'animation ( Ctrl + L ). Vous allez obtenir une fenêtre de sortie:

Vous pouvez donc voir qu'à la racine de votre animation ( _level0 ) vous avez une instance clairement identifiée, nommée "Carré1"; et une autre nommée de base par Flash "instance1".

Vous pouvez désormais imaginer à quel point il devient impossible sur une animation contenant une centaine d'instance de cibler une instance d'objet particulière sans connaître son nom particulier. De plus lors de la programmation cela permettra d'éviter les erreurs et facilitera grandement la relecture.

- Chemins:

Venons en maintenant au ciblage. Le ciblage est globalement le même que sur n'importe quel système informatique. Il existe deux types de ciblage, correspondant à ce que l'on appelle le chemin absolu d'un symbole ou alors le chemin relatif.

Prenons en exemple le chemin d'une de mes animations:

La lecture d'un tel chemin est simple: le symbole ciblé ici est le bouton "Bouton Métal", contenu dans un clip "Boutons Métal" regroupant tous les boutons d'un même ensemble, faisant partie du clip "Logo", lui même contenu dans le clip "Main", situé à la racine ( Séquence 1 ).

Le chemin absolu de ce symbole se déduit directement. L'avantage du ciblage absolu est qu'il peut se faire à partir de n'importe quelle partie de votre animation, que votre code ActionScript ciblant ce bouton se situe dans le clip "Boutons Métal" ou dans un autre clip. Pour cibler cet objet on écrira donc:

Pour cet exemple je suis parti du postulat que le nom des instances étaient les mêmes que ceux des symboles.

Imaginons maintenant que je me trouve dans une autre instance de clip imbriqué dans le clip Logo. Je pourrais bien entendu utiliser le chemin absolu pour cibler le BoutonMetal. Mais parfois, il est préférable d'utiliser le ciblage relatif. Ce ciblage part de l'endroit où vous inscrivez le code et non de la racine de l'animation comme le fait le ciblage absolu. Dans ce cas là, on utilise la commande "_parent" qui signifie que vous placer votre pointeur un niveau en arrière. Un exemple sera plus parlant : si je suis dans le clip Logo et que je souhaite modifier la variable A, contenue dans le clip Main, je la ciblerai de la sorte :

Maintenant pour en revenir à l'exemple initial, je me trouve dans une autre instance de clip imbriqué dans le clip Logo. Dans ce cas là, pour cibler le clip BoutonMetal, rien de plus simple :

// Conclusion

Il est indispensable de maîtriser ces principes de chemins et d'instance. Ne pouvant pas m'étaler autant que le ferait un bon livre de programmation, si vous n'avez pas saisi, je vous conseillerai de mettre en pratique toutes ces notions, et si ce n'est pas déjà fait, de vous procurer un livre traitant d'ActionScript.

De même le vocabulaire propre à Flash est une base fondamentale que vous ne pouvez sacrifier, sous peine de ne pas pouvoir acquérir la suite des connaissances nécessaires.

Si vous avez cependant des questions propres à tout cela, n'hésitez pas à les poser dans le forum dédié à cela.

Bonne question ! Les habitués de la ( vraie ) programmation n'ont pas tellement besoin de ce tutorial, si ce n'est la syntaxe de déclaration et certaines utilisations spécifiques.

Maintenant, il convient de mettre à la portée de tous l'art de la création de fonction. Et quel art ! Une bonne structure de programmation ne saurait se priver de l'utilisation des fonctions. Dites-le vous , c'est une réelle nécéssité.

A la fin de ce tutorial , vous aurez en tout cas toutes les bases nécessaires pour améliorer grandement vos capacité de programmation. Non seulement la programmation sera plus claire, plus simple et aussi plus rapide. Et cela vous donnera aussi la possibilité d'utiliser et de réutiliser les fonctions que vous avez réecrites, à l'infini.

Cessons le suspens, et mettons les pieds dans le plat ! Dans un de mes tutoriaux, j'ai défini les fonctions comme étant un "Ensemble de commandes, de séries de commandes incluant des paramètres ou non." D'accord, c'est légérement succinct mais cela definit assez bien ce qu'est une fonction. En fait, une fonction est juste une série d'actions que vous pouvez appeler de façon répétitive.

// La main à la pate

Allez, un peu de pratique ne nous fera pas de mal, ca sera de toute façon plus parlant. Prenons un exemple simple, peut-etre pas vraiment adapté, mais qui nous donnera l'occasion d'écrire une fonction.

Nous allons créer une série de boutons +1, +2, +3, +4. L'appui sur un de ces boutons additionnera du montant indiqué le nombre situé à coté. Ca parait simple, et c'est parfaitement réalisable sans fonction... mais ce n'est qu'un exemple.

Créeons d'abord un symbole de bouton:

Copions-le quatre fois sur la scène, et nommons les instances de chacun de ces clips. Ici j'ai appelé le premier bouton "bouton1" et ainsi de suite. Sur la capture d'écran, c'est le 3eme bouton qui est selectionné, on voit dans le panneau Propriétés qu'il est nommé "bouton3" et qu'il est une occurence ( ou instance ) du symbole Bouton et se conduira comme un bouton.

Créeons ensuite sur la scene principale un champ de texte dynamique:

Ce champ de texte dynamique affichera le contenu de la variable "_root.Somme", la variable qui se verra donc additionner à chaque clic de bouton.

Occupons-nous désormais de la partie ActionScript de l'animation. Nous allons commencer par déclarer la fonction d'addition. La déclaration de fonction peut se faire à n'importe quel endroit d'une animation. Cette déclaration consiste à fabriquer une fonction, et à l'appeler par la suite lorsqu'on en a besoin. La fonction d'addition va juste ajouter un certain montant à la variable "_root.Somme" :

Désormais, à chaque fois que l'on tapera "Addition(var)", la variable "_root.Somme" se verra additionner du chiffre "var".

Si vous avez tout suivi jusque là vous aurez deviné la syntaxe de déclaration d'une fonction:

L'appel de cette fonction se fait tout simplement de la sorte : " nom_de_la_fonction ( parametres )". Si votre fonction n'a besoin d'aucun paramètres, laissez les parentheses vides, mais surtout ne les omettez pas, sous peine de n'appeller et declarer aucune fonction.

Associons à chaque bouton la fonction Addition(). Pour ce faire, cliquez sur chaque bouton, et inserez ce code:

Ceci pour le bouton1 qui additionnera 1 à _root.Somme, pour les autres, remplacer le parametre (var) par la valeur souhaitée.

Une fois les 4 boutons programmés, il ne vous reste qu'à lancer l'animation ( Ctrl + entrée ) et de contempler avec extase votre admirable fonction en action à chaque clic de bouton. Voici l'animation terminée :

// Conclusion

Vous vous en doutez, je n'ai pas forcé mon talent sur l'aspect graphique. J'ai volontairement choisi une fonction ultra-simple, pour permettre à tous de comprendre. Maintenant c'est à votre tour de créer vos fonctions et de les implanter dans vos animations de maniere constructive et intelligente.

Pour les dubitatifs qui pensent encore qu'ils ne modifieront pas leur maniere decoder, je soulignerai juste que les fonctions sont les bases d'enormement d'autres choses sous ActionScript. C'est donc une necessité fondamentale que de maitriser leurs utilisations.

Autre chose , dans un souci de relecture, je ne saurais que trop vous conseiller de déclarer toutes vos fonctions au début de l'animation et de les annoter de divers commentaires qui vous permettront de bien comprendre les choses. Pour vous donner un exemple de ce que peut donner un bout de code blindé de fonction, voici un ensemble de fonctions utilisées pour générer un mouvement aléatoire d'un symbole :

Pour les plus malins, vous pourrez récuperer ce code et l'utiliser, mais rassurez vous , un tutorial sur ce sujet est prévu. N'hésitez pas à lire le contenu des fonctions, et à essayer de comprendre l'utilité de chacune.

Je suis à votre disposition sur les forums pour vous aider. Voici la source SOURCE du clip présenté, n'hésitez pas à la décortiquer si vous pataugez un peu.

// Pourquoi setInterval() est plus rapide qu'aucune autre méthode ...

Et comme à chaque fois, un exemple sera vraiment plus parlant. Imaginez que vous souhaitez afficher à l'écran l'incrémentation d'un nombre. Sans la commande setInterval(), le principe le plus simple pour faire afficher cette incrémentation est de faire 2 images, l'une contenant le code d'incrémentation et la seconde, renvoyant à la première, pour faire une boucle. La vitesse d'incrémentation est donc dépendante de la vitesse de lecture de l'animation ( donc 24 images par seconde pour une animation normale ). Autant dire que c'est peu...

A-La méthode Simple

Réalisons ensemble cette animation :

Pour cela, on va créee une scène contenant 2 calques:

- Le premier calque "Boutons" contient les boutons "Go" et "Stop" ( dont le principe semble relativement compréhensible ) et l'affichage de la variable incrémentée "_root.Increment".

-Le second calque nommé "Incrémentation" contiendra le code ActionScript.

Voici la partie code :

Et voici le résultat :

Comme vous pourrez le constater, cela est assez rapide, mais au niveau de la programmation, cela ressemble plus à de la bidouille, qu'à un vrai code. On reste dépendant du système d'animation de Flash, autant dire que cela limite grandement les possibilités.

B-La méthode setInterval()

La commande setInterval permet de répèter l'éxecution d'une fonction à intervalles réguliers. Il est donc indispensable de connaitre les fonctionnements des fonctions pour espèrer utiliser setInterval().

Reprenons la syntaxe de déclaration des fonctions :

Une fois déclarée, cette fonction peut être utilisée avec setInterval(), voici la syntaxe d'utilisation:

La fréquence est exprimée en millisecondes. En la réglant à 1, on obtient donc 1000 répétitons à la seconde, comparez donc avec les malheureuses 24 répétitions que l'on obtenait auparavant !

Une fois cette commande lancée, il convient de pouvoir arrêter son execution, cela se fera par sa commande d'arrêt : clearInterval().

Voici l'utilisation optimale et TRES fortement conseillée de ces 2 commandes:

Déclaration :

Arrêt :

On s'attaque donc maintenant à modifier notre précedente animation, pour la rendre plus efficace.

On va donc supprimer la précédente partie d'incrémentation et y déclarer notre fonction d'incrémentation. Les commandes setInterval() et clearInterval() seront lancées respectivement par les boutons "Go" et "Stop".

Comme vous le voyez, la fonction Incrementation est simplissime, c'est bien entedu toujours le cas des tutoriaux. Vos créations comporteront des fonctions largement plus complexes.

Attaquons nous maintenant aux boutons :

>Le bouton Go :

Le code est à nouveau très simple, on déclare cet Interval au nom de IncrementationInterval, ce qui nous permettra de le désigner lorsque l'on appuiera sur le bouton Stop.

>Le bouton Stop:

Cela devrait se passer de commentaires ! Voyons tout de suite le résultat :

// Conclusions Intermédiaires

Les 2 méthodes ont leurs avantages et leurs inconvénients.

La méthode A est nettement plus en harmonie avec Flash, elle évitera nombre de problème de synchronisation. Cependant on deplorera sa lenteur, et les complications de sa mise en oeuvre ( nombreuses images entre autres ...).

La méthode B quant à elle, est à coup sur celle qui ressemble vraiment à de la programmation et permet une structure nettement plus ordonnée, et une mise en oeuvre ultra simple. Par contre, le manque de synchronisation avec l'affichage de l'animation demande une grande vigilance lors de la définition de la fréquence et le résultat varie d'une machine à l'autre ( enfin, il me semble ).

// Pour aller plus loin dans l'utilisation de setInterval()

Si vous avez tout compris à ce que j'ai tenté de vous expliquer auparavant, je vais pousser les explications encore plus loin.

A- L'arret conditionnel

Lors de l'utilisation de setInterval() on peut avoir besoin de faire stopper la commande à un certain moment. En reprenant notre exemple d'incrémentation, imaginons que nous ayons besoin de stopper l'incrémentation à 1000. Le seul moyen pour faire arrêter la commande au moment où la variable est à 1000 est qu'au moment de l'incrémentation, on teste sa valeur et qu'on en déduise si elle peut continuer ou non.

Si vous êtes astucieux, vous penserez à modifier la fonction répétée par setInterval pour qu'à 1000, l'incrémentation se stoppe. C'est certes une possibilité, mais cela n'est ni adaptable, ni optimisé, car la commande setInterval continuerait de tourner en fond, monopolisant des ressources.

La bonne méthode consiste à lancer en parallèle une autre commande setInterval() qui testera la valeur de la variable selon la même fréquence que la commande qui l'incrémente. Si la variable est à 1000, alors on provoquera l'arrete de la commande d'incrémentation, puis celle du test qui n'as plu lieu d'être.

Avant d'arriver à l'exemple qui clarifiera tout, attardons-nous quelques instants sur le point suivant...

B- L'utilisation unique

La syntaxe de déclaration de la commande setInterval() impose la présence d'une fonction, comme vous l'avez remarqué. Un peu plus haut dans ce tutorial, je vous ai donné une syntaxe de déclaration fausse. Oui j'avoue , j'ai menti ! En fait vous avez aussi la possibilité de lancer une fonction sans nom à usage unique.

Je sais , ça ne rime pas à grand chose, mais laissez moi vous expliquer. Vous avez bien vu que la fonction d'incrémentation était ridiculement simple. Nous aurions tout a fait pu nous passer de la déclarer au début de l'animation, car vraisemblablement, elle ne sera utiliser que dans le cadre de l'appui sur le bouton "Go". Dans ce cas, on aurait pu tout simplement déclaré les choses de la sorte lors de l'appui sur ce bouton :

Au lieu d'avoir donné le nom d'une fonction deja déclarée auparavant, on a donc déclaré une fonction directement à l'interieur de la commande setInterval.

L'avantage notoire est que vous n'allez embrouillez votre code avec des fonctions dont vous n'allez vous servir qu'une fois. Ce qui est le cas parfait pour les fonctions d'arret conditionnel dont j'ai parlé au paragraphe précédent.

C-Une pierre, deux coups !

Utilisons désormais ces 2 nouvelles notions pour decider de faire arrêter l'incrémentation passé 1000.

On va simplement modifié le code du bouton Go :

Et voici le fameux résultat :

// Conclusion

Vous voilà donc enrichi de nouvelles connaissances en programmation. La commande setInterval() est une vraie bénédiction pour la programmation ActionScript, en particulier pour les effets graphiques. N'hésitez pas à la tester de diverses manières, en commencant simplement, comme dans la première partie, pour terminer sur des effets complexes d'affichage.

Dans mes tutoriaux suivants, je serais amené à l'utiliser énormement, c'est donc indispensable de bien en comprendre le fonctionnement. Si vous avez des questions , n'hésitez pas à les poser sur le forum Flash, et consultez les sources des trois animations présentée...

Voici les Sources :

- Source 1
- Source 2
- Source 3