la programmation pour les nuls

La programmation, qu'est ce que c'est?

Il est possible dans e-anim de programmer les objets, ce qui va vous permettre de manipuler votre animation pour générer, par exemple, des déplacements et des rebonds d'objets, des calculs de scores, des effets visuels etc... Votre programme se présente sous la forme d'un texte qui donnera différentes instructions qui seront exécutées lorsque qu'on regardera votre animation. Par exemple, en français:
-le ballon se déplace vers la droite et rebondit sur les briques;
-il rétrécit quand il touche les bords du projet ;
-le ballon disparait quand on arrive au temps 8;

Dans Flash, ce texte n'est pas écrit en français mais dans un langage nommé "ActionScript" , qui est (à peu près) un mélange de maths et d'anglais Razz

Mais avant d'apprendre ce langage, nous allons voir à quel endroit écrire les instructions dans e-anim.

Pour cela nous allons appeler des "fonctions" qui contiennent une série d'instructions depuis notre animation.
1- créez votre projet et enregistrez-le

2- cliquez sur "projet -> programmation Mtasc

3- une feuille de programme va apparaitre. Elle contient en principe une accolade avec écrit:
class VotreAnim{

}

tout ce que vous mettrez dans votre programme sera écrit à l'intérieur de cette accolade. Nous allons maintenant créer une fonction. Dans la classe, écrivez:

static function nom_de_la_fonction(){
//actions
}

Vous pouvez placer autant de fonctions que vous voulez.
Le nom de la fonction ne doit contenir aucun espace ni caractère spécial. Plus tard, quand vous apprendrez le code ActionScript, vous remplacerez //actions par la série d'instructions à exécuter. Pour résumer , la page Mtasc doit ressembler à ça:

class votreanim{

static function votrefonction(){
//actions
}

static function votreautrefonction(){
//actions
}

}

4- Retournez sur la page d'e-anim. Sélectionnez dans la barre de temps le moment où vous souhaitez que votre programme soit exécuté. Il est possible de lancer un programme depuis un groupe. Cliquez ensuite sur un des objets présents pour le sélectionner

5- dans le barre des boutons, cliquez sur la petite roue dentée "action programmée" : action

6- dans la fenêtre qui vient de s'ouvrir, cliquez sur le bouton orange pour sélectionner "l'action se déclenche immédiatement au temps indiqué" puis cliquez sur le petit bouton "programmer". Un champ de texte s'ouvre.

7- tapez dans ce champ:
->votreanim:votrefonction();

remplacez votre anim par le nom de votre projet, qui est aussi le nom de la "classe" dans laquelle se trouvent vos fonctions. Remplacez votrefonction par le nom de la fonction que vous voulez exécuter. Par exemple, si votre projet s'appelle "billard" et que vous voulez exécuter au temps 4 une fonction qui s'appelle explosion, vous écrirez dans la zone "programmer" d'un objet, au temps 4 dans l'animation principale:
->billard:explosion();

et dans la page ActionScript:
class billard{
static function explosion(){
//actions
}
}

8- voilà, le code que vous écrirez à la place de "//actions" sera effectué quand l'animation arrivera au temps 4.

/!\ IMPORTANT /!\ les instructions programmées ne fonctionneront que dans l'export SWF, pour tester votre programme il faudra donc exporter votre animation et la lire avec un navigateur comme FireFox ou Internet Explorer. Si vous avez un quelconque problème avec la programmation, n'hésitez par à poser vos questions sur le forum d'e-anim!

La langage ActionScript (ou AS)

Dans votre fonctions, vous allez écrire ligne par ligne une série de commandes. Les instructions AS se présentent sous cette forme:
instruction1;
instruction2;
instruction2;

Ces commandes agiront sur les objets de votre animation. Par conséquent, nous allons commencer par apprendre à désigner ces objets.

les MovieClips (ou MC)

Ce sont tous les "personnages" qui composeront votre animation. Pour créer un MovieClip, utilisez le bouton de e-anim "créer un groupe" puis dans ce groupe ajoutez la ou les image(s) de votre objet. Vous pouvez bien sûr l'animer comme n'importe quel autre groupe!
Retournez ensuite à l'écran de base et cliquez sur "sans_nom" en haut à gauche de la page. Nommez votre MovieClip comme il vous plait... Une fois que vous aurez créé tous les MCs agissant dans l'animation, retournez dans la page Mtasc.

Pour désigner un MC, nous indiquerons sont adresse dans l'animation. C'est à dire que pour avoir l'adresse d'un MC on dit tous les noms des groupes dans lesquels se trouve le MC séparés par un point. L'écran de base s'appelle _root (origine en anglais). Exemple:
-un MC "boite" qui se trouve dans l'écran de base aura pour adresse : _root.boite
-un MC "objet" qui se trouve dans le MC "boite" aura pour adresse : _root.boite.objet

en AS il y a , en gros, 3 types d'instructions: les calculs de variables, les méthodes et les évènements.

Les Variables

et maintenant le plus important: les variables. Ce sont comme des inconnues en Maths, c'est à dire qu'une variable peut recevoir une valeur, par exemple un nombre. Pour donner une valeur à une variable, on utilise tout simplement un signe = :

a=1;
b=2;

on peut faire toute sorte de calculs avec les variables de type "nombre" , en utilisant * , / , + , - :

a=1+1;
b=a*5;
c=a*b;

dans ce cas, a aura pour valeur 2, b aura pour valeur 10 et c sera égal à 20. Remarquez que ce sera toujours le premier membre d'une égalité qui prendra la valeur du deuxième, exemple:

a=71;
b=9;
b=a;

Cette fois b et a seront tous les deux égaux à 71. En effet la variable prend la valeur indiquée au moment ou la ligne de code sera exécutée, et si on avait changé l'ordre des lignes:

a=71;
b=a;
b=9;

dans ce cas a aurait pour valeur la dernière qu'on lui a attribué, donc 9, alors que b aura toujours la même valeur 71.

Notez qu'une variable peut recevoir toute sorte de valeurs:
-des textes :
a="bonjour";

-des "boolean" qui ne peuvent recevoir que 2 valeurs possibles, "vrai" ou "faux":
a=true;
a=false;

- des objets de l'animation:
a=_root.soucoupevolante;

-et bien d'autres encore, mais je ne les détaillerais pas toutes Very Happy

C'est maintenant que ça va se compliquer (un peu^^) car en AS, les variables sont presque toujours rattachées à des MovieClips. Ainsi pour nommer une variable, on met l'adresse du MC, un point, et le nom de la variable. Exemple:

_root.personnage.a=1;
_root.ennemi.b=b;
_root.ennemi.c=_root.personnage.a/4;

cependant on peut aussi déclarer des variables qui ne soient pas dans des MC, pour cela on écrit var avant la variable la première fois, même si je vous déconseille cette méthode.

var obj=_root.objet;
var nb=1;
obj.a=nb;

Les Propriétés

à partir de maintenant nous pourrons vraiment agir sur notre animation. En effet , en plus des variables que vous aurez créées vous même, chaque mc à des variables spéciales qui correspondent chacune à une propriété du mc. Voici les principales:

• _x et _y sont les coordonnées de l'objet par rapport à l'animation. Si vous écrivez ceci:

_root.balle._x=100;
_root.balle._y=50;

quand ces instructions seront exécutées, l'objet sera "téléporté" en (100,50). De même:

_root.chat._x=_root.chien._x;
_root.chat._y=_root.chien._y;

aura pour effet d'envoyer le chien au même emplacement que le chat.

•_alpha est l'opacité de l'objet , exprimée en pourcentage:

_root.perroquet._alpha=50; rendra le perroquet à moitié transparent

•_xscale et _yscale sont les dimensions verticales et horizontales de l'objet, en % :

_root.hamster._xscale=200; multipliera la largeur du hamster par deux, à ce rythme là je vais avoir des ennuis avec la SPA^^

•_visible est une variable "boolean" qui détermine si l'objet est visible ou pas.

_root.kwelmes._visible=false; fera disparaitre Kwelmès. Inutile de vous dire que c'est interdit :O)

Les méthodes

En générale, une méthode s'écrit comme ceci:

cible.verbe(paramètres);

La plupart du temps la cible sera un MovieClip. Le verbe est la méthode à exécuter (vous en apprendrez quelques une tout à l'heure, un peu de patience) et les paramètres sont des indications sur la manières d'effectuer la méthode, souvent des nombres, des booléens ou des MC. Parfois il n'y a pas de paramètre:

_root.objet.méthodeA();

parfois il y en a plein:

_root.objet.méthodeB(1,4,8,"cocorico",true,0);

on peut bien sûr remplacer des paramètres par des variables:

_root.objet.message="cocorico";
_root.objet.méthodeC(_root.objet.message);

Voici quelques méthode utiles:

• MovieClip.gotoAndPlay(nombre);

qui enverra le MovieClip au temps "nombre", par exemple pour envoyer l'animation principale au temps 12465:

_root.gotoAndPlay(12465);

l'animation ira au temps choisi, puis continuera d'avancer. Si vous ne voulez pas qu'elle continue, il y a la méthode gotoAndStop(nombre); qui marche pareil.

• MC.play(); et MC.stop(); permettent de jouer l'animation et de la stopper

• Math.random(); est un peu compliquée puisque que cette méthode prend la place d'une variable. Elle a pour valeur un nombre (à virgule^^) au hasard entre 0 et 1.
Par exemple:

_root.variable=Math.random(); là , _root.variable sera égale , par exemple , à 0.1223874847587 . Fantastique, non?

•Math.round(nombre); est aussi une "méthode-variable" qui prendra pour valeur l'arrondi à l'unité de "nombre" .

_root.variable=Math.random()*10;
_root.entier=Math.round(_root.variable);
_root.gotoAndStop(_root.entier);

ce code enverra l'animation à un temps au hasard entre 1 et 10, c'est très pratique. On peut le raccourcir:

_root.gotoAndStop(Math.round(Math.random()*10));

•MovieClip1.hitTest(MovieClip2);

est aussi une "méthode-variable" qui prend une valeur booléenne (true ou false) en fonction que le MovieClip1 est en contact ou non avec les MovieClip2. C'est très utile pour créer des jeux, on l'utilise avec "IF" qui est une commande dont je vous parlerai plus tard^^

Voilà pour les méthodes les plus simples.
En fait, 90% du code ActionScript est composé de calculs de variables (surtout des propriétés) et d'évènements. Les méthodes sont moins fréquentes mais quand même indispensables.

Si vous voulez voir la liste des méthodes applicable sur une cible de type MovieClip, tapez ceci dans la console Mtasc:
MovieClip.
cela peut être pratique si vous n'êtes pas sûr de l'orthographe d'une méthode.

Les évènements

Les évènements sont très utiles en AS car ils permettent de lancer des instructions, entre autres, lorsque l'utilisateur clique sur un objet, quand une touche du clavier est enfoncée ou encore... tout le temps ^^
Une instruction de type évènement s'écrit comme cela:

cible.evenement=function(){
//actions
};

Dès lors que la fonction aura été exécutée, toutes les instructions que vous aurez mis à la place de "//actions" seront exécutées à chaque fois que l'évènement indiqué se produira. Par exemple si au temps 8 de votre animation vous lancez une fonction qui contient une instruction correspondant au "clic souris sur une cible précise" , à partir du moment où l'anim sera passée par le temps 8 toutes les commandes placées dans l'évènement seront exécutée à chaque fois qu'on cliquera sur la cible.
NB: n'oubliez pas le ";" à la fin de l'instruction évènement, il ne faut pas confondre avec les "static function" où on ne met pas de ";" ...

Voyons maintenant les principaux évènements.

• cible.onPress
c'est le clic souris, les instructions se déclenchent quand on clique sur le MovieClip dont vous aurez indiqué l'adresse à la place de "cible"

• cible.onRelease marche comme onPress, mais quand on relâche la souris

• cible.onMouseDown indique que le bouton de la souris est cliqué, mais pas forcément sur la cible. Il existe aussi cible.onMouseUp pour quand ce bouton est relâché.

• cible.onEnterFrame est super super super important si vous voulez faire des jeux: il permet d'effectuer un groupe d'actions à chaque temps. Ainsi si vous avez réglé la durée d'un temps à 40ms , les instructions seront exécutées toutes les 40ms.
Cela permet de programmer des déplacements d'objets, exemple:

_root.balle.onEnterFrame=function(){
_root.balle._x=_root.balle._x+2;
_root.balle._y=_root.balle._y-1;
};

Dès que vous aurez exécute cette fonction, l'objet _root.balle se déplacera à chaque temps de 2 pixels vers la droite et de 1 pixel vers le haut. Amusez vous à faire bouger des objets de cette manière dans différentes directions. Vous pouvez aussi passer par des variables, par exemple pour rajouter de la gravité (ici _root.balle.vy indique le nombre de pixel parcouru par temps en ordonnée) :

_root.balle.vy=-5;

_root.balle.onEnterFrame=function(){
_root.balle._x=_root.balle._x+1;
_root.balle._y=_root.balle._y+_root.balle.vy;
_root.balle.vy=_root.balle.vy+0.5;
};

•cible.onRollOver fonctionne comme onPress, mais s'active quand on survole la cible avec la souris. Il existe aussi cible.onRollOut pour quand la souris sort de la zone de l'objet.

Comment supprimer un évènement:
utilisez la commande "delete" devant le nom de l'évènement, par exemple :

delete _root.balle.onEnterFrame;

La condition IF

attention c'est sans doute le plus important (mais pas le plus simple hélas, heureusement que je suis là pour vous aider Very Happy

).
Grâce à IF vous pourrez effectuer une (ou plusieurs) instructions si une condition est respectée. Par exemple vous utilisez onEnterFrame pour déplacer un vélo vers la droite, et vous voudriez qu'il s'arrête quand il touche une maison. Pour cela, on se sert de IF: dans le bloc d'instructions qui se déclenchent à chaque temps, on met une condition ( dans notre exemple "est ce que le vélo touche la maison" et si la condition est respectée on exécute des actions qui arrêtent le vélo.
La syntaxe de IF est la suivante:

if(condition){
//actions si la condition est respectée
}else{
//actions si la condition n'est pas respectée
}

on ne met pas de ";" après les IFs.
Else est facultatif.
Et il est possible de mettre plusieurs If les uns dans les autres

Les conditions

comme condition on peut mettre:

• une égalité avec le signe == :
if(_root.objet._x==100){
//actions qui se déclenchent si l'abscisse de _root.objet est égale à 100
}

•une comparaison avec >= , <= , > ou < (uniquement avec des nombres):
if(_root.objet.nombre<=280){
//actions qui se déclenchent si la variable "nombre" de _root.objet est inférieure ou égale à 280
}

•une valeur booléenne :
if(_root.velo.hitTest(_root.maison)){
//actions qui se déclenchent si le vélo touche la maison
}

•enfin, on peut mettre deux conditions: entre les deux on rajoute && si les 2 conditions doivent être respectées, et || (AltGr+touche du 6) si l'une ou l'autre des conditions doit être respectée. exemple:

if(_root.velo.hitTest(_root.maison)&&_root.velo.vitesse>=10){
// un gros accident se déclenche^^
};

Voilà, vous savez maintenant l'essentiel de ce qu'il faut savoir pour faire de la programmation ActionScript dans e-anim, félicitations.

bon ce n'est pas complet (il manque les boucles for, les Arrays et les textes variables entre autres) mais il y a le principal
_________________

