Proteger los archivos externos

Un problema muy común para los desarrolladores flash es el hecho de evitar que los lamers se descargen sus archivos swf y los decompilen para copiar el codigo, las animaciones, los mp3, o cualquier cosa que puedan aprovechar…

Un truco muy fácil es cambiar la extensión a los archivos externos.

Flash para bien o para mal ignora las extensiones de los archivos, ya que supone que le estamos indicando un tipo de archivo correcto (sea un swf, un flv, un mp3…)

Por lo que si tenemos un swf externo en el que tenemos algún tipo de código que queremos evitar que nos copien, cargado de esta manera:

1. loadMovie("peli.swf", 1);

Renombreamos el swf, le ponemos una extensión diferente, y lo cargamos de la misma manera.

1. loadMovie("tabla_1_1.gif", 1);

Flash cargará correctamente el swf.

De esta manera cuando el lamer busque en la carpeta del caché del navegador buscando archivos swf o mp3… no los encontrará, ya que solo encontrará archivos gif que se confundiran con el resto de ficheros de caché.

Podemos colocar gran parte del código en la pelicula principal y cargar mediante este sistema unas cuantas funciones o variables que sean imprescindibles para el correcto funcionamiento de la pelicula. Esto seguro que desespera a más de uno antes de descubrir porque no le funciona la pelicula.

Evidentemente este no es un metodo infalible…. ya que si el lamer descubre el truco con cambiar la extensión al fichero ya está… pero hace que tengan que dedicarle más tiempo y que más de uno se olvide del tema.

Drag and Drop en Action Script 3

Este es un pequeño ejemplo de como hacer un darg&drop de un movieclip en actionscript3.

Crearemos en flash9 un Movieclip al que llamaremos "clip".

En el fotograma añadiremos el siguiente código:

clip.addEventListener(MouseEvent.MOUSE_DOWN, onMouse_Down); clip.addEventListener(MouseEvent.MOUSE_UP, onMouse_Up);

Con esto asignaremoslos eventos de pulsar y soltar el mouse sobre el clip a las funciones "onMouse_Down" y "onMouse_Up".
Ahora definiremos estas funciones:

function onMouse_Down(e:Event):void{ clip.startDrag() } function onMouse_Up(e:Event):void{ clip.stopDrag(); }

Con esto ya tendríamos el MovieClip "clip" arrastrable.

Este mismo código lo podriamos haber puesto dentro de una clase AS3:

package{ import flash.display.* import flash.events.*; //———————————— public class Drag extends MovieClip{ public var clip:MovieClip = new MovieClip(); //———————————— public function Drag(queClip){ clip = queClip clip.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); clip.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); } //———————————— private function onMouseDown(e:Event):void{ clip.startDrag() } //———————————— private function onMouseUp(e:Event):void{ clip.stopDrag(); } } }

Al crear el contructor de la clase deberemos pasarle el MovieClip a arrastar como parámentro:

import Drag
var drag:Drag = new Drag(clip);

Controlar inactividad en una pelicula SWF

Este sencllo código nos puede servir para detectar un tiempo de inactividad por parte del usuario dentro de nuestra pelicula. Para por ejemplo, si el usuario está más de un minuto sin tocar el mouse, la pelicula salte directamente a un fotograma con una animación, y cuando el usuario vuelva a tocar el mouse la pelicula vuelva a su estado normal. Algo como un salvapantallas.

Primero de todo crearemos una pelicula flash con dos fotogramas. En el primero colocaremos un MovieClip que contendrá toda la pelicula, y en el segundo colocaremos otro MovieClip que contendrá la animación de salvapantallas.

En las acciones del primer fotograma colocaremos el código que controlará si hay actividad por parte del usuario, en el momento en el que pase un cierto tiempo en el que no la hay, mandará la pelicula al segundo fotograma.

var posicionMouse:Number = _xmouse + _ymouse; intervalo = setInterval(this, "controlaPosicion", 2000); stop();

La variable posicionMouse guardará el valor de la posición del mouse en pantalla, y crearemos un intervalo que cada 2 segundos controle dicha posición.

function controlaPosicion():Void { if (posicionMouse != _xmouse + _ymouse) { } }

Esta función compara el valor de la variable posicionMouse (guardada hace 2 segundos) con el valor actual del mouse, si el valor es diferente con lo quiere decir el el usuario está activo, entonces ejecutaremos las siguientes acciones:

clearInterval(intervalo2); intervalo2 = setInterval(this, "salvapantallas", 18000); gotoAndStop(1);

Creamos un segundo intervalo, en este caso de 18 segundos (o el tiempo que queramos para que salte nuestro salvapantallas). Y colocamos un gotoAndStop que mantenga la pelicula en el primer fotograma.

¿Por qué eliminamos la referencia al intervalo antes de crearlo? porque de esta manera reseteamos el intervalo cada vez que ejecutamos la acción. Es decir: si cada 2 segundos comparamos los valores del mouse y son diferentes, reiniciamos el segundo intervalo haciendo que vuelva a empezar la cuenta desde cero con lo que nunca llegará a los 18 segundos y no ejecutará la acción "salvapantallas", En cambio en cuanto los valores del mouse coincidan por que no ha habido movimiento del ratón por parte del usuario este reinicio del intervalo no se ejecutará con lo que este si que llegará a los 18 segundos ejecutando la acción "salvapantallas".

Como última acción dentro de esta función colocaremos fuera del condicional, para que se ejecute siempre cada 2 segundos, una línea de código que nos actualice la variable de la posición del mouse.

posicionMouse = _xmouse + _ymouse;

La acción "salvapantallas" lo que hará es enviar la pelicula al segundo fotograma.

function salvapantallas():Void { gotoAndStop(2); }

Aun estando en el segundo fotograma el intervalo que comprueba el movimiento del mouse continua ejecutandose cada 2 segundos, con lo que al primer movimiento volverá a colocar la pelicula en el primer fotograma.

Este sería el código completo, que hiría en el primer fotograma:

function controlaPosicion():Void
{
if (posicionMouse != _xmouse + _ymouse) {
clearInterval(intervalo2);
intervalo2 = setInterval(this, "salvapantallas", 18000);
gotoAndStop(1);
}
posicionMouse = _xmouse + _ymouse;
}
//———————————-
function salvapantallas():Void
{
gotoAndStop(2);
}
//—————————-
var posicionMouse:Number = _xmouse + _ymouse;
intervalo = setInterval(this, "controlaPosicion", 2000);
stop();

Enlaces de texto en Flash al estilo HTML

En flash podemos colocar textos en formato HTML con enlaces a otras páginas, pero tenemos el problema de que estos links no quedan resaltados en color azul y subrayados como pasa en un típico HTML.

Por ejemplo, este SWF contiene un campo de texto con varios enlaces, pero no se diferencian del resto del texto:

Esto lo podemos solucionar aplicando un poco de CSS al texto HTML.
El código para crear el estilo CSS sería este:

1. import TextField.StyleSheet;
2. var css:StyleSheet = new StyleSheet();
3. css.parseCSS("a{color:#0000FF; text-decoration:underline;}");

Ahora al crear un texto HTML tendremos que aplicarle el CSS, de esta manera aplicamos a todas las etiquetas el color azul y el subrayado:

1. texto.html = true;
2. texto.styleSheet = css;
3. texto.htmlText = "Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram; multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.";

El resultado sería este:

Para mejorar este código y hacerlo más reutilizable, podemos meterlo a través de prototype a la clase TextField:

1. TextField.prototype.htmlcss = function(txt:String)
2. {
3. import TextField.StyleSheet;
4. var css:StyleSheet = new StyleSheet();
5. css.parseCSS("a{color:#0000FF; text-decoration:underline;}");
6. this.html = true;
7. this.styleSheet = css;
8. this.htmlText = txt;
9. };

De esta manera TODOS los campos de texto tendrán el comportamiento htmlcss que colocará el estilo al texto.

Para añadir el texto al campo de texto utilizaremos esta nueva función de la clase:

1. texto.htmlcss("Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram; multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.");

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

Efecto de dibujo de línea con ActionScript -

Este es un sistema muy sencillo para redibujar un trazado de manera que parezca que se está dibujando runtime.

El primer paso será crear el trazado completo que queremos dibujar:




Luego utilizaremos este trazado como guía para un MovieClip, utilizando como punto inicial y final de la interpolación el punto inicial y final del trazado: Ahora mediante código haremos que este MovieClip mientras se desplaza por la guía vaya redibujando el trazado. Para eso crearemos una clase:

1. class redibujaGuia
2. {
3. }

En el constructor de la clase pasaremos como parámentros la ruta de la instancia de clase y el MovieClip que utilizaremos

1. public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
2. {
3. ruta = qRuta;
4. glider = qGlider;
5. //glider._visible = false;
6. var num:Number = ruta.getNextHighestDepth();
7. linea = ruta.createEmptyMovieClip("line"+num, num);
8. linea.lineStyle(1, 0x000000, 100);
9. }

Tambien creamos un MovieClip vacio donde dibujaremos el trazado, y creamos un lineStyle por defecto.

Crearemos tambien una función para poder editar el estilo del trazado:

1. public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
2. {
3. grosor = qGrosor;
4. color = qColor;
5. alfa = qAlfa;
6. linea.lineStyle(grosor, color, alfa);
7. linea.moveTo(glider._x, glider._y);
8. }

Por ultimo crearemos una función que genere un onEnterFrame que dibuje una línea cada vez que el MovieClip se mueva sobre la guía:

1. public function start():Void
2. {
3. glider.onEnterFrame = Delegate.create(this, onEnterFrame);
4. }
5. //---------------------------------
6. private function onEnterFrame():Void
7. {
8. act = {x:glider._x, y:glider._y};
9. linea.lineTo(act.x, act.y);
10. if (prev && act.x == prev.x && act.y == prev.y)
11. {
12. delete glider.onEnterFrame;
13. } else
14. {
15. prev = act;
16. }
17. }

Con lo que la clase completa quedaría asi:

1. import mx.utils.Delegate;
2. //---------------------------------
3. class redibujaGuia
4. {
5. private var grosor:Number;
6. private var color:Number;
7. private var alfa:Number;
8. private var ruta:MovieClip;
9. private var glider:MovieClip;
10. private var linea:MovieClip;
11. private var act:Object;
12. private var prev:Object;
13. //---------------------------------
14. public function redibujaGuia(qRuta:MovieClip, qGlider:MovieClip)
15. {
16. ruta = qRuta;
17. glider = qGlider;
18. //glider._visible = false;
19. var num:Number = ruta.getNextHighestDepth();
20. linea = ruta.createEmptyMovieClip("line"+num, num);
21. linea.lineStyle(1, 0x000000, 100);
22. }
23. //---------------------------------
24. public function lineStyle(qGrosor:Number, qColor:Number, qAlfa:Number):Void
25. {
26. grosor = qGrosor;
27. color = qColor;
28. alfa = qAlfa;
29. linea.lineStyle(grosor, color, alfa);
30. linea.moveTo(glider._x, glider._y);
31. }
32. //---------------------------------
33. public function start():Void
34. {
35. glider.onEnterFrame = Delegate.create(this, onEnterFrame);
36. }
37. //---------------------------------
38. private function onEnterFrame():Void
39. {
40. act = {x:glider._x, y:glider._y};
41. linea.lineTo(act.x, act.y);
42. if (prev && act.x == prev.x && act.y == prev.y)
43. {
44. delete glider.onEnterFrame;
45. } else
46. {
47. prev = act;
48. }
49. }
50. //---------------------------------
51. }

Para utilizarla (a parte del proceso manula de dibujar la guía y colocar el MovieClip) utilizaremos este código en el fotograma donde empieze la interpolación:

1. import redibujaGuia;
2. var linea1:redibujaGuia = new redibujaGuia(this, glider1);
3. linea1.lineStyle(2, 0x000000, 100);
4. linea1.start();

Al final el resultado es este