ActionScript

velodromegoodyearSoftware and s/w Development

Jul 5, 2012 (5 years and 3 months ago)

355 views

ADOBE FLASH
Programmer en ActionScript
A. Notions élémentaires
B. Gérer les interactions
C. Structurer le code
D. Mettre en place des Classes (POO)
E. Fonctions avancées
ActionScript
ActionScript
Comprendre les technologies Flash
Comprendre les machines virtuelles
Les technologies Flash

Les lecteurs :

Flash Player

Lecteur intégré à AIR

Flash Lite (pas AS3)

Les outils :

Flex Builder

Flash CS3-CS4

Eclipse

Les Frameworks

Flex (Applications riches)

AIR

Déploiement

AIR : Porter une application
pour le bureau
Les machines virtuelles

Machine : Transcrit en langage machine le code binaire

Lecteur Flash 8 :

MV1 = AS 1 et 2

Lecteur Flash 9 et 10 :

MV1 = AS 1 et 2

MV2 = AS 3
La machine virtuelle 2 optimise la compilation en fonction de
la plateforme (Compilation à la volée)
A. Notions élémentaires
Gérer les objets d’affichage
Utiliser le modèle événementiel
Interpolation dynamique
Contrôler les occurrences
Utiliser les variables
Utiliser les fonctions
Les objets d’affichage

A1-a : Placer un Clip dynamiquement
var maCoc:Coc=new Coc;
addChild(maCoc);

A1-b : Placer un Bitmap dynamiquement
var dataPiaf:Piaf = new Piaf(128,128);
var imgPiaf:Bitmap = new Bitmap(dataPiaf);
addChild(imgPiaf);
A1
Le modèle événementiel

Les écouteurs
monBouton.addEventListener(MouseEvent.MOUSE_DOWN,deplacer);
function deplacer(evt:MouseEvent) {
personnage.x=150;
personnage.y=230;
}

A1-c : Rendre le Bitmap déplacable
var leChat:Sprite = new Sprite();
leChat.addChild(imgChat);
startDrag()
stopDrag()
A1
Le modèle événementiel

En continu sur la scène
etoile.addEventListener(Event.ENTER_FRAME,tourner);
function tourner(evt:Event) {
etoile.rotation+=3;
}

A2-a : Gérer le click sur un bouton

A2-b : Intégrer un événement en continu

A2-c : Stopper l’écouteur
A2
Interpolation dynamique

Installer le package ‘gs’ pour accéder aux classes :
http://blog.greensock.com/tweenmaxas3/

TweenLite(), TweenFilterLite() et TweenMax()

A3-a : Utiliser la classe TweenMax pour déplacer l’objet

A3-b : Utiliser la classe easing pour appliquer un éffet de rebond

A3-c : Utiliser les événement des classes :

onStart, onUpdate, onComplete
TweenMax.to(coc, 2, {x:350,onStart:monEffet});
function monEffet() {
balle.scaleX=0.3; balle.scaleY=0.3;
}
A3
Les occurrences

Utiliser les propriétés des occurrences

x et y

rotation

visible

alpha

width et height

scaleX et scaleY

A4-a : Gérer le déplacement de la coc avec le clavier

A4-b : ... avec un déplacement automatique ...
A4
Les variables

Déclaration d’une variable
public var age:int = 22

Typage des variables

Portée des variables
Type
Définition
int
Number
Array
nombre entier 32 bit
nombre décimal 64 bit
Déclaration
Portée
public
private
static
Les fonctions

Création d’une fonction
function alerte (msg:String=‘Message par défaut’):void {
trace(msg);
}
B. Gérer les interactions
Gérer les collisions
Gérer les niveaux
Utiliser les masques
Pointer vers le Web
Les collisions

B1-a : Gérer la collision d’un objet mobile

La gestion du déplacement :
startDrag();
stopDrag();

La gestion de la collision
if (evt.currentTarget.hitTestObject(cible)) {
...
}
B1
Les niveaux

B2-a : Remonter au premier plan un objet
setChildIndex(Objet,Niveau);

avec :
DisplayObjectContainer(evt.currentTarget)
numChildren-1
B2
Les masques

B3-a : Création d’un masque
fond.mask = cache;

Gérer le déplacement du masque
fond.addEventListener(MouseEvent.MOUSE_DOWN,cacheMobile);
function cacheMobile(evt:MouseEvent) {
cache.startDrag();
} ...

B3-b : Gérer un fondu sur le masque

Appliquer un flou sur le masque

Passer le fond et le masque en mode :
Cache sous forme de bitmap
B3
Vers le Web ...

Créer un lien vers une page Web
C. Les structures de code
Les structures conditionnelles
Les structures de boucles
Gérer les temporisations
Utiliser les tableaux
Créer des objets
Les conditionnelles

If() ...
if (a>=5){
...
}else{
...
}

switch() ...
switch (a){
case a<3
return ‘3’;
break;
case a<10
return ’10’;
break;
}
Les boucles

for() ...
for (var n:Number=1; n<=5; n++){
...
}

for each() ...
var semaine:Array = new Array(‘lundi’,‘mardi’,... ‘vendredi’)
for each(var jour:String in semaine){
trace(jour);
}
Les temporisations

C1-a : Contrôler la rotation par le biais d’un Timer.
var moteur:Timer = new Timer(1000); // milisecondes
moteur.addEventListener(TimerEvent.TIMER, tournerCoc);
moteur.start();
function tourneCoc(e:Event):void { ...}

C1-b : Gérer un nombre d’appels et une fonction de fin
moteur.addEventListener(TimerEvent.TIMER_COMPLETE, finCoc);
C1
Les tableaux

