Le coin des débutants : AS2 et e-anim

Se familiariser avec E-anim et action-script 2

--------------------------------------------------------------------------------------
LES LIENS

faire tourner un rectangle / agrandir une image / dépl.horiz.rollover / dépl.avec curseur / dépl.avec Frames

--------------------------------------------------------------------------------------

Exercice 1 :Faire tourner un rectangle avec un bouton :



Ouvrir un groupe
y placer un rectangle
>le sélectionner
>Temps 0 mettre un stop
>temps 50 faire un tour complet avec la
>Revenir à l'écran de base et nommer ce groupe rectangle


ouvrir un nouveau groupe
y placer un bouton
>revenir à l'écran de base
>selectionner le bouton
>nommez le "bouton"
> action > immediatement au temps indiqué >actionscript

la fenêtre de programmation s'ouvre

>Mettre ce code près de //écrire ici entre les accolades au dessous de
static function bouton0(mc:MovieClip):Void{

Code:


_root.bouton.onPress = function ( ) { // on presse le bouton
_root.rectangle.play();//fait tourner le rectangle
};
}


enregistrer avec le bouton html et tester

Se familiariser avec E-anim et action-script 2

--------------------------------------------------------------------------------------
LES LIENS

faire tourner un rectangle / agrandir une image / dépl.horiz.rollover / dépl.avec curseur / dépl.avec Frames

--------------------------------------------------------------------------------------
Exercice 2 :agrandir un rond



>ouvrir un groupe
>y placer une forme ronde :
> la centrer
>retourner à l'ecran de base Temps0
>nommer votre forme "rond" au dessus de :

>selectionner votre rond
>cliquer sur action :
>sur la barre orange : immediatement au temps indiqué
>plus bas action-script

La fenêtre Mtasc s'ouvre

>coller le code près de //ecrire ici entre les accolades

Code:


            _root.rond.onRollOver = function ( ) {
      
_root.rond._xscale +=125;
_root.rond._yscale +=125;
};
_root.rond.onRollOut = function ( ) {
_root.rond._xscale -=125;
_root.rond._yscale -=125;
};
   }


>enregisrter et tester :



**************************************
Exercice 2.1 : agrandir un bouton



Nommer votre animation et l'enregistrer

>ouvrir un groupe
>importer une image
>retourner à l'écran de base
>donner à ce bouton le nom de rond au dessus de :

>selectionner votre image
>cliquez sur action :
> cliquer sur la barre orange pour avoir : action immediate
> plus bas sur Action-Script

La fenêtre Mtasc s'ouvre :

>installer ce code à la place de //"ecrire ici" entre les acccolades

Code:


         _root.rond.onRollOver  = function ( ) { //au survol de l'image
_root.rond.play();
_root.rond._xscale=125;
_root.rond._yscale=125;
_root.rond.stop();   
};
   
      _root.rond.onRollOut  = function ( ) { // hors du survol
_root.rond.play();
_root.rond._xscale=100;
_root.rond._yscale=100;
_root.rond.stop();   
};
   }



> revenir sur votre écran de base
>selectionner votre image
>en haut >objet>transformer en bouton

votre image disparait et un bouton apparait
>importer à nouveau votre image dans le carré >bouton à l'état normal
> supprimer le relief en cliquant sur le mot relief
>effacer le texte
> cliquer sur bouton animé

sur la barre des tâches vous avez 3 boutons un gris(etat normal) un jaune (survol) un gris (appuyé)

>selectionner "etat normal" > centrer votre image
>selectionner " au survol" > centrer également votre image
> en cliquant simuilatément sur les deux etats des boutons et sur vos images vous pouvez vérifier tout a gauche
en dessous de :
que vos emplacements sont identiques.

>selectionner l'etat survolé et clquer sur votre image
> temps 0 >mettre un stop
> au temps 30 > changer les chiffres de droite des pourcentages de votre image
à 125 par ex. :
>recenter votre image
>revenir à l'écran de base au temps 0
> tester en cliquant sur :

Se familiariser avec E-anim et action-script 2

--------------------------------------------------------------------------------------
LES LIENS

faire tourner un rectangle / agrandir une image / dépl.horiz.rollover / dépl.avec curseur / dépl.avec Frames

--------------------------------------------------------------------------------------



Exercie 3 : déplacement horizontal rollover

Nommer et enregistrez votre anim
>Tout en haut >projet>dimensions
un cadre s'ouvre
>changer les dimensions pour cet exemple: hauteur 100, largeur 400


>ouvrir un groupe
>utilisez : et installer un rectangle noir de 120 de large
>centrer le à 0 par rapport à la petite croix de centrage
>selectionner le rectangle et le nommer "noir" au dessus de :
>revenir à l'écran de base
>nommer votre groupe "rectangle"


