Tutoriel: créer une interface compléte en AS3

Salut les loulous, je vous es préparé un tutoriel plutôt complet, sur la créationd'une interface (un petit template) en AS3.

Pour cela, nous utilisons différentes fonction du langage AS3, pour donner queques exemple, nous utilisons différent chargement, principalement un loader de swf. Nous utiliserons aussi des fonctions nous permettant d'avoir plusieurs états sur les bouton de notre menu.

Exemple:




Fichiers sources:
template_as3.zip

Le code:

Code:


////////////////////////////////////////////////////////////////////////////////////////
//loader
////////////////////////////////////////////////////////////////////////////////////////
//on créé un nouveau loader
var loader:Loader = new Loader(); 

//on créé l'evenement Event.COMPLETE rattaché à la fonction loaderCompleteHandler
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); 

//on affiche le loader contenant nos pages
addChild(loader); 

//on affiche la page accueil de le debut de l'animation
var url1:URLRequest = new URLRequest("page/page1.swf"); 
loader.load(url1);
//on le positionne correctement
loader.x=3;
loader.y=44;   

//on affiche un message dans le panneau de sortie si l'evenement est completé
function loaderCompleteHandler(e:Event):void { 
trace ("chargement complété");
} 
//////////////////////////////////////////////////////////////////////////////////////
//on créé notre fonction principal, elle permet de s'implifier le code
//en créant une boucle
function superCharge():void{
 
    for ( var i:int = 1 ; i <= 4 ; i++){
//on active le mode ButtonMode pour tous les boutons
menu["bt_"+i].buttonMode=true ;

//on créer les evenement pour les différents états de chaque bouton
menu["bt_"+i].addEventListener(MouseEvent.MOUSE_OVER,over);
menu["bt_"+i].addEventListener(MouseEvent.MOUSE_OUT,out);
menu["bt_"+i].addEventListener(MouseEvent.MOUSE_DOWN,clic);
menu["bt_"+i].addEventListener(MouseEvent.MOUSE_UP,declic);
//////////////////////////////////////////////////////////////////////////////////////
 
///////////////////////////////
//fonctions des boutons
///////////////////////////////
 
//Nous créons les fonction pour les différent états des boutons
function over(event:MouseEvent){
 menu["bt_"+(event.currentTarget.name.substr(3, 1))].gotoAndPlay("over")
}
 
function out(event:MouseEvent){
 menu["bt_"+(event.currentTarget.name.substr(3, 1))].gotoAndPlay("out")
}
 
function clic(event:MouseEvent){
 menu["bt_"+(event.currentTarget.name.substr(3, 1))].gotoAndPlay("click")
    var url:URLRequest = new URLRequest("page/page"+(event.currentTarget.name.substr(3, 1))+".swf"); 
    loader.load(url);   
}
 
function declic(event:MouseEvent){
 menu["bt_"+(event.currentTarget.name.substr(3, 1))].gotoAndPlay("declick")
}
/////////////////////////////////////////////FIN///////////////////////////////////////
 
}
}
 
 //on appél notre fonction principal
superCharge();


Le tutoriel:

PARTIE 1:



PARTIE 2:

la seconde parti du tuto fonctionne pas sa marque publication en cour :/
puis on peut pas télécharger le template aussi :/

Concernant la deuxième partie du tutoriel, Daylimotion peut mettre un certain temps avant de valider une vidéo. J'ai déjà été obligé de coupé le tuto en deux parties pour que cela soit conforme, alors il va falloir attendre un peu, si ce n'est pas validé dans deux jours, je serai obligé de couper la partie 2 en deux parties

Pour la source, tout est rentré dans l'ordre...

Voilà, vous pouvez maintenant visionner la seconde partie du tutoriel, désolais pour ce petit problème...

j'ai du mal à ouvrir t'on fichier fla pour copier le code avec flash cs3 :/ si non superbe t'on tutos

Sympa mais je passes en revue tes tutos en ce moments petit remarque technique au niveau optimisation de celui ci ^^"

citation :

Code:


for ( var i:int = 1 ; i <= 4 ; i++){
}


Optimisation

Code:


for ( var i:int = 1 ; i < 5 ; i++)
    {


Il est plus sympa de faire ca pour les raisons suivante ^^"

On fais pas deux actions par boucle le < + le = on fais tous simplement le < ca changes pas grand choses dans le tuto que tu as fais mais dans un gros projet ca peus changer quelque choses je penses.


Je voulais te poser une question comment tu fais pour faire un Tween par exemple dans une function de ta boucle

function over(event:MouseEvent)
{
TweenMax.to(ici ^^", 0, {dropShadowFilter:{color:0x000000, alpha:1, blurX:2, blurY:2, strength:2, quality:3}});
}

Voila l'ami j'attend une réponse a bientot sur MSN AU MICRO xD

WOXE

Salut woxe, je te demanderai simplement une petite chose, quand tu présentes une portion de code, essais d'utiliser les balises prévus à cet effet

Code:

[code][/code]

, car ceci et légèrement gênant à la relecture. Sinon pour l'optimisation, en effet il vaut mieu simplifier le

Code:

<=4

par le

Code:

<5

.

Pour ta dernière question, en fait, à l'endroit où tu as écrit"ici", tu ne peux mettre que le nom du clip qui bénéficiera du tween, plus précisément du nom d'occurrence. Mais ta question est un peu vague, car tu dis "comment avoir un Tween dans une fonction de boucle " En effet, selon la situation la réponse pourrait être différente, mais attention si tu regardes la structure proposée par le site officiel tu pourras t'apercevoir:

Code:

TweenMax(target:Object, duration:Number, variables:Object):TweenMax

Tu peux t'apercevoir que tu dois préciser ton "Target:Object" ce qui veut tout simplement dire "l'occurrence de ton clip"

Mais regarde la doc officiel, peut être que tu y trouveras ton bonheur:

http://blog.greensock.com/tweenmaxas3/

Salut,

Je voulais savoir justement comment tu relier ton tween avec un clip vennant d'une boucle for tous simplement.

Perso, je ne me suis jamais posé la question, as-tu regardé la doc officiel?

tuto niquel

Mais pourquoi dans ton code tu fait appel a tes pages dynamiquement? quel est l'avantage par rapport a l'appel statique?

Code:

[font=Courier New]var url:URLRequest = new URLRequest("page/page"+(event.currentTarget.name.substr(3, 1))+".swf");[/font]

je veux dire, tu n'aurai pas pu appeler la page 1 en cliquant sur le bouton 1?