Tween transition IN/OUT

Tween transition IN/OUT - Flash/ActionScript - Programmation

Marsh Posté le 08-03-2006 à 15:02:03    

:) Salut à tous
 
Pour ma galerie "XML" j’ai besoin d’utiliser une transition IN/OUT avec les nouvelles méthodes "Tween"
Sur le site de blog.latex.com j’ai trouvé une class pour l’effet et un code qui m’intéresse mais donc je n’arrive pas a intégrer. (à moins qu’il y a plus simple !!)
J’ai testé pas mal de choses mais rien de probant.
Un petit coups de pouce de votre part me serait bien utile.
 
Voici mon code : ( désolé c’est un peu long )

Code :
  1. var cpt /*Number*/ ; // compteur de la gallery  
  2. var pictures /*Array*/ ; // tableau contenant les images
  4. // variables loader
  5. var barW:Number = 500;
  6. var barH:Number = 5;
  8. // champ de texte dynamique pour le test  
  9. this.createTextField("field", 1, 10, 10, 180, 200) ;
  10. field.border = false ;
  11. field.setNewTextFormat(new TextFormat("arial", 12)) ;
  12. field.borderColor = 0xFFFFFF ;
  13. field.selectable = false ;
  14. field.multiline = true ;
  15. field.wordWrap = true ;
  16. field.html = true ;
  18. // clip vide pour charger dedans l'image  
  19. var conteneur_mc:MovieClip = this.createEmptyMovieClip("conteneur_mc", this.getNextHighestDepth());
  20. conteneur_mc._x = 150;
  21. conteneur_mc._y = 20;
  22. var loader_mc:MovieClip = conteneur_mc.createEmptyMovieClip("loader_mc",getNextHighestDepth());
  24. //creation de loader
  25. function draw(w, h):Void {
  26. conteneur_mc.moveTo(0, 0);
  27. conteneur_mc.beginFill(0x000000, 200);
  28. conteneur_mc.lineTo(w, 0);
  29. conteneur_mc.lineTo(w, h);
  30. conteneur_mc.lineTo(0, h);
  31. conteneur_mc.lineTo(0, 0);
  32. conteneur_mc.endFill();
  33. }
  34. //chargement des images
  35. var my_MovieclipLoader:MovieClipLoader = new MovieClipLoader();
  36. var my_listener:Object = new Object();
  37. my_listener.onLoadProgress = function(mc, loadedBytes, totalBytes) {
  38. percentage.text = Math.round(loadedBytes/totalBytes*100);
  39. barW = Math.floor(loadedBytes / totalBytes * 500);
  40. draw(barW, barH);
  41. };
  42. my_listener.onLoadInit = function() {
  43. conteneur_mc.clear();
  45. //transition  
  46. import mx.transitions.*;
  47. import mx.transitions.easing.* ;
  48. import com.lalex.visual.XColor;
  49. var my_color:XColor = new XColor(conteneur_mc);
  50. var myTransition:Tween = new Tween(my_color, "_brightOffset", Regular.easeInOut, 255, 0, .5, true);
  52. myTransition.onMotionFinished = function () {
  53.    trace ("fin du Tween" );
  54. }
  55. };
  56. //..
  57. my_MovieclipLoader.addListener(my_listener);
  58. // fonctions pour gérer la gallery  
  59. var getBigAt = function ( id /*Number*/ ) /*String*/ {
  60.    return pictures[id].fichier ;
  61. }
  62. //creation champ texte
  63. var getTextAt = function( id /*Number*/ ) /*String*/ {
  64.    var pic = pictures[id] ;
  65.    var txt = "<b>Webdesign :</b> " + pic.num + " sur " + pictures.length + "<br />" ;
  66.    txt += "<b>Année : </b>" + pic.date + "<br />" ;
  67.    txt += "<b>Desc : </b>" + pic.desc +"<br />";
  68.    return txt ;
  69. }
  71. var showPictureAt = function( id /*Number*/ ) {
  72.    my_MovieclipLoader.loadClip(pictures[id].fichier, loader_mc) ;
  73.    field.htmlText = getTextAt(id) ;
  74. }
  76. var next = function () {
  77.    cpt++ ;
  78.    if (cpt == pictures.length) cpt = 0 ;
  79.    showPictureAt(cpt) ;
  80. }
  82. var prev = function () {
  83.    cpt-- ;
  84.    if (cpt == -1) cpt = pictures.length - 1  ;
  85.    showPictureAt(cpt) ;
  86. }
  88. // action sur les boutons  
  89. nextButton.onRelease = next ;
  90. prevButton.onRelease = prev ;
  92. conteneur_mc.onRelease = function() {
  93.    var url /*String*/ = getBigAt(cpt) ;
  94.    getURL( url , "_blank" );
  95. }
  97. // chargement du xml  
  98. var x = new XML();
  99. x.ignoreWhite = true;
  100. x.onLoad = function(success) {
  101.    //initialisation des variables  
  102.    pictures = [] ;
  103.    cpt = 0 ;
  104.    if (success && this.status == 0) {
  105.        var node = this.firstChild.childNodes;
  106.         var len = node.length;
  107.       for (var i = 0 ; i<len ; i++) {
  108.          var current = node[i] ;
  109.          var item = {}
  110.          for (var prop:String in current.attributes) {
  111.             item[prop] = current.attributes[prop] ;
  112.          }
  113.          pictures.push(item) ;
  114.       }
  115.    }
  116.    showPictureAt(cpt) ;
  117. }
  118. x.load("data/fichier.xml" ) ;

Les sources Ici !!
 :) Merci D’avance


Message édité par olimann le 08-03-2006 à 17:23:02
Reply

Marsh Posté le 08-03-2006 à 15:02:03   

Reply

Marsh Posté le 09-03-2006 à 08:55:22    

qu'est ce que tu veex faire exactement parcqu'en l'etat ton code fonctionne tres bien, sans doute que tu gagnerais a mettre ces 3 lignes:
import mx.transitions.*;
import mx.transitions.easing.* ;
import com.lalex.visual.XColor;
au debut de ton code pour eviter qu'elle soit lu/interpreté a chaque loadInit mais même avec ca ca fonctionne donc ou est le PB?
que cherche tu a faire ?


---------------
D3
Reply

Marsh Posté le 09-03-2006 à 15:01:23    

:) Merci pour ta réponse
 
Ce je cherche à faire c’est une transition "OUT", faire fondre l’image avant le chargement de la suivante (classique )
Comme tu peux le voir dans mon code la première transition ( "IN" )  fonctionne très bien !!
 
Etant donné que c’est la première fois que j’utilise ces méthodes, je suis pas sur d’être sur la bonne piste !?
Le lien de blog.latex.com propose une idée intéressante avec l’utilisation du "Tween yoyo" qui ma parait simple
Mais difficile à mettre en place.
 :??: Je sais pas si c’est la bonne solution à employé ?!

Reply

Marsh Posté le 09-03-2006 à 17:27:16    

pourquoi pas mais si tu veux ce genre d'effet il te faudras un deuxieme conteneur (pour le moment je crois que tu n'en as qu'un) avec un systeme de variable boolen qui te dit quel conteneur est libre... et un changment de depth pour que ton image nouvellement chargé soit en dessous...
 
si tu n'as qu'un conteneur, quand tu charge une image dedans l'autre est purement est simplement supprimé  [:airforceone]


---------------
D3
Reply

Marsh Posté le 10-03-2006 à 15:30:57    

:sweat: Houps ça ce complique !!
Donc il faut que je regarde le "systeme de variable boolen " de plus prés.
As-tu une ressources ou un tutorial dans ta connaissance que tu pourrais me faire partager !!
 

Reply

Marsh Posté le 10-03-2006 à 16:53:22    

c'est pas si compliqué...
boolen ca veut dire 2 etats 0 ou 1, true ou false et dans ton cas conteneur1 ou conteneur2


---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed