Cours03 : scroll interactif

Commencez par préparer un dossier "cours03" dans votre dossier section7.

Nous allons créer un programme interactif, il nous faudra donc des boutons.

Créons ces boutons de la façon suivante :
- ils doivent être en png
- ils doivent être clairs par rapport à leur fonction ( scroll droite ou gauche, 1 ou 2 pixels )
- on peut faire 3 dessins par bouton pour visualiser le bouton au repos, survolé par la souris ou actionné )

Tous les png créés seront placés dans le dossier "cours03"









Je récupère ici le fond et le logo qui m'ont servi pour faire l'exercice 2 du cours précédent.

Les données seront donc :
500 x 500 pour le premier fond :



1000 x 500 pour le fond du scrolling obtenu en doublant horizontalement l'image du fond

le pseudo en png

Mettez tout cela dans le cours03 et on commence alors le flash

On ouvre le programme flash et on modifie les propriétés :

500 x 500; 50 I/s

Tout de suite, on enregistre ce programme sous le nom cours03.fla dans le dossier "cours03"

Importez dans la bibliothèque le fond de 1000 x 500

Changez le nom du calque1 en "fond"

Ouvrez l'onglet "bibliothèque"
Placer le fond sur la scène en drag&drop ( glisser/déposer)

Ouvrez l'onglet "propriétés"
modifier => X=0 et Y=0

Clic droit sur le fond / convertir en symbole
nom : fond
type : clip
alignement : haut et gauche
OK

Mettez "fond_mc" comme "nom de l’occurrence"

Sauvegardez le programme.

Nous allons maintenant rentrer le code :

Créez un nouveau calque appelé "actions"

Copiez-y ce code : ( vous vous souvenez ? en ouvrant la fenêtre "actions" )

Code:


var vitesse:*=0 ;

var TicTac:Timer=new Timer(20,0);
 
TicTac.addEventListener(TimerEvent.TIMER,je_scrolle);
TicTac.start();

function je_scrolle(evt:TimerEvent)
{
fond_mc.x=fond_mc.x+vitesse;
   if ( fond_mc.x==-500 )
   {
   fond_mc.x=0;
   }
}



Sauvegardez le programme.

Pour ceux que le code intéresse :
J'ai fait quelques changements par rapport au cours précédents.
Essentiellement, j'ai créé une variable "vitesse" qui nous servira à orienter le scroll.

Vous pouvez tester le programme !

Il ne scrolle pas ? Normal, la vitesse se met d'origine à zéro ! ! !

Nous allons rendre ce programme interactif en y incrustant notre premier bouton.

Créez un nouveau calque appelé "boutonD1"
Pourquoi D1 => parce que le scroll se fera à droite 1 pixel à la fois.

Importer les images du bouton dans la bibliothèque.
Placez l'image du bouton "au repos" sur la scène.

Je l'ai mis en X=5 Y=460 ( onglet "propriétés" )

Faites un clic droit dessus, convertir en symbole :
nom : boutonD1
type : bouton
alignement : haut, gauche

nom de l'occurence mettez "boutonD1_btn"

Il faut maintenant ajouter le code correspondant à ce bouton.

Revenez donc sur le calque "actions" et ajoutez le code suivant ( en tête )

Code:



boutonD1_btn.addEventListener(MouseEvent.CLICK, vitesseD1);

function vitesseD1 (event:MouseEvent)
{
vitesse=-1;
}



Pour les intéressés par le code :
- le bouton met -1 dans la variable vitesse
- (-1) correspond à 1 pixel vers la droite

Sauvegardez le programme.

Vous pouvez le tester :
- le programme ne scrolle pas au départ
- on clique sur le bouton et le fond démarre

voici ce que vous devez avoir (sans le pseudo évidemment )=> faites un "clic" sur le bouton

Nous allons faire "pro" maintenant en faisant réagir le bouton en fonction de la position de notre curseur de souris
Importer l'image du bouton survolé dans la bibliothèque
Cliquez ensuite sur le symbole tricolore en haut et choisissez le boutonD1



Nous entrons alors dans la fenêtre du bouton :
- Regardez en haut à gauche




- Puis en bas, à gauche



Cliquez dans la colonne juste à côté du petit rond noir de la colonne "haut"
Puis "clic droit" / insérez une image clé vide

La scène se vide et vous y incrustez votre image de bouton survolé

Profitez de l'onglet "propriétés" pour mettre X=0 et Y=0 de façon à ce que les 2 dessins de bouton se superposent

On recommence juste à côté avec le troisième dessin du bouton.

Importez la 3ème image du bouton
Cliquez dans la colonne juste à côté du petit rond noir de la colonne "dessus"
Puis "clic droit" / insérez une image clé vide

La scène se vide et vous y incrustez votre 3ème image de bouton

Profitez de l'onglet "propriétés" pour mettre X=0 et Y=0 de façon à ce que les 3 dessins de bouton se superposent

Revenez à la scène principale en cliquant sur "séquence1" tout en haut à gauche




Testez le programme :
- au départ => pas de scroll
- la souris au-dessus du bouton, il devient orange
- on clique, le bouton devient rouge et le scroll démarre

Créez un nouveau calque appelé "boutonD2"
Pourquoi D2 => parce que le scroll se fera à droite 2 pixels à la fois.

Importez les images du boutons 2 dans la bibliothèque.
Placez ce bouton sur la scène

Je l'ai mis en X=5 Y=420 ( onglet "propriétés" )

Faites un clic droit dessus, convertir en symbole :
nom : boutonD2
type : bouton
alignement : haut, gauche

nom de l'occurrence, mettez "boutonD2_btn"

Sur le calque "actions", ouvrez la page de code, effacez le code précédent et remplacez-le par :

Code:


boutonD2_btn.addEventListener(MouseEvent.CLICK, vitesseD2);

function vitesseD2 (event:MouseEvent)
{
vitesse=-2;
}

boutonD1_btn.addEventListener(MouseEvent.CLICK, vitesseD1);

function vitesseD1 (event:MouseEvent)
{
vitesse=-1;
}

var vitesse:*=0 ;



var TicTac:Timer=new Timer(20,0);
 
TicTac.addEventListener(TimerEvent.TIMER,je_scrolle);
TicTac.start();

function je_scrolle(evt:TimerEvent)
{
fond_mc.x=fond_mc.x+vitesse;
   if ( fond_mc.x<=-500 )
   {
   fond_mc.x=0;
   }
}



Il vous reste à faire comme pour le bouton1, en plaçant les images qui correspondent au survol de la souris et au clic.

Il faut maintenant continuer avec un calque boutonG1, puis un calque boutonG2 de la même manière.

Suivez le modèle pour importer les images des boutons.
Placez également les boutons sur la scène en faisant attention aux calques sur lesquels vous les placez.

Code:


boutonG2_btn.addEventListener(MouseEvent.CLICK, vitesseG2);

function vitesseG2 (event:MouseEvent)
{
vitesse=2;
}


boutonG1_btn.addEventListener(MouseEvent.CLICK, vitesseG1);

function vitesseG1 (event:MouseEvent)
{
vitesse=1;
}


boutonD2_btn.addEventListener(MouseEvent.CLICK, vitesseD2);

function vitesseD2 (event:MouseEvent)
{
vitesse=-2;
}

boutonD1_btn.addEventListener(MouseEvent.CLICK, vitesseD1);

function vitesseD1 (event:MouseEvent)
{
vitesse=-1;
}

var vitesse:*=0 ;



var TicTac:Timer=new Timer(20,0);
 
TicTac.addEventListener(TimerEvent.TIMER,je_scrolle);
TicTac.start();

function je_scrolle(evt:TimerEvent)
{
fond_mc.x=fond_mc.x+vitesse;
   if ( fond_mc.x<=-500 )
   {
   fond_mc.x=0;
   }
   if ( fond_mc.x>0 )
   {
   fond_mc.x=fond_mc.x-500;
   }
}