Forums Développement Multimédia

Aller au contenu

Integration d'un preload sur ma gallerie d'image en AS3

CODE Actionscript

4 réponses à ce sujet

#1 sebastien.tetard

    Ceinture Jaune

  • Members
  • PipPip
  • 18 messages

Posté 03 November 2008 - 21:31 PM

Hello à vous tous,

Je ne sais pas trop comment fonctionne les forums mais je me lance quand même !

En faite je suis encore un novice en AS et je cale sur un truc simple.

Je voudrais intégrer une barre de chargement sur le préchargement de mes images sur ma galerie photos. cf streetcolor: Lien


Voici le code utilisé:

Action Script

import fl.containers.UILoader;
import caurina.transitions.*;

//---------chargemnt du xml-------
var urlRequest:URLRequest = new URLRequest("xml/photos.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);





//--------maintien la chemin aux thumbnails-------
var arrayURL:Array = new Array();
//--------maintien la chemin aux grandes photos-------
var arrayName:Array = new Array();
//--------maintien la chemin aux objects-------
var holderArray:Array = new Array();
//--------represente le nombre de colonnes-------
var nrColumns:uint = 8;
var nrLignes:uint = 4;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;

//--------Conteneur des thumbnails-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);

//-------- le conteneur photos position et emplacement------
var loaderHolder:Sprite = new Sprite();
loaderHolder.x = 4000;
loaderHolder.y = 0;
sprite.addChild(loaderHolder);

//-------- Chargement de la grande photo et positionement-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 760;
photoLoader.height = 327;
photoLoader.y = 91;
photoLoader.x = 1400;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
myXML = XML(event.target.data);
xmlList = myXML.children();
for (var i:int=0; i<xmlList.length(); i++) {
var picURL:String = xmlList[i].url;
var picName:String = xmlList[i].big_url;
arrayURL.push(picURL);
arrayName.push(picName);
holderArray[i] = new Thumbnail(arrayURL[i],10,arrayName[10]);
holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
holderArray[i].name = arrayName[i];
holderArray[i].buttonMode = true;
if (i<nrColumns) {
holderArray[i].y = 00;
holderArray[i].x = i*110+00;
} else {
holderArray[i].y = holderArray[i-nrColumns].y+110;
holderArray[i].x = holderArray[i-nrColumns].x;
}
thumbsHolder.x = 1400
thumbsHolder.y =110
thumbsHolder.width = (holderArray[i].width*nrColumns)*.8;
thumbsHolder.height = (holderArray[i].height*nrLignes)*.8;
thumbsHolder.addChild(holderArray[i]);
}
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
photoLoader.source = event.currentTarget.name;
//Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
Tweener.addTween(loaderHolder, {x:0, time:1, transition:"easeInElastic"});
Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});


}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
Tweener.addTween(thumbsHolder, {x:1400, time:1, transition:"easeInElastic"});// Position groupe de thumbnails
Tweener.addTween(loaderHolder, {x:2000, time:1, transition:"easeInElastic"});//Position images aprés clique dessus
Tweener.addTween(thumbsHolder, {alpha:1, time:1, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:0.2, time:1, transition:"linear"});
}

this.addEventListener(Event.ENTER_FRAME,progressEvent);


Je vous remercie beaucoup de votre aide,

A très vite

Sébastien

#2 s-eb

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 03 November 2008 - 22:10 PM

salut

ton PhotoLoader ne doit pas etre un sprite pusique c lui qui contient tes grandes image
mais un Loader

var loaderHolder:Loader = new Loader();
addChild(loaderHolder);

c'est avec le contentloaderinfo que tu as les info sur la progression, tu rajoute une barre de chargement "barreChargement"


loaderHolder.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, loaderProgressHandler );
function loaderProgressHandler (e:ProgressEvent):void
{
var rapport:Number = e.bytesLoaded / e.bytesTotal;
barreChargement_mc.indicateurChargement_mc.scaleX = rapport
barreChargement_mc.pourcent_txt.text = Math.round (rapportChargement * 100) + " %";

}

loaderHolder.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderCompleteHandler );
function loaderCompleteHandler ( e:Event):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);

if ( contains(prechargeur_mc) )
removeChild (prechargeur_mc);
}

// Erreur de chargement
LoaderHolder.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, loaderErrorHandler );
function loaderErrorHandler ( e:IOErrorEvent ):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);
}


LoaderHolder.load(...)

voila si ca peu t'aider

salut

#3 sebastien.tetard

    Ceinture Jaune

  • Members
  • PipPip
  • 18 messages

Posté 04 November 2008 - 18:11 PM

Citation (s-eb @ Nov 3 2008, 09:10 PM) Voir le message
salut

ton PhotoLoader ne doit pas etre un sprite pusique c lui qui contient tes grandes image
mais un Loader

var loaderHolder:Loader = new Loader();
addChild(loaderHolder);

c'est avec le contentloaderinfo que tu as les info sur la progression, tu rajoute une barre de chargement "barreChargement"
loaderHolder.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, loaderProgressHandler );
function loaderProgressHandler (e:ProgressEvent):void
{
var rapport:Number = e.bytesLoaded / e.bytesTotal;
barreChargement_mc.indicateurChargement_mc.scaleX = rapport
barreChargement_mc.pourcent_txt.text = Math.round (rapportChargement * 100) + " %";

}

loaderHolder.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderCompleteHandler );
function loaderCompleteHandler ( e:Event):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);

if ( contains(prechargeur_mc) )
removeChild (prechargeur_mc);
}

// Erreur de chargement
LoaderHolder.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, loaderErrorHandler );
function loaderErrorHandler ( e:IOErrorEvent ):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);
}
LoaderHolder.load(...)

voila si ca peu t'aider

salut



Hello S-eb ,

Merci pour ta réponse et ta rapidité.

si je comprends bien je dois intégrer cette partie :


Action Script


var loaderHolder:Loader = new Loader();
addChild(loaderHolder);

photoLoader.width = 760;
photoLoader.height = 327;
photoLoader.y = 91;
photoLoader.x = 1400;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);


loaderHolder.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, loaderProgressHandler );
function loaderProgressHandler (e:ProgressEvent):void
{
var rapport:Number = e.bytesLoaded / e.bytesTotal;
barreChargement_mc.indicateurChargement_mc.scaleX = rapport
barreChargement_mc.pourcent_txt.text = Math.round (rapportChargement * 100) + " %";

}

loaderHolder.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderCompleteHandler );
function loaderCompleteHandler ( e:Event):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);

if ( contains(prechargeur_mc) )
removeChild (prechargeur_mc);
}

// Erreur de chargement
LoaderHolder.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, loaderErrorHandler );
function loaderErrorHandler ( e:IOErrorEvent ):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);
}


loaderHolder.addChild(photoLoader);

à la place de celle ci :


Action Script


var loaderHolder:Loader = new Loader();
addChild(loaderHolder);

photoLoader.width = 760;
photoLoader.height = 327;
photoLoader.y = 91;
photoLoader.x = 1400;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);

loaderHolder.addChild(photoLoader);

A savoir que je devrai créer un clip que j'appelerai barreChargement_mc

Merci de ton aide,

A très vite

Sébastien

#4 s-eb

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 04 November 2008 - 18:47 PM

re,

oui, ta presque pas besoin d'un conteneur en fait.
et ton on Mouse tu le fais sur la Loader.

Oui un clip du nom que tu veut la c barreChargement_mc et dedans un champs texte (ou non) et tu le nomme "pourcent_txt".
enfin fais des essai mais ce ca

tu peu aussi regarder la doc de la Class Loader. (contentLoaderInfo)

salut

#5 sebastien.tetard

    Ceinture Jaune

  • Members
  • PipPip
  • 18 messages

Posté 04 November 2008 - 21:04 PM

Hello S-eb !

Bon en faite ca marche pas !!! Je suis pas doué en AS3 donc je comprends pas grand chose ...

Enfin bref j'ai calé ça :

Action Script

var loaderHolder:Loader = new Loader();
addChild(loaderHolder);
var photoLoader:UILoader = new UILoader();
photoLoader.width = 1000;
photoLoader.height = 555;
photoLoader.y = 0;
photoLoader.x = 1400;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);

loaderHolder.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, loaderProgressHandler );
function loaderProgressHandler (e:ProgressEvent):void
{
var rapport:Number = e.bytesLoaded / e.bytesTotal;
barreChargement_mc.indicateurChargement_mc.scaleX = rapport
barreChargement_mc.pourcent_txt.text = Math.round (rapportChargement * 100) + " %";

}

loaderHolder.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderCompleteHandler );
function loaderCompleteHandler ( e:Event):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);

if ( contains(prechargeur_mc) )
removeChild (prechargeur_mc);
}

// Erreur de chargement
LoaderHolder.contentLoaderInfo.addEventListener( IOErrorEvent.IO_ERROR, loaderErrorHandler );
function loaderErrorHandler ( e:IOErrorEvent ):void
{
if ( contains(barreChargement_mc) )
removeChild (barreChargement_mc);
}


LoaderHolder.load(photoLoader)

Mais ça me met 1151: Conflit dans la définition loaderHolder dans l'espace de nom internal.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP