Mostrando entradas con la etiqueta flash Cs5. Mostrar todas las entradas
Mostrando entradas con la etiqueta flash Cs5. Mostrar todas las entradas
miércoles, 14 de septiembre de 2011

PostHeaderIcon Todo FLASH con AS3.0


Este es un sencillo ejemplo de como utilizar un MovieClip como si fuese un botón. Hay muchos casos en los que nos interesa hacer esto, como por ejemplo para tener botones animados, que se mantengan encendidos una vez se ha clicado sobre ellos, etc...
Como ya sabremos... cualquier MovieClip al que le coloquemos un evento onRelease actua automaticamente como botón.
clip.onRelease = function()
{
trace("Soy un botón");
};

Ahora si editamos el MovieClip, le colocamos en la línea de tiempo los markers "_up", "_over", "_down", y un stop() en el primer fotograma.


Automáticamente el MovieClip cambiará de estado al pasar el cursor sobre él o presionarlo, sin necesidad de escribir ningún código por parte nuestra.
Para indicar la zona activa del botón añadiremos una nueva capa al MovieClip, y crearemos otro MovieClip que ocupe la zona que queramos para el botón.


A este segundoMovieClip lo llamaremos "hitArea".
En el primer fotograma del primer MovieClip colocaremos el siguiente código:
hitArea_mc._visible = false;
this.hitArea = hitArea_mc;

Llegados a este punto tendríamos hecho con un MovieClip lo mismo que tendríamos con un clip de Botón.
Lo interesante de haberlo hecho de esta manera es que ahora podemos añadirle a este botón otros estados, como por ejemplo un estado activo (para cuando hemos hecho click sobre él y queremos que quede iluminado) o un estado desactivado (por si queremos que en algún momento ese botón quede apagado).
Para eso solo tendremos que añadir unos nuevos markers al MovieClip indicandole el nombre que queramos, por ejemplo "_active" y "_disable".


Ahora debemos añadirle estos comportamientos a la clase MovieClip:
MovieClip.prototype.select = function()
{
   this.enabled = false;
   this.gotoAndStop("_active");
};

Este nuevo comportamiento de la clase MovieClip hará que al ejecutarse mande el botón al fotograma "_active". Si colocasemos este código al botón:
boton1.onRelease = function()
{
trace("Soy un botón");
this.select();
};
al clickar sobre él se ejecutarán sus acciones y quedará seleccionado.
Añadiremos otro comportamiento para cuando queramos que deje de estar seleccionado y para cuando queramos que este inhabilitado.
MovieClip.prototype.deselect = function()
{
   this.enabled = true;
   this.gotoAndStop("_up");
};
MovieClip.prototype.disable = function()
{
   this.enabled = false;
   this.gotoAndStop("_disable");
};

Ahora todos los MovieClips que utilicemos como botones tendrán estos comportamientos:

clip_btn_1.select();
clip_btn_2.deselect();
clip_btn_3.deselect();
clip_btn_4.disable();
clip_btn_5.disable();
martes, 13 de septiembre de 2011

PostHeaderIcon Insertar Flash y validar según los estándares W3C


Para todos los desarrolladores que nos enfrentamos ante el reto de proyectos que poseen flash insertado, queríamos dedicar este post con el que poder solventar la tarea de validación de la web, siempre y cuando contenga animaciones en flash, y es que utilizar embed está bien, a no ser que quieras quedar bien a los ojos del W3C.

Tras dedicarnos a probar más de uno y de dos códigos que cargaran las animaciones y pasasen la validación, y este es el problema, los que validaban no reproducian Flash y viceversa.
Al final, pude dar con la solución, un pequeño código que reproducirá nuestras animaciones sin ningún tipo de problema y que además, nos permitirá pasar la validación del W3C.

Os pego el código a continuación, espero que os sirva y os ahorre tiempo de "prueba y error:
HTML:
1.  <div><object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=”254 height=”320></div>
2.  <param name=”movie” value=”/nombre_de_mi_flash.swf” />
3.  <!--[if IE]>
4.  <object type=”application/x-shockwave-flash” data=”/nombre_de_mi_flash.swf” width=”254 height=”320>
5.  <![endif]-->
6.   
7.  <p>Contenido alternativo</p>
8.  <!--[if IE]>
9.  </object>
10. <![endif]-->
11. </object>
12. </div>

Blogs Interesantes

Secti Tecnología, S.L. Con la tecnología de Blogger.