Sistema de transiciones entre fotos

Esta clase, permite generar de forma fácil un sistema de transiciones de fotografias. Este es un ejemplo:

Su funcionamiento es muy simple. La clase genera dos MovieClips contenedores en los que coloca la fotografía actual y la potografía posterior, y carga también un SWF que contiene la animación de la mascara. Esta mascara la aplica al MovieClip contenedor haciendo así es efecto de transicion de una foto a la otra.

Este sistema nos permite generar las animaciones de transición como archivos SWF externos e independientes, pudiendo tener una libreria de transiciones y eligiendo la que queramos para cada transición de fotos.

Un ejemplo de animación de transición sería este:

La clase:

1. import mx.utils.Delegate;
2. //
3. class img.ImgTransition
4. {
5. private var ruta:MovieClip;
6. private var clip:MovieClip;
7. private var foto:String;
8. private var foto_up:MovieClip;
9. private var foto_down:MovieClip;
10. private var mascara:MovieClip;
11. private var intervalo:Number;
12. private var ejecucion:Boolean;
13. //----------------------------
14. public function ImgTransition(qRuta:MovieClip, qFoto:String, qX, qY)
15. {
16. ruta = qRuta;
17. clip = ruta.createEmptyMovieClip("ImgTransition", ruta.getNextHighestDepth());
18. foto_down = clip.createEmptyMovieClip("foto_down", clip.getNextHighestDepth());
19. foto_up = clip.createEmptyMovieClip("foto_up", clip.getNextHighestDepth());
20. mascara = clip.createEmptyMovieClip("mascara", clip.getNextHighestDepth());
21. foto_up.createEmptyMovieClip("mc", 1);
22. foto_down.createEmptyMovieClip("mc", 1);
23. mascara.createEmptyMovieClip("mc", 1);
24. foto = qFoto;
25. loadMovie(qFoto, foto_up.mc);
26. loadMovie(qFoto, foto_down.mc);
27. clip._x = qX;
28. clip._y = qY;
29. ejecucion = false;
30. //
31. }
32. //----------------------------
33. public function transition(qFoto:String, qMascara:String, qDuracion:Number):Void
34. {
35. if (!ejecucion)
36. {
37. if (qFoto != foto)
38. {
39. foto = qFoto;
40. //
41. var precarga:MovieClipLoader = newMovieClipLoader();
42. var listener:Object = new Object();
43. listener.onLoadInit = Delegate.create(this, xnLoadInit1);
44. precarga.addListener(listener);
45. precarga.loadClip(qFoto, foto_up.mc);
46. mascara.swf = qMascara;
47. mascara.duracion = qDuracion;
48. foto_up._visible = false;
49. }
50. }
51. }
52. private function xnLoadInit1()
53. {
54. var precarga2:MovieClipLoader = new MovieClipLoader();
55. var listener2:Object = new Object();
56. listener2.onLoadInit = Delegate.create(this, xnLoadInit2);
57. precarga2.addListener(listener2);
58. precarga2.loadClip(mascara.swf, mascara.mc);
59. }
60. private function xnLoadInit2()
61. {
62. foto_up.setMask(mascara);
63. foto_up._visible = true;
64. intervalo = setInterval(this, "endTransition", mascara.duracion * 1000);
65. ejecucion = true;
66. }
67. //----------------------------
68. private function endTransition():Void
69. {
70. loadMovie(foto, foto_down.mc);
71. foto_up.setMask(null);
72. unloadMovie(mascara.mc);
73. clearInterval(intervalo);
74. ejecucion = false;
75. }
76. //----------------------------
77. }

Su uso en el .fla es este:

1. import img.ImgTransition;
2. var foto:ImgTransition = new ImgTransition(this, "foto1.jpg", 10, 10);
3. //
4. bot1.onRelease = function()
5. {
6. foto.transition("foto1.jpg", "mascara1.swf", 5);
7. };
8. bot2.onRelease = function()
9. {
10. foto.transition("foto2.jpg", "mascara2.swf", 3);
11. };
12. bot3.onRelease = function()
13. {
14. foto.transition("foto3.jpg", "mascara3.swf", 2);
15. };
16. bot4.onRelease = function()
17. {
18. foto.transition("foto4.jpg", "mascara4.swf", 3);
19. };
20. bot5.onRelease = function()
21. {
22. foto.transition("foto5.jpg", "mascara5.swf", 2);
23. };

Archivos