Structure d'un webSite en as3 (niveau intérmédiaire)

Salut les loulous, aujourd'hui j'ai décidé de vous apprendre à créer votre propre site full flash, bien sûr nous n'auront que la structure de base, mais sachez que vous pourrez personnaliser cette base pour que ceci soit plus sympa à regarder.

Prérequis:
Avoir installé la classe TweenMax.
Avoir quelques bases en as3.

Apercu:


1°) Le document
Commençons par ouvrir un nouveau document de 450 par 450, 25 ips et choisissez une couleur qui vous plaît.

2°) Création des pages
Maintenant, il va falloir commencer par créer nos trois pages, pour la première, sélectionner l'outil rectangle (r) et tracez un carré de 150 pixels par 150. Sélectionnez le, puis convertissez le en symbole de type clip (raccourcie "F8"), donnez-lui un identifiant (peut importe) et choisissez "p1" comme nom d'occurrence (ceci est très important pour la suite).


Une fois que ceci a été fait, nous devons entrer à l'intérieur en double cliquant dessus, créez trois nouveaux calques: un pour le titre, l'autre pour le contenue textuel et le dernier pour la déco:


Pour le texte, je vous conseille d'utiliser une police plus petite ou égale à 11, et de choisir "anti-alias-pour l'animation".

Revenez sur la scène, puis sélectionnez votre page, faites un "ctrl+c" pour la copier, puis "ctrl+shift+v" pour la coller en place, déplacez la copie de page et en faisant un clic droit dessus, choisissez "dupliquer le symbole", donnez-lui un autre identifiant et choisissez "p2" comme nom d'occurrence.

Modifier ensuite le contenu de cette page à votre guise.

Répétez l'opération une dernière fois pour la troisième page: copie, duplication, occurrence "p3" et modifications.

Voilà, à ce stade, vous devez avoir trois pages distincts ayant respectivement les noms d'occurrences "p1", "p2", "p3".

Placez ces trois pages à l'extérieur de la scène, "p1" à gauche, "p2" en bas et "p3" à gauche.

3°)Le bouton "entrer"
Revenons sur la scène principale, puis créons deux nouveaux calques, un pour le bouton "entrer" et l'autre pour les actions.

Comme vous vous en doutez, il va falloir créer ce fameux bouton "entrer". Placez-vous donc sur le bon calque et commencez par tracer un rectangle, convertissez le en clip, ensuite, donnez-lui "entrer" en identifiant et cocher "exporter pour actionscript". Dans "classe" précisez: "Entrer" (avec une majuscule).


Revenez sur la scène principale et supprimez le calque qui contient le bouton fermer et donc son contenu.

4°) Les actions
Placez-vous sur le calque "actions" et faites "F9" pour ouvrir le panneau des actions. Nous allons donc commencer à coder notre application.

Nous commençons par faire nos imports:

Code:


//----------------------------------○○○__Imports
import gs.TweenMax;
import gs.easing.Circ;
import gs.easing.Back;


Ensuite nous devons instancier les variables qui seront utilisés par la suite:

Code:


//----------------------------------○○○__vars
var p1Zoom:int = 0;
var p2Zoom:int = 0;
var p3Zoom:int = 0;
var centreX:int = stage.stageWidth/2;
var centreY:int = stage.stageHeight/2;
var pWidth:Number = 150;
var pHeight:Number = 150;


Dans ce code nous préparons le zoom des pages, puis nous gardons en mémoire le centre de la scène. Nous enregistrons enfin la largeur et la hauteur dans des variables.

Nous devons maintenant gérer le bouton "entrer":

Code:


//----------------------------------○○○__entrer
var entrer:Entrer = new Entrer();
addChild( entrer );
entrer.x = centreX;
entrer.y = -100;
entrer.buttonMode = true;
TweenMax.to(entrer,.9,{y:centreY});


Dans ce code nous créons dynamiquement notre bouton "entrer" pour pouvoir le supprimer par la suite, puis nous le plaçons en dehors de la scène pour ensuite le replacer avec une Tween.


Il va falloir ensuite créer nos écouteurs:

Code:


//----------------------------------○○○__Listener
addEventListener("mouseOver",over);
addEventListener("mouseOut",out);
addEventListener("mouseUp",clic);
entrer.addEventListener("mouseUp",entre);


Ici nous activons l'écoute des rollOver, rollOut et clic sur nos pages. Enfin nous écoutons le clic sur le bouton "entrer".

Passons au vif du sujet est initialisons notre projet après clic sur le bouton "entrer":

Code:


//----------------------------------○○○__Init
function entre(e:MouseEvent):void{
   TweenMax.to(entrer,.9,{y:-100, alpha:0, onComplete:suppEntrer});
   function suppEntrer(){
      removeChild(entrer);
      entrer = null;
      System.gc();
      TweenMax.to(p1,.6, {x:centreX-pWidth, y:centreY, alpha:.5});
      TweenMax.to(p2,.6, {x:centreX, y:centreY, alpha:.5});
      TweenMax.to(p3,.6, {x:centreX+pWidth, y:centreY, alpha:.5});
   }
}


Dans ce code, nous commençons par sortir le bouton "entrer", une fois la tween effectuée, la fonction suppEntrer sera joué.
Nous créons donc la fonction "suppEntrer". Dans cette fonction, nous passons le bouton "entrer" à null et nous appelons le ramasse miette pour qu'il le supprime définitivement.
Pour finir, nous utilison la classe TweenMax pour repositionner nos pages correctement sur la scène et leurs donner un alpha à 50%.

Passons ensuite aux fonctions over et out:

Code:


//----------------------------------○○○__fonctions over et out
function over (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   TweenMax.to(page,.5,{alpha:1});
}
function out (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   TweenMax.to(page,.5,{alpha:.4});
}


Comme vous pouvez le voir, nous récupérons la page survolé ou non dans la variable "page", ensuite si nous sommes dessus, l'alpha et à 100% sinon à 50%.

Maintenant nous allons coder la fonction la plus importante, en effet c'est celle qui nous permettra de zoomer sur la page, tout en lui donnant un effet de repositionnement.

Code:


//----------------------------------○○○__fonctions clic
function clic (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   if (e.target.name == "p1"){
      p1Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.5,{alpha:1, x:centreX,onComplete:agrandi1});
      function agrandi1():void{
         if(p1Zoom == 1)TweenMax.to(page,.7,{width:448, height:448, ease:Back.easeOut});
      }
      if (p1Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150,ease:Circ.easeOut, onComplete:imp});
         removeEventListener("mouseOut",out);
         function imp(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX-pWidth});
            addEventListener("mouseOut",out);
            p1Zoom = 0;
         }
      }
   }
   //------------------------------------------------------------------------------
   if (e.target.name == "p2"){
      p2Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.1,{alpha:1, x:centreX,onComplete:agrandi2});
      function agrandi2():void{
         if(p2Zoom == 1) TweenMax.to(page,.7,{width:448, height:448, ease:Back.easeOut});
      }
      if (p2Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150,ease:Circ.easeOut, onComplete:imp2});
         function imp2(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX});
            addEventListener("mouseOut",out);
            p2Zoom = 0;
         }
      }
   }
   //------------------------------------------------------------------------------
   if (e.target.name == "p3"){
      p3Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.5,{alpha:1, x:centreX,onComplete:agrandi3});
      function agrandi3():void{
         if(p3Zoom == 1)TweenMax.to(page,.7,{width:448, height:448,ease:Back.easeOut});
      }
      if (p3Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150, ease:Circ.easeOut, onComplete:imp3});
         function imp3(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX+pWidth});
            addEventListener("mouseOut",out);
            p3Zoom = 0;
         }
      }
   }
}


Comme vous le voyez, cette fonction est plutôt volumineuse, en effet il nous faut positionner chacune des pages indépendamment, sachant que chacune d'elle se verra attribués deux fonctions: une pour agrandir l'image et l'autre pour la réduire et la replacer a son point d'origine. Nous pouvons aussi nous apercevoir que nous utilisons le setChildIndex pour placer la page cliquée au-dessus des autres.

Je vais expliquer le fonctionnement de la première page, sachant que les deux autres utiliserons la même technique:

Tout d'abord, nous regardons si le nom de la page est "p1", si c'est le cas, nous ajoutons 1 à la variable "p1Zoom". Ensuite nous la plaçons au-dessus des autres avec setChildIndex et nous supprimons l'écouteur du rollOver (pour ne plus avoir de transparence pendant la lecture).

Nous utilisons encore une fois la Tween pour recentrer notre page, nous réglons l'opacité sur 100%, une fois la tween terminée, la fonction "agrandi1" est joué. Cette fonction est utilisée pour agrandir notre page sur toute la surface de la scène.

Pour ce qui concerne de la deuxième condition (if(p1Zoom == 2)), celle-ci n'est appelé qu'après deuxième clic sur la page, si deuxième clic il y a, alors nous repositionnons la page à sa place d'origine, nous mettons l'opacité à 50%, puis remettons la profondeur originelle. Pour finir la variable p1Zoom est remise à 0.

Voilà, cette étape est répétée par le nombre de page et seul les positions changent.

Voici le code complet du projet:

Code:


//----------------------------------???__Imports
import gs.TweenMax;
import gs.easing.Circ;
import gs.easing.Back;
//----------------------------------???__vars
var p1Zoom:int = 0;
var p2Zoom:int = 0;
var p3Zoom:int = 0;
var centreX:int = stage.stageWidth/2;
var centreY:int = stage.stageHeight/2;
var pWidth:Number = 150;
var pHeight:Number = 150;
//----------------------------------???__entrer
var entrer:Entrer = new Entrer();
addChild( entrer );
entrer.x = centreX;
entrer.y = -100;
entrer.buttonMode = true;
TweenMax.to(entrer,.9,{y:centreY});
//----------------------------------???__Listener
addEventListener("mouseOver",over);
addEventListener("mouseOut",out);
addEventListener("mouseUp",clic);
entrer.addEventListener("mouseUp",entre);
//----------------------------------???__Init
function entre(e:MouseEvent):void{
   TweenMax.to(entrer,.9,{y:-100, alpha:0, onComplete:suppEntrer});
   function suppEntrer(){
      removeChild(entrer);
      entrer = null;
      System.gc();
      TweenMax.to(p1,.6, {x:centreX-pWidth, y:centreY, alpha:.5});
      TweenMax.to(p2,.6, {x:centreX, y:centreY, alpha:.5});
      TweenMax.to(p3,.6, {x:centreX+pWidth, y:centreY, alpha:.5});
   }
}
//----------------------------------???__fonctions
function over (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   TweenMax.to(page,.5,{alpha:1});
}
function out (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   TweenMax.to(page,.5,{alpha:.4});
}
function clic (e:MouseEvent):void{
   var page:MovieClip = (MovieClip)(e.target);
   if (e.target.name == "p1"){
      p1Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.5,{alpha:1, x:centreX,onComplete:agrandi1});
      function agrandi1():void{
         if(p1Zoom == 1)TweenMax.to(page,.7,{width:448, height:448, ease:Back.easeOut});
      }
      if (p1Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150,ease:Circ.easeOut, onComplete:imp});
         removeEventListener("mouseOut",out);
         function imp(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX-pWidth});
            addEventListener("mouseOut",out);
            p1Zoom = 0;
         }
      }
   }
   //------------------------------------------------------------------------------
   if (e.target.name == "p2"){
      p2Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.1,{alpha:1, x:centreX,onComplete:agrandi2});
      function agrandi2():void{
         if(p2Zoom == 1) TweenMax.to(page,.7,{width:448, height:448, ease:Back.easeOut});
      }
      if (p2Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150,ease:Circ.easeOut, onComplete:imp2});
         function imp2(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX});
            addEventListener("mouseOut",out);
            p2Zoom = 0;
         }
      }
   }
   //------------------------------------------------------------------------------
   if (e.target.name == "p3"){
      p3Zoom ++;
      setChildIndex(page, 2);
      removeEventListener("mouseOut",out);
      TweenMax.to(page,.5,{alpha:1, x:centreX,onComplete:agrandi3});
      function agrandi3():void{
         if(p3Zoom == 1)TweenMax.to(page,.7,{width:448, height:448,ease:Back.easeOut});
      }
      if (p3Zoom == 2){
         TweenMax.to(e.target,.4,{width:150, height:150, ease:Circ.easeOut, onComplete:imp3});
         function imp3(){
            setChildIndex(page, 0);
            TweenMax.to(page,.3,{alpha:.5, x:centreX+pWidth});
            addEventListener("mouseOut",out);
            p3Zoom = 0;
         }
      }
   }
}


Vous pouvez télécharger la source de ce tutoriel ci-dessous:



.

Merci pour ce tuto.... je pense que sa va pas mal m'aider

Ouai c'est une bonne base pour commencer, bien sûr ceci n'est qu'une structure, mais avec un peu d'effort sur le design, je pense que ceci peut s'avérer un très bon début.

Merci Artka pour ce tuto il m'intéresse grandement aussi

Sympa le tuto, je le trouve interessant aussi, merci artka

Merci !!!

J'ai adoré ton tuto merci...

Et bien je suis content de voir que ce tuto t'es plus !!!! thanks...

C'est assez galère de voir des personne noté mon tuto comme si il était naz, alors qu'aucun commentaire va dans ce sens, donc un petit message à la personne qui c'est permis de me donner cette note. Si tu n'as pas aimé ce tuto est au moins l'honnêteté de le préciser, ici on ne ce cache pas, si il y à des choses que tu n'as pas comprise où apprécié, il faut le dire. Bon je sais par expérience qu'il arrive que certain membres veuillent tester le bouton de notation et mette une note par erreur, mais dans ce cas, un petit message pour me le dire ne serait pas superflu.

PS: Surtout que j'ai la possibilité de savoir qui m'a mis cette note, alors bon...

Alors moi j'ai bien aimé ce tuto , il m'a permit de réfléchir à pas mal de trucs et ainsi améliorer ma logique ( au service qu'apporte l'incrémentation par exemple , enfin je pense ... ) par contre il y aurait pas un petit problème de "centrage". Surtout sur mon test , le bouton entrer est plus a droite, ensuite les trois pages ( p1,p2 et p3 ) son elles aussi plus sur la droite ( chez moi ca donne un effet catastrophique on peu rien lire xP ), ici sur l'exemple ça le fait mais on peut tout voir. C'est normal ou c'est moi qui est un truc mal reglé ?

En bref merci pour ce tuto, qui à mon avis bien travaillé peut donner un bel effet, mais peut-être devrais-je commencer par quelque chose de plus facile