Présentation du logiciel Flash avec actionscript

Qu’est-ce que le logiciel Flash ? Présentation du logiciel

Flash est un outil logiciel qui permet de développer des applications on-line et off-line multi-plate-formes.
Flash est aujourd’hui à la fois un “ logiciel auteur ” et un outil de développement qui dispose d’un langage de programmation natif évolué “ ActionScript ”. Ces deux aspects sont complémentaires, pour développer des projets performants dans Flash, il faut les maîtriser tous les deux.

Généralement on aborde tout d'abord l’outil Flash en tant que “ logiciel auteur ”. Ensuite on s'y intéresse progressivement en tant qu’outil de programmation.
Dans sa partie “ logiciel auteur ” le logiciel Flash est conçu pour créer des animations pour le WEB, il est spécialement dédié aux animations d'images vectorielles. L'extension du fichier est alors .fla.

Flash et les images vectorielles

Dans une image vectorielle les formes sont définies par des points d’ancrage et des vecteurs. Toutes ces caractéristiques (points, vecteurs, couleurs, traits…) sont définies par des formules mathématiques. Leurs dimensions ne sont pas fixes, elles ne sont pas définies par des mesures et peuvent être redimensionnées à volonté, sans perte de qualité, ni modification de poids.
Lorsqu’on redimensionne une image vectorielle elle est recalculée mathématiquement. Le poids d’une image vectorielle est totalement indépendant de son format. Les données enregistrées définissent les rapports entre les points et les formes.
Alors qu’une image bitmap est définie par le nombre et les caractéristiques des pixels qui la composent.
Une image vectorielle est par nature beaucoup plus “ légère ” qu’une image bitmap
C’est parce que flash est dédié au format vectoriel qu’il permet de créer des animations très légères et fluides.

Flash et les différents OS

L'avantage du logiciel Flash est que l'on puisse garder la conception graphique originale sur l'ensemble des plates-formes, et sur l'ensemble des navigateurs. On crée ainsi une application plates-forme.
On peut utiliser aussi des police non-système sans pour autant perdre la mise en page, lors de son exportation en SWF, car on peut les inclure les polices dans le fichier d'exportation SWF.

Le plug-in Flash :

Les navigateurs ne reconnaissent pas directement le format flash. La lecture des animations nécessite de la part de l'utilisateur le téléchargement et l'installation du plug-in correspondant à la version de flash pour laquelle l'animation a été publiée.

Dans le contexte de travail, lorsque l'on créé l'animation qui sera mise en ligne, c'est-à-dire lorsque l'on « publie » l'animation, on peut choisir pour quelle version du lecteur Flash cette animation sera lisible. Pour des raisons de compatibilité on a intérêt à publier l'animation pour la version de plug-in la plus répandue. Aujourd'hui c'est la version 9 ou 10, alors que la version 11 du logiciel est déjà commercialisée. Mais on ne peut le faire que si les fonctionnalités mises en œuvre dans l'animation sont compatibles avec cette version antérieure. Si de nouvelles fonctionnalités sont utilisées - qui sont propres à la dernière version - on publiera l'animation dans cette version, mais on contraindra l'utilisateur à installer la dernière version du plug-in flash pour la lire.

Donc, même si aujourd'hui le plug-in Flash est pré-installé dans les nouvelles versions des navigateurs, la mise à jour des versions reste nécessaire. De plus l'utilisation de flash est proscrite dans certains cas, notamment pour certains réseaux intranet ou extranet dans des contextes d'entreprises qui refusent l'installation de plug-in sur les postes utilisateurs.

Flash et Html 5

Le plug-in Adobe Flash Player a été refusé par Apple Ios sur les iPhone et les tablettes iPad. Adobe Flash player n'est plus utilisé par Google Android à compter de la version 4.1. Est-ce la fin du logiciel Flash?
Adobe propose de compiler l'actionscript en Html 5 dans la dernière version pour conjurer cette menace

La lecture streaming avec Flash:

Une animation Flash est lue en “ streaming ”.
Streaming : de l’anglais “ stream ” : flux (de données).
Procédé qui permet d’exécuter immédiatement les parties reçues des fichiers pendant leur téléchargement . Une animation Flash peut donc être vue par l’utilisateur dès la première image de l’animation chargée (ce qui augmente la rapidité d’accès).

Cependant les éléments présents sur chaque image nécessitent un temps de téléchargement proportionnel à leur poids et il est nécessaire de créer des animations de chargement ou « loading » afin que l’animation Flash ne se déclenche que lorsque suffisamment d’éléments sont déjà chargés. Sinon elle risque de s’arrêter pour attendre le chargement des éléments présents sur l'image suivante.
Ces “ loading ” permettent de présenter à l’utilisateur une animation basique et ultra légère (vectorielle), qui donne des informations à l’utilisateur (ce qui se passe : le système est en train de charger l’animation, éventuellement : quel est le taux de chargement effectué…). L’animation se lira ensuite de façon fluide.

Le vectoriel et le bitmap dans le logiciel Flash.

Flash permet de créer des dessins vectoriels, ainsi que d'importer des graphismes vectoriels et des images bitmap. Même si flash n'est pas dédié à l'animation de bitmaps, il peut en intégrer et les animer. La mise en place d'animations de chargement permet d'utiliser également des images bitmaps, des sons et des vidéos. Cependant il est indispensable de limiter la taille de ces fichiers, de les optimiser le mieux possible, et d'éviter de créer des déplacements de bitmaps (sinon ces animations présenteront des à-coups). Les médias doivent impérativement être préparés, formatés et optimisés avant d'être importés dans Flash, sinon le fichier Flash publié ne sera pas correctement optimisé). Les images devront être préparées dans le bon format et compressées dans le format adaptées, les sons et les vidéos devront être préparés, montés et optimisés...

Nous verrons qu'il est également possible d'utiliser des techniques d'organisation de projet qui permettent aussi de palier les difficultés de chargements.
Le média le plus lourd est la vidéo. Auparavant la vidéo était nécessairement incluse dans une animation flash et optimisée grâce au codec de compression intégré « sorenson spark ». Or depuis la version 7 de Flash (MX 2004 version « pro »), il est possible d'externaliser les fichiers vidéos et de les lire en streaming, ce qui allège considérablement le poids du projet

Lecture dynamique des fichiers FLV externes

