Slideshow AS3 Flash con Zoom mas desplazamiento
He programado una clase de AS3 que nos crea un slideshow flash. El pase de fotografÃas se presenta con un efecto de zoom y movimiento como el que podeis ver a continuación:
Al constructor de la clase se le pueden pasar una serie de parámetros que quedan detallados a continuación:
* * Parámetros del constructor(obligatorios):
* parametro 1: Ancho del banner para centrar el Movieclip de la Precarga y posicionar inicialmente las imágenes.
* parámetro 2: Alto del banner para centrar el Movieclip de la Precarga y posicionar inicialmente las imágenes.
*
* * Parámetros del constructor(opcionales):
* parámetro 3: Visualizar el MovieClip con la animación de la Precarga (Boolean).En false
* parámetro 4: Dirección url del archivo .xml.(imagenes.xml)
* parámetro 5: Número de fotos que se cargan antes de comenzar con el slideshow. Útil para no tener que esperar a que se carguen todas antes de inicializar la visualización.(2)
* parámetro 6: Tiempo que transcurre entre foto y foto;
* parámetro 7: Suavidad del efecto de movimiento de la foto;
* parámetro 8: Duración del efecto de transición de alpha;
Para utilizar la clase solo es necesario importar la clase y crear una instancia pasándole los parámetros obligatorios de ancho y alto ylos opcionales que se desee.
import com.malashpina.slideshow.SlideShow
var slide:SlideShow = new SlideShow(1000,420,false,”http://www.malashblog.com/wp-content/varios/slideshow/imagenes.xml”);
addChild (slide);
Las fotos las lee de un archivo xml que contiene las rutas y para los efectos utilizo la galerÃa TweenMax de greensock.
El banner visualiza las fotos en loop, empezando por la primera foto cuando termina.
A tener en cuenta:
Las fotos tienen que ser un poco más grandes que el banner o en su defecto el banner un poco más pequeño que las fotos.
Asà evitamos que en el desplazamiento con zoom las fotos se salgan del encuadre.
* Activación de la precarga:
Si queremos activar una animación para la precarga tan solo es necesario exportar el movieclip de dicha precarga con el siguiente nombre de clase:
com.malashpina.slideshow.Preloader
(la clase Preloader.as ya está creada y se encuentra en el mismo paquete que la clase SlideShow.as)
y posteriormente añadir el alto y el ancho del banner en los parámetros del constructor para que la precarga se centre e indicar “true” en el tercer parámetro.
Aquà os dejo el link para descargar la clase:
slideshow.as
Espero que os guste.
Un Saludo.
Malashpina Fresh Design
Diseño Web Marbella
Diseño Web Malaga
| Imprimir artÃculo | Este artÃculo fue publicado por Cesar el 31 Agosto 2010 a las 18:08 pm, y está archivado en Recursos AS3, Recursos Web. Sigue las respuestas a esta entrada a través de RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio. |
Aún no hay trackbacks.
FullFlash escala 100% y scroll. Fácil con SWFObject y SWFFit
hace 1 año - 9 comentarios
Muchos de nosotros hemos tenido que lidiar con el problema de conseguir embeber nuestro archivo .swf de forma que quede centrado, al 100% de escala y que al reducir el tamaño del explorador, bién manualmente o bién porque el dispositivo tenga una pantalla con una resolución menor que las dimensiones originales de nuestro archivo flash, Más >
Visualizar Flash en IPhone mediante SWFObject.js
hace 1 año - 3 comentarios
Todos sabemos de la guerra abierta entre MAc y Adobe y hasta que no se resuelva tenemos que buscar formas alternativas para poder construir webs con contenido gráfico dinámico que se pueda ver corréctamente en todos los dispositivos, incluidos el dichoso Iphone y otros productos similares de Mac.
Gracias a la librerÃa javascript SWFObject podemos conseguir Más >
Banner Flash y su utilidad en web estáticas html III
hace 1 año - No hay comentarios
Seguimos hablando de los banner Flash y su uso estratégico para promocionar determinados eventos o productos y para ello pasamos a mostrar algunos otros ejemplos. En este caso se trata de banner flash interactivos. Con este tipo de banners damos pié a que el usuario pueda interactuar con la web ampliando en gran medida la Más >
Banner Flash y su utilidad en web estáticas html II
hace 1 año - 2 comentarios
Continuamos hablando sobre las animaciones Flash y su uso en web estáticas , esta vez como complemento comercial para campañas de marketing o promoción de productos o eventos concretos (comunmente llamados banners publicitarios).
En nuestro caso el despliegue de medios gráficos suele ser incluso superior al utilizado en otros trabajos, ya que intentamos concentrar en un Más >
Banner Flash y su utilidad en web estáticas html I
hace 1 año - No hay comentarios
Hola a todos. Abrimos esta nueva sección en nuestro blog para tratar todo lo relacionado con el uso de tecnología Flash y su integración en sitios webs html estáticos.
Sin duda los distintos caminos de la programación web se podría decir que se han diversificado en dos grandes ramas (siendo genéricos). La de las webs estáticas, Más >
Apple vs Adobe… una guerra abierta
hace 1 año - No hay comentarios
Buenos dÃas, si bien se han escrito miles de artÃculos y post acerca de la lucha entre Apple y Adobe.
Para los que no estén familiarizados, os resumo la situación:
Por un lado estoy seguro de que todos conoceis Apple (Mac) que se ha extendido notablemente entre el público europeo principalmente por sus innovadores terminales móviles (i-phone), Más >
hace 1 año
Tremendo!!
hace 1 año
Gracias!
hace 1 año
Mola César
hace 1 año
necesito crear un slidshow para un portafolio, pero no se como empezar a programar, soy principiante en flash y pues me urge… no se si puedas ayudarme?
hace 1 año
Perdona por tardar tanto en contestar Luis. Hemos estado un poco ocupados con algunos proyectos. Si aún puedo ayudarte dime lo que necesitas. Puedes ponerte en contacto conmigo mediante esta dirección:
c@malashpina.es
hace 11 meses
esta buenisimo tu slideshow!!
una pregunta: trate de ponerle en una pagina flash pero no logro colocarlo en donde necesito y darle el tamaño requerido. Le doy los parametros 200,300 al constructor pero el slidshow sigue enorme (parece que solo toma en cuenta el tamaño de las imagenes)
GRacias por tu ayuda
hace 11 meses
Buenas Guillermo. El slideshow lo programé pensando en utilizarlo en una página html. En este caso el tamaño se fija desde la herramienta de autorÃa Flash fijando el tamaño del escenario. Al constructor se le pasan las dimensiones fijadas en el escenario para que pueda centrar bién las fotos. Para cargar este reproductor en una página hecha en flash, primero tienes que abrir el slideshow, cambiar las dimensiones del escenario y pasarle estas dimensiones al constructor. Una vez que obtengas la pelÃcula .swf solo tienes que cargar esta pelÃcula en tu documento flash de la forma siguiente:
var cargador:Loader = new Loader();
var peticion:URLRequest = new URLRequest(“slideshow.swf”)
cargador.contentLoaderInfo.addEventListener (Event.INIT, añadirSlide);
cargador.load(peticion);
function añadirSlide(e:Event):void
{
//Creando un objeto Movieclip cuando el objeto cargado es un .swf:
//var pelicula = e.target.content as MovieClip;
//Otra forma:
//var pelicula = (e.currentTarget as LoaderInfo).content as MovieClip;
//Creando un objeto loaderinfo y pasándole el target del evento como LoaderInfo.
var li:LoaderInfo = e.currentTarget as LoaderInfo;
//Posteriormente podemos hacer lo de siempre, asociar el contenido del LoaderInfo a una variable Movieclip mediante un casting y posicionar la pelÃcula o slide.
pelicula = li.content as MovieClip;
//addChild(pelicula);
}