Salut, tout d'abord merci pour ton com, c'est sympa, pour l'inspiration et bien surement tout comme toi, il y a des jours ou c'est plus simple, mais à la base, cette application était vraiment laide, alors petit à petit j'y est ajouté des petites touches ici et là, pour arriver à ce résultat, qui n'est d'ailleurs pas non plus exceptionnel, perso il y a quand même pas mal de choses à revoir, mais bon.
Sinon je te garantie que tu peux te lancer, car l'élaboration de ce projet n'est complexe que par son code, mais il est tout à fait possible de simplifier la chose pour qu'une personne ayant un niveau assez basique puisse arriver à peu près au même résultat, crois moi.
Concernant la gestion xml et bien j'avoue que je me suis créais mon propre frameWork ce qui me simplifie vraiment la vie, j'ai du mettre 3 semaine à le préparer, mais désormais je gagne des heures lorsque j'utilise la gestion xml dans l'un de mes projets, bref ça en valais le coup !!!
Mais même sans en arriver là, il n'y a pas de secret, il faut coder, coder et recoder, plus tu utiliseras l'actionscript dans tes projets, plus ta compréhension en sera élevé, en fait on fini par comprendre que certaine choses reviennent sans cesse, ce qui en fin de compte facilite l'apprentissage, il faut juste coder le plus souvent possible pour que tout rentre, après sa devient beaucoup plus simple.
Pour te donner un petit coup de main pour ton carrousel, je veux bien partager le résultat ( du développement) de ma dernière application, pour que tu ne sois pas complétement largué, j'ai commenté l'ensemble de ma classe, après ceci te donneras surtout des exemples concrets.
D'ailleurs pour la récupération xml, je te donne un exemple qui n'utilise que les classes natives, comme ça tu as tout à disposition. Autre chose, voici comment tu peux récupérer simplement tes éléments xml
- Code:
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
private var _xmlLoader :URLLoader;
private var _xmlData :XML;
private var _nbItem :int;
private var _loaderImg :Loader;
private var _pageActu :int;
private var _maxItem :int;
this._xmlLoader.addEventListener( Event.COMPLETE, xmlCharge );
this._xmlLoader.load( new URLRequest( 'xml/folio.xml' ) );
private function xmlCharge( e:Event ):void
//================================================================================================
{
//_______○○○--Récupération des données xml---○○○_______
this._xmlData = XML(e.target.data);//données bruts
this._maxItem = this._xmlData.item.length();//récupération du nombre maximum d'item
initItem();
}
private function initItem():void
//================================================================================================
{
//_______○○○--Récupération individuelle des éléments xml---○○○_______
if(_xmlData)
{
var _titre:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).title;
var _image:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).image;
var _texte:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).content;
var _url :XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).url;
//_______○○○--Liaisons des éléments xml---○○○_______
this._loaderImg.load( new URLRequest( _image ) );
this.contTxt.titre.text = String( _titre );
this.contTxt.description.text = String( _texte );
this.contTxt.txtUrl.text = String( _url );
}
}
Voilà alors c'est peut être flou pour toi, mais pour t'expliquer ce qui a été fait ici, tout d'abord on créer des écouteurs sur le loaderxml, puis une fois ceci fait, on récupère chaque donnée dans des xmlList, ici je récupère, les titres, textes, images et liens situé dans mon fichier xml (je te donnerais sont contenu plus bas).
Une fois que la récupération réussi, je lie mes xmlList avec les éléments présent dans mon application (le fla), texte dynamique et movieClip pour contenir l'image.
Voilà, voici le contenu de mon fichier xml (ça peut aider):
- Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<folio>
<item id="1">
<title>Première image</title>
<image>images/big/001.jpg</image>
<url>http://artkabis.fr</url>
<content>Contenu textuel du Premième Item, ce contenu est chargé depuis le fichier folio.xml ainsi que l'image et le titre qui l'accompagne</content>
</item>
<item id="2">
<title>Deuxième image</title>
<image>images/big/002.jpg</image>
<url>http://www.artkabis.net</url>
<content>Contenu textuel du Deuxième Item, ce contenu est chargé depuis le fichier folio.xml ainsi que l'image et le titre qui l'accompagne</content>
</item>
<item id="3">
<title>Troisième image</title>
<image>images/big/003.jpg</image>
<url>http://google.fr</url>
<content>Contenu textuel du Troisième Item, ce contenu est chargé depuis le fichier folio.xml ainsi que l'image et le titre qui l'accompagne</content>
</item>
<item id="4">
<title>Quatrième image</title>
<image>images/big/004.jpg</image>
<url>http://artkabis.fr</url>
<content>Contenu textuel du Quatrième Item, ce contenu est chargé depuis le fichier folio.xml ainsi que l'image et le titre qui l'accompagne</content>
</item>
<item id="5">
<title>Cinquième image</title>
<image>images/big/005.jpg</image>
<url>http://artkabis.fr</url>
<content>Contenu textuel du Cinquième Item, ce contenu est chargé depuis le fichier folio.xml ainsi que l'image et le titre qui l'accompagne</content>
</item>
</folio>
Et la classe complète de mon projet le tout avec commentaires:
- Code:
package fr
{
//_____○○○--Imports---○○○______
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.filters.GlowFilter;
import flash.filters.DropShadowFilter;
import gs.TweenMax;
import gs.easing.Sine;
import flash.utils.Timer;
//==========================================Classe==================================================
public class SliceMenu extends MovieClip
//==================================================================================================
{
//_______○○○--Déclarations Vars---○○○_______
private var _xmlLoader :URLLoader;
private var _xmlData :XML;
private var _nbItem :int;
private var _loaderImg :Loader;
private var _pageActu :int;
private var _maxItem :int;
private var _chargement :TextField;
private var _barre :Shape;
private var _barre_mc :MovieClip;
private var _pct :int;
private var _ombreB :DropShadowFilter;
private var _ombreI :DropShadowFilter;
private var _glowB :GlowFilter;
private var _timer :Timer;
private var _colorP :uint;
private var _slideOn :Boolean;
//====================================Constructeur================================================
public function SliceMenu():void
//================================================================================================
{
//___○○○--Instanciations Vars---○○○____
this._chargement = new TextField();
this._barre = new Shape();
this._barre_mc = new MovieClip();
this._ombreB = new DropShadowFilter( 0,45,0x99B8FF,1,5,4,2,3,false,false,false );
this._ombreI = new DropShadowFilter( 0,45,0x000000,1,20,20,2,3,false,false,false );
this._glowB = new GlowFilter( 0x99F5FF,1,7,4,1,3,true,false );
this._xmlLoader = new URLLoader();
this._loaderImg = new Loader()
this._colorP = uint( 0xFFFF99 );
this._barre.graphics.beginFill( _colorP );
this._barre.graphics.drawRect( 0, 0, 1, 3 );
this._barre_mc.filters = [ _glowB, _ombreB ];
this._chargement.filters = [ _glowB, _ombreB ];
this.contImg.filters = [_ombreI];
_pageActu = 0;
//_______○○○--Gestion des modes boutons et des clips enfants---○○○_______
contImg.buttonMode = bt_ret.buttonMode = bt_av.buttonMode = bt_play.buttonMode = bt_pause.buttonMode = bt_ret.useHandCursor = bt_av.useHandCursor = bt_play.useHandCursor = bt_pause.useHandCursor = contImg.useHandCursor = true
bt_ret.mouseChildren = bt_av.mouseChildren = false;
//_______○○○--Mise en place des écouteurs---○○○_______
this.bt_ret.addEventListener( 'click', retour );
this.bt_av.addEventListener( 'click', suite );
this.bt_play.addEventListener( MouseEvent.CLICK, function(){ autoSlide( 5,true,'>' ) } );
this.bt_pause.addEventListener( MouseEvent.CLICK, function(){_slideOn=false; _timer.reset(); } );
this.addEventListener( 'mouseOver', $actions );
this.addEventListener( 'mouseOut', $actions );
//_______○○○--Gestion des événement liés au fichier xml---○○○_______
this._xmlLoader.addEventListener( Event.COMPLETE, xmlCharge );
this._xmlLoader.addEventListener( IOErrorEvent.IO_ERROR, erreurXmlCharge );
this._xmlLoader.load( new URLRequest( 'xml/folio.xml' ) );
}
//==================================Gestion XML===================================================
private function xmlCharge( e:Event ):void
//================================================================================================
{
//_______○○○--Récupération des données xml---○○○_______
this._xmlData = XML(e.target.data);//données bruts
this._maxItem = this._xmlData.item.length();//récupération du nombre maximum d'item
this.animCorp.gotoAndPlay('ferme');//fermeture du fermoir lié au corp
this._loaderImg.contentLoaderInfo.addEventListener( Event.COMPLETE, placImg );//écoute du _chargement de l'image
this._loaderImg.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, chargImg );//écoute de la progression de l'image
this.bt_av.dispatchEvent( new MouseEvent(MouseEvent.CLICK, suite ) );//on dispatch le clic sur le bouton avancement(initialisation)
}
//==================================Gestion des erreurs xml=======================================
private function erreurXmlCharge(ie:IOErrorEvent):void
//================================================================================================
{
//__○○○--Variables locals liés au message d'erreur---○○○__
var _msg:String = String( ie );
var _txtErr:TextField = new TextField();
var _format:TextFormat=new TextFormat();
var _visitor:Font = new Visitor();
//_______○○○--Paramètrage du texte d'erreur---○○○_______
_txtErr.filters = [ _ombreI ];
_txtErr.textColor = 0xFF0000;
_txtErr.multiline = false;
_txtErr.y = stage.stageHeight / 2;
_txtErr.width = stage.stageWidth;
//_______○○○--Récupération optimisé de l'url posant problème ---○○○_______
_txtErr.text = 'Erreur XML : ' + _msg.split('file:///')[1];
//_______○○○--Formatage---○○○_______
_format.font = 'Visitor TT2 BRK';
_format.size = 18;
_format.bold = true;
_format.align = TextFormatAlign.CENTER;
_txtErr.setTextFormat( _format );
this.addChild( _txtErr );
}
//=================================Deplacement suivant============================================
private function suite (me:MouseEvent):void
//================================================================================================
{
this._timer.reset();
this._pageActu++;//implémentation de la variable _pageActu (!!!important!!!)
this.animCorp.gotoAndPlay( 'ferme' );//fermeture du fermoir lié au corp
//_______○○○--Suppression des écouteurs (blocage)---○○○_______
this.bt_ret.removeEventListener( 'click', retour );
this.bt_av.removeEventListener( 'click', suite );
this.bt_av.mouseEnabled = bt_ret.mouseEnabled =false;
this.bt_av.gotoAndStop( 'desactiv' );
this.bt_ret.gotoAndStop( 'desactiv' );
//_______○○○--Animation du contenu et test pour le bouclage---○○○_______
if(_pageActu > _maxItem){_pageActu=1; TweenMax.to(this.contImg,1,{x:-(90+this.contImg.width),rotationY:720,alpha:0,ease:Sine.easeIn,onComplete:initItem});};
TweenMax.to(this.contImg,1,{x:-(90+this.contImg.width),rotationY:360,alpha:0,ease:Sine.easeIn,onComplete:initItem});
TweenMax.to(this.contTxt,1,{alpha:0,ease:Sine.easeIn});
}
//=================================Déplacement précédent==========================================
private function retour (me:MouseEvent):void
//================================================================================================
{
this._pageActu--;
this.animCorp.gotoAndPlay('ferme');
this._timer.reset();
//_______○○○--étapes inverses---○○○_______
this.bt_av.mouseEnabled = false;
this.bt_ret.mouseEnabled = false;
this.bt_av.gotoAndStop( 'desactiv' );
this.bt_ret.gotoAndStop( 'desactiv' );
this.bt_ret.removeEventListener( 'click', retour );
this.bt_av.removeEventListener( 'click', suite );
if(this._pageActu < 1){this._pageActu=this._maxItem;TweenMax.to(this.contImg,1,{alpha:0,ease:Sine.easeIn,onComplete:initItem});};
TweenMax.to(this.contImg,1,{x:-(90+this.contImg.width),rotationY:360,alpha:0,ease:Sine.easeIn,onComplete:initItem});
TweenMax.to(this.contTxt,1,{alpha:0,ease:Sine.easeIn});
}
//================================Initialisation du SliceMenu=====================================
private function initItem():void
//================================================================================================
{
//_______○○○--Ecoute globale des boutons---○○○_______
this.addEventListener( 'mouseOver', $actions );
this.addEventListener( 'mouseOut', $actions);
while(this.contImg.numChildren>0){this.contImg.removeChildAt(0);}//suppression des éléments du conteneur de l'image
//_______○○○--Récupération individuelle des éléments xml---○○○_______
if(_xmlData)
{
var _titre:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).title;
var _image:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).image;
var _texte:XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).content;
var _url :XMLList = _xmlData.item.( @id == '' + ( _pageActu ) ).url;
//_______○○○--Liaisons des éléments xml---○○○_______
this._loaderImg.load( new URLRequest( _image ) );
this.contTxt.titre.text = String( _titre );
this.contTxt.description.text = String( _texte );
this.contTxt.txtUrl.text = String( _url );
//_______○○○--Gestion des événeements liés à l'image---○○○_______
this._loaderImg.addEventListener('click',function(){navigateToURL(new URLRequest(_url))});//ajout d'intéractivité
this._loaderImg.contentLoaderInfo.addEventListener( Event.COMPLETE, placImg );//placement de l'image après _chargement
this._loaderImg.contentLoaderInfo.addEventListener( ProgressEvent.PROGRESS, chargImg );//gestion de la progression de l'image
if(_slideOn)this._timer.start();
}
}
//===============================Gestion du pré_chargement=========================================
private function chargImg( pe:ProgressEvent ) : void
//================================================================================================
{
//__○○○--Ajout des éléments liés au _chargement---○○○__
this.addChild ( this._barre_mc );
this.addChild ( this._chargement );
this._barre_mc.addChild ( this._barre );
//_______○○○--Mise en place des _chargements---○○○_______
this._pct = Math.round( pe.bytesLoaded / pe.bytesTotal * 100 );
this._barre_mc.width = stage.stageWidth / 100 * this._pct;
this._chargement.text = this._pct + "%";
this._chargement.textColor = this._colorP;
this._chargement.y = -5;
this._chargement.x = Math.floor( ( this._barre_mc.x + this._barre_mc.width ) + 5 );
}
//===============================Placement de l'image=============================================
private function placImg( e:Event ) : void
//================================================================================================
{
//___○○○--Mise en place de l'image---○○○___
this.contImg.addChild( this._loaderImg );
this._loaderImg.x = - this._loaderImg.width / 2;
this._loaderImg.y = - this._loaderImg.height / 2;
//__○○○--Suppression des _chargements---○○○__
this.removeChild( this._barre_mc );
this.removeChild( this._chargement );
//____○○○--lecture des anims---○○○___
this.animCorp.gotoAndPlay( 'ouvre' );
this.cadre.play();
//_______○○○--Repositionnement des contenus---○○○_______
TweenMax.to(this.contImg, 1, {alpha:1, rotationY:0, x:265, ease:Sine.easeOut, onComplete:reactivBt});
TweenMax.to(this.contTxt, 1, {alpha:1, ease:Sine.easeIn});
}
//=============================Reactivation des boutons===========================================
private function reactivBt() : void
//================================================================================================
{
//_______○○○--Réactivation des boutons des écouteurs et replacements---○○○_______
this.bt_av.mouseEnabled = true;
this.bt_ret.mouseEnabled = true;
this.bt_av.gotoAndStop( 1 );
this.bt_ret.gotoAndStop( 1 );
this.bt_ret.addEventListener( 'click', retour );
this.bt_av.addEventListener( 'click', suite );
}
//=============================Gestion auto des déplacements======================================
private function autoSlide( $vitesse:int, $seconde:Boolean, $mode:String ) : void
//================================================================================================
{
this._slideOn = true;
//_______○○○--Gestion du format de la vitesse---○○○_______
if( !$seconde ){ this._timer = new Timer( $vitesse );
}else{ this._timer = new Timer( $vitesse* 1000 );}
//_______○○○--Iitialisation du _timer---○○○_______
this._timer.addEventListener( TimerEvent.TIMER,changPage );
this._timer.start();
//_______○○○--Gestion du sens de défilement---○○○_______
function changPage():void
{
//Récupération du mode: '>' pour lecture simple, '<' pour lecture inversé
if( $mode == '>' ){this.bt_av.dispatchEvent( new MouseEvent(MouseEvent.CLICK, suite ) );}
else if( $mode == '<' ){this.bt_ret.dispatchEvent( new MouseEvent(MouseEvent.CLICK, retour ) );
}
}
}
//============================Gestion des états des boutons=======================================
private function $actions(me:MouseEvent):void
//================================================================================================
{
//_______○○○--Regroupement des action over et out des boutons du projet---○○○_______
if(me.target.name == 'bt_av' || me.target.name =='bt_ret' || me.target.name =='bt_play' || me.target.name =='bt_pause')
{
switch(me.type){
case MouseEvent.MOUSE_OVER://au rollOver
me.target.gotoAndPlay('over');
break;
//_____________________________
case MouseEvent.MOUSE_OUT://au rollOut
me.target.gotoAndPlay('out');
break;
}//fin-switch
}//fin-if
}//fin-function
}//fin-class
}//fin-package