Pour en faciliter la consultation, et sans plus de fioritures, j'ai rassemblé sur cette page introduction et prérequis pour chacun des tutos que j'ai publiés sur le wiki de la communauté Mediabox.

Vous trouverez aussi sur le blog Annexe ActionScript3 quelques vidéos, exos et autres considérations en rapport avec AS3

Tutos texte
orientés développement orientés graphisme divers en vrac

Migration AS2 vers AS3
La Saga Premiers Pas pour grands débutants (série)
Fabriquer une carte à colorier : couleur et ColorPicker
Comprendre les tableaux
Les tableaux multidimensionels
Parcourir des tableaux
Masque et ActionScript
Charger des images la file
Composant Bouton radio : deux trois subtilités
Communiquer avec une base de données en Actionscript via PHP/MySQL
Travailler avec les enregistrements d'une base
Les bases de la POO, par la pratique, à l'usage des débutants (série)
Développer un carrousel et lier son contenu à un fichier .xml
Classe Timer, approche
Barre de menus dynamiques depuis données internes ou via un xml
Une classe Barre de menus

Panneau Transformer motifs géométriques et perspective
Animation
: principes et techniques de base (série)
Le mouvement perpétuel
Masques et interpolations
Guirlandes et clignotements : synchroniser Clips et Graphiques

Fiche Parcourir un objet XML
Fiche BitmapData : découper une image

Ecriture à main levée, dessin progressif

Tuto vidéo
Gestion avancée des couleurs depuis le panneau propriétés et en AS3 voir la vidéo

 

Les tutos/cours orientés développement

La Saga Premiers Pas :

Parfaitement novices en matière de développement, vous vous êtes dit :
“Et pourquoi pas moi ? Un langage du peu que j'en sache, ça a à voire avec les ordinateurs qui sont des engins assez primaires dans leurs fondements puisqu'ils ne peuvent comprendre que deux choses, c'est vrai ou c'est faux.
Ça tombe bien, ce sont deux notions que je maitrise :mrgreen: je ne dois pas être plus bête qu'une machine, pourquoi pas moi ?!“

Eh bien voilà, on est d'accord : pourquoi pas vous ?

Variables, fonctions, syntaxe
Objets, méthodes, propriétés…
Clics et événements souris sur les boutons et les clips
Champs texte et objet String
Structures de contrôle alternatives : if
MovieClip : manipuler
• Structures de contrôle alternatives : switch
• Structures de contrôle répétitives : for - while
Liste d'affichage, imbrication et profondeur des objets
Liste d'affichage, gestion dynamique des objets

 

 


Fabriquer un coloriage

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

Une carte à colorier c'est une vingtaine de lignes de code, pas plus, et pourtant ça en arrête plus d'un. Probablement parce que ça met en œuvre des classes d'utilité ponctuelle et une vague ruse quant à l'écoute d'événement…
Je dis ruse pour vous allécher, mais il s'agit d'une technique tout à fait conventionnelle ;)

Ce tuto se propose donc avec l'alibi d'une carte à colorier de

• mettre en œuvre la classe ColorTransform
• faire connaissance avec le composant ColorPicker
• illustrer l'intérêt de la phase de capture dans l'écoute d'événements
• accessoirement apporter réponse à une question souvent croisée sur le forum : comment fabriquer un coloriage…

Puisqu'il s'agit ici de couleur, autant que RVB vous dise quelque chose et que vous sachiez reconnaitre et assigner une couleur via l'environnement de création Flash.
Pour le reste une pratique courante de AS3 suffira : syntaxe, événements, variables… rien que de très basique :)

Lire la suite…

 

 

Comprendre les tableaux (Array)

Voici qui s'adresse à ceux que le mot tableau rebute. Extraits tous chauds du forum : “C'est peut-être un peu long, mais les tableaux je les fuis comme la peste” … “Ah oui, un tableau… Mais je débute, je n'y comprends rien !”
A ceux là, et à tous ceux qui s'y reconnaitront, je dis : trop dommage !

Les tableaux, c'est pratique et pas si difficile que ça, voire pas difficile du tout. Vous avez déjà croisé une commode dans votre vie ? Et quand on vous a dit “Va chercher dans le tiroir du haut”, vous y êtes arrivé que je sache ? Et ben voilà, vous savez utiliser les tableaux :)

Donc on peut commencer.

 

 

 

les tableaux multidimensionnels

J'ai rédigé cet appendice afin de régler le sort des tableaux dits à plusieurs dimensions.
C'est une expression qui m'a jetée dans des gouffres d'interrogations quand je l'ai rencontrée, on m'avait dit, pour que je comprenne vite : “Alors voilà : un tableau à deux dimensions tu imagines une grille, à trois dimensions tu imagines un cube, et puis après tu continues pareil…”
Ah oui ? Parce que je suis réputée comprendre la quatrième dimension moi ? C'est trop d'honneur qu'on me fait :) Schrödinger, son chat, sa boîte, j'y réfléchirai dans une autre vie :D

En fait c'est en “arbre” qu'il faut raisonner dès qu'on voyage au delà de la troisième dimension… Mais commençons par le début (sale manie, je sais).

A titre de d'illustration/TP vous pourrez vous essayer à une bataille navale :

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

Parcourir les tableaux

S'adresse à quiconque est déjà familier des tableaux, soit que vous les connaissiez depuis AS2/AS1 voire d'autres langages, soit que vous veniez d'en faire connaissance via les tutos précédents et que dans l'élan… ;)
Toujours est-il que parcourir un tableau à l'aide d'une boucle for (de 0 à tab.length-1) vous est une démarche spontanée.

Il faut savoir que pour parcourir un tableau nous disposons maintenant de cinq méthodes supplémentaires... lire la suite

 

 

 

Les bases de la POO en Actionscript 3, par la pratique, et à l'usage des débutants

Une série de tutos qui s'adressent à ceux qui viennent de l'environnement auteur, toutes les malheureuses victimes de la belle convivialité de notre ami Flash, qui sans forcément avoir de grandes ambitions en développement, voudraient tout de même bien savoir de quoi on leur parle quand la doc donne, pour illustrer l'emploi d'une pauvre propriété, 50 lignes absconses sous forme de package.
Cette série s'adresse aussi à tous ceux qui, comme notre ami Ronchon, ont grand plaisir à utiliser les outils de dessin et d'animation mais n'ont pas l'intention d'en faire plus qu'il n'est nécessaire sans pour autant se priver d'obtenir ce qu'ils veulent…

Introduction
Classe de base (#1)
Classe de base (#2)
Héritage et surcharge (#1)
Héritage et surcharge (#2)
Diffuser des événements
Classe liée
Classe de document
Classe externe : une visionneuse (#1)
Classe externe : une visionneuse (#2)
Classe externe : méthodes statiques

 

 

 

Masques et ActionScript

Tout est dans le titre, sauf le tuto qui est :)

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

Charger des images à la file

Charger des images extérieures ou ajouter dynamiquement des instances de symboles contenant des photos sont des techniques qui, si elle ont en commun les mots plusieurs et images, n'en font pas moins appel à des techniques différentes.

Charger des images contenues dans la bibliothèque
Charger des images extérieures (décrites ou non dans un fichier .xml)

 


Composant Bouton radio : deux trois subtilités

L'utilisation du composant natif ButtonRadio (bouton radio) est en soi simple comme tout, aussi longtemps qu'on reste dans le cadre d'une utilisation ponctuelle, sur un formulaire par exemple. En revanche dès qu'on se pique d'en faire un usage plus large, on se confronte à bien des surprises, pas forcément agréables.

Un formulaire d'enregistrement en plusieurs étapes, par exemple, pourrait vous conduire à la crise de nerfs pour peu que vous souhaitiez permettre à l'utilisateur de revenir sur ses pas, tout en vous assurant que ce même utilisateur a bien choisi une option avant de passer à l'étape suivante.

Quant à des objectifs moins ambitieux, prenons un banal quizz, ça vire vite à fastidieux si on ignore quelques unes des spécificités que je me propose de détailler sur cette page.

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

Dans un deuxième temps je vous proposerai, avec toujours l'alibi du quizz, de résoudre des consignes telles que mémoriser les choix, les réafficher et proscrire la validation d'une question restée sans réponse, ça se passera

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

 

Migration AS2 vers AS3

Voici qui s'adresse à ceux qui développaient sous AS2 et veulent retrouver, vite, leurs petits sous AS3.
Pour explorer, tester, comprendre, on passe tous par l'étape qui consiste à s'y essayer. Quand on a une bonne expérience de l'AS2, les débuts sont déroutants, tout a changé, même poser un pauvre bouton sur la scène et coder son clic ou instancier un symbole vire à compliqué.

J'ai essayé de regrouper ici les éléments de langage principaux qui vous permettront, je l'espère, de mener à bien vos premières investigations sans vous heurter à tout bout de champs à des obstacles surgis de nulle part, en tous cas pas d'où on les attendait… lire la suite

 

 

 

Communiquer avec une base de données en Actionscript via PHP/MySQL

Il s'agira ici de débroussailler le chemin vers les bases de données - à grand coup de serpe, vous peaufinerez ;)

Il sera question du langage PHP dans ses quelques balbutiements fondamentaux, de ses fonctions MySql les plus couramment utilisées et de requêtes SQL.

Pour suivre cette opération de débroussaillage, vous n'aurez besoin (outre un coupe-coupe) que d'une pratique courante de Flash, même pas de connaissances en matière de classes, tout sera mis en exemple sur un fla.
Il faut aussi que vous sachiez créer une base.
Et que vous disposiez à tout le moins d'un éditeur de texte pour les fichiers .php (même notepad ferait l'affaire).
Il sera question de tableaux, vous pouvez vous rafraichir la mémoire ici.

Lire le tuto

 

 

 

Travailler avec les enregistrements d'une base

L'objectif de ce billet est de présenter les trois manipulations de base que l'on est appelés à mettre en œuvre quand on travaille sur les enregistrements d'une base de données, à savoir :
Ajouter
Supprimer
Modifier

Mise en œuvre avec des composants List et DataGrig

Lire le tuto

 

 

 

Les tutos/cours orientés animation

Panneau Transformer (motifs géométriques et perspective)

Pour apprendre à tirer le meilleur parti du panneau Transformer afin obtenir des motifs géométriques et des effets de perspective avec point de fuite. Que vous utilisiez CS3 ou CS4 les techniques sont les mêmes à quelques nuances près que je détaillerai le moment venu. lire la suite

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

Animation : principes et techniques de base

Ce n'est pas un scoop : Flash permet de créer des animations dynamiques et interactives à destination du web (le plus souvent).
Ce n'est pas un scoop non plus : j'ai une furieuse tendance à préférer attaquer les choses par leur début, je me propose donc quelques tutos traitant des principes et techniques de base quand on parle animation. Il y en a peu, une fois ces quelques points assimilés il n'est plus question que de raisonnement et de ruse.

En gros ce seront les prérequis à tout tuto traitant d'animation ;)

Scenario et manipulation des images
Interpolations de mouvement (dites classiques sous CS4)
Interpolation de forme

 


Le mouvement perpétuel

Les principes de l'animation sont simples et peu nombreux. Quoi que vous fassiez tout ne se résumera jamais qu'à insérer des images clé et à appliquer des interpolations de forme (pour les formes) ou de mouvement (pour les instances de symboles).

Le mouvement perpétuel n'échappe pas à la règle il n'est que mise en œuvre de ces principes.
Il ne sera ici question que de triche puisque animer c'est tricher :faire croire au spectateur qu'une succession d'images fixes sont un objet en mouvement, faire croire qu'une barrière est infinie et défile éternellement ou que des arbres surgissent sans fin de l'horizon

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

Masques et interpolations

La technique du masque est en soi simplissime et on pourrait la résumer en deux lignes.
Ce qui est moins résumable, en revanche, c'est sa mise en œuvre combinée à des interpolations. On obtient très facilement des effets tout à fait intéressants sans une ligne de code.
Ce sera l'objet de ce non-tuto.
Je dis non-tuto car le propre du tuto c'est d'illustrer au pas à pas les étapes successives qui mèneront à un résultat, lequel résultat est l'objet du tuto.
Ici je me propose plutôt de vous raconter le quoi du pourquoi du comment de la gestion des masques afin que vous vous l'appropriiez pour inventer des effets chaque fois plus bluffants.

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

 

 

Des tutos -presque- conventionnels (un objectif au pas à pas) :

Carrousel

Pour suivre ce tuto (d'un point de vue AS3), il vous faudra :
• Connaître (un peu) l'objet MovieClip, ses principales propriétés : scaleX, scaleY, et autres x, y, ainsi que les méthodes addChild et addChildAt et l'événement enterFrame (appel récurrent).
• Connaître les événements souris : MouseOver, MouseMove, MouseDown…
Traumatisés des Maths, ne fuyez pas : si vous savez ajouter ou diviser (voire multiplier, soustraire), ça suffira amplement 8-)

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

Une deuxième page complète le tuto en proposant de charger des images externes listées dans un fichier XML et d'intercepter le clic sur les vignettes en récupérant l'information liée, une adresse url par exemple.

 

 

Barre de menus dynamiques

Qu’il s’agisse de naviguer d’une page à une autre, de choisir des images à afficher ou des actions à effectuer, le menu - ou plus précisément la barre de menus - est un classique parmi les premières problématiques qui se présentent à un développeur novice.

Aussi, je vous propose aujourd’hui une technique, parmi tant d’autres, pour réaliser un menu comme illustré un peu plus bas.
On va procéder par étapes : d’abord la construction avec une structure “en dur” (décrite dans le .fla lui même), puis le même menu mais via un fichier .xml.

La structure du menu sera décrite via un tableau deux dimensions, je considère donc que vous êtes au point du principe. Si ce n’est pas le cas un petit détour par ce tuto vous sera certainement utile.
Pour l’étape suivante, il vous faudra bien sûr savoir charger un fichier et parcourir une structure xml (E4X). (ici une fiche mémo)
Quant aux visuels constituant les menus et leurs boutons de commande ce seront des symboles que nous ajouterons dynamiquement

lire la suite…

 

 

 

Une classe Barre de menus

L'objet de ce tuto est de proposer une technique pour faire de la barre de menus.
De nombreuses et diverses voies s'offrent à nous pour atteindre l'objectif et nous en avons déjà explorées quelques-unes à l'occasion du tuto ci-dessus dont la conclusion était, qu'au fin fond du final, la classe reste le meilleur recours.

Ce texte prend donc la suite et considère que vous vous y reporterez en cas de besoin, en effet je ne reprendrai pas le pourquoi du comment de la construction proprement dite, puisqu'elle a y été expliquée au pas à pas.

Je considère par ailleurs que vous savez construire une classe dans les principes fondamentaux et que vous avez une pratique courante d'AS3.

 

 

 

 

Classe Timer, approche

Dans ce tuto, sous couvert de faire neiger, pleuvoir ou scintiller, nous allons voir l'utilisation de la classe Timer dans le cadre d'appels récurrents.
Dit autrement : Comment faire quelque chose à intervalle régulier.

Je suppose que vous savez faire une interpolation de mouvement, technique dite classique (jusqu'à CS3) ou interpolation de mouvement (CS4).
Je suppose aussi que vous connaissez (juste un peu) la classe MovieClip. Que vous en connaissez les principales propriétés (x, y, scaleX…) ainsi que la méthode addChild.
Puisque c'est le cas 8-), allons y !

 

 

 

Guirlande et clignotements - Utilisation de symboles de type "Graphique"

C'est un tuto 100% animation donc pas une goutte code, pour le suivre il suffit que vous connaissiez les outils de dessin, même superficiellement, que les expressions Clips, Graphique, bibliothèque ainsi que les notions fondamentales d'animation ne vous soient pas étrangères.

Ce qui nous intéresse ici, c'est le fait que les ampoules clignotent selon un rythme tel qu'elles semblent se “recouvrir” (les bleues) ou se déplacer (les autres).
A première vue, rien de bien compliqué là dedans - à deuxième non plus, d'ailleurs. Il se trouve seulement que des deux techniques possibles, on pourrait être tenté de se précipiter sur la moins bonne ;)

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

 

 

Un jeu de classe avec le mode d'emploi

Ecriture à main levée, dessin progressif

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

Le gros du travail n'a à voire qu'avec l'environnement auteur, et je m'adresse ici aux grapheux.
Je considère donc que vous savez utiliser les outils de dessin de flash (plume, sous-sélection, déco, remplissage, transformation, etc.), que le menu Modification et ses commandes vous est familier ainsi que l'usage de la bibliothèque, des symboles, des instances…

Pour obtenir l'effet dessin progressif sur une phrase ou un tracé vous n'aurez qu'une ligne de code à saisir après avoir associé une classe au symbole concerné.

lire la suite