>sur l'écran de base temps 0
>selectionner votre rectangle et le placer tout à gauche
>cliquez sur action :

Un cadre s'ouvre
>cliquer sur la barre orange pour mettre : action permanente
>cliquer sur action script

Le cadre Mtasc s'ouvre
> coller ce script à la place de //ecrire ici entre les accolades

Code:


   static function rectangle0(mc:MovieClip):Void{
      /* <id method> <1298187799930/0> ne pas supprimer ni déplacer ce commentaire / don't supress or move this comment.*/

      _root.rectangle.onEnterFrame=function(){

_root.rectangle._x+=4;//vitesse de deplacement

if(_root.rectangle._x>280){//limite 400-120(t.du rectangle)
_root.rectangle._x=0;//repartir au point de départ
}
};
   }



>revenir sur l'écran de base>tester:

************************************

Exercice 3.1 : déplacement horizontal va et vient



Nommer et enregisrter votre animation

>Ouvrir un groupe :
>installer votre image ou votre forme (ici image120 de large, fond 400))
>centrer la petite croix du groupe au centre de votre image
>revenir à l'écran de base
>nommer votre groupe" rectangle" au dessus de :

>selctionner l'image et action :
Une fenêtre s'ouvre
>cliquez sur la barre orange> action immediate
>en dessous Action-Script

La fenêtre Mtasc s'ouvre

>installer ce code à la palce de //ecrire ici entre les accolades

Code:


   
var   vitesse=5;
_root.onEnterFrame = function ( ) {

_root.rectangle._x+=vitesse;
if(_root.rectangle._x>340 || _root.rectangle._x<60){// pour taper les traits verticaux utiliser Alt Gr-7
vitesse=-vitesse;
}
};
   
}


>revenir à l'écran de base Temps 0 enregistrer> tester :

Se familiariser avec E-anim et action-script 2

--------------------------------------------------------------------------------------
LES LIENS

faire tourner un rectangle / agrandir une image / dépl.horiz.rollover / dépl.avec curseur / dépl.avec Frames

--------------------------------------------------------------------------------------

Exercice 4: déplacement avec curseur



Nommer et enregisrter votre animation

>Ouvrir un groupe :
>installer votre image ou votre forme (ici 120 de large)
>centrer la petite croix du groupe au centre de votre image
>revenir à l'écran de base
>nommer votre groupe" rectangle" au dessus de :

>selctionner l'image et action :
Une fenêtre s'ouvre
>cliquez sur la barre orange> action permanente
>en dessous Action-Script

La fenêtre Mtasc s'ouvre

>installer ce code à la palce de //ecrire ici entre les accolades

Spoiler:

Vous pouvez remplacer "true" par 1
et "false" par zéro. Ce sera interprété de la même manière.

>revenir à l'écran de base Temps 0 enregistrer> tester :

Se familiariser avec E-anim et action-script 2

--------------------------------------------------------------------------------------
LES LIENS

faire tourner un rectangle / agrandir une image / dépl.horiz.rollover / dépl.avec curseur / dépl.avec Frames

--------------------------------------------------------------------------------------

Exercice 6 : Déplacement horizontal avec les Frames



>Ouvrir un groupe :
>installer votre première image ou votre forme
>nommer votre groupe" rectangle" au dessus de :
>ouvrir un bouton
>le nommer "boutonvert" et "avance" dans le texte
>ouvrir un second bouton
> le nommer "boutonbleu" et "recule" dans le texte

Installer vos images dans le groupe rectangle

> ouvrir le groupe rectangle en le sélectionnant dans
>ecran de base>affichage>liste des groupes>rectangle>editer
>au Temps 0 installer une image>mettre un stop
>au Temps 1 installer votre deuxième image légèrement décalée vers la droite> mettre un
stop
>sélectionner votre première image ( celle du Temps 0) faites la disparaitre en cliquant sur elle n'apparaitra pas sur les temps suivants
>au temps 2 installer votre 3eme image et >décaler >stop>faire disparaitre l'image
précédente
>etc jusqu'à ce que vous ayez installé toutes vos images, votre barre des temps doit

ressembler à ça :

>revenir à l'écran de base

>sélectionner votre bouton vert et action :

Une fenêtre s'ouvre
>cliquez sur la barre orange> action immédiate
>en dessous Action-Script

La fenêtre Mtasc s'ouvre

>installer ce code à la place de //ecrire ici entre les accolades

Code:


 
   _root.boutonvert.onPress = function()  {//si on presse sur le bouton
_root.rectangle.onEnterFrame = function(){    //déclanchera l'évènement   
      _root.rectangle.nextFrame();// frame suivante
   };
};

   _root.boutonbleu.onPress = function()  {
_root.rectangle.onEnterFrame = function(){   
      _root.rectangle.prevFrame();// frame précédente
   };
   };


>revenir à l'écran de base Temps 0 enregistrer> tester :