Cómo hacer una cortinilla de puntos con Flash
6 seguidores
Buenas tardes:
Mi problema es que tengo que realizar una animación, donde la imagen aparece mediante por cortinilla de puntos en flash.
He intetado hacerlo:
1- He creado una interpolacion de forma con un punto, para cambiar su tamaño. Y así darle progresion.
2- Luego, he añadido por medio de fotograma por fotograma los puntos hasta completar la imagen que debe de aparecer progresivamente.
3- Le he dado a mascara de capa, para que solo aparecezca esa animacion de cortinilla por puntos.
Y NO ME SALE!!!....¿Podría alguién ayudarme con esta duda?
Dejo el ejemplo para que lo veais:
http://www.fiatgrandepunto.es/catalogo_online/FLA/index.html
knamoreno
MUCHAS GRACIAS ERES EL MEJOR!!!!!!
tpmmds
Hola:
Si has respetado la estructura de carpetas del archivo rar, o sea, si no has cambiado nada de sitio, debe de haberse publicado el swf en la carpeta bin.
El efecto está hecho en AS3, es código. La clase que genera el efecto está en src\jel\com\effects y se llama TransicionCircular.as
Si conoces a alguien con conocimientos en ActionScript 3 (AS3), mira a ver si puede echarle un vistazo. El ejemplo no es nada del otro mundo: me creo una nube de circulos, con los que cubro toda la imagen, y les digo que actúen como máscara. Lo mismo que harías manualmente en el escenario y en el timeline, pero con AS3
Un saludo.
egunsenti
Buenas! muy bueno también el otro link tpmmds!
Por cierto, ya me he instalado el cs3, pero tengo un problemilla... al publicar la película no me aparece el swf.
Luego también tengo otro problema... que no encuentro donde puedo hacer para añadirle efectos. Bueno, lo que quiero que haga es que pase otra cortinilla de puntos y que salga otra imagen de fondo, así con 3 pases de imágenes, ya que es para un banner publicitario.
Sé que me explico fatal... pero si aunque sea me decis como sacar el swf os lo agradezco!!! ah! y tengo el flash en inglés jeje para una paketilla como yo pues como que peor! jajaja
Muchísisisisisimas gracias y feliz lunes! :)
tpmmds
Hola:
Aquí tenéis la misma transición ya integrada en una galería de imágenes:
http://blog.coconnut.com/?p=130
Un saludo.
egunsenti
muchísimas gracias!!!!
eres un solete! así da gusto!
no conocía esto, pero está genial, sobre todo con gente tan atenta como tú! eso sí, tu nick un poco chungo tpmmds!!!! ;)
Que paseis buen viernes y buen finde!!!!!!
PD: yo seguiré intentando lo de los puntitos... ya toy buscando la versión cs3 de flash :)
danielsandesign
A ver Josh si te pasa por acá y le pones la chapa de "domestiko enrollado del mes" a tpmmds!
Así da gusto preguntar-
tpmmds
Hola:
Si te das una vuelta por el foro o recuperas post antiguos seguro que encuentras bastantes. Por ejemplo, este, muy reciente:
https://www.domestika.org/foros/viewtopic.php?t=68858
con varios enlaces a páginas de recursos, tutoriales, et.
Los que suelen estar interesantes también... suelen estar en inglés. Va junto, como la crema y el café :-)
Un saludo.
egunsenti
Pues muchas gracias!
Pero vaya faena, sólo tengo el flash 8, a ver si vienen mis compañeros, que trabajo en una empresa de informática, y me dicen que tienen por ahí la versión nueva!
Por cierto, no sabrás de otra página tipo cristalab, que vengan así archivos de flash para descargarse, y si es este ejemplo, mucho mejor!!! es que llevo tiempo queriendolo hacer, pero manualmente queda super cutre, con temas de máscaras y tal...
Te lo agradezco en el almaaaa!!!! ;)
tpmmds
Hola:
Exactamente, ese es el problema, tienes Flash 8 y está hecho con Flash CS3 y ActionScript3
Por cierto, si te actualizas a CS3, necesitas TODO lo que hay en el zip :-) .
Un saludo.
P.D.:Lo que pesa es la imagen que está incrustada en el swf, y tampoco me esforcé mucho en optimizarla.
egunsenti
Hola!
Acabo de ver esto y es justo lo que estaba buscando! soy nueva, me he registrado para ver si me podíais ayudar.
Me he descargado el archivo .zip y el flash me dice "formato de archivo inexperado" y no me deja abrirlo. Tengo flash 8.
Sólo me he bajado esa carpeta, porque la verdad es que las otras son de código.
Yo también estaba buscando esto, pero para hacer un banner, lo que pasa es que tal vez pese mucho, no?
Muchas gracias!
PD: tpmmds yo también estoy escribiendo desde españa :)
tpmmds
Sólo espero que si lo utilizáis en alguna página, pongáis un enlace para verlo ;-) .
loopecio
Simplemente queria felicitarte por este post, tan "colaborativo" y por tu blog.
Gracias tpmmds.
tpmmds
Pues nada, a ver si llegamos a 11 y montamos un equipillo de fútbol :-)
chuwi
eres un mega crack, es de pelotas tu blog! direto a las rss.
tpmmds
Hola:
Listo. Entra de nuevo en el código del ejemplo (btn derecho - View source) y descarga el archivo EfectoTransicionCircular.zip que está en el enlace "Download source". Lleva el archivo Fla y las clases Tweener (en la carpeta caurina). La clase que "realmente" hace la transición es TransicionCircular.as que está en jel/com/effects
Un saludo.
tpmmds
Hola:
Para que no tengas excesivos problemas no te bajes ahora el código. Esta noche lo veo en casa y lo adapto para Flash. Subiré el Fla y las clases de Tweener, así no tienes que cambiar nada.
Un saludo.
P.D.:Cuando digo esta noche, hora de España, que siempre se me olvida que estoy en una www :-). Aquí son ahora las 11:40, pues dentro de unas 10 horas.
knamoreno
Buenos dias:
Muchas gracias, nunca habia escuchado nada de "Tweneer". Pero tengo otra pregunta:
1- Lo instalas dentro, y luego eso funciona como transición predeterminada para flash.
2-Si no es así, como se utiliza, para hacer la cortinilla de puntos.
Muchas gracias
tpmmds
Hola:
Puede hacerse "manualmente" desde Flash, pero estas s on las típicas cosas que es preferible no arriesgarse a hacerlas así. Porque , qué pasa si cambia el tamaño de la imagen, o el cliente quiere una transición más rápida, o los círculos mas grandes/pequeños... a empezar de nuevo :-) .
Aquí tienes un ejemplo con AS3 :
http://blog.coconnut.com/source/jel/EfectoTransicionCircular/
Para ver el código, cuando estés en él pulsa con el botón derecho y en el menú que aparece elige "View source".
El método que hace el efecto te lo pongo aquí para localizarlo mejor:
<code>
Tweener.updateTime();
var ti:Number = 0.1;
var tj:Number = 0.15;
while (contenedor_spt.numChildren>0) {
contenedor_spt.removeChildAt(0);
}
contenedor_spt.addChild(bitmap);
mascara_spt.x = 0.5*radio;
mascara_spt.y = 0.5*radio;
var nx:uint = Math.ceil(bitmap.width/radio)+1;
var ny:uint = Math.ceil(bitmap.height/radio)+1;
var circulo:Circulo;
for (var i:uint=0; i<nx; i++) {
for (var j:uint=0; j<ny; j++) {
circulo = new Circulo();
circulo.x = radio*i;
circulo.y = radio*j;
circulo.r = 0;
mascara_spt.addChild(circulo);
Tweener.addTween(circulo, {r: Math.ceil(radio/Math.sqrt(2)), delay:ti*i+tj*j, time:1.0, transition:"easeOutQuad"});
}
}
import flash.display.Shape;
class Circulo extends Shape {
private var _r:Number;
public function get r():Number {
return _r;
}
public function set r(val:Number):void {
_r = val;
graphics.clear();
graphics.beginFill(0xffffff, 1.0);
graphics.drawCircle(0,0, _r);
}
}
</code>
Si utilizas Flash, create una funcion con el anterior código y pasale el Bitmap con el que quieres hacer la transición.
Un saludo.
P.D.1: Lo he hecho en plan rápido y sólo aparece una imagen. Para volver a ver el efecto actualiza el navegador. Espero que te sirva de guía.
P.D.2: Se me olvidaba, he utilizado Tweener para animar, si no tienes las clases, puedes bajarlas de aquí
http://code.google.com/p/tweener/