Imprimer

[kdo]

Kdo le retour, je vous avais dit que je reviendrai... 
Après avoir englouti un bouquin, nombre de vidéo de formation voilà où j'en suis.
A cette page http://www.snowlimousine.ch/service_fr_snow.html vous pouvez voir le projet que je souhaite réaliser en full Flash.
Cette maquette est réalisée à l'aide d'interpolation et de clip! Tout ce qui ne faut pas faire si j'ai bien compris Mistral.
Alors j'ai repris chaque «  morceau » en AS3 sous flash CS4
J'ai enregistré un model qui se présente comme ça:

Code: [Sélectionner]

//---- largeur, hauteur de la scene
var largeur:uint=stage.stageWidth;
var hauteur:uint=stage.stageHeight;

//---- Ecart du bord
var ecartBord:uint=largeur/80;

//---- Paysage peut aussi être chargé dynamiquement avec un loader(Plus léger?)
var paysage:photo_mc=new photo_mc();

addChild(paysage);

//----Logo verbier
var logoVerbier:logoVerbier_mc=new logoVerbier_mc();
logoVerbier.x=(8.2*ecartBord)+(logoVerbier.width/2);
logoVerbier.y= (2.5*ecartBord)+(logoVerbier.height/2);
addChild(logoVerbier);

//----Bagner snow
var banSnow:bagner_mc=new bagner_mc();
banSnow.x=(largeur-(5*ecartBord))-(banSnow.width/2);
banSnow.y=(banSnow.height/2);
addChild(banSnow);

//----Fond du texte
var fondText:fondTextFlou_mc=new fondTextFlou_mc();
fondText.x=(largeur-fondText.width)/2;
fondText.y=hauteur-fondText.height;


//----Fond Page
var fondPage:fond_page_mc=new fond_page_mc();
fondPage.x= largeur/2;
fondPage.y=(hauteur-fondText.height);


//****************** Fin de la base
Toutes les pages contiennent se fichier.
 Puis si je prend la page de service du site j'aimerais appeler cette base puis le fichier  serviceSnowAs.swf  qui se présente comme ça:

Code: [Sélectionner]

//---- On affiche le fond du texte blanc et le petit rectangle qui désigne la page active
addChild(fondPage);
addChild(fondText);
//---- Titre
var titre:TextField=new TextField();
var format:TextFormat=new TextFormat("Papyrus",39);

titre.defaultTextFormat=format;
titre.width=fondText.width;
//titre.height=fondText.height;
titre.x=fondText.x;
titre.y=fondText.y;
titre.text="Notre Service";
titre.selectable=false;
titre.autoSize="center";
addChild(titre);

//---- Texte
var texte:TextField=new TextField();
var formattext:TextFormat=new TextFormat("Papyrus",22);

texte.defaultTextFormat=formattext;
texte.width=fondText.width;
texte.height=fondText.height;
texte.x=(largeur-texte.width)/2;
texte.y=hauteur/2-(6*ecartBord);
texte.multiline=true;
texte.text="Un service discret et de qualité.\rAvec Snow Limousine, hommes d'affaires et vacanciers seront comblés!\r- Véhicule de 1 à 6 places\r- Accés internet à bord \r- Chauffeur professionnel\r- Air conditionné, lecteur DVD et Minibar\r- 4x4 Tout confort\r- Toutes destinations Suisse et Europe\r- Service personnalisé\r- Cartes de crédit acceptées";
texte.selectable=false;
texte.autoSize="center";

addChild(texte);
Une fois la page service en place on met les boutons un autre fichier swf. Il me semble que cela respecte l'idée d'architecture multi niveau?
Maintenant ça c'est l'idée mais hélas je n'arrive pas vraiment à la réaliser.

Pour relier mes morceaux j'ai essayé cette formule:

Code: [Sélectionner]

/*//----Chargement du contenu de accueil
loadMovieNum("accueilAS3.swf",1);??? n'est pas reconnu*/
var request:URLRequest = new URLRequest("d:/docu_flash/flash/projet_snow/pages/baseSnowAs.swf");
var loader:Loader = new Loader()
loader.load(request);
addChild(loader);
/*var request:URLRequest = new URLRequest("d:/docu_flash/flash/projet_snow/pages/serviceSnowAs.swf");
var loaderAccueil:Loader = new Loader()
loaderAccueil.load(request);
addChild(loaderAccueil);*/
Seulement voila écrit sous cette forme je ne peux charger qu'un seul fichier et pas les deux?

Autre soucis avec le champs contenant le texte bien que je lui aie donné comme propriete "center" la plus grande ligne est centrée mais Pas les autres elle restent a gauche.
Une fois que j'aurai reussi avec votre aide cette première étape je vous parlerais des boutons. Par avance je vous remercie pour l'aide que vous pouvez m'apporter.

[RMistral (Wisi)]

Bonjour,

En AS3, loadMovie, loadMovieNum, MovieClipLoader n'existent plus  . Il faut utiliser la classe loader et la classe URLRequest à la place.

Principe
Il faut architecturer ton site par empilement de MovieClip (MC) c'est à dire faire un fichier pour le décor du site, un fichier pour le menu, un fichier par page du site puis "empiler" les fichiers pour constituer le site complet.

Organisation
Sur ta scène 2 calques. Sur le calque du bas sur la première image clé un MC vide nommé par exemple menu
Sur le calque du haut nommé ActionScript le code sur la première image clé.

Code

Code: [Sélectionner]

//Création d'une occurrence (copie) de l'objet Loader nommé ici Chargeur ou autre nom a ta convenance
var Chargeur:Loader = new Loader();
//Création d'une occurrence de objet URLRequest nommé ici URLCible ou autre nom a ta convenance
var URLCible:URLRequest = new URLRequest("ici le nom de ton fichier swf externe")
//=====================================================================
//Appel du fichier externe si chargement inconditionnel sinon voir l'explication suivante
Chargeur.load(URLCible)


Maintenant reste le problème du déclenchement du chargement c'est à dire lier le chargement à un bouton par exemple.

ATTENTION : En AS3 il est impossible d'écrire du code dans un MC ou sur un Bouton. Il faut écrire le code systématiquement sur la première image clé de la ligne de temps sur un calque à part

Sur ta scene un MC nommé bouton qui doit déclencher le téléchargement.

Code: [Sélectionner]

//Création d'une fonction prenant en charge le clic sur ton bouton
function surClic(event:MouseEvent):void {
      //Appel du fichier externe
       Chargeur.load(URLCible);
      //Chargement dans le MC de destination déjà sur la scène
      menu.addChild(Chargeur)
}
/*Mise en place d'un écouteur d'événement sur ton bouton
(Une oreille qui écoute ton animation est qui attend d'entendre un clic sur ton bouton pour réagir)*/
bouton.addEventListener(MouseEvent.CLICK, surClic);
//Faire apparaître la main sur le MC
bouton.buttonMode = true

Le code complet avec bouton peut être organisé de la manière suivante :
I Une fonction prenant en charge les actions à effectuer sur le clic du bouton
II La mise en place d'un écouteur sur le bouton chargé de lancer la fonction sur clic de l'utilisateur

Code: [Sélectionner]

//Création d'une fonction prenant en charge le clic sur ton bouton
function surClic(event:MouseEvent):void {
       //Création d'une occurrence (copie) de l'objet Loader nommé ici Chargeur ou autre nom a ta convenance
       var Chargeur:Loader = new Loader();
      //Création d'une occurrence de objet URLRequest nommé ici URLCible ou autre nom a ta convenance
      var URLCible:URLRequest = new URLRequest("ici le nom de ton fichier swf externe")
      //Appel du fichier externe
       Chargeur.load(URLCible);
      //Chargement dans le MC de destination déjà sur la scène
      menu.addChild(Chargeur)
}
/*Mise en place d'un écouteur d'événement sur ton bouton
(Une oreille qui écoute ton animation est qui attend d'entendre un clic sur ton bouton pour réagir)*/
bouton.addEventListener(MouseEvent.CLICK, surClic);
//Faire apparaître la main sur le MC
bouton.buttonMode = true

Après il est possible de gérer cela plus finement en affichant par exemple la quantité d'octet à charger, les erreurs de chargement.... il est aussi possible de créer une fonction pour gérer des chargements multiples etc....

Mais avant de courir il faut savoir marcher.



Bon courage.........

[kdo]

Bonjour Mistral et grand merci de t'être arrêté sur mes questions.
Alors en partant de ce qu'il me semble avoir compris j'ai essayé de créer la page d'accueil du site. (Elle devrait ressembler à ça excepté le positionnement : ici). J'ai ajouté dans ma biblio deux clip vide que j'ai déposé mécaniquement sur la scène sur un calque sous le calque action. Ils ont pour nom base_mc et index_mc puis voila ce que j'ai écris, j'ai même pas changé les commentaires:

Code: [Sélectionner]

//Création d'une occurrence (copie) de l'objet Loader nommé ici Chargeur ou autre nom a ta convenance
[color=blue]var Chargeur:Loader = new Loader();[/color]
//Création d'une occurrence de objet URLRequest nommé ici URLCible ou autre nom a ta convenance
[color=blue]var URLCible:URLRequest = new URLRequest("d:/docu_flash/flash/projet_snow/pages/baseSnowAs.swf")[/color]
//=====================================================================
//Appel du fichier externe si chargement inconditionnel sinon voir l'explication suivante
[color=blue]Chargeur.load(URLCible);[/color]
//Chargement dans le MC de destination déjà sur la scène
[color=blue]base_mc.addChild(Chargeur);
addChild (base_mc);[/color]

//Création d'une occurrence (copie) de l'objet Loader nommé ici Chargeur ou autre nom a ta convenance
[color=blue]var chargeIndex:Loader = new Loader();[/color]
//Création d'une occurrence de objet URLRequest nommé ici URLCible ou autre nom a ta convenance
[color=blue]var URLCible2:URLRequest = new URLRequest("d:/docu_flash/flash/projet_snow/pages/indexSnowAS.swf")[/color]
//=====================================================================
//Appel du fichier externe si chargement inconditionnel sinon voir l'explication suivante[color=blue]
chargeIndex.load(URLCible2);[/color]
//Chargement dans le MC de destination déjà sur la scène
[color=blue]index_mc.addChild(chargeIndex);
addChild (index_mc);[/color]
Ce qui fonctionne si le deuxième loader contient la base. Si je mets un commentaire sur l'un ou l'autre des addChild l'un ou l'autre apparaisse.
Ce qui n'est me semble t'il pas le but. Je ne sais pas si je suis très claire ... indexSnowAs.swf ne contient que les éléments différends de la base. Mais dépendant évidement du fichier base qui contient les variables de positionnement.

Dans ce cas de figure le fichier index n'apparait pas. J'ai essayé d'emboiter les deux en faisant quelques chose comme ça :

Code: [Sélectionner]

//    supprimer le premier addChild (base_mc);
base_mc.addChild(index_mc);
addChild(base_mc);
Mais sans résultat
J'avoue que je rame un peu sur le coup 

Ci dessous les deux fichiers:
***********baseSnowAs.swf

Code: [Sélectionner]

//---- largeur, hauteur de la scene
var largeur:uint=stage.stageWidth;
var hauteur:uint=stage.stageHeight;

//---- Ecart du bord
var ecartBord:uint=largeur/80;

//---- Paysage a charger dynamiquement url pour le moment c'est un clip
var paysage:photo_mc=new photo_mc();

addChild(paysage);

//----Logo verbier
var logoVerbier:logoVerbier_mc=new logoVerbier_mc();
logoVerbier.x=(8.2*ecartBord)+(logoVerbier.width/2);
logoVerbier.y= (2.5*ecartBord)+(logoVerbier.height/2);
addChild(logoVerbier);

//----Bagner snow
var banSnow:bagner_mc=new bagner_mc();
banSnow.x=(largeur-(5*ecartBord))-(banSnow.width/2);
banSnow.y=(banSnow.height/2);
addChild(banSnow);

//----Fond du texte
var fondText:fondTextFlou_mc=new fondTextFlou_mc();
fondText.x=(largeur-fondText.width)/2;
fondText.y=hauteur-fondText.height;

//----Fond Page
var fondPage:fond_page_mc=new fond_page_mc();
fondPage.x= largeur/2;
fondPage.y=(hauteur-fondText.height);

//****************** Fin de la base
************indexSnowAs.swf

Code: [Sélectionner]

[color=red]//---- largeur, hauteur de la scene
var largeur:uint=stage.stageWidth;
var hauteur:uint=stage.stageHeight;

//---- Ecart du bord
var ecartBord:uint=largeur/80;[/color]


//----Vitesse viano
var vitesse:Number=5;

//----Coefficient alpha
var cofAlpha:Number=0.1;

//----Drapeau
var drapeauAnglais:drapeauAnglais_mc=new drapeauAnglais_mc();
drapeauAnglais.x=(largeur/2)- 2*drapeauAnglais.width;
drapeauAnglais.y=4*(hauteur/5);
drapeauAnglais.buttonMode=true;
addChild(drapeauAnglais);

var drapeauFrancais:drapeauFrancais_mc=new drapeauFrancais_mc();
drapeauFrancais.x=(largeur/2);
drapeauFrancais.y=4*(hauteur/5);
drapeauFrancais.buttonMode=true;
addChild(drapeauFrancais);

var drapeauEspagne:drapeauEspagne_mc=new drapeauEspagne_mc();
drapeauEspagne.x=(largeur/2)+ 2*drapeauEspagne.width;
drapeauEspagne.y=4*(hauteur/5);
drapeauEspagne.buttonMode=true;
addChild(drapeauEspagne);

//----viano
var viano:vianoRose_mc=new vianoRose_mc();
viano.scaleX=0.2;
viano.scaleY=0.2;
viano.y=(hauteur-viano.height)/3;
addChild(viano);

//----text transfer
var textTransfer:transfer_mc=new transfer_mc();
textTransfer.x=(largeur-textTransfer.width)/2;
textTransfer.y=hauteur/2.5;
textTransfer.labelOutTransfer.selectable=false;

addChild(textTransfer);

//----Numero tel
var bandeauTel:bandeauTel_mc=new bandeauTel_mc();
bandeauTel.y=(hauteur-viano.height)/3;
bandeauTel.labelOutTelephon.selectable=false;
addChild(bandeauTel);


//---------------------- Gestionnaire
viano.addEventListener(Event.ENTER_FRAME,deplaceViano);
bandeauTel.addEventListener(Event.ENTER_FRAME,deplaceTel);
textTransfer.labelOutTransfer.addEventListener(Event.ENTER_FRAME,transparence);
drapeauFrancais.addEventListener(MouseEvent.MOUSE_DOWN,versFrancaise);

//FFFF Fonction
//ffff deplaceViano sur viano
function deplaceViano(e:Event):void {
viano.x=viano.x+vitesse;
if (viano.x>largeur-(2*viano.width)) {
vitesse=0;
viano.roueAvant.stop();
viano.roueArriere.stop();
}
}//---- Fin de deplaceViano

//ffff deplaceTel sur bandeauTel
function deplaceTel(e:Event):void {
bandeauTel.x=bandeauTel.x+vitesse;
}//---- Fin de deplaceTel

//ffff transparence sur textTransfer
function transparence(e:Event):void {
cofAlpha=cofAlpha+0.1;
//trace("cofAlpha:"+cofAlpha);
textTransfer.labelOutTransfer.alpha=cofAlpha/10;
}//---- Fin de transparence

//ffff versFrancaise sur drapeauFrancais
function versFrancaise(event:MouseEvent):void {
var request:URLRequest=new URLRequest("d:/docu_flash/flash/projet_snow/pages/accueilSnowAs.swf");
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);

}//---- Fin de la fonction versFrancaise

[RMistral (Wisi)]

ATTENTION Cette explication est synonyme de prise de tête. N’oubliez pas de prendre vos cachets avant pendant et après.

Je décline toute responsabilité en cas d’incident.

Avant d’aborder l’explication du chargement en AS3 de fichiers multiples il faut connaître un minimum de vocabulaire et de notion.
(Cette explication de texte est à destination de grand débutant ou de débutant en programmation)

I – occurrence
Une occurrence n’est rien d’autre qu’une copie d’un objet. Il est possible de distinguer 2 catégories d’objet. La première, sont les symboles que vous voyez dans votre bibliothèque (MovieClip, graphique, bouton, composant). La seconde, sont des objets virtuels de programmation, que vous ne voyez pas mais qui pourtant existe dans flash par exemple l’objet Loader.

II – boucle
En informatique une boucle c’est faire un nombre fini de fois quelque chose. Cela permet par exemple de demander à flash de charger X fichiers externes sans avoir à écrire et gérer 5 occurrences de l’objet Loader et URLRequest.

III – fonction
C’est une espèce de boite dans laquelle nous mettons des lignes de code qui peuvent être réutilisées autant de fois que besoin par un simple appel au nom de cette fonction. Cela permet de ne pas avoir à réécrire le même code x fois.

IV – asynchrone
Le mode asynchrone dans flash c’est qu’entre le moment ou je demande quelque chose au serveur (l’hébergeur de mon site web) et le moment où cette chose est disponible il se passe un certain temps dont je n’ai pas la maitrise (fluctuation du débit internet).

Par exemple entre le moment ou je demande une image jpg et le moment ou je l’affiche, mon animation continue. Je dois donc être prévenu de la disponibilité de cette image par flash pour pouvoir agir dessus. Cela s’appelle un événement.

V – évènement et écouteur d’évènement
La programmation traditionnelle est linéaire c’est à dire que les instructions s’exécutent les unes derrière les autres. Cela oblige l’utilisateur à suivre le cheminement que le développeur lui impose.

La programmation évènementielle permet à l’utilisateur d’utiliser l’application que lui propose le développeur dans le sens qu’il souhaite.

Le problème c’est que le développeur doit pouvoir gérer des évènements c’est à dire des actions de l’utilisateur dans un ordre aléatoire. C’est pour cela que flash propose la notion d’évènement et d’écouteur d’évènement.

Un évènement dans flash c’est par exemple le fait que le fichier, dont je demande le téléchargement, devient disponible. Pour gérer cela, il faut que je programme une fonction qui va réagir a cet événement et que je mette en œuvre un écouteur (voyez un écouteur comme étant une oreille) qui déclenchera l’exécution de cette fonction dès que le fichier est disponible.

Vous êtes toujours là ? 

VI – téléchargement
Lors du téléchargement d’un fichier externe, il se passe beaucoup de chose. Le chargement débute, il progresse, puis il se termine et enfin le fichier devient disponible. Mais il peut aussi y avoir un problème pendant le téléchargement comme une interruption de la connexion internet ou l’absence du fichier sur le serveur. Nous allons devoir prendre en considération chacune des étapes qui sont autant d’événement.

Bien après les préliminaires voyons comment architecturer un site Web statique en AS3

Principe :

Il faut décomposer le site en petit bout pour ne pas avoir à imposer aux visiteurs des temps d’attente trop long et des barres de téléchargement. En effet l’un des reproches que j’entends le plus fréquemment quand je propose à mes clients un site full flash c’est et je cite :

Oui flash c’est le truc où il faut attendre avant de pouvoir regarder.

Une organisation possible est de créer par exemple un fichier swf qui contient « l’intelligence » du site c’est à dire la programmation puis un fichier swf avec le décor du site, un autre avec le menu du site et un fichier swf par page du site.

L’avantage c’est que nous allons pouvoir charger que les éléments que nous souhaitons sans imposer aux visiteurs le téléchargement du site complet.

L’inconvénient c’est qu’il faut le programmer en AS3

Dans cette explication je vous montre le principe mais à vous de l’adapter à vos besoin. Je ne compte pas assurer le SAV.

L’organisation

Le premier fichier à créer c’est celui qui doit contenir l’intelligence du site et qui doit être le point d’entrée de votre site. Je le nomme par exemple : debut.swf
Dans ce fichier je mets en place un système de gestion basé sur la logique suivante :

Dans une variable tableau (Un tableau est une espèce d'armoire ou chaque étagère porte un numéro de 0 à x) je stocke le nom de l'ensemble des fichiers swf que je souhaite télécharger (1 par étagère).
Puis par une boucle j’appelle les fichiers les uns après les autres en créant à la volée une occurrence (copie) de l’objet loader (qui n'est pas autre chose qu'un MovieClip spécialisé dans le chargement de fichiers externes)  et de l’objet URLRequest (qui permet d'indiquer l'URL du fichier à charger).

Chaque téléchargement doit être géré au minimum sur l’événement Event.INIT qui est celui m’indiquant que le fichier téléchargé est disponible.
Dès que cet évènement arrive, il devient possible d’afficher dans la liste d’affichage (addChild) le fichier swf.

Il est aussi intéressant de pouvoir indiquer à l’utilisateur que des chargements sont en cours. Pour cela il faut aussi gérer (mais ce n’est pas indispensable) la progression du téléchargement (ProgressEvent.PROGRESS)

Comme nous sommes en période de solde , j’ai aussi pris en compte la gestion des évènements Event.OPEN début du téléchargement, Event.COMPLETE le fichier est complètement chargé et les erreurs  IOErrorEvent.IO_ERROR

Je profite de l'événement Event.COMPLETE pour détruire les écouteurs afin d'économiser les ressources machine. C'est pas la peine d'écouter un événement qui est terminé.

Mais je le répète seul l’événement Event.INIT est obligatoire.

Je n’ai besoin, pour réaliser cela, que d’un calque et d’une image clé dans laquelle je vais écrire le code suivant :

Code :

Code: [Sélectionner]


//============================================================
/*Le système mis en place ici permet grâce à une boucle d'avoir un nombre de ligne de code
constant quel que soit le nombre de fichier à charger*/

//Liste des fichiers à charger au démarrage du site (le décor, le menu et éventuellement la page d'accueil)
var fichierscible:Array = new Array("decor.swf","menu.swf","page1.swf");
//boucle de chargement des fichiers
for (var i:int=0; i<fichierscible.length; i++) {

/* Lors de la création d'une occurrence de l'objet Loader, il est
possible de lui donner un nom unique permettant ainsi de le distinguer par la suite lors d'un chargement multiple*/
         //Ici le nom du chargeur c'est le nom du fichier sans extension (decor, menu, page1)
         var nomDuChargeur:String=fichierscible[i].substr(0,fichierscible[i].indexOf("."))
         //appel à la fonction de chargement
         chargeurGeneral(nomDuChargeur, fichierscible[i],desQueDisponible)
}


//chargeur(nomDuChargeur, URLfichierACharger,desQueDisponible)
function chargeurGeneral(nomDuChargeur:String,URLfichierACharger:String,desQueDisponible:Function):void {

/* Le principe de la classe loader
Chaque état du téléchargement est pris en charge par un écouteur et une fonction particulière.
Ensuite il suffit de créer une occurrence (copie) de la classe loader et URLRequest pour télécharger un fichier externe
*/
//Création du chargeur
var charger:Loader=new Loader();
//Nommer le chargeur
charger.name = nomDuChargeur;
//Construction de la requête
var atteindreURL = new URLRequest(URLfichierACharger);
//Lancement du chargeur
charger.load(atteindreURL);
/*Mise en place des écouteurs sur le chargeur;
L’événement open arrive en premier.
    L’événement ioError ou securityError arrive ensuite s’il est impossible de charger le fichier
    ou s’il se produit une erreur lors du processus de chargement.
    Arrive ensuite l’événement progress qui est déclenché continuellement lors du chargement du fichier.
    Le suivant est l’événement complete qui arrive lorsque le chargement d’un fichier est terminé,
     mais AVANT QU'IL NE SOIT UTILISABLE.
    Le dernier evénement est init qui arrive lorsque vous pouvez manipuler le fichier.
    Cet événement arrive TOUJOURS avant le complete.
    Dans les fichiers SWF en diffusion continue, l’événement init risque de se produire bien avant l’événement complete.
*/

//Début du téléchargement
charger.contentLoaderInfo.addEventListener(Event.OPEN, debutTelechargement);
//Lorsque le fichier est en coursde téléchargement;
charger.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, telechargementEnCours);
//Lorsque le fichier est prêt à être utilisé mais pas complètement chargé
charger.contentLoaderInfo.addEventListener(Event.INIT,desQueDisponible );
//Lorsque le fichier est complètement chargé (de l'image 1 à l'image 10);
//Là il faut penser à détruire les ecouteurs
charger.contentLoaderInfo.addEventListener(Event.COMPLETE, finDuChargement);
//En cas d'erreur de téléchargement;
charger.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, indiquerErreur);
}

//Les fonctions qui réagissent pendant le téléchargement

//Gestion du début de téléchargement (facultatif)
function debutTelechargement(evenement:Event):void {
trace("Début de téléchargement : " + evenement);
}
//Gestion de la progression du téléchargement (facultatif)
function telechargementEnCours(evenement:ProgressEvent):void {
trace("Progression: déjà disponible " + evenement.bytesLoaded + " sur un total de " + evenement.bytesTotal);
}
//Gestion de la fin du téléchargement la première image clé du fichier swf chargé est disponible (OBLIGATOIRE)
function desQueDisponible(evenement:Event):void {
trace("Première image clé disponible: " + evenement.currentTarget.name);
//ici la suite du code en fonction du nom du chargeur
       //Récupération du nom du Loader ayant terminé sont boulot
var chargeurActif:Loader=evenement.target.loader
/*Affichage sur la scène.
    soit directement soit dans un Sprite ou un MovieClip*/
addChild(chargeurActif);
//en fonction du chargeur nous agissons sur :
switch (chargeurActif.name) {
  case "decor" :
            //Position en x et y du décor du site sur la scène
            chargeurActif.getChildAt(0).x= "ici la position en x"
chargeurActif.getChildAt(0).y= "ici la position en y"
break;
case "menu" :
            //Position en x et y du menu du site sur la scène
            chargeurActif.getChildAt(1).x= "ici la position en x"
chargeurActif.getChildAt(1).y= "ici la position en y"
            //Ici appel à une fonction gérant les boutons du menu
            // A vous de la faire
break;
case "page1" :
            chargeurActif.getChildAt(2).x= "ici la position en x"
chargeurActif.getChildAt(2).y= "ici la position en y"
break
}
}
//Gestion fin du téléchargement le fichier est disponible pour utilisation (facultatif mais fortement conseillé)
function finDuChargement(evenement:Event):void {
trace("Fin de téléchargement : " + evenement.currentTarget.name);
//destruction des écouteurs
charger.contentLoaderInfo.removeEventListener(Event.OPEN, debutTelechargement);
charger.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, telechargementEnCours);
charger.contentLoaderInfo.removeEventListener(Event.INIT,desQueDisponible );
charger.contentLoaderInfo.removeEventListener(Event.COMPLETE, finDuChargement);
charger.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, indiquerErreur);
}

//Gestion des Erreur Entrée Sortie (facultatif)
function indiquerErreur(evenement:IOErrorEvent):void {
trace("Erreur Entrée Sortie : " + evenement);
}


stop()
Ensuite il ne vous reste plus qu'à programmer les boutons du menu pour qu'ils chargent les différentes pages du site à la demande du visiteur. Il faut aussi remplacer les trace de chaque fonction par un affichage écran à destination du visiteur.


Bon courage...........

[kdo]

RMistral je ne peux que te remercier encore une fois pour cette brillante et on ne peut plus claire démonstration.
Du coup j'ai fait un petit pas dans mon brouillard 
Pour ce qui est de la gestion du chargement j'attends d'avoir un stock suffisant d'AlkaSelzer et de Prosak pour le décortiquer  et je m'en remet pleinement au code de RMistral.
Pour ce qui est de l'évolution de mon challenge voilà ce qui c'est passé:
En fait, je ne parvenais pas à avoir le résultat attendu car il y avait une erreur dans le fichier indexSnowAs.swf. J'édite le message précèdent et je mets en rouge ce qu'il manquait. Et il est défendu de rire  car c'est vraiment 3* rien 
 Du coup, même si au vu des explications le code créer n'est pas des plus performant  il fonctionne. Il me reste à le mettre dans la boucle présentée par RMistral plutôt que de faire des répétitions.

[RMistral (Wisi)]

Bpnjour,

Ton code ne marchera pas en ligne malgré qu'il fonctionne en local.

Pour 2 raisons :

I - L'url que tu donnes est locale (d:/docu_flash/flash/projet_snow/pages/baseSnowAs.swf)
II - Tu utilises le addchild sans vérifier si le fichier est disponible. En local le fichier est disponible instantanément car il est sur ton disque dur mais en ligne il y a un temps d'attente (Voir explication sur le mode asynchrone)

Bon courage......

[alamedagraphik]

Bonjour,

pour ma part j'aurais architecturé le site de la façon suivante:

un preloader principal s'occupant du chargement du swf de l'index
un index étant le conteneur principal (un seul fichier swf)
- image d'arrière plan
- menu principal (appelant les pages swf dans le conteneur)
- conteneur des pages + la homepage (swf externe)
- animation de l'index

ensuite chaque page appelée par le menu est un swf indépendant, qui celle ci fait appel à des média externes (preload individuel pour les type texte, jpg, vidéo ou autres swf) par un fichier xml pour chaque page et chaque média.

il est vrai que le chargement est un problème, toutefois en utilisant le xml et les médias en externe, il est plus facile de mettre a jour le site (textes et autres média). car une chose à ne pas oublié c'est la vie du site et son renouvellement de l'information.

[RMistral (Wisi)]

Bonjour,

C'est une approche possible. Je suis bien d'accord avec toi qu'il faut penser a la mise à jour du site mais pour cela je n'utilise jamais de fichiers xml car pour des volumes important çà rame méchamment.

De plus au niveau mise à jour ce n’est pas aussi simple que cela pour un néophyte. Les erreurs de balises sont fréquentes et puis nous sommes au XXI siècle. 

Aujourd'hui les utilisateurs utilisent des applications WYSIWYG.

C'est pour cela que l'ensemble des sites que je propose à mes clients sont sur la base d'un CMS 100% Flash, sur base de données, ce qui permet une mise à jour facile et standard pour l'ensemble des clients le tout en WYSIWYG.

Le front office et personnalisé en fonction du client, le back office est identique.
Au niveau code, il est identique pour l'ensemble des clients ce qui permet des mises à jour rapide.

Visuellement chaque client à donc un site différent reposant sur un code et des  fonctions identiques.


L'organisation est la suivante :

Un fichier contient tout le code de l'application front office. Il appelle à la demande les éléments constituants le site (décor, fenêtres etc..) Chaque élément est donc dans un MovieClip dynamique. Seul les éléments nécessaires à une action précise sont chargés en mode asynchrone d'où des temps d'attente extrêmement réduits.

Le fichier en question gère l'ensemble des transactions avec la base de données et les infos multimédia (vidéos, son, images).

Un autre fichier important, est celui contenant les composants de l'application (ascenseur, combo, datagrid etc..) Celui ci est une bibliothèque partagée permettant de nourrir les fenêtres de l'application à la demande.

Avantage c'est que si j'ai besoin de 3 datagrid dans le front office, je ne charge ce fichier chez le client qu'une fois.

Pour les polices il en va de même. Un fichier contient les polices de l'application et les distribues dans le site à la demande.

En résumé, le code est parfaitement centralisé. Le reste (décor, fenêtre, icones...) est facilement modifiable par un graphiste et ne contient aucun code.

Pour le back office l'architecture est la même.

Bonne journée....

[alamedagraphik]

bonjour,

tout d'abord je te remercie pour tes explications, et j'aurais voulu clarifier avec toi ce que tu veux dire quand tu parles de fichier, pour toi il s'agit de fichier swf c'est ça?

Si je comprend bien, dans ton organisation tu dois avoir développé une suite de fichiers swf avec la possibilité qu'ils communiquent ensemble  (en utilisant par exemple ce que j'appelle des variables globales) car c'est un moyen de transmettre des infos entre les fichiers swf ?! (novice sur ce point désolé)

Pour comprendre aussi comment tu communiques avec une base de données, j'ai vu qu'il était possible de créer des classes php qui communiquent avec le fichier swf par le biais de AMFPHP, penses tu que cette solution est efficace, pour par exemple: l'insertion de texte, pour récupérer l'inscription d'un internaute pour une newsletter ou encore pour faire des requêtes pour l'affichage d'une playlist audio ou vidéo.

merci.

Bonne journée.

[RMistral (Wisi)]

Bonjour,

L'explication suivante est une approche personnelle qui n'est pas forcément la meilleure mais je la trouve pertinente pour résoudre mes problèmes lors de la conception d'un site Web pour un client.

A -Les briques :
Un site full flash est constitué de fichiers swf. Chaque fichier swf est une partie du site. Je distingue 4 types de fichiers swf : Décoration, contenu, interaction, système.

I – Décoration :
Se sont des swf contenant typiquement le support graphique du site comme le fond de l’écran, le décor du site, mono ou multi plan.

II – Contenu
II A - Cela peut être un fichier swf contenant une ou des zones de texte et une ou des zones pour recevoir les illustrations. Le contenu de ce MC unique est mis à jour dynamiquement à partir de la base de données en fonction des actions de l’utilisateur.

II B - Le contenu peut ne pas être un fichier swf. Il peut aussi être un MC dynamique qui se construit sur la scène à partir des informations récupérées de la base de données.
Le choix dépend de la manière dont tu organises ta base de données.

III- Interaction
Ce sont essentiellement des fichiers swf contenant des fenêtres comme une fenêtre mail ou une fenêtre votre avis ou bien encore une fenêtre envoyer à un ami.
Je parle bien de fenêtre c’est à dire des objets drag&drop pouvant être fermé par un bouton de fermeture ou d’envois faisant leur apparition devant le site.
C’est aussi l’indispensable menu du site.

IV – Système
Ce sont des fichiers contenant les polices du site, les composants (ascenseurs, combobox, datagrid..)

B - Pilotage :
Je dois avoir un fichier swf pour piloter à la demande l’ensemble de mes briques. C’est le fichier principal de mon application.
Il est chargé de gérer tout le système. S'il devient trop lourd je l'explose en x fichiers applications.

I – Assemblage du décor
C’est dans cette phase que les swf de décoration sont chargés sur la scène et empilés pour construire le site dynamiquement mais en prenant soin de ne charger que l’indispensable pour ne pas imposer aux visiteurs une barre de téléchargement

II- Chargement des éléments interactifs et système
 C’est principalement le chargement du menu du site qui doit se construire à la volée par rapport à la liste des rubriques contenu dans la base de données. Cela peut être aussi le chargement d’une fenêtre de type contact et éventuellement d’un calendrier.

A ce stade nous sommes en stand-by. Le visiteur doit maintenant agir.
En fonction d’un choix de sa part, nous devons maintenant faire :
I- Soit charger une fenêtre interactive supplémentaire ou utiliser une fenêtre déjà présente
II- Soit aller chercher un contenu

I – Fenêtre
Le code charge le fichier swf si besoin et le rend visible puis il contrôle les actions de l’utilisateur comme la saisie le drag&drop, la fermeture ou l’envoi.

II – Chercher un contenu
Le code passe à la base de données un ou des paramètres puis attend un retour.
Dès que la base de données renvoie les données le code gère l’affichage et le téléchargement des illustrations en fonction.

C - Liaison à une base de données :
Le principe est toujours le même. Flash par la méthode POST passe un ou des paramètres à une page côté serveur en ASP/PHP. Cette page génère une requête SQL (déconseillé) ou mieux passe à une requête stockée le ou les paramètres.

La base retourne soit rien, soit un enregistrement soit des enregistrements.
Les valeurs sont passées par un $echo (php) ou response.write (asp) au fichier swf
Le code AS2/AS3 récupère les valeurs et les affiches.

D- La base de données
Sa structure est très importante. De cette structure dépend la rapidité de ton application lorsque les volumes augmenteront. Mais il est des principes récurrents dans la conception d'un modèle relationnel à savoir :

1 - éviter la redondance de l'information
2 - dimensionner les champs à la taille la plus juste
3 - lier les tables en utilisant des liaisons de 1 à plusieurs
4 - ne pas créer des index inutiles
5 - répartir les données correctement dans les tables
6 - si les volumes sont important prévoir la gestion d'un historique pour alléger les tables principales
7 - ne jamais stocker des données binaire dans une base mes faire des liens
8 - utiliser le plus possible une clé primaire unique sur chaque table
9 - préférer les requêtes stockées au requêtes externes (sécurité, rapidité)
10 - utiliser des noms de champs simple à base de lettre

En espérant que mes explications ne vont pas te faire exploser la tête 

Réponses à tes questions :

tout d'abord je te remercie pour tes explications, et j'aurais voulu clarifier avec toi ce que tu veux dire quand tu parles de fichier, pour toi il s'agit de fichier swf c'est ça?

Oui

Si je comprend bien, dans ton organisation tu dois avoir développé une suite de fichiers swf avec la possibilité qu'ils communiquent ensemble  (en utilisant par exemple ce que j'appelle des variables globales) car c'est un moyen de transmettre des infos entre les fichiers swf ?!

Non le code étant centralisé je n'ai pas besoin de variables globales. Il me suffit de connaître le nom des MovieClip dans les fichier SWF pour pouvoir agir dessus.

Ne jamais mettre du code partout sinon bonjour la maintenance.

Pour comprendre aussi comment tu communiques avec une base de données, j'ai vu qu'il était possible de créer des classes php qui communiquent avec le fichier swf par le biais de AMFPHP, penses tu que cette solution est efficace, pour par exemple: l'insertion de texte, pour récupérer l'inscription d'un internaute pour une newsletter ou encore pour faire des requêtes pour l'affichage d'une playlist audio ou vidéo.

Je n'utilise que ASP pour communiquer avec une base de données SQL server ou MSAccess en fonction. Je n'ai jamais essayé AMFPHP ou coldfusion ou autre donc plutôt que de dire des bêtises je préfère ne rien dire 

[T_bo]

Allez un petit coup de grain de sel de ma part.

L'amf qu'il soit avec du php, du .net, java, ruby, python ou autre est le meilleur moyen de transférer des données entre flash et le serveur.

pour ce qui est d'amfphp il est tres bon,je l'utilise encore régulièrement pour du prototypage ou pour des applis simple, mais malheureusement  il n'a jamais été vraiment fini (beta 1.9 depuis plusieurs années) et n'est pas vraiment recommander pour des applis sérieuses (bug inside ? (jamais vu perso)), il permet également de faire très simplement des réponse en JSON ou xml ce qui peut être assez utile pour un interfaçage mixte...
(les autres framework aussi mais il faut mettre un peu plus les main dans le code)
 Adobe conseille Zend depuis peu et la mm intégré  directement au flash builder, pour faire un "simple" site web c'est un peu comme chasser une mouche avec un bazooka, mais pour la cible de dev de flashbuilder c'est un choix logique...
Tu peux te renseigné du coté de webOrb et de sabre amf (mm fonctionnalités qu'amfphp plus d'autres mais un peu moins intuitif), apprendre le framework zend ou n'interfacer que zend_amf avec ton propre code (le zf est plutôt souple de ce coté mais perd quasiment tout intérêt utilisé ainsi) ou utiliser amfphp tout dépends de ce que tu veux faire et de tes compétence en php et surtout en oop.

Bon courage

[Levendivin]

Bonjour,

Je suis en train de planifier à faire mon site, RMistral, tu disais

Il faut architecturer ton site par empilement de MovieClip (MC) c'est à dire faire un fichier pour le décor du site, un fichier pour le menu, un fichier par page du site puis "empiler" les fichiers pour constituer le site complet.

Pour un site full flash, il n'y pas qu'un seul fichier ? et tous les autres éléments çàd : menu, page etc.  sont dedans.

Et pour faire un site full flash, faut-t-il connaitre javascript, php ?  moi je voulais utiliser que ActionScript et XML pour la publier en ligne, c tout.   

P.S.  Kdo : tes liens ne fonctionnent pas !

[RMistral (Wisi)]

Bonjour,

Il est possible de faire un site full flash en AS3 suivant 2 méthodes.

La première c'est d'avoir un seul et unique fichier swf avec tout dedans. Le problème c'est le poids et la maintenance. Techniquement c'est le plus facile à faire pour un graphiste non codeur.

La seconde c'est de tronçonner le site en x fichiers swf et de charger les fichiers à la demande du visiteur. Cela permet d'étaler le poids et d'éviter les barres de téléchargement. Techniquement c'est plus complexe à faire.

Dans la seconde solution il faut maîtriser la classe URLRequest, Loader pour gérer les téléchargements des différents morceaux du site (fichier swf, image)
et bien sur la gestion des événements.

Ensuite suivant le cas il faut connaitre côté serveur asp ou php pour gérer les échanges avec la base de données contenant les textes du sites. Il faut aussi avoir des connaissances en modèle relationnel c'est à dire comment organiser une base de données pour accéder le plus rapidement possible aux informations quelque soit le volume de données à traiter.

Si les volumes sont faibles, en lieu et place d'une base de données, des fichiers XML ou des fichiers textes peuvent faire l'affaire. Cela permet d'éviter de connaitre asp ou php et les bases de données.

Bon courage.....

[Levendivin]

Bonjour RMistral,

Merci toujours pour tes réponses. Je suis graphiste, je pense que je vais opter la seconde solution, j'ai peur qu'une fois le site devient un peu plus complexe, ça va souler tout le monde, ça ne va pas faire avec la 1ere solution.

Si les volumes sont faibles, en lieu et place d'une base de données, des fichiers XML ou des fichiers textes peuvent faire l'affaire. Cela permet d'éviter de connaitre asp ou php et les bases de données.

Qu'est-ce-que tu appelles "les volumes sont faibles"  ? en moyenne de combien de Ko ?
Moi, je ne connais pas asp ni php, je suis en train d'apprendre AS3.  Entre asp et php , lequel est plus simple ? 

Y-a-t-il un livre consacré à la conception du site (je parle du Flash) ? J'avoue que je suis obligée d'apprendre en autodidacte et je suis un peu à la tatonne en ce moment.

Merci

Levendivin

[RMistral (Wisi)]

Bonjour,

Si tu projettes de faire un site d'une dizaine ou d'une vingtaine de page de texte, les fichier xml ou texte sont suffisant.

Si par contre tu essayes de faire un blog avec nouveau billet chaque semaine, là il faut passer par une base de données.

XML et plus facile à mettre à jour par rapport au fichiers texte. L'inconvénient c'est que la formulation d'un fichier xml et plus rigoureuse. Il faut faire très attention à la gestion des balises (ouvrante, fermante, emboîtement)

Pour les langages de programmation, php et asp sont équivalent tant en difficultés quand possibilités.

Je dirais que dans le milieu professionnel PME, grand compte, il est opportun d'aller vers asp.net. Dans le milieu associatif, TPE, php est beaucoup plus utilisé car gratuit. De plus, les produits open source comme joomla, wordpress, drupal.... sont sur cette base.

Sur le net tu trouveras plus de source en php.

Pour la conception de site en AS3 je te conseille le Workshop de Wisibility du 14 juin.


Bonne journée....