Plutôt que d'importer des données vidéo dans l'environnement auteur de Flash, on peut lire dynamiquement les fichiers FLV externes à travers une animation Flash. On peut même lire des fichiers FLV téléchargés (ou placés sur un support local s'il s'agit d'un produit off-line).
On créé les fichiers FLV en important la vidéo dans l'outil de création Flash et en l'exportant en tant que fichier FLV.

Formation et Tutorial actionscript pour Flash AS3

Formation et tutoriel Actionscript pour Flash AS3

• Présentation logiciel Flash
• Principe actionscript 3
• Principes généraux logiciel
  
• Fonctionnement texte dans Flash : statique, saisie, dynamique, TXT, XM 
• Flash et le référencement Google 
• Comparaisons logiciel Flash et Director
• actionscript AS3 Manipuler dynamiquement des occurrences de clips
•  actionscript AS3 structure boucle for var
• actionscript AS3 addChild index affichage
• actionscript AS3 couplage fichier .fla et .as
• actionscript AS3 graphics dessiner formes 
• actionscript AS3 liste affichage liste conteneur 
• actionscript AS3 écouteur événement Flash 
• actionscript AS3 clavier déplacement sprite
• actionscript AS3 rollover dynamique

 Formation actionsript Flash pour Flash AS2

• actionscript2 : Flash MX chemin.commande.arguments
• actionscript2 : Objets d'affichage et listes d'affichage
  
• actionscript2 : global.maFonction function(arguments)
• actionscript2 :  LoadMovieNum Construire projet Flash
•  Flash function(arguments) instructions. Les variables à portée locale et globale

Actionscript structure boucle for var et MULTIPLICATION DYNAMIQUE DES OCCURRENCES

MULTIPLICATION DYNAMIQUE DES OCCURRENCES ActionScript CS3 : les structures de boucles

Nous allons pouvoir également créer 6 copies de cette occurrence et les placer en-dessous de la première.
Nous allons pour cela utiliser une boucle de traitement « for ».

Structure de la boucle for :

for (var i:int=0; i<6; i++){
faireCela;
}

La commande « faireCela » sera exécutée 6 fois, depuis la valeur 0 prise par la variable locale i jusqu'à la valeur 5 prise par celle-ci.
Ici nous allons ajouter dans notre fonction constructeur :

for (var i:int=0; i<6; i++){

}

Afin de:

• créer une nouvelle occurrence de MC_perso nommée monPerso2;
• placer verticalement cette occurrence;
• placer horizontalement cette occurrence en décalage par rapport à la précédente;
• diminuer la largeur de cette occurrence;
• diminuer la hauteur de cette occurrence;
• ajouter cette occurrence à la liste d'affichage

Ce code sera après le précédent « addChild », ce qui donnera :

for(var i:int=0; i<6; i++){

var monPerso2:MC_perso = new MC_perso ();
monPerso2.x = 80*i+70;
monPerso2.y = 300;
monPerso2.scaleX = .3;
monPerso2.scaleY = .3;
addChild (monPerso2);

}

Dans la ligne monPerso2.x = 80*i+70;

80 est le pas de déplacement horizontal de la nouvelle occurrence par rapport à la précédente, 70 est la coordonnée x de la première des occurrences créée dans la boucle.

CODE COMPLET SCRIPT AS3 MANIPULATION DYNAMIQUE OCCURRENCES CLIP

package{

import flash.display.*;
public class perso_01 extends MovieClip {

public function perso_01 () {

var monPerso:MC_perso = new MC_perso ();
monPerso.x = 150;
monPerso.y = 120;
monPerso.scaleX = .7;
monPerso.scaleY = .7;
addChild (monPerso);
for (var i:int=0; i<6; i++){

var monPerso2:MC_perso = new MC_perso ();
monPerso2.x = 80*i+70;
monPerso2.y = 300;
monPerso2.scaleX = .3;
monPerso2.scaleY = .3;
addChild (monPerso2);

}

}

}

}

Actionscript import flash.display addChild Manipuler dynamiquement des occurrences de clips

Manipuler dynamiquement des occurrences de clips avec AS3

Dans Flash CS3 il y a plusieurs manières de travailler directement avec des occurrences de clips.

La plus classique est de nommer l'occurrence d'un clip placée sur un scénario, en passant par l'inspecteur de propriétés de cette occurrence.

Avec ActionScript AS3 on va le plus souvent procéder autrement afin de piloter dynamiquement les occurrences à partir d'un fichier de code externe « .as ».

Copiez sur votre disque puis ouvrez le fichier « perso_01.fla ». Il contient seulement un clip de bibliothèque (un personnage vectoriel).

Sélectionnez le clip directement dans la bibliothèque puis ouvrez le panneau « liaison » dans le menu déroulant de la bibliothèque, ou bien par clic droit sur l'icône de ce clip. Le panneau « propriétés de liaison » apparaît. Cochez la case « exportez pour ActionScript ».

Le panneau se modifie comme suit : Flash donne à la classe qu'il associe au clip le nom du clip. Il est préférable de conserver cette logique. Il définit par défaut la classe associée. Celle-ci est ici la classe MovieClip. Conservez la case cochée « exporter dans la première image ».

Vérifiez dans le panneau de propriétés de l'animation que votre animation est bien liée à la classe « perso_01 » (case « classe du document »). Créez maintenant un nouveau fichier ActionScript que vous nommerez immédiatement « perso_01.as ».

Fenêtre propriétés de lien de Flash

Commencez par inclure la classe d'affichage des objets sur la scène :

package {

import flash.display.*;

Créez ensuite une classe publique « perso_01 » liée à la classe interne « MovieClip »

public class perso_01 extends MovieClip {

Créez ensuite une fonction constructeur publique « perso_01 »

public function perso_01() {

var monPerso:MC_perso = new MC_perso ();

addChild (monPerso);

Nous avons d'abord créée une occurrence « monPerso » de la classe exportée à partir du clip. Ensuite nous ajoutons cette occurrence à la liste d'affichage grâce à « addChild ».

Ce qui donne le code complet :

package {

import flash.display.*;
public class perso_01 extends MovieClip {

public function perso_01() {

var monPerso:MC_perso = new MC_perso ();
addChild (monPerso);

}

}

}

Enregistrez votre fichier de code afin de valider votre script. Sélectionnez l'onglet de l'animation « perso_01.fla » et testez par Ctrl + entrée.

REMARQUE
vous devez tester depuis l'animation et non depuis le fichier de code.
Il faut veiller à enregistrer les dernières modifications avec de publier.

Vous devez visualiser seulement une partie du personnage, en haut à gauche de la scène. En effet, par défaut l'occurrence du clip créée a pour coordonnées (0,0). Donc le centre de l'occurrence coïncide avec le coin supérieur gauche de la scène.
Nous allons maintenant ajouter des lignes de code dans la fonction constructeur afin de déplacer l'occurrence et de réduire son échelle d'affichage:

public function perso_01() {
var monPerso2:MC_perso = new MC_perso ();
monPerso.x = 150;
monPerso.y = 120;
monPerso.scaleX = .7;
monPerso.scaleY = .7;
addChild (monPerso);

}

COMMENTAIRES CODE AS3

accès aux coordonnées :

monOccurrence.x pour la coordonnée x de monOccurrence
monOccurrence.y pour la coordonnée y de monOccurrence

accès à l'échelle :

monOccurrence.scaleX pour l'échelle de la largeur de monOccurrence (nombre décimal entre 0 et 1, valeur 1 = 100% de la largeur d'origine);

monOccurrence.scaleY pour l'échelle de la hauteur de monOccurrence (idem)

ATTENTION :
EN ACTIONSCRIPT AS3 on ne fait plus précéder les méthode d'un underscore.

Enregistrez votre fichier de code afin de valider votre script. Testez par Ctrl + entrée.

Flash et le référencement naturel dans les moteurs de recherche.

Flash et le référencement naturel, comment l'optimiser?

Le référencement est l'ensemble des techniques qui permettent d'inscrire un site dans les moteurs de recherche ou dans les annuaires. Le positionnement, représente l'art d'optimiser la place du site dans les réponses fournies par les moteurs de recherche.

Une animation en Flash (ou un menu ou toute autre interface) placée dans une page web se présente sous le forme d'un fichier « Shockwave Flash » (extension « .swf »). La page web contenant ce fichier est une page HTML avec une balise qui indique au navigateur d'inclure ce fichier Flash.

Le problème lié au référencement est que la plupart des robots d'indexation ne "voient" pas le contenu du fichier Flash, ils n'indexent, pour la plupart, que du contenu textuel au format HTML. Si tout le site est construit en Flash, le robot ne verra que des fichiers HTML quasi vides, ce qui sera catastrophique du point de vue du référencement.

Comment référencer un site en Flash ?

Pour mettre en ligne un projet Flash au moins une page HTML est nécessaire, celle qui "lance" l'animation Flash. Cette page est prise en considération par les moteurs.

Il faut donc utiliser de la façon la plus optimisée possible les balises HTML de cette page:

• balise TITLE : certainement la plus importante, contenant les mots clés du contenu de l'animation.
  
• balise META NAME="DESCRIPTION" CONTENT contentant une description simple du contenu de l'animation, avec des mots clés résumant la page.
  
• balise META "Keywords" ne soit quasiment plus prise en compte aujourd'hui, mais un doute subsiste.
  
• balise NOEMBED Insérer le plus possible de texte (sans spammer, c'est-à-dire sans répétition abusive de mots clés), mais cette balise n'est pas conforme aux recommandations du W3C. Attention au blacklistage par sa mauvaise utilisation, avec l'utilisation de mots clefs sans rapport au contenu de fichier Flash.
  
• balise OBJECT avec du texte alternatif, qui peut aussi inclure des liens,
• balise ALT du fichier SWF remplie.

Les alternatives pour référencer un site en Flash:

• Il faut proposer en ligne une version HTML du site avec du contenu texte.
• Lier des fichiers textes (txt, PDF,...) au site Flash (voir Utilisation du texte dans Flash )
• Passer par les offres de positionnement publicitaire comme Adwords pour être certain d'être en tête de liste.
• intégrer l'animation avec swfObject.
• Utilisation de swfAddres pour l'accès direct. 

Certains moteurs de recherche indexent le Flash

Certains moteurs commencent à s'intéresser au problème de l'indexation des documents Flash d'une part pour se démarquer de leurs concurrents, et d'autre part pour rendre "visibles" tous les sites créés uniquement en Flash. Mais attention de ne pas vectoriser les polices utilisées. Un choix est à faire au moment de la conception.

Fonctionnement texte dans Flash : statique, saisie, dynamique, TXT, XML

Le logiciel Flash peut être utilisé à plusieurs niveaux :

• on peut créer une animation simple pour une page web. Cette animation peut ou non contenir des éléments interactifs internes,
• on peut insérer une animation interactive dans une page web et programmer son interactivité pour qu'elle modifie le contenu de la page. C'est le cas des menus interactifs en Flash par exemple,
• on peut également créer un site entièrement en Flash. Dans ce cas la première animation du projet sera placée dans une page HTML nommée « index.htm ». Cette page - ainsi que l'ensemble des fichiers qui composent le site - seront mis en ligne sur le serveur contenant le projet.

Utilisation du texte dans le logiciel Flash :

Le logiciel Flash propose un outil texte qui permet de créer des textes de 3 natures différentes :

• texte statique : il s'agit d'affichage de texte standard (éléments « graphiques »),
• texte de saisie : cela permet à l'utilisateur d'entrer des informations qui pourront être traitées par le programme,
• texte dynamique : cela permet au programme d'afficher des informations à l'utilisateur.

On peut également travailler le texte de façon beaucoup plus dynamique :

• on peut lier des fichiers textes.txt externes qui apparaîtront dans des champs textes dynamiques à l'intérieur de l'application Flash,
• on peut utiliser des langages de programmation et des bases de données qui pourront dialoguer avec le logiciel Flash : XML, php / mysql...
  

Ces deux dernières techniques facilitent énormément les mises à jour de contenu. On les utilisera pour la gestion de contenu d'un site Flash en CMS.

Comparatif comparaison Flash et Director

Présentation du logiciel Flash et comparaison avec le logiciel Director

Le logiciel Flash permet de créer des fichiers auto-executable au format PC et Mac . Ces publications principales sont sur Internet. Mais il est aussi maintenant très facile de créer une application off-line avec Flash. Au lieu de créer une page web « index » contenant la première animation du projet, on va créer un fichier auto-exécutable à partir de cette première animation. Sur PC cet « auto-exe » sera très facilement associé à un fichier « autorun » qui permet de lancer automatiquement la lecture de l'application lorsque l'on insère le CD-Rom dans le lecteur. Un projet de CD-Rom en Flash est construit exactement de la même manière qu'un projet on-line.
Un autre logiciel du même éditeur (Macromedia) est dédié à la fabrication de CD-Rom. Il s'agit de Director.
Le logiciel Director est un logiciel auteur qui possède aussi un langage de programmation natif, le « LINGO ». C'est un langage très intuitif, avec une syntaxe beaucoup moins stricte que d'autres langages. Director n'est pas un logiciel d'animation, mais plutôt un assembleur de médias.

Director est dédié aux médias « lourds » : bitmaps plein écran en haute qualité, ce logiciel est particulièrement performant pour la gestion de la vidéo « plein écran ».
Jusqu'aux versions récentes de Flash (à partir de la version 8 essentiellement), Director gardait un avantage certain pour l'utilisation et le pilotage de la vidéo. Depuis que Adobe à racheter Macromedia et depuis les possibilités de lecture de vidéo externe en streaming, Flash tend à supplanter Director sur ce marché.

De plus Director est un outil beaucoup plus couteux que Flash ce qui a également pour conséquence de réduire son implantation. Enfin il y a beaucoup moins de personnes formées sur Director que sur Flash, car Flash s'est beaucoup démocratisé depuis quelques années.

La tendance générale est de plus en plus à développer les applications off-line sous Flash.

Principes généraux logiciel Flash MX chemin.commande.arguments

Voici les principes généraux logiciel Flash MX.

Flash est un logiciel complexe.
Chaque animation flash possède une scène principale (voir plusieurs “ scènes ”), qui possède sa propre “ tête de lecture ”.
A l’intérieur de chaque animation on peut créer un certain nombre d'éléments de nature différentes :

• les symboles graphiques : ce sont des éléments graphiques statiques ou animés,
• les clips : ils ressemblent beaucoup aux symboles graphiques, mais ils ont pour avantage essentiel de pouvoir être pilotés par programmation, ce qui n'est pas le cas des symboles graphiques. De plus la tête de lecture d'un clip est indépendante, alors que celle d'un symbole est liée à celle de la scène principale.
• les boutons : conçus pour créer l'interactivité, ce sont les éléments déclencheurs. Très faciles à créer dans flash, avec leurs différents états, ce sont les éléments prévus pour déclencher une action de l’utilisateur au moyen de la souris. On peut également attacher des événements utilisateurs à des clips, mais les possibilités sont différentes.
• Les composants sont des éléments fournis avec le logiciel Flash. Un composant est un clip qui contient des paramètres prédéfinis : des événements, des propriétés et des méthodes servent à en personnaliser l'apparence et le comportement. Ils permettent aux développeurs de réutiliser et de partager du code, ou encore de créer des fonctionnalités complexes sans avoir à se servir d'ActionScript. Ils peuvent être de simples contrôles d'interface utilisateur, (comme un bouton radio ou une case à cocher), ou d'un contenant (comme un panneau défilant). Un composant peut également être « invisible » s'il s'agit uniquement de code ActionScript.

Flash fonctionne comme un jeu de poupées russes.

Toute la richesse de Flash consiste dans le principe d’emboîter tous ces éléments : clips dans d’autres clips, etc... Vous pouvez créer une mini animation dans un Clip, que vous insérez ensuite comme un état de bouton.
On utilise également beaucoup l’astuce des boutons transparents, pour créer des effets déclenchés par le survol de la souris sur l’écran, sans avoir à passer par un objet. En effet le seul état indispensable d'un bouton est la détermination de sa zone cliquable.
On peut également jouer plusieurs animations sur des niveaux différentes (voir « construire un projet dans Flash »).

DONC, devant cette complexité, avant de créer un projet en flash il faut réaliser un story-board ou un document préparatoire afin de prévoir comment emboîter les éléments et quels types d’éléments choisir, ce qui revient à écrire un découpage précis du projet (on est proche de la philosophie du cinéma).

La programmation dans Flash :

• Le langage natif de Flash est l'ActionScript.
• ActionScript est un langage de script orienté objet offrant un contrôle sur la lecture de votre contenu Flash. La version 2.0 d' ActionScript a évolué vers la programmation orientée objet.
• Flash utilise un langage de programmation qui ne compile pas les scripts, c’est-à-dire qu’une animation Flash comprend de nombreux scripts éparpillés. Les langages « classiques » auraient assemblés tous ces scripts en un seul, ce qui s’appelle « compiler ». Flash, au contraire, fait dialoguer les scripts entre eux. Les versions récentes de Flash permettent cependant de compiler une partie des scripts, mais en général il y a cohabitation avec des scripts « locaux ».

L'affectation du code dans Flash.

• Les éléments pilotables par programmations sont :
• les clips
• les composants
• les boutons
• les têtes de lecture via les scripts de scénario.

 Les boutons (et les clips) sont les éléments déclencheurs, qui permettent à l'utilisateur d'interagir sur le programme.
On peut affecter le code directement sur les éléments déclencheurs, ou bien nommer les occurrences de ceux-ci et leur affecter le code par programmation, dans un script compilé ou non.
Occurrence : c'est un élément particulier placé dans une animation que l'on va nommer pour pouvoir la piloter. Seules les occurrences de clips, de boutons et de composants peuvent être nommées dans Flash. Les occurrences de symboles graphiques ne peuvent pas être nommées, et ne peuvent donc pas être pilotées par programmation.

Structure des instructions en ActionScript

Pour écrire un script qui pilote une occurrence en ActionScript il faut connaître :

1) le chemin qui même à cette occurrence,
2) le nom de cette occurrence,
3) la commande que l’on veut lui demander d’exécuter,
4) éventuellement les détails qui précisent cette commande : qu’on appelle les arguments.

 Cette structure donne en Action script :

chemin.commande (arguments) ;

Flash function(arguments) instructions. Les variables à portée locale et globale en AS2

Créer une fonction ActionScript 2 dans le logiciel Flash

Les fonctions sont des scripts nommés et utilisables en appelant simplement leur nom.
Les fonctions peuvent être créées dans un script de scénario, ou bien dans un script de bouton ou de clip.
Pour déclarer une fonction :

function nomFonction (arguments){
instructions ;
}

Ou bien (équivalent)

nomFonction = function(arguments){

instructions ;

}

Il peut y avoir un grand nombre de lignes d'instructions. Lorsque vous faites ensuite appel à cette fonction par son nom, les instructions définies ici seront exécutées (une fonction n’a pas nécessairement de paramètres à définir).

La portée des variables et des fonctions dans Flash

Comme de nombreux langages de programmation ActionScript propose 2 niveaux de portée des variables et des fonctions.
Une variable est une portion de mémoire « nommée » dans laquelle le programme peut stocker une information. Le nom de la variable permet ensuite d'utiliser la valeur qu'elle contient au moment précis où on l'appelle.
Les variables, aussi bien que les fonctions ont une portée locale ou globale, selon la façon dont on les a déclaré.

• La portée locale correspond à une reconnaissance réduite à un seul script. Une variable ou une fonction locales seront reconnues seulement au sein du script dans lequel elles ont été créées.
• La portée globale permet d'étendre cette reconnaissance à l'ensemble d'une animation ou d'un projet, c'est à dire sur plusieurs animations qui dialogueront entre elles (voir « construire un projet dans Flash »).

 Pour déclarer une variable ou une fonction comme globale il faut et il suffit d'ajouter la formule « _globale.» devant son nom (voir ce qui suit).

Créer un fonction globale dans Flash

Pour créer une fonction globale au lieu de la déclarer ainsi :

nomFonction = function(arguments){
instructions ;
}

Il faut la déclarer ainsi :

_global.nomFonction = function(arguments){
instructions ;
}

Les fonctions sont la plupart du temps créées pour être réutilisées dans un autre script, elles sont donc la plupart du temps globales.

Actionscript AS2 _global.maFonction function(arguments)

Le code externalisé dans le logiciel Flash

Le principe des codes non compilés dans le logiciel Flash est déroutant pour les programmeurs. Il correspond mieux aux utilisateurs de Flash non programmeurs de formation (graphistes, animateurs). Cette philosophie de Flash a permis son succès : un nombre très important d'utilisateurs a pu s'approprier le logiciel, sans posséder nécessairement un niveau de programmation élevé.

Cependant - pour répondre à l'utilisation grandissante de l'outil par les programmeurs de formation, et pour leur offrir des outils de programmation plus proches de leur philosophie - Flash s'est adapté en proposant des possibilités de créer du code « compilé », c'est-à-dire de regrouper le plus possible le code dans des fichiers distincts. On peut ainsi créer des fichiers contenant uniquement des scripts ActionScript et les appeler par insert dans des scripts de scénarios.

Procédure d'un code externe dans le logiciel Flash

• pour créer le fichier de code : menu nouveau / fichier ActionScript ce qui créé un fichier : monCode.as dans lequel vous allez déclarer les fonctions comme globales. Ce fichier contiendra uniquement du code ActionScript,
• dans l'autre fichier FLA dans lequel vous voulez inclure le code, vous ajouterez la ligne de commande :

#include "cheminComplet/monCode.as"

• ensuite, soit une fonction globale déclarée dans ce fichier, vous pourrez la rappeler de n’importe quel endroit du projet.Soit la fonction globale « maFonction » déclarée dans un fichier de code monCode.as :

_global.maFonction= function(arguments){
instructions ;
}

•  Le fichier monCode.as sera ensuite inclus dans le projet par :

        #include "cheminComplet/monCode.as"

On pourra ensuite appeler et faire exécuter la fonction contenue dans ce code.

LoadMovieNum Construire un projet actionscript AS2

Construire un projet dans le logiciel Flash en ActionScript AS2

Il y a plusieurs têtes de lecture dans Flash, au niveau de chaque animation (tête de lecture de la scène principale, des clips...) mais on peut également superposer plusieurs animations (fichiers « swf »). C’est le principe du travail avec les niveaux ou « _level ».
Il est très utile de travailler sur plusieurs niveaux lorsqu’on réalise un projet important dans Flash. Cela permet de morceler le poids global du projet en animations plus légères. De ce fait l’utilisateur peut rapidement visualiser une partie du contenu en attendant le chargement des autres niveaux. Chaque niveau peut comporter une animation de contrôle du chargement de son contenu. Les niveaux peuvent aussi contenir des animations contenant seulement du son ou de la vidéo.
Le projet Flash sera « lancé » par la première animation nommée par exemple « lanceur.swf », qui sera chargée par défaut au niveau 0.
Le niveau 0 est opaque, il a pour couleur de fond la couleur de l'animation qui y est chargée. C’est donc la couleur de fond de la première animation, chargée par défaut au niveau 0, qui détermine la couleur de fond du projet. Les autres niveaux sont des couches dont le fond est transparent. Lorsqu’on travaille avec les niveaux le fond des animations chargées au-dessus du niveau 0 n’existe pas.
Les animations chargées sur des niveaux différents conservent leur interactivité. Ce principe permet d’activer simultanément les interactivités présentes sur toutes les couches chargées.

Principe d'organisation d'un projet Flash

ATTENTION :

On peut charger une seule animation « .swf » par niveau à un instant donné.

On dispose de 16 000 niveaux dans Flash. Il n’est pas nécessaire d’utiliser les niveaux successifs, il est plutôt recommandé de laisser des niveaux libres pour pouvoir intercaler des animations en cas de besoin.

Les éléments placés sur les couches supérieures peuvent masquer des éléments interactifs.

Conduite de projet d'un projet Flash

Pour travailler avec le principe des niveaux il est indispensable de noter par écrit la distribution des niveaux que l’on décide par avance, il s’agit d’un tableau d’affectation des niveaux :

animation	contenu	niveau
lanceur.swf	Code permettant de charger les premières animations du projet	0
fond.swf	rectangle dégradé se fondant partiellement dans le fond, un bouton « quitter », les deux éléments apparaissant en fondu d’apparition	10
contenu.swf	2 textes : chapitre 1 et chapitre 2	20
navigation.swf	2 boutons, chapitre 1 et chapitre 2 pour afficher les 2 textes de « contenu.swf »	10

Il est également indispensable, comme dans tout projet Multimédia ou informatique, de déterminer auparavant l'arborescence des fichiers:

Arborescence d'un projet Flash

Exemple de construction d’un projet de cédérom développé en Flash

Au premier niveau:

• on trouve, en plus du fichier « lanceur.swf » les éléments pour lancer le projet: « projet.exe » qui est l’auto-exécutable du projet (qui ne nécessite AUCUNE application, lecteur ou plug-in pour fonctionner).
• « autorun.inf » permet de lancer automatiquement le projet sur PC (à l’insertion du cédérom dans le lecteur)
• « icone.ico » permet d’afficher une icône sur le bureau de l’utilisateur , personnalisation du raccourci du lecteur cédérom (géré par « autorun.inf »)

Au deuxième niveau on trouve, le contenu du projet.

Le script Level, les différentes instructions ActionScript utilisées :

• Pour charger une animation sur un niveau (_level), on utilise le script: loadMovieNum(«chemin/mon_anim.swf », n°_niveau);
  
  Script pour cet exemple
  loadMovieNum("DATA/CONTENU/contenu.swf",20);
  
  
• Pour décharger un niveau :
  unloadmovieNum(n°_niveau);
  « n°_niveau» correspond à un numéro de couche. Il y en a 16 000 disponibles. 

REMARQUES

Pour décharger un niveau, inutile de préciser l'animation qui s'y trouve, mais seulement le numéro du niveau à décharger.

Si vous chargez une animation sur un niveau en comportant déjà une, la nouvelle animation remplace la précédente

CONTENU des ANIMATIONS.fla dans cet exemple.

Le lanceur sert simplement à charger les animations aux niveaux pré-déterminés.
Le fond contient un rectangle sans contour rempli d’un dégradé semi-opaque, et un bouton placé en bas à droite permettant de quitter l’application.
Le contenu contient deux textes différents correspondant à deux chapitres différents. Ces textes sont placés sur des images repérées et nommées. Ce fichier est calé sur une image sans contenu au départ, afin qu’il soit invisible tant que l’utilisateur n’a pas cliqué sur l’un des boutons « chapitres ».
La navigation contient deux boutons permettant de faire varier l’affichage des textes du contenu.

ATTENTION :

Toutes les animations du projet doivent avoir les mêmes caractéristiques : format de scène, cadence et couleur de fond.

Création du fichier Flash lanceur.fla

• Nouvelle animation, choisir une couleur de fond différente du blanc.
• Nommez le calque « actions »
• Script d’image sur la première image :

loadMovieNum("DATA/FOND/fond.swf",10);
loadMovieNum("DATA/CONTENU/contenu.swf",20);
loadMovieNum("DATA/NAVIGATION/navigation.swf",100);

•  Enregistrez le fichier : lanceur.fla dans le dossier « PROJET ». Publiez l’animation : CTRL + ENTER pour créer le fichier « lanceur.swf ».
• Un message d’erreur apparaît car Flash ne trouve pas les 3 animations car elles n’existent pas encore, c’est donc normal, n’en tenez pas compte.

ATTENTION : 

• pour tester le passage entre les différents niveaux il faut impérativement : - publier chaque animation (afin de créer le fichier swf à charger),
• repartir du lanceur pour tester (puisque c’est l’animation qui affecte les niveaux).
  

Création du fichier Flash intro.fla 

• « Enregistrez-sous » lanceur pour créer « fond.fla », dans le dossier DATA/FOND.
• Remplacez le script de la première image du scénario par l’action « stop() ; ».
• Ajoutez 2 calques sous le calque « actions ».
• Nommez le premier calque « fond ». Tracez-y un rectangle sans contour rempli d’un dégradé linéaire blanc/noir.
• Modifiez le dégradé pour que le blanc soit en partie transparent (panneau mélangeur, diminuez la valeur d’alpha du blanc).
• Nommez l’autre calque « bouton ». Ouvrez la bibliothèque des boutons flash. Faites-glisser le bouton de votre choix sur la scène. Positionnez-le en bas à droite du rectangle.
• Sélectionnez le bouton sur la scène et affectez-lui le script suivant :

on (release) {
    fscommand("quit", "");
}

• ou bien nommez l'occurrence du bouton « bt_quit » (par l'inspecteur de propriétés) et créez un script sur le calque action :

bt_quit.onRelease = function(){
    fscommand("quit", "");
}

• Revenez dans « lanceur » et testez, votre fond doit apparaître. Un message d’erreur signale que 2 animations n’ont toujours pas été trouvées, ce qui est normal, elles n’existent pas encore, par contre « fond.swf » a été trouvée.

ATTENTION

Vous ne pouvez pas tester le bouton quitter (il faut pour cela créer l’auto-exécutable).

Tapez CTRL + ENTER pour publier l’animation.

Création du fichier Flash contenu.fla

• Repartez du lanceur, enregistrez-sous « contenu.fla » dans le dossier DATA/CONTENU.
• Remplacez le script de la première image du scénario par une action « stop() ; ».
• Créez 2 nouveaux calques, placés en-dessous du précédent.
• Nommez le second « label », il servira à nommer vos images.
• Nommez le troisième (placé en-dessous) : « textes ».
  

• Ne placez aucun contenu sur la première image-clé de ces calques.
• Ajoutez une image-clé à la seconde image du scénario (touche F6), sur les 3 calques simultanément. La première image-clé restant vide.
  

A cette image 2 :

• Ajoutez une action « stop() ; » sur le calque « actions »
• Sur le calque « label » nommez l’image « C1 », elle servira de repère au texte du chapitre 1.
• Sélectionnez l’image-clé du calque « texte » (toujours à l’image 2) et tapez sur la scène un texte de repérage « chapitre 1 ».
• Sélectionnez simultanément les images des 3 calques à l’image 10, créez une image-clé (F6).

A cette image 10 :

• Ajoutez une action « stop() ; » sur le calque « actions »
• Sur le calque « label » nommez l’ image « C2 », elle servira de repère au texte du chapitre 2.
• Sélectionnez l’image-clé du calque « texte » (toujours à l’image 10) et tapez sur la scène un texte de repérage « chapitre 2 ».
• CTRL + ENTER pour publier.

Création du fichier Flash navigation.fla

• « Enregistrez-sous » lanceur pour créer « navigation.fla », dans le dossier DATA/NAVIGATION.
• Remplacez le script de la première image du scénario par une action « stop() ; ».
• Ajoutez 2 calques sous le calque « actions ».
• Nommez le premier calque «chap 1 », et le second «chap 2 ».
• Sélectionnez le calque chap1, ouvrez la bibliothèque des boutons flash. Faites glisser le bouton de votre choix sur la scène.
• Répétez l’opération pour l’autre calque avec un autre bouton (d’une autre couleur), et placez-le à droite du précédent.
• Ajoutez le script suivant sur le bouton du calque chap1 :

on (release) {
    _level20.gotoAndStop("C1");
}

ou bien nommez l'occurrence du bouton « bt_chap1» (par l'inspecteur de propriétés) et créez un script sur le calque action :

bt_chap1.onRelease = function(){
    _level20.gotoAndStop("C1");
}

Ajoutez le script suivant sur le bouton du calque chap2 :Copiez-collez le script précédent pour aller plus vite.

on (release) {

    _level20.gotoAndStop("C2");

}

ou bien nommez l'occurrence du bouton « bt_chap2» (par l'inspecteur de propriétés) et créez un script sur le calque action :

bt_chap2.onRelease = function(){
    _level20.gotoAndStop("C2");
}

 CTRL + ENTER pour publier. 

Remarque :

Pour piloter un autre niveau on utilise le principe du chemin absolu, mais en remplaçant « _root », la racine ou scène principale de l’animation, par « _levelX », représentant la racine du niveau à piloter.

Repartez du lanceur et testez. Seul le bouton « quitter » ne fonctionne pas.

Création de l’auto-executable

• Repartez du lanceur.
• Dans paramètres de publication cochez seulement « projection windows ». Publiez (vous pouvez modifier le nom du fichier si vous décochez « utiliser les noms par défaut »).
• Quittez Flash et ouvrez l’auto-exécutable (qui se trouve dans « PROJET », au même niveau que « lanceur »).
• Tout doit fonctionner, y compris le bouton « quitter ».
• Dans votre projet final vous enlèverez tous les fichiers « .fla » Ainsi que le « lanceur.swf ».

Flash objets d'affichage et listes d'affichage

ActionScript AS3 introduit un principe totalement nouveau, celui des objets d'affichage et des listes d'affichage.

Dans Flash CS3, un objet d'affichage est un élément graphique, ou un élément pouvant en contenir. Sont des objets d'affichage : la scène principale, les clips, les sprites (clip avec une seule image de scénario), champs texte, images bitmaps, images vectorielles, vidéos...

Certains d'entre-eux, comme la scène, les clips et les sprites, peuvent contenir d'autres objets. Ce système d'imbrication permet d'organiser vos projets, et de régler l'ordre de superposition des éléments.

Chacun de ses éléments conteneurs possède une liste d'affichage interne qui permet de déterminer l'ordre de superposition de ces éléments inclus. Cette liste d'affichage est modifiable, et des objets peuvent être déplacés d'une liste à une autre. L'objet d'affichage le plus lointain est le premier dans la liste (index 0). Le plus proche est le dernier.

Présentation de Flash et le principe de l'actionscript 3 AS3

Historique du logiciel Flash et de l'ActionScript 3 AS3

Flash CS3 est la 10ème version de flash. Le moteur de lecture de Flash CS3 est Adobbe Flash Player version 11.

ActionScript est apparu en 1996 dans Flash 4. A l'époque il s'agit d'une liste d'instructions disponibles dans des menus déroulants. Il n'est pas encore possible de programmer.

Il faut attendre Flash 5 en 2000 et le lancement officiel de ActionScript 1. Cette fois les développeurs ont accès à la programmation en AS. AS1 était cependant limité en vitesse et en puissance.

En 2004 Flash MX 2004, ou Flash 7 introduit ActionScript 2.0, qui permettait la création de programmes orientés objet.

ActionScript 3.0 apparaît en 2006. C'est une version très différente, clairement orientée objet, qui améliore considérablement la cohérence et l'efficacité de ce langage.

Le « plug in » Flash 9 contient 2 interpréteurs de code, l'un consacré aux versions antérieures du code, l'autre beaucoup plus rapide qui interprète le code AS3.

Adobe Flash Player a été refusé par Apple Ios sur les iPhone et les tablettes iPad. Adobe Flash player n'est plus utilisé par Google Android à compter de la version 4.1. Est-ce la fin du logiciel flash?
Adobe propose de compiler l'actionscript en Html 5 dans la dernière version pour conjurer cette menace

PRINCIPES ET NOUVEAUTÉS de Flash actionscript 3 AS3

Nous allons travailler le plus rigoureusement possible dans la nouvelle logique de Flash. Pour cela il nous faudra respecter un certain nombre de principes nouveaux :

• tout élément est un objet. Les objets peuvent dialoguer entre eux,
• AS3 est un langage objet évolué. Pour exploiter au maximum sa puissance (et sa rapidité) il est essentiel de ne plus placer du code ActionScript à l'intérieur d'un fichier « .fla » (une animation), mais d'externaliser ce code dans des fichiers de code dédiés « .as »,
• pour appliquer ce principe, les objets seront définis dans des classes AS. Il faudra ainsi importer systématiquement dans le fichier de code les classes prédéfinies nécessaires au fonctionnement de l'animation,
•  l'animation et le fichier de code sont très faciles à lier,
• il est impératif de commenter vos codes en AS3.

PRINCIPE GÉNÉRAL DE LA PROGRAMMATION ORIENTÉE OBJET de Flash actionscript 3 AS3

La programmation orientée objet propose une nouvelle façon de concevoir et de développer des applications, de manière à améliorer :

• la structuration du code : afin de mieux pouvoir le comprendre,
• la réutilisation du code : afin de réduire les coûts de développement,
• la robustesse du code : afin de réduire les bugs et d'améliorer les performances de l'application.
  

Programmer de manière objet consiste à abstraire les personnes et objets du monde qui nous entoure, de manière à pouvoir les recréer sous forme d'objets dans la mémoire d'un ordinateur. Chaque objet possède des données propres et des données partagées avec d'autres objets de même nature, il offre des services aux autres objets.

La POO, notamment celle d'AS3, est basée sur la définition de classes puis de l'utilisation de propriétés et de méthodes de ces classes.

UNE CLASSE EST UNE REPRÉSENTATION ABSTRAITE D'UN OBJET

Une classe est assimilée à : un moule, un modèle ou encore un patron (en couture). Une classe est un type de données qui permet de créer des objets. Une classe est toujours définie dans un fichier avec l'extension .as.

PRINCIPES DE LA HIÉRARCHIE D'AFFICHAGE EN en Flash actionscript 3 AS3

• la scène est le conteneur de base des objets à afficher. Chaque animation contient un objet « Stage » contenant tous les objets visibles à l'écran,
• tout ce qui apparaît à l'écran appartient à la famille des objets d'affichage (DisplayObject)
• La classe mère « DisplayObject » contient de nombreuses sous-classes spécialisées. Même si la classe mère peut fonctionner pour toutes les sous-classes, en fonction des besoins il est préférable de choisir la sous-classe de DisplayObject la plus adaptée à l'objet à créer.

QUELQUES EXEMPLES FONCTIONNALITÉS de Flash actionscript 3 AS3:

• Stage : en référence à la scène principale.
• Bitmap : affichage des images bitmap.
• TextField : affichage d'un champ texte.
• Video : affichage de la vidéo.
• Shape : pour disposer d'une toile vierge ou créer des formes vectorielles (très performant pour cet usage, mais ne peut pas contenir d'autres objets d'affichage).
• SimpleButton, MorphShape, StaticText ... : pour créer des éléments spécifiques de l'environnement auteur Flash.
• Loader : pour créer un conteneur pour charger un élément externe (swf ou média)
• Les sous-classes de DiplayObjectContener : Sprite et MovieClip si cet objet est destiné à contenir d'autres objets d'affichage. Un objet Sprite contiendra seulement une image de scénario, il ne pourra pas contenir d'animation. Un objet sprite est uniquement pilotable par AS. Un objet MovieClip peut contenir une animation créée dans Flash.

Script package actionscript AS3 couplage fichier .fla et .as

Programme d'affichage d'un message en script ActionScript AS3 , couplage d'un fichier FLA et d'un fichier AS

En actionscript AS3 on externalise le code dans un ou plusieurs fichiers de code externes. Il y aura donc une animation d'extension « .fla » associée à un fichier d'extension « .as » qui définira les fonctions que cette animation pourra exécuter. Pour simplifier le repérage nous nommerons toujours le fichier code du même nom que l'animation.

Créez un nouveau fichier Flash, en sélectionnant « fichier ActionScript ». Dans ce cas le document ouvert est particulier, il s'agit d'une vaste zone d'édition de script AS3. Enregistrez ce fichier sous « message_bonjour.as ».

Créez ensuite une animation flash AS3, nommée également « message_bonjour.fla ».
Cliquez dans l'animation puis ouvrez complètement le panneau de propriétés en-dessous de la scène, afin de voir apparaître la case « classe du document ». Dans cette case tapez « message_bonjour ». Ceci permet de lier les 2 fichiers (animation et code). ATTENTION : ne pas ajouter l'extension du fichier après son nom.

On procédera toujours de cette façon

Vous avez 2 onglets qui permettent de passer du fichier FLA au fichier AS.

Retournez dans le fichier de code.

Il faut dans un premier temps importer les classes ActionScript 3 intégrées que nous allons utiliser dans le programme. Ceci se fait dans le cadre d'un bloc de code nommé « package »:

package {

// classe d'affichage de tous les objets sur la scène

import flash.display.*;

// classe générale des champs texte

import flash.text.*;

Nous allons ensuite définir une classe publique. Ce type de classe peut être associée à une animation. Dans ce cas la classe publique doit porter le même nom que l'animation Flash qui y sera associée.

public class message_bonjour extends MovieClip {

Ici nous nommons l'animation, le fichier de code, la classe et la fonction constructeur « message_bonjour ». L'expression "extends MovieClip" permet de lier cette classe à un clip, ce qui signifie que la classe constructeur que nous créons sera basée sur la classe AS3 « MovieClip ».

La classe contient une unique fonction constructeur nommée « message_bonjour ». Cette fonction est dite « constructeur » car elle porte le même nom que la classe, ainsi elle est exécutée dès que la classe est initialisée (soit au lancement de l'animation liée).

public function message_bonjour() {

ATTENTION :

AS3 est sensible à la casse majuscule/minuscule :

« message_bonjour » et « message_Bonjour » sont différents.

Les commandes exécutées dans la fonction constructeur:

var monText:TextField = new TextField();
monText.text = "Bonjour !";
addChild(monText);
}

}

}

La première ligne créé une occurrence d'un objet champ texte (TextField) nommée « monText » (il s'agit d'un conteneur pour du texte) :

var monText:TextField = new TextField();

La structure de déclaration de variable est toujours la même soit :

var nomVariable:TypeVariable = new TypeVariable ();

ou bien                var nomVariable:TypeVariable = contenuVariable;

Remarque :

contrairement aux versions précédentes de AS, les variables sont typées en AS3. Cela veut dire qu'il faut définir le type de donnée qui sera stockée dans la variable. Il est encore possible de ne pas les typer, mais c'est peu recommandé (ex : var maVariable; déclare la variable « maVariable » sans en définir le type. Elle est considérée comme de type polyvalent « object »).

Les types de données en actionscript AS3 : 

• String : chaîne de caractères
• Boolean : valeur booléenne (true ou false)
• uint : nombre entier positif
• int : nombre entier positif ou négatif
• Number : nombre entier ou décimal, positif et négatif

Une constante est une variable particulière, qui contient une valeur constante :

const nbrPart:int = 5;

La seconde ligne définit le contenu de « myText » (place la chaîne « Bonjour ! » dans le champ « monText »).

monText.text = "Bonjour !";

La troisième ligne permet l'affichage du champ sur la scène en ajoutant « monText » à l'objet d'affichage de la scène:

addChild(monText);

En AS3 le fait de créer un champ texte (ou un objet graphique quelconque, un bouton, ou encore un objet plus complexe comme un menu déroulant) ne suffit pas à l'afficher. Il faut ensuite ajouter l'objet texte créé à la liste d'affichage.

Ce principe qui peut sembler un peu contraignant au départ est en fait très utile car il permet de créer des objets sans les placer nécessairement sur la scène immédiatement.

Paramètres des champs texte
Pour déterminer la position du champ sur la scène on peut définir ses coordonnées x et y :

monText.x = 100;

monText.y = 100;

Pour ajouter une bordure au champ texte :

monText.border = true;

Pour régler la largeur et la hauteur du champ :

monText.width = 200;

monText.height = 30;

Pour définir un format de texte

var monFormat:TextFormat = new TextFormat ();

monFormat.font = "Arial";

monFormat.size = 24;

monFormat.bold = true;

monFormat.color = 0xFF0000;

Tout cela peut également s'écrire sur une seule ligne, en passant les réglages en paramètres (mais c'est moins lisible) :

var monFormat:TextFormat = new TextFormat (« Arial »,24, 0xFF0000, true);

Color : nombre contenant trois composants RVB 8 bits ; par exemple, 0xFF0000 correspond au rouge et 0x00FF00 au vert, 0x000000 au noir.

Pour obtenir le codage d'une couleur particulière : récupérez le code hexadécimal dans la palette de couleur de l'interface Flash, puis remplacez le signe # en tête par « 0x » (zéro x).

Il faut ensuite appliquer ce format au champ texte, et cela avant d'avoir défini le contenu du champ texte :

Application du format au champ « monText » :

monText.defaultTextFormat = monFormat;

CODE COMPLET script actionscript AS3

package {

import flash.display.*;

import flash.text.*;

public class message_bonjour extends MovieClip {

public function message_bonjour() {

var monText:TextField = new TextField();

var monFormat:TextFormat = new TextFormat();

monFormat.font = "Arial";

monFormat.size = 24;

monFormat.bold = true;

monFormat.color = 0xFF0000;

monText.defaultTextFormat = monFormat;

monText.text = "Bonjour !";

monText.x = 100;

monText.y = 100;

monText.border = true;

monText.width = 200;

monText.height = 30;

addChild(monText);

}

}

}

Flash Code Actionscript graphics dessiner formes AS3

Code Flash ActionScript AS3 pour dessiner dynamiquement des formes : ligne droite, cercle, rond, , triangle, carré, rectangle

Créez une nouvelle animation AS3 nommée « formes.fla ». Nous allons y dessiner différentes formes vectorielles uniquement en code AS3.

Associez-lui la classe de document « formes ».

Créez le fichier de code actionscript AS3 « formes.as ».

Dans ce fichier importez les classes « Sprite » et « Shape » :

package {

import flash.display.Sprite;

import flash.display.Shape;

Créez la classe publique « formes » liée à la classe « Sprite » :

public class formes extends Sprite {

Puis la fonction constructeur publique « formes » :

public function formes():void {

Le fichier est prêt à recevoir le code pour tracer dynamiquement les différentes formes vectorielles.

RAPPEL SUR LE CODAGE DES COULEURS ACTIONSCRIPT EN AS3
Pour obtenir le codage d'une couleur particulière : récupérez le code hexadécimal

dans la palette de couleur de l'interface Flash,
puis remplacez le signe # en tête par « 0x » (zéro x).

Code Flash Actionscript AS3 POUR TRACER UNE LIGNE DROITE

On va créerune nouvelle occurrence de l'objet Shape, nommée « ligneD »

var ligneD:Shape = new Shape ();

On définit l'épaisseur et la couleur de la ligne :

ligneD.graphics.lineStyle(2, 0x000000);

On précise les coordonnées du premier point de la ligne :

ligneD.graphics.moveTo(450, 50);

Celles du second point :

ligneD.graphics.lineTo(400, 300);

On ajoute l'occurrence à la liste d'affichage :

addChild(ligneD);

Code Flash Actionscript AS3 pour TRACER UN RECTANGLE

On créé une nouvelle occurrence d'objet Shape nommée « rectangle » :

var rectangle:Shape = new Shape();

On définit la couleur de remplissage du rectangle :

rectangle.graphics.beginFill(0x0000FF);

On trace le rectangle en précisant dans les arguments : les coordonnées du point supérieur gauche puis la largeur et la hauteur du rectangle :

rectangle.graphics.drawRect(300,100,100,50);

On ajoute l'occurrence à la liste d'affichage :

addChild(rectangle);

Code Flash Actionscript AS3 POUR TRACER UN RECTANGLE AVEC CONTOUR ET COINS ARRONDIS

On créé une nouvelle occurrence d'objet Shape nommée « rectRond » :

var rectRond:Shape = new Shape();

On définit l'épaisseur et la couleur du contour :

rectRond.graphics.lineStyle(4, 0x0000FF);

On définit la couleur de remplissage du rectangle :

rectRond.graphics.beginFill(0xFF3F8E);

Définition des paramètres du rectangle avec « drawRoundRect » : coordonnées du coin supérieur gauche, largeur, hauteur puis largeur et hauteur des bords arrondis :

rectRond.graphics.drawRoundRect (40,250,80,120,25,25);

On ajoute l'occurrence à la liste d'affichage :

addChild(rectRond);

Code Flash Actionscript AS3 POUR TRACER UN TRIANGLE ROUGE 

Pour tracer un triangle rouge, on créé une nouvelle occurrence d'objet Shape nommée « triangle » :

var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);

coordonnées du point de démarrage :

triangle.graphics.moveTo(50, 50);

coordonnées du point 2 :

triangle.graphics.lineTo(50, 150);

coordonnées du point 3 :

triangle.graphics.lineTo(150, 50);

coordonnées du point de départ pour le rejoindre :

triangle.graphics.lineTo(50, 50);
addChild(triangle);

Code Flash Actionscript AS3 POUR TRACER UN CERCLE JAUNE

On créé une nouvelle occurrence d'objet Shape nommée « cercle » :

var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);

On détermine avec « drawCircle » les coordonnées du centre, puis le rayon du cercle :

cercle.graphics.drawCircle (200,150,60);
addChild(cercle);

Code Flash Actionscript AS3 pour tracer une ellipse vert clair avec contour vert foncé

On créé une nouvelle occurrence de Shape nommée « ellipse » :

var ellipse:Shape = new Shape();

On définit l'épaisseur et la couleur du contour :

ellipse.graphics.lineStyle(2, 0x10701A);

On définit la couleur du remplissage :

ellipse.graphics.beginFill(0x1FD831);

On définit avec « drawEllipse » les coordonnées du coin supérieur gauche du rectangle qui contient l'ellipse, puis la largeur et la hauteur de cette ellipse:

ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);

Code Flash Actionscript AS3 POUR TRACER UNE LIGNE COURBE VERTE

On créé une nouvelle occurrence de Shape nommée « ligneC » :

var ligneC:Shape = new Shape ();

On définit l'épaisseur et la couleur de la ligne :

ligneC.graphics.lineStyle(2, 0x00FF00);

On définit les coordonnées du point de départ :
                      ligneC.gr
                      ligneC.graphics.moveTo(200, 50);

On définit les paramètres de la ligne courbe avec « curveTo » :

ligneC.graphics.curveTo(250,-20, 300,50);
addChild(ligneC);
curveTo :

Les paramètres de la ligne « moveTo » définissent tout d'abord les coordonnées du point de départ.

ligneC.graphics.moveTo(200, 50);

Les deux derniers paramètres de la commande « curveTo » sont les coordonnées du point d'arrivée. Les deux premiers ont les coordonnées du point de courbure du second point de la courbe. Il s'agit des coordonnées de l'extrémité du vecteur qui définit la courbure de l'arc.

ligneC.graphics.curveTo(250,-20, 300,50);

Sur le même principe on va tracer une lune mauve avec un contour violet:

var lune:Shape = new Shape();

lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// point de départ de coordonnées 400, 200

lune.graphics.moveTo(400, 200);

// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200, avec un autre point de contrôle qui permet de tracer une seconde courbe
lune.graphics.curveTo(350, 250, 400, 200);

addChild(lune);

Code Flash Actionscript AS3 complet pour dessiner des formes

package {

import flash.display.Sprite;
import flash.display.Shape;

public class formes extends Sprite {
public function formes():void {

// tracé d'une ligne droite noire
var ligneD:Shape = new Shape ();
// épaisseur et couleur
ligneD.graphics.lineStyle(2, 0x000000);
// point 1
ligneD.graphics.moveTo(450, 50);
// point 2
ligneD.graphics.lineTo(400, 300);
addChild(ligneD);

// tracé d'un rectangle bleu
var rectangle:Shape = new Shape();
rectangle.graphics.beginFill(0x0000FF);
// position coin supérieur gauche, puis largeur et hauteur
rectangle.graphics.drawRect(300,100,100,50);
addChild(rectangle);

// tracé d'un rectangle à bords arrondis avec contour
var rectRond:Shape = new Shape();
rectRond.graphics.lineStyle(4, 0x0000FF);
rectRond.graphics.beginFill(0xFF3F8E);
rectRond.graphics.drawRoundRect (40,250,80,120,25,25);
addChild(rectRond);

// tracé d'un triangle rouge
var triangle:Shape = new Shape();
triangle.graphics.beginFill(0xFF0000);
// point de démarrage
triangle.graphics.moveTo(50, 50);
// point 2
triangle.graphics.lineTo(50, 150);
// point 3
triangle.graphics.lineTo(150, 50);
// point de départ
triangle.graphics.lineTo(50, 50);
addChild(triangle);

// tracé d'un cercle jaune
var cercle:Shape = new Shape();
cercle.graphics.beginFill(0xE4CF12);
// centre, rayon)
cercle.graphics.drawCircle (200,150,60);
addChild(cercle);
// tracé d'une ellipse verte
var ellipse:Shape = new Shape();
// trait vert foncé
ellipse.graphics.lineStyle(2, 0x10701A);
// remplissage vert clair
ellipse.graphics.beginFill(0x1FD831);
// point supérieur gauche, largeur, hauteur
ellipse.graphics.drawEllipse (200, 300, 150, 60);
addChild(ellipse);
// tracé d'une ligne courbe verte
var ligneC:Shape = new Shape ();
ligneC.graphics.lineStyle(4, 0x00FF00);
ligneC.graphics.moveTo(200, 50);
ligneC.graphics.curveTo(250, -20, 300,50);
addChild(ligneC);

// tracé d'une lune
var lune:Shape = new Shape();

lune.graphics.lineStyle(3,0x502E74);
lune.graphics.beginFill(0x8B5ABE);
// départ au point 400, 200
lune.graphics.moveTo(400, 200);
// point d'arrivée de coordonnées 400, 300
lune.graphics.curveTo(300, 250, 400, 300);
// retour au point 400, 200
lune.graphics.curveTo(350, 250, 400, 200);
graphics.endFill();

}

}

}