Publié le 1 novembre 2009 par Dawlin

Créer un mini site en FLASH : 2/3

Salut salut ! Pour la suite de ce tutoriel, nous allons voir comment réaliser une transition pour votre site full Flash ! Car Certains m'auraient dit que ce que nous avons fait dans le tuto précédent, pourquoi le faire en flash alors que c'est bien plus facile et rapide en HTML/CSS...

Eh bien en flash, on va pouvoir faire des belles transitions qui déchirent leur mère

Alors si vous n'avez pas suivi le tutoriel précédent, je vous conseille de télécharger la source du mini-site réalisé à l'occasion en cliquant ici.

Une fois votre fichier ouvert, vous allez créer une image-clé à la place de la première... en gros tout décaler d'un cran, sauf le design bien sûr, ni le calque "contenu".

Cette image vous allez lui donner un nom d'occurrence "transition". Ensuite, transférez le code où on définit toutes les arrays qui contiennent le contenu des pages sur les actions de la première image.

Donc, ici la transition sera comme ceci :

Au passage n'oubliez pas de passer la cadence de l'animation à 35 ips.

Ensuite, votre code sur la page transition ça va être ça :

Code

// on défini une vitesse :
vitesse = 20;
// On définira plus tard une variable "demande" qui demandera telle page... en attendant si elle n'existe pas

on affiche accueil
if(!demande){
    demande="accueil";
}
// On défini un booléen pour savoir si on a déjà viré la page précédente
var bool:Boolean = false;
// ici 35 fois par seconde
this.onEnterFrame = function(){
    // Tant que le contenu de la page n'a pas quitté le cadre...
    if(contp._x<=810 && bool == false){
        contp._x += vitesse;
    }
    //Sinon c'est qu'il l'a quitté...
    else if(bool == false){
        // On signale qu'il l'a quitté
        bool = true;
        // On le rappelle de l'autre côté de l'animation
        contp._x = -650;
        // On lui applique la valeur des contenus :
        contp.ttitre.text = full[demande]['titre'];
        contp.tcont.text =  full[demande]['cont'];
    }

    // Si il est bien repassé de l'autre côté mais qu'il n'est pas revenu à sa place
    if(bool == true && contp._x < 200){
        // Alors on le renvoie progressivement à sa place
        contp._x += vitesse;
    }
    // Quand il y est ..
    else{
    // On va à la bonne page
        gotoAndStop(demande);
    }
}

Et du coup il y a une variable "demande" que vous ne comprenez pas... Eh oui, quand on va cliquer sur un bouton, au lieu de lui dire d'aller à la page demandée directement, il va aller à la transition en lui disant que quand elle aura fini toutes ses acrobaties elle affichera la page X. Cette page X est demandée dans la variable "demande"

Le code des boutons sera donc :

Code

on(release){
demande = "mavie";
gotoAndStop("transition");
}

Voilà, maintenant vous arrivez à impliquer une transition... après vous pouvez vous amuser à créer plein de pages transitions différentes, et dire qu'aléatoirement ça va sur l'une ou l'autre... tant qu'elle ont le même système avec la variable "demande"...

J'allais oublier la source : Source

C'est parti pour la dernière étape ! A tout de suite !

Créer un mini site en FLASH : 3/3 »