C2-a : Créer un tableau
var semaine:Array = new Array(‘lundi’,‘mardi’, ...);
var semaine:Array = [‘lundi’,‘mardi’, ...];

Les fonctions utiles sur les tableaux

Ajouter un élément

Compter les éléments

Parcourir un tableau

Vider un tableau
C2
Les objets

C3-a : Créer et instancier un objet

Fabriquer un objet
var adresse:Object = new Object;
var adresse:Object = {nom:‘Milou’, adresse:‘Bruxelles’}

Les fonctions utiles sur les objets

Ecrire dans un objet
adresse.nom = ‘Tintin’
adresse.adresse = ’26, rue du Labrador Bruxelles’

Lire dans un objet
trace(adresse.nom);
C3
D. Les Classes
Classes personnalisées
Utiliser un Prototype
Classes de documents
POO
Classes personnalisées 1/2

D1-a : Créer une classe pour gérer un panier

Créer un fichier externe Panier.as
package{
public class Panier {
public function Panier(){...}
public function Ajoute(produit,prix) {...}
public function Total():String{...}
}
}

Créer le code pour instancier la classe
var panier1:Panier = new Panier;
panier1.Ajoute("pommes",2.20);
D1
Classes personnalisées 2/2

D1-b : Utiliser un Objet pour gérer le détail du panier
var ligne:Object = {num: ...,produit:, ...}
D1
Utiliser un Prototype

Utiliser un prototype pour ajouter un comportement

Mise en place du Prototype
Object.prototype.tourne = function():void{
...
}

Appel de la fonction
maCoc.tourne();
D2
Classes de documents

Ajouter un comportement à un Clip

Définir une Classe pour la Coc

Fabriquer un appel avec un Timer pour créer les Coc

Créer un fichier Coc.as :
package {
public class Coc extends MovieClip{
public function Coc(){
...
}
}
}
D3
E. Fonctions avancées
Charger des médias externes
Diffuser un son
Contrôler une vidéo
Gérer le XML
Chargement de médias

E1-a : Chargement de fichier jpg externes
var chargeur:Loader = new Loader();
var urlImage:URLRequest = new URLRequest("Images/2E-1.jpg");
chargeur.load(urlImage);
addChild(chargeur);

E1-b : Charger une série d’images
var i:int = 0;
i++;
if (i>8) i=1;
var urlImage:URLRequest = new URLRequest("Img"+i+".jpg");
chargeur.load(urlImage);
addChild(chargeur);
E1
Diffuser du son 1/2

E2-a : Charger un MP3
var urlMusique:URLRequest = new URLRequest();
var chaineHifi:Sound = new Sound();
var channel:SoundChannel;
urlMusique.url = "Audio/sonA.mp3";
chaineHifi.load(urlMusique);
channel = chaineHifi.play();
E2
Diffuser du son 2/2

E2-b : Charger plusieurs fichiers
function charge(evt:MouseEvent):void{ ... }

E2-c : Faire fonctionner une jauge
jauge.addEventListener(Event.ENTER_FRAME,dessiner);
function dessiner(evt:Event):void{
if (channel){
jauge.avance(channel.position,chaineHifi.length);
}
}
E2
Contrôler une vidéo

E3-a : Ajouter au projet le composant ‘FLVPlayback’
import fl.video.FLVPlayback
var ecran:FLVPlayback = new FLVPlayback();
ecran.source = "video/pixar.f4v";
addChild(ecran);
E3
Gérer le XML 1/4

E4-a : Utiliser un loader pour charger le XML
var chargeurDonnees:URLLoader = new URLLoader();
var urlXML:URLRequest = new URLRequest("news.xml");
chargeurDonnees.load(urlXML);

Gérer la fin du chargement
chargeurDonnees.addEventListener(Event.COMPLETE, onComplete);
function onComplete(event:Event):void {
fichierXML = new XML(chargeurDonnees.data);
}
E4
Gérer le XML 2/4

Lire le fichier selon l’arborescence
for each (var noeud in fichierXML.channel.item) {
trace(noeud.title);
trace(noeud.description);
}

E4-b : Utiliser une zone de texte pour afficher le contenu
var affiche:TextField = new TextField();
affiche.wordWrap = true;
affiche.multiline = true;
...
addChild(affiche);
E4
Gérer le XML 3/4

E4-c : Intégrer une barre de défilement

Ajouter le composant UIScrollBar à la bibliothèque
var sb:UIScrollBar = new UIScrollBar();
sb.scrollTarget = affiche;
addChild(sb);

Actualiser après le chargement du fichier :
sb.update();
E4
Gérer le XML 4/4

E4-d : Intégrer une barre de défilement

Intégrer une Police
var styleTexte:TextFormat = new TextFormat();
styleTexte.font = "Tahoma";
styleTexte.size = 13;
affiche.setTextFormat(styleTexte);

Actualiser après le chargement du fichier :
affiche.setTextFormat(styleTexte);

Idem pour le titre ...
E4
Merci de votre attention
E. Grandadam - LCProd
mail@lcprod.net
Vous êtes libres : de reproduire, distribuer et communiquer cette création au public
Selon les conditions suivantes :
Paternité. Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de
l'oeuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière
qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l'oeuvre).
Pas d'Utilisation Commerciale. Vous n'avez pas le droit d'utiliser cette création à des fins
commerciales.
Pas de Modification. Vous n'avez pas le droit de modifier, de transformer ou d'adapter cette
création.
http://creativecommons.org/licenses/by-nc-nd/3.0/deed.fr