http://www.kwlms.o-n.fr
http://www.kwlms.o-n.fr
http://www.kwlms.o-n.fr

super acro Inscrit le : 29 Mai 2007 Messages : 879

merci kwelmès......... Cool

_________________
cadeau de xelozone

mEs-anims ICI

super acro Age : 38 Inscrit le : 18 Nov 2007 Messages : 5181

merccccccccccccccccccccccciiiiiiiiiiiiiiiii
_________________

Salut Invité !

superbe

je vais tenté de faire un truc simpas si j'ais le temps Wink

_________________
Le chat reviendra mais la il est tro lourd

Si je critique vos créa c'est que je pense que vous pouver fair mieux!!

programmeur Inscrit le : 24 Juin 2007 Messages : 2241

la vache... superbe travail kwelmes Smile

_________________

Défoule toi sur mon ami Smile

et fais le jongler :

Tu peux aussi jongler ton ami... prochainement sur mon site.
--

Hello tout le monde Laughing

Oohh ça a l'air super : moi qui voulais justement commencer à m'intéresser à toutes ses choses Wink

J'ai pas le temps de regarder mais merci Very Happy

_________________

merci beaucoup chris_c pour cette magnifique signature ^^et Xelo pour le userbar de mon nutella d'amour

un bon complement a ma doc actionScript !!
_________________
un petit jeux sympa
L'urgent c'est fait,
L'impossible est en train de se faire,
Un miracle ?? laisse moi au minimun 24H !!!...
L'action script a l'etat pur
Mes meilleurs photos
Bienvenu a notre dernier membre benisvy
Le record d'utilisateurs en ligne a battre et de : 22

tu peux no donné ta doc ??
_________________
Le chat reviendra mais la il est tro lourd

Si je critique vos créa c'est que je pense que vous pouver fair mieux!!

dispo sur la l'accueil d'e-anim http://phildes.com/

ou encore ici http://c.diot.free.fr/download.php?id=8
_________________
un petit jeux sympa
L'urgent c'est fait,
L'impossible est en train de se faire,
Un miracle ?? laisse moi au minimun 24H !!!...
L'action script a l'etat pur
Mes meilleurs photos
Bienvenu a notre dernier membre benisvy
Le record d'utilisateurs en ligne a battre et de : 22

merci
_________________
Le chat reviendra mais la il est tro lourd

Si je critique vos créa c'est que je pense que vous pouver fair mieux!!

Sacré travail ! Merci Kwelmès.

Il faudrait le déplacer dans les tutos. Est-tu d'accord ?

Phildes
_________________

salut, super merci à toi.
_________________

merci Kwelmes,c'est très intéressant car pour l'instant j'ai toujours fait des copier coller des codes du fait que je n'y connais rien en AS

alors j'ai voulu faire un essai

un truc tout simple sans doute pour vous tous(mais pas si évident que çà)

au temps 50,le rectangle double de taille,tourne sur lui même touche le rond qui est poussé vers la droite

çà marche mais peux tu me dire si tout est bien correct avant que je continue d'autres essais

Spoiler:
	class essai1{ static function zoom(){ _root.rectangle._xscale=200;//double la largeur au temps 50 _root.rectangle._yscale=200;//double la hauteur au temps 50 _root.rectangle.play();//fait touner le rectangle } static function collision(){ if(_root.rectangle.hitTest(_root.rond)){ _root.rond._x=300;//pousse le rond à droite } } }

c'est corecte mais rajoute des commenrére
_________________
Le chat reviendra mais la il est tro lourd

Si je critique vos créa c'est que je pense que vous pouver fair mieux!!