Cours 02 : Scroll simple avec fond sans jointure

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

Ouvrez votre logiciel de dessin ( ici je travaillerai avec PSP )

Ouvrez un fichier transparent de 600 x 300 transparent

Choisissez en avant et arrière plans 2 couleurs de même tonalité ( une claire, une foncée )
Peignez votre fond avec la couleur d'avant-plan, puis utilisez mura's meister / clouds pour obtenir : ( à peu près ... )



Enregistrez cette image sous le nom fond01.jpg

On ouvre flash CS4, mais cette fois-ci on met 600 x 300 pour la taille de notre scène et toujours 50 I/S ( images par seconde )

Importez votre fond01 dans la bibliothèque.

Enregistrez votre programme dans "cours02" sous le nom cours02.fla

Placez votre fond01 sur la scène de la même façon que dans le cours01.
N'oubliez pas d'aligner

Ouvrez l'onglet "propriétés"

Vous avez ceci :



ATTENTION :
Il se peut que POSITION ET TAILLE ne soient pas visibles.
Dans ce cas, cliquez sur le petit triangle devant le mot "position"

X est la position horizontale : ici il doit être égal à 0, parce que notre fond est à gauche
Y est la position verticale : ici il doit être égal à 0, parce que notre fond est en haut
W est la largeur de l'image, ici 600
H est la hauteur de l'image, ici 300

Nous allons maintenant faire scroller ( défiler ) ce fond par code.

1* il faut transformer ce jpg en movie-clip
2* on fait un clic droit sur le fond / convertir en symbole

Nous avons une nouvelle fenêtre :



3* on remplit les cases de cette fenêtre
pour le nom, j'ai repris le nom de l'image auquel j'ai adjoint _mc pour rappeler que c'est un movie-clip
pour le type : mettez "clip" dans le menu déroulant
alignement "haut-gauche" => regardez le dessin
finissez avec "OK"

4* regardez bien, la fenêtre "propriétés" a changé



l'icône représente une roue dentée ( signe du movie-clip )

Entrez comme moi "fond01" comme nom d’occurrence.

Nous allons maintenant rentrer le code :

Créez un nouveau calque que vous appelez "actions" ( voir cours01 )

F9 pour ouvrir la fenêtre de code

Code:


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

function je_scrolle(evt:TimerEvent)
{
fond01.x=fond01.x-1;
 if ( fond01.x==-600 )
 {
 fond01.x=0;
 }
}


enregistrez votre programme, puis contrôle / tester l'animation

Voici ce que vous devez obtenir :

Publiez pour obtenir le swf et fermez tout

Reprenez votre logiciel de dessin.

Votre fond fait 600 x 300, on va le doubler dans le sens de la largeur donc 1200 x 300

Ouvrez une nouvelle image transparente de 1200 x 300
Collez votre image de 600 x 300 une fois à l'extrême gauche et une fois à l'extrême droite.
Enregistrez le résultat en jpg sous le nom de fond02.jpg

Vous avez ceci :



Ouvrez Flash CS4
gardez 600 x 300 comme scène et 50 en I/s
importez le fond02 en bibliothèque

Placez le fond02 sur la scène ( on va bien le placer par la suite )
Il déborde à gauche et à droite, c'est normal, car il est 2 fois trop grand !

Clic droit et, comme précédemment, convertir en symbole.
Mettez le même nom que précédemment pour pouvoir récupérer le code de tout à l'heure. ( fond01_mc )
type : clip
alignement haut et gauche
OK

Nom de l’occurrence : fond01

Dans l'onglet "propriétés", mettez X = 0 et Y = 0, c'est une autre façon d'aligner le fond

Entrez le code comme précédemment

Enregistrez le programme sous le nom : cours02b.fla

Testez

vous devez avoir :

Quelques commentaires sur le code :

1* var TicTac:Timer=new Timer(20,0);
Le 20 provient du fait que nous devons préciser le délai entre chaque images ( en millisecondes )
Or 1 seconde = 1 000 millisecondes
Comme nous avons choisi 50 images par seconde cela donne 1 000 / 50 = 20 => voilà le 20 justifié
C'est indispensable pour la fluidité

2* fond01.x==-600
le 600 vient évidemment de la largeur de notre bande au départ ( à changer si vous prenez une autre largeur )

3* fond01.x=fond01.x-1;
le -1 correspondant à la vitesse du scrolling
essayez avec 2, 3 ou 4 et vous verrez ! ! !

Alors pourquoi programmez en Action Script un scrolling puisque vous savez le faire par interpolation ?
Pour 2 raisons :
- d'abord c'est très facile de changer la vitesse
- ensuite cela permettra l'interactivité mais on verra cela plus tard !

Remarque : ici les 2 images se collent bien sans démarcation
Dans le cas contraire, on peut utiliser : effets / effets d'images / mosaïque sans jointure, voire même le programme 20/20

Nous allons maintenant terminer notre scrolling :

On va y intégrer un png.

Avec le logiciel de dessin, on fait donc une image en png de son pseudo.

On importe cette image dans la bibliothèque => on peut y voir pseudo.png mais aussi symbole3 ( pour moi ) qui reprend le dessin

Créez un nouveau calque => appelez-le "pseudo"

Placez sur votre scène et testez le programme.

Si tout va bien, enregistrez-le dans votre dossier sous le nom cours02c.fla

Il ne reste plus qu'à ajouter votre copyright.
Si vous l'avez gardé comme je vous l'avais dit dans le cours01, allez le chercher et collez-le dans la fenêtre "actions" du calque "actions" au-dessus du code du scrolling.

publiez et terminez ! ! !