Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


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

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

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

    Message par artkabis le Ven 14 Nov - 12:33

    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:


    Le support du tutoriel se fait dans ce topic Wink


    Dernière édition par artkabis le Jeu 20 Nov - 13:30, édité 2 fois

      La date/heure actuelle est Sam 3 Déc - 13:37