Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: 1 2 3 [4]   En bas

Auteur Sujet: AS2 COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???  (Lu 33355 fois)

Chrys

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 178
    • Voir le profil
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #45 le: janvier 18, 2008, 15:56:00 pm »

Hum et oui, et merci T_bo
Faudrait que je lise les commentaires des codes, jusqu'au bout ! :rolleyes:

J'ai donc espacé chaque albums de sa valeur plus 10px, pour voir. Ca roule.
Je demande à la boucle 4 albums, mais j'en vois que 3. (je ne vois pas le dernier)
Et la partie texte n'apparait que pour le premier album.(du haut de la page)

Voili

Chrys
IP archivée

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #46 le: janvier 18, 2008, 16:26:57 pm »

Coucou,

S'il manque un album augmente la boucle de 1 ou commence à zéro.


Bon courage.....
IP archivée
Savoir mal est pire qu'ignorer

Chrys

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 178
    • Voir le profil
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #47 le: janvier 18, 2008, 17:40:46 pm »

OK, j'ai choisi l'option d'augmenter la boucle, qui du coup passe a 5.

En test, je me suis trouvé avec  tout sauf les textes. Puis lorsque j'ai ajouté un fichier texte Album5.txt.
Mon premier album a retrouvé son texte. Les trois dernier eux, ne l'ont pas.

Dois je modifier cette ligne ? :

lireTexteExterne.load("textes/Album"+i+".txt", AlbumActuel);

Merci

Chrys
IP archivée

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #48 le: janvier 19, 2008, 04:17:57 am »

Bonjour Chrys,

Là je suis fatigué. J’ai zappé une étape et j’ai fais 2 erreurs dans le code.

Oui mais je l'ai fais exprès pour voir si tu suis correctement ;)

Comment ça mauvaise fois !!!!!!


De rage et de dépit je viens d'effacer mon message matinal et je recommence entièrement ici. Excuse-moi....


Je résume :

Nous savons maintenant réaliser l'appel d'un texte externe, l'application d'une feuille de style css sur le texte et enfin le chargement d'un fichier externe de type swf, jpg, gif par l'objet MovieClipLoader.


Maintenant il faut répéter x fois les actions précédentes. Pour cela nous allons utiliser les boucles. Une boucle c'est faire les mêmes opérations un nombre de fois x (boucle for) ou faire les mêmes opérations jusqu'à l'obtention d'une condition (boucle while).

Nous allons rencontrer 2 problèmes :

Le premier problème est que nos MC doivent changer de nom. Le premier doit être nommé Album1 le second Album2 etc. Pour cela il faut en plus de la boucle faire appel à la notion de concaténation. La concaténation c'est l'action de mettre bout à bout 2 variables de type caractère.

Exemple :

var nom:String="Dupont";
var prenom:String = "Jean";
//concaténation
trace(nom+" "+prenom)
//Le résultat affiché est Dupont Jean
Le second c’est que nous sommes en mode asynchrone et donc il faut récupérer nos données textuelles avant de créer les albums. En effet si dans ma boucle j’appelle à chaque passage un fichier texte, je ne récupère que le dernier. Pourquoi ? Parce que mes données arrivent bien plus lentement que ma boucle tourne et donc dans mon objet loadvars chaque fichier texte écrase le précédent avant que je ne l’écrive dans la zone de texte d'ou l'apparition uniquement du dernier descriptif.

Il nous faut dans un premier temps faire 1 fichier texte contenant le descriptif de tous les albums.

Albums=descriptif 1 avec balises html§descriptif 2 avec balise html§descriptif 3 etc.....

Le séparateur entre chaque descriptif est §. Attention il est important car nous allons l'utiliser dans le code pour découper les descriptifs et retrouver celui de chaque album.

L'organisation de nos MC :



Comment faire le code ?

Nous allons scinder notre code sur 2 images clés. Sur la première le MovieClipLoader le chargement de la feuille de style et le LoadVars.

///////////////////////////////////////////////////////////////////////// Chargement fichiers externes
//Création d'une occurrence de l'objet MovieClipLoader pour gestion du chargement JPG, SWF, GIF, PNG
var ChargementFichier:MovieClipLoader = new MovieClipLoader();
/*Création d'un objet d'écoute chargé de nous décrire ce qui se passe pendant le chargement*/
var EcouteurDeChargement:Object = new Object();
//Fonction gérant le début du chargement
EcouteurDeChargement.onLoadStart = function(clipActuel:MovieClip):Void  {
//Message ça commence
Alerte.text = "Le chargement débute";
Alerte._visible = true;
};
//Fonction gérant l'arrivée des octets
EcouteurDeChargement.onLoadProgress = function(clipActuel:MovieClip, octetsCharger:Number, totalACharger:Number) {
//Message Déjà disponible
Alerte.text = "Déjà disponible .." + ((Math.round(octetsCharger / 1024) * 100) / 100) + " Ko / " + ((Math.round(totalACharger / 1024) * 100) / 100) + " Ko";
Alerte._visible = true;
};
//Fonction gérant la fin du chargement
EcouteurDeChargement.onLoadComplete = function(clipActuel:MovieClip):Void  {
//Message disponible
Alerte.text = "Le fichier est complètement chargé";
Alerte._visible = true;
};
//Fonction gérant l'exécution de la première image  de l'élément chargé
EcouteurDeChargement.onLoadInit = function(clipActuel:MovieClip):Void  {
Alerte.text = "";
Alerte._visible = false;
switch (clipActuel._name) {
case "PhotoAlbum" :
//A toi de mettre ici les bonnes valeurs
clipActuel._x = 0;
clipActuel._y = 0;
//Taille si besoin ou clipActuel._xscale, clipActuel._yscale à toi de mettre ici les bonnes valeurs
clipActuel._width = 0;
clipActuel._height = 0;
break;
case "TitreAlbum" :
//A toi de mettre ici les bonnes valeurs
clipActuel._x = 0;
clipActuel._y = 0;
//Taille si besoin ou clipActuel._xscale, clipActuel._yscale à toi de mettre ici les bonnes valeurs
clipActuel._width = 0;
clipActuel._height = 0;
break;
}
};

//Fonction gérant les erreurs de chargement
EcouteurDeChargement.onLoadError = function(clipActuel:MovieClip, codeErreur:String, numeroErreur:Number):Void  {
Alerte.text = codeErreur + " " + numeroErreur;
Alerte._visible = true;
};
//Activation de l'écouteur de chargement
ChargementFichier.addListener(EcouteurDeChargement);
//Création d'une occurrence de l'objet LoadVars pour réceptionner les données
var lireTexteExterne:LoadVars = new LoadVars();
lireTexteExterne.onLoad = function(disponible:Boolean):Void  {
//Si les données sont disponibles
if (disponible) {
/*Découper sur le symbole § et
Répartir dans le tableau les descriptifs description[0] premier album, description[x] x ieme album*/
description = this.Albums.split("§");
//Nous avons la feuille de style et le texte nous pouvons construire nos albums a l'image 2
gotoAndPlay(2);
} else {
//Sinon avertir l'utilisateur
Alerte.text = "Fichier non disponible sur le serveur";
}
};

//importation de la classe externe feuille de style
import TextField.StyleSheet;
//Création d'une occurrence de feuille de style
var Style:StyleSheet = new StyleSheet();
//fonction de chargement de la feuille de style externe
Style.onLoad = function(disponible:Boolean):Void  {
if (disponible) {
//Appel des données textuelles externes
lireTexteExterne.load("textes/Album1.txt");
} else {
alerte.text = "La feuille de style n'est pas disponible";
}
};
/////////////////////////////////////// Description ///////////////////////////////////////////////////////
/*Chargement de la feuille de style. Quand elle est disponible chargement des textes de description des albums
quand ils sont disponible passage à l'image suivante pour construire les fiches*/
//Appel de la feuille de style
Style.load("style.css");
//Création du tableau devant recevoir les textes de description de l'album
var description:Array = new Array();
stop();
Sur la seconde image clé la boucle permettant la construction à la volée de nos albums

//Définir le nombre d'album
var totalAlbum:Number = 5;
//Boucle à faire totalAlbum fois
for (var i:Number = 1; i <= totalAlbum; i++) {
//Création du MC Album i en niveau i sur la scène
this.createEmptyMovieClip("Album" + i,i);
//Ici facilité d'écriture remplace this["Album" + i] par une variable
var AlbumActuel:MovieClip = this["Album" + i];
//Création dans le MC Album d'un MC Photo en profondeur 0
AlbumActuel.createEmptyMovieClip("PhotoAlbum",0, 1);
/*Création d'une zone de texte dans album pour recevoir le descriptif de l'album
A toi de mettre ici les bonnes dimensions en fonction de la taille et de la position de l'image de l'album*/
AlbumActuel.createTextField("Descriptif",1,100,0,200,150, 1);
AlbumActuel.Descriptif.multiline = true;
AlbumActuel.Descriptif.html = true;
//j'applique la feuille de style sur du texte qui est forcèment présent
AlbumActuel.Descriptif.styleSheet = Style;
//Je charge dans ma zone de texte le descriptif de l'album i-1 (le tableau description est indicé de 0 a x
AlbumActuel.Descriptif.htmlText = description[i-1];
//Appel au MCL pour charger la photo i de l'album i
ChargementFichier.loadClip("images/Photo" + i + ".jpg",AlbumActuel.PhotoAlbum);
//Position sur la scene de l'album à toi de mettre les bonnes positions
AlbumActuel._x = 0;
//Position verticale de l'album sur la scene : (La hauteur de l'album + espace de x pixel en dessous) * (i-1)
AlbumActuel._y = (100 + 10) * (i - 1);
}
stop();
Une autre solution existe en passant par les fichiers xml au lieu d'un fichier texte. Le reproche que je fais aux fichiers xml c'est que la gestion des nœuds et laborieuse en Flash. T_bo lui pense surement exactement le contraire car les solutions qu’il propose sont à base de xml. Mais bon à chacun sa technique et ses préférences.....
IP archivée
Savoir mal est pire qu'ignorer

T_bo

  • Wisi J'habite sur le forum
  • ****
  • Hors ligne Hors ligne
  • Messages: 349
    • Voir le profil
AS3 COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #49 le: janvier 19, 2008, 10:41:52 am »

Citation de: RMistral
Une autre solution existe en passant par les fichiers xml au lieu d'un fichier texte. Le reproche que je fais aux fichiers xml c'est que la gestion des nœuds et laborieuse en Flash. T_bo lui pense surement exactement le contraire car les solutions qu’il propose sont à base de xml. Mais bon à chacun sa technique et ses préférences.....
Puisque tu en parles, j'avoue effectivement que je passerais bien par du XML, parce que j'aime bien et que pour interfacer avec un langage serveur par la suite ce serait  beaucoup plus facile (a mon avis). Je dirais bien aussi que flash est fait pour utiliser le XML et que les possibilité de lecture ecriture de donnée sont beaucoup plus simple et beaucoup plus puissantes (les listenners notamment le "complete" d'un XML est beaucoup plus sûr que sur des variables texte la fin étant clairement indique dans un fichier XML ) mais çà reste effectivement un choix personnel (quoique les "bonnes pratiques" semblent etre de mon coté ;) )
Je ne trouve plus la gestion des noeuds spécialement  laborieuses (surtout en as3), c'est juste un coup a prendre j'ai clairement galerer au debut mais une fois qu'on a chopper le truc çà va et on voit mal comment faire autrement mais je ne me permettrais pas de m'immiscer dans ce pas à pas qui est un vrai regale de pédagogie, talent que je ne possede aucunement, de plus cela ne menerais qu'a embrouiller Chrys et gâcher ce tutorial.

Bonne continuations.
J'attents la suite.
IP archivée

Chrys

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 178
    • Voir le profil
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #50 le: janvier 19, 2008, 11:09:20 am »

Belle intervention T_bo.

Ceci dis, l'alternative en XML (et c'est vrai que j'en entends souvent parler sur les forums Flash) peut être d'un point de vu pédagogique , intéressant aussi.
Donc, je sais a présent vers qui me tourner pour ce type d'exercice ;)

Mais … tu as raison … ne m'embrouillez pas !! :lol:

J'ai pas mal a faire déjà ! :P

Chrys
IP archivée

Chrys

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 178
    • Voir le profil
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #51 le: janvier 22, 2008, 13:58:49 pm »

Bonjour,

Je pense que cette aventure à la conquête du MCL est terminé. (quoi que !)

Un GRAND merci a RMistral pour son aide pédagogique .

Le résultat a voir ici. pour celles et ceux que ça intéresse.

Encore merci.

Chrys
IP archivée

isabelle

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 28
    • Voir le profil
AS3 COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #52 le: mai 12, 2008, 14:42:17 pm »

Bonjour,

Bon voilà, j'essaie de comprendre tant bien que mal tout ce qui a été évoqué sur ce post.
Mais, débutante je me mélange carrément les pinceaux.

Je réalise en ce moment un site full flash et comme j’en ai assez de bidouiller avec des bouts de ficelles, je suis pas à pas ce tuto.

Voici comment se compose mon site après l’avoir démonté entièrement pour créer un site multi niveaux.

1 – Anim-intro.swf
Une anim intro suivie d’une image fixe qui est mon décor d’intro.

1-bis Accueil.swf
Juste le décor de l’intro sans l’anim avec 6 zones cliquables (boutons)

2 Illustrations.swf
Un nouveau décor avec un diaporama qui fera appel à des photos externes et 6 zones cliquables (boutons)
   
3 –Peintures.swf
Un nouveau décor avec un diaporama qui fera appel à des photos externes et 6 zones cliquables (boutons)

4- Biographie.swf
Un nouveau décor avec 3 boutons
   a- Biographie
   b – Mes influences
   c- Mes coups de cœurs
faisant appel à des textes dynamiques (c’est fait et ça fonctionne) et 6 zones cliquables (boutons)
   
5 –News.swf
Un nouveau décor faisant appel à un texte dynamique (c’est fait et ça fonctionne aussi) et 6 zones cliquables (boutons)
   
6 – Contact.swf
Un nouveau décor avec juste un lien mailto et 6 zones cliquables (boutons)
   
7 – Video.swf
Un nouveau décor avec trois boutons qui appellent 3 videos (c’est fait et ça fonctionne) et 6 zones cliquables (boutons)

Mon site est en 900 x 600 et chaque swf est à cette même taille. Même si le décor change, je suis obligée de mettre des boutons (plutot des zones cliquables) sur chaque swf, car contrairement à l’exemple de ce tuto, mon site ne se compose pas d’un décor unique avec boutons comprenant une zone dans laquelle s'affichent des éléments différents.

Chaque swf est de 900x600 et sur chaque swf le décor est différent, seules les zones cliquables restent fixes.
Il y en a 7 censées arriver sur les swf du même nom:
1- BTN-Accueil
2 -BTN-illustrations
3 – BTN-Peintures
4- BTN-Biographie
5 – BTN-News
6 – BTN-contact
7 – BTN – video


Ce que je ne comprends pas ce sont les niveaux (10 par 10)
Qu’est-ce que ça signifie ? piste ? image clé ? ni l’un ni l’autre ?
Quel script mettre sur chaque bouton ?
Je crois comprendre que l’article 35 de ce post comporte la réponse :

///////////////////////////////////////////////////////////////////////// Chargement fichiers externes
//Création d'une occurrence de l'objet MovieClipLoader pour gestion du chargement JPG, SWF, GIF, PNG
var ChargementFichier:MovieClipLoader = new MovieClipLoader();
/*Création d'un objet d'écoute chargé de nous décrire ce qui se passe pendant le chargement*/
var EcouteurDeChargement:Object = new Object();
//Fonction gérant le début du chargement
EcouteurDeChargement.onLoadStart = function(clipActuel:MovieClip):Void  {
    //Message ça commence
    Alerte.text = "Le chargement débute"
    Alerte._visible = true;
};
//Fonction gérant l'arrivée des octets
EcouteurDeChargement.onLoadProgress = function(clipActuel:MovieClip, octetsCharger:Number, totalACharger:Number) {
    //Message Déjà disponible
    Alerte.text = "Déjà disponible .."+((Math.round(octetsCharger/1024)*100)/100)+" Ko / "+((Math.round(totalACharger/1024)*100)/100)+" Ko";
    Alerte._visible = true;
};
//Fonction gérant la fin du chargement
EcouteurDeChargement.onLoadComplete = function(clipActuel:MovieClip):Void  {
    //Message disponible
    Alerte.text = "Le fichier est complètement chargé"
    Alerte._visible = true;
};
//Fonction gérant l'exécution de la première image  de l'élément chargé
EcouteurDeChargement.onLoadInit = function(clipActuel:MovieClip):Void  {
    Alerte.text = "";
    Alerte._visible = false
   //Position de la photo en x et y
    clipActuel._x = 0
    clipActuel._y = 0
    }
};
//Fonction gérant les erreurs de chargement
EcouteurDeChargement.onLoadError = function(clipActuel:MovieClip, codeErreur:String,numeroErreur:Number):Void  {
    Alerte.text = codeErreur + " " + numeroErreur
    Alerte._visible = true;
};
//Activation de l'écouteur de chargement
ChargementFichier.addListener(EcouteurDeChargement);

Il faut créer un MC vide pour recevoir le fichier que nous souhaitons charger puis il suffit d'apeler notre MCL pour charger à la demande le fichier jpg, gif, swf, ou png.

Code:
//Création du MC Album en niveau 0 sur la scène
this.createEmptyMovieClip("Album1",0, 1);
//Création dans le MC Album d'un MC Photo en profondeur 0
Album1.createEmptyMovieClip("PhotoAlbum",0, 1);
//Appel au MCL pour charger la photo de l'album
ChargementFichier.loadClip("URL de la Photo à charger",Album1.PhotoAlbum);


Mais je ne sais pas où mettre ce code sur chaque bouton !

A moins que je ne plante complètement sur mon architecture !

Merci d'avance.
IP archivée

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
[Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #53 le: mai 16, 2008, 11:02:29 am »

Bonjour Isabelle,

Attention, dans ce post il y à un mélange des genres.

Mon premier post explique comment réaliser suivant 2 techniques un site full flash (Architecture Mono Fichier, Architecture Multi Niveaux).

Puis à la demande de Chrys la conversation à évoluée vers la résolution de son problème qui est à base d'une Architecture MovieClip.

Je te conseille si tu débute de ne pas utiliser cette technique (Architecture MovieClip). Commence par la technique Architecture Multi Niveaux qui est plus facile à mettre en place du moins au début.

Pour ton problème je te conseille cette organisation de bas en haut (Niveau0 le plus loin de l'observateur, Niveau1, Niveau2...... NiveauX le plus proche de l'observateur) :

- Niveau 0 Intro.swf  il contient ton animation d'intro et sur la dernière image clé vide des loadMovieNum pour appeler le reste du site.

- Niveau 1 Pour recevoir en remplacement les uns des autres les décors le dernier appelé chasse le précédent

- Niveau 2 Le contenu (Diaporama 1, Diaporama 2, Biographie, News, Contact, Vidéo à mettre sur le décor correspondant du Niveau1

- Niveau 3 Les 6 zones cliquables (boutons)

Pour lancer le site, il faut créer une image clé vide juste après la dernière image de ton animation d'intro puis mettre le code suivant :
//Charge le décor de départ
loadMovieNum("le nom du premier décor à charger.swf", 1);
//Charge le fichier contenant le menu du site
loadMovieNum("le nom du fichier contenant les boutons.swf", 3);
stop();
Dans le fichier contenant le menu de ton site il faut pour chaque bouton écrire le code suivant :
nom du bouton.onRelease=function(Void):Void{
        //Charge le décor
        loadMovieNum("nom du décor à charger.swf", 1);
       //Charge le contenu
        loadMovieNum("nom du contenu à mettre sur le décor.swf",2);
}
Bonne journée....
IP archivée
Savoir mal est pire qu'ignorer

isabelle

  • Wisi tout neuf
  • *
  • Hors ligne Hors ligne
  • Messages: 28
    • Voir le profil
Re : [Résolu] COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #54 le: mai 21, 2008, 13:22:58 pm »

Bonjour RMistral,

Merci pour ces précisions.

Je vais de ce pas les appliquer.
IP archivée

Mallie

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 157
    • Voir le profil
    • E-mail
Re : AS2 COMMENT ARCHITECTURER VOTRE SITE FULL FLASH ???
« Réponse #55 le: mai 27, 2009, 20:31:00 pm »

Bravo pour cette explication, c'est génial ! merci !
IP archivée
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.

Nos partenaires

         
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum