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

Bonjour artkabis je t'écris car j'ai essayer le tuto et j'ai un petit probléme le programme flash cs 3 pro que je posséde ne reconnais pas la classe tweenMax
il me met ceci comme message :

Code:

1172: La définition gs:TweenMax est introuvable.
1172: La définition gs.easing:Circ est introuvable.
1172: La définition gs.easing:Back est introuvable.
1172: La définition gs:TweenMax est introuvable.
1172: La définition gs.easing:Circ est introuvable.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
TweenMax.to(page,.5,{alpha:1});
TweenMax.to(page,.5,{alpha:.4});
TweenMax.to(page,.5,{alpha:1, x:centreX,onComplete:agrandi1});
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Circ.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Circ.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Back.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie Back.
1120: Accès à la propriété non définie TweenMax.
1120: Accès à la propriété non définie TweenMax.


enfin tu vois un grand message d'erreur je ne vois pas de soluce a mon niveaux mes je me demande si il ne faux pas installer cette classe twennMax en attende de ta réponce Merci d'avance Demeter.

Il faut que tu installes la classe TweenMax, tu trouveras sur ce forum un tuto pour l'installer ....

ok merci je regarde de suite bien a toi Demeter

Super Tuto ! Merci beaucoup
J'ai une question...

Peut-on lorsque l'un des clip est "agrandis", appeler un autre clip qui viendrais se superposer à ce dernier ?

Je ne sais pas si c'est très clair...

Merci encore !

on pourrait en faire meme une gallerie photo...

et pour l instal des classes n'oublier pas les sous dossier

mon dossier/maclasse/src/etc...(ok)

mon dossier/???/???....(no)

flash ne le trouvera pas...

Pour Nitrographik:
Alors oui ceci est tout à fait possible. il te suffira de l'ajouter avec addChild lorsque tu cliqueras su un bouton, il faudra ensuite le supprimer avec removeChild après utilisation.

PS:Merci à muca pour cette astuce, car il faut en effet prendre en compte le dossier parent de la bibli, sinon flash ne trouvera pas le bon dossier

Merci beaucoup, ça fait 2 jours que je bidouille (j'ai quand même réussi a obtenir quelque chose)

Il vaux mieux que je revois mon code !!!! Je bosse dur sur l'interface de mon futur website c'est hard quand on connais rien en code !

Tu verras que la création d'un site en flash et le meilleur moyen d'assimiler le maximum de connaissance en actionscript, en effet pour créer un site en flash il faut savoir utiliser toute une palette de fonctions, de classes et de composants que l'on utiliserais peut être pas dans un projet classique. Bref tu verras qu'à la fin de ton projet, tes connaissances seront bien plus importante qu'avant. En tout cas bon courage pour la suite

C'est clair d'autant que je me laisse toujours tenter par certaines possibilité donc je m'informe et ça prends forme ! j'aime la poésie !

Bonjour,

J'aimerais pouvoir insérer dans une des cases un programme en flash que j'ai déjà fait. Est-ce qu'il est possible de l'importer sans être obligé de le refaire complètement dans la case?
Si oui, j'aimerais savoir comment svp

Merci d'avance à ceux qui se pencheront sur la question

Qu'entend tu par 'case' ?

il doit parler d un loader je pense ...

Alors tu souhaites remplacer l'image de l'UILoader par un swf que tu as déjà créé, est-ce bien ça ?

Si oui, le composant UILoader prend en compte le chargement de swf distant, il n'y a donc aucun problème à charger un swf à la place d'une image.

En fait ce que j'appelle "case" c'était une des 3 pages.
Je voulais savoir si j'étais obligé de refaire tout mon prog dans une page ou alors si je pouvais l'appeler directement dans celle-ci. Donc ça serait avec UILoader?
Merci d'avance