asd

26

Ago

Cerrar Banner en flash sobre contenido html

Publicado por: LeoBaraldi

Muchas veces podemos observar en ciertas páginas web que tienen banner que flotan sobre sus contenidos y los mismo son en Flash, a estos también se les suma la posibilidad de cerrarlo y de esta manera poder volver a ver el contenido del sitio que el banner tapaba. Estos banner son muy prácticos si queremos destacar alguna promoción o producto importante ya que a tapar parte del contenido del sitio el usuario se ve obligado a verlo o a lo sumo chiclear para cerrarlo. La otra ventaja que tiene es que no es un popup por lo tanto los navegadores no pueden bloquearlo así que doblemente nos aseguramos que lo verán.

Para realizar dichos banner simplemente vamos a necesitar una "div" en nuestro html, un poquito de JavaScript, CSS y nuestra película en Flash.

Ante que todo vamos a preparar nuestro banner en flash, para ello vamos a crear una película cualquiera del tamaño que sea necesario y con las animaciones que sean también necesarias. A esta película le vamos a colocar un botón "Cerrar" que será el encargado de cerrar nuestro banner.

Como siempre en nuestra línea de tiempo principal y primer frame vamos a colocar el siguiente código de AS:

Clic para ver Texto Plano
Actionscript:
  1. //Importamos la clase que nos permitirá
  2. //llamar el java de nuestro html
  3. import flash.external.*;
  4. //Creamos la acción de nuestro botón cerrar
  5. boton_btn.onRelease = function() {
  6. //para ejecutar el java usamos el metodo "call"
  7. //que esta compuesto por el nombre de la función "OcultarDiv" y el parametro "midiv"
  8. //en este caso como parametro, el nombre de id de la div a ocultar
  9. ExternalInterface.call("OcultarDiv","midiv");
  10. };

Como ven ya tenemos nuestro flash listo y esperando encontrar en nuestro html una div y una función JavaScript, ahora el siguiente paso es abrir nuestro html con algún editor como DW y vamos a colocar entre las etiquetas head el script que sera el encargado de ocultar la div que contiene el banner en flash.

Clic para ver Texto Plano
JAVA:
  1. <script type="text/javascript">
  2. // definiciones basicas
  3. OCULTO="none";
  4. VISIBLE="block";
  5. function mostrar(blo) {
  6. document.getElementById(blo).style.display=VISIBLE;
  7. }
  8. function ocultar(blo) {
  9. document.getElementById(blo).style.display=OCULTO;
  10. }
  11. </script>
  12. <script>
  13. function OcultarDiv(name) {
  14. ocultar(name)
  15. }
  16. </script>

El paso final seria poner una div (CONTENEDORA) entre las etiquetas del swf de nuestro banner. Por las dudas les dejo un ejemplo como seria en los archivos a descargar.

IMPORTANTE: Lo más importante para que este ejemplo funcione es que no se olvide de colocarle un nombre de id a la div en este caso particular le he llamado "midiv". Otra cosa importante es que prueben donde es lo más aconsejable que coloquen la div, en este caso la pusimos arriba sobre todas las restantes etiquetas por la razón que queremos que flote sobre el contenido de nuestro html. Hasta aquí van a ver que ya funciona a la perfección pero surge un problema, el banner no queda sobre los contenidos html!!! Bueno no desespere, ahora nos hacemos de la ayuda de algo de CSS para solucionar dicho problema.

Clic para ver Texto Plano
CSS:
  1. #midiv{
  2. width:300px;//ancho del swf
  3. border:#CCCCCC solid 2px;//un borde si queremos
  4. z-index:10000;//orden de apilamiento
  5. position:absolute;//posicion con respecto al body, con las propiedades top y left pueden desplazar el banner si lo desean
  6. }

Ok felicitaciones ya tenemos nuestro banner con botón ocultar dentro de una div flotando sobre el contenido ante cualquier duda descarguen los archivos de ejemplo y podrán ver cómo funcionan la unión de flash, javascript y css!!

ver ejemplodescargar archivos
categorias: ActionScript 2 , HTML - XHTM Coment.: 24

4

Ago

Efecto saturacion de luz usando ColorTransform

Publicado por: LeoBaraldi

Hola a todos, ante que nada 2 cositas importantes: Primero disculpas por no estar colocando contenidos mas periódicamente ya que estoy gracias a Dios con mucho trabajo. Segundo este ejemplo esta hecho con flash 9 pero en action scrip 2.0 así que para abrir el archivo fla deben tener flash 9 o sino copien el código y peguelon en su proyecto en flash 8.

Trabajando en un proyecto para un cliente uno de los requerimientos del mismo hera poder crear unas películas dinámicamente pero cada película con diferente color. Para ello se me ocurrió usar la clase Color, pero O!!! sorpresa me entero que ya es una clase defazada para flash 8!!!! "que desactualizado estoy :( " . Defazada significa que fue reemplazada por otra clase nueva, pero esto no quita en la mayoría de los casos que nuestro AS 2.0 la pueda interpretar!. Así que mirando la nueva clase que se llama ColorTransform me encuentro que con la misma podemos manipular el offset de cada uno de los colores RGB. A consecuencia de esto me trajo a la memoria un prototype viejo en AS 1.0 que daba el efecto de quemar una imagen o fotografía, consiguiendo de este modo un efecto muy lindo a la hora de mostrar una foto.

Así que manos a la obra revivi dicho efecto renombrandolo como "Luz" usando esta nueva clase de AS 2.0.
Código mas excusas pur que :)

Clic para ver Texto Plano
Actionscript:
  1. //definimos que es un proto y lo asociamos con los elementos que sean películas
  2. //le pasamos 2 parametros, dirección y velocidad del efecto
  3. MovieClip.prototype.luz = function(direccion:String, Velocidad:Number) {
  4. //La dirección es realidad sera afectada por los valores -255 a 255 pasando por 0 que es la foto en su estado normal
  5. var dir:Number = 0;
  6. //aquí recuperamos la velocidad
  7. var velocidad:Number = Velocidad;
  8. //un contador para detener posteriormente los procesos
  9. var contador:Number = 0;
  10. //evaluamos la dirección y sobreescribimos las variables con los únicos 2 valores que necesitamos
  11. if (direccion == "in") {
  12. dir = 255;
  13. contador = 0;
  14. } else {
  15. -255;
  16. contador = -255;
  17. }
  18. //Importamos las clases necesarias pa que funke!
  19. //
  20. import flash.geom.Transform;
  21. import flash.geom.ColorTransform;
  22. //creamos una función que llamaremos periódicamente para aplicar el efecto, como parametro pasamos el
  23. //nombre de instancia de la peli afectada
  24. function saturar(peli:MovieClip) {
  25. //creamos un nuevo objeto transform, y lo asociamos al mc (peli)
  26. var trans:Transform = new Transform(peli);
  27. //pasamos los valores que se deben aplicar a nuestra peli
  28. var luzColorTransform:ColorTransform = new ColorTransform(1, 1, 1, 1, dir, dir, dir, dir);
  29. //y los hacemos afectiva dicha coloración
  30. trans.colorTransform = luzColorTransform;
  31. //acá evaluamos pa que lado vamos
  32. if (direccion == "in") {
  33. dir--;
  34. } else {
  35. dir++;
  36. }
  37. if (dir == contador) {
  38. //si ya completamos el proceso detenemos la recurrencia a nuestra función
  39. clearInterval(intervalID);
  40. }
  41. }
  42. //
  43. //creamos una llamada periódica a una función pasando (nombre de la función, velocidad en ms, y la instancia del mc)
  44. var intervalID:Number = setInterval(saturar, velocidad, this);
  45. };

Como verán es muy simple, lo único que deben hacer es copiar este código y pegaro en el primer frame de su root. Como usa un setinterval no es necesario para la velocidad incrementar el frame rate.
Hasta aquí muy lindo!!! Pero como hago para aplicarlo a mis peli???????

Clic para ver Texto Plano
Actionscript:
  1. //foto_mc[nombre de instancia].luz[nombre del proto]("in"[dirección], 1[velocidad])
  2. foto_mc.luz("in",1);

Para que sea el efecto tipo out o de salida en el parametro "in" coloca "out" o simplemente nada "", la velocidad es un numero cualquiera, así que prueba pasarle varios para ver cual es el mas adecuado para vos.

Clic para ver Texto Plano
Actionscript:
  1. //foto_mc[nombre de instancia].luz[nombre del proto]("in"[dirección], 1[velocidad])
  2. foto_mc.luz("",1);

Puedes llamar a este proto la veces que quieras y cuando quieras con solo poner nombreInstancia.luz("in",1)

ver ejemplodescargar archivos
categorias: Prototipos Coment.: 2

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi