Foros del Web » Creando para Internet » Flash y Actionscript »

Como se hace esto?

Estas en el tema de Como se hace esto? en el foro de Flash y Actionscript en Foros del Web. Se me ha encargado hacer algo como lo que aparece en esta pagina: http://www.nokia.es/telefonos/modelo...x_idgama73.jsp esos efectos de las plantas apareciendo y cosas asi. Pero lo ...
  #1 (permalink)  
Antiguo 15/07/2006, 12:00
Avatar de Pablografia  
Fecha de Ingreso: abril-2004
Ubicación: Valencia, pero soy argentino
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Como se hace esto?

Se me ha encargado hacer algo como lo que aparece en esta pagina: http://www.nokia.es/telefonos/modelo...x_idgama73.jsp esos efectos de las plantas apareciendo y cosas asi. Pero lo miro y lo miro y no llego a captar como esta hecho, en con Shape? es una imagen con mascaras que hacen que la imagen vaya apareciendo? o se van formando las figuras fotograma a fotograma (cosa que no creo). Por favor, alguien me puede decir aproximadamente con que herramientas se puede lograr algo asi?
__________________
MAXIMUS EL HISPANO
  #2 (permalink)  
Antiguo 15/07/2006, 13:15
Avatar de theojo  
Fecha de Ingreso: junio-2006
Mensajes: 52
Antigüedad: 11 años, 6 meses
Puntos: 0
la verdad a mi tampoco se me ocurre pero es una combiancion de efectos lo mas seguro...muy buena presentacion....
__________________
Trance energY
  #3 (permalink)  
Antiguo 15/07/2006, 21:11
 
Fecha de Ingreso: abril-2005
Mensajes: 372
Antigüedad: 12 años, 7 meses
Puntos: 0
Pablografia:
En mi humilde opinion esta hecho en partes frame a frame (como el loader de la planta) y en otras con mascaras. Al menos yo las veces que tuve que hacer algo similar lo resolvi sin mayores problemas (pero si con tiempo) haciendolo asi.
Suerte!!
  #4 (permalink)  
Antiguo 15/07/2006, 23:29
Avatar de RubenLo  
Fecha de Ingreso: julio-2006
Ubicación: Salamanca , España
Mensajes: 54
Antigüedad: 11 años, 5 meses
Puntos: 0
Prueba esto

Hay varias soluciones para crear este efecto, te cuento como lo hacerlo de una manera facil sin action scrip y sin complicarnos mucho la vida.

Puedes crear la ilustracion que quieras mostrar en photoshop o directamente en flash, depende de lo que quieras mostrar o de lo bien que te manejes con los graficos en flash (Los que manejan bien las herramientas de dibujo de flash pueden crear imagenes iperrealistas casi tan perfectas como las que hacen los ilustradores con photoshop, esa imagen que veo en tu ejemplo aun me deja mis dudas, en mi opinion hay 2 imagenes una la del fondo total que contiene una especie de papel antiguo en algunos puntos y por otro lado la de los vectores que componen las hojas ramas y todos esos detalles que estan muy bien por cierto)

Lo que tienes que hacer es cuando tengas tu imagen o tus imagenes importarlas a flash o si las creastes ya en flash arrastralas al escenario en capas de peliculas separadas, una encima de otra segun el efecto y las imagens que quieras mostrar, luego sobre cada imagen crea otra capa y transformala en mascara, ahora en vez de crear un simple cuadrado o un circulo, frame por frame vete dibujando sobre la mascara con la herramienta pincel, tambien puedes probar a variar la posicion de las imagenes (en tu ejemplo tambien lo usa) a cada frame que junto con el efecto de las mascaras podras crear efectos como estos.

El verdadero trabajo aqui es el tiempo que vas a dedicar en dibujar las formas de las mascaras para crear el efecto por ejemplo del preloader de la planta, en la linea de tiempo frame a frame la mascara va creciendo hacia arriba y a los lados y asi deja ir viendo poco a poco la imagen.

Resumen:

1. Crear imagenes.
2. Colocarlas en el escenario en capas separadas.
3. Crear capas de mascara para cada una de las imagenes.
4. Dibujar frame a frame la animacion de las mascaras (Con esto no me refiero a que cada frame tengas que repetir la animacion, cuando creees por ejemplo el frame 1 pinchas sobre el 2 en la linea de tiempo y en el menu contextual selecionas añadir key frame, el nuevo frame contendra lo que pintastes hasta el momento)
5. Reproducir animacion y ..... (Seguramente que al principio te salga mal) repetir si fuera necesario.

No se si me explique bien si quieres y no te a quedado claro te puedo hacer un pequeño ejemplo para ver si te saca de dudas.

Un saludo
__________________
:-) www.topjuegos.es
  #5 (permalink)  
Antiguo 16/07/2006, 01:11
 
Fecha de Ingreso: julio-2006
Mensajes: 32
Antigüedad: 11 años, 5 meses
Puntos: 0
ese ese efecto tipo dock q tiene los cel?.. como lo puedo hacer??
PD: me refiero al dock de osx..

saludos
  #6 (permalink)  
Antiguo 16/07/2006, 05:01
 
Fecha de Ingreso: julio-2006
Mensajes: 23
Antigüedad: 11 años, 5 meses
Puntos: 0
Re:

Muchos de los efectos que se utilizan en flash son verdaderas chapuzas a nivel de diseño, pero al ojo humano quedan muy atractivos.

El Dock de Osx está programado en ActionScript y no parece ser muy complicado, parece utilizar funciones on(rollOver) y on(rollOut)
  #7 (permalink)  
Antiguo 16/07/2006, 19:40
 
Fecha de Ingreso: abril-2006
Mensajes: 66
Antigüedad: 11 años, 8 meses
Puntos: 0
Mira, lo que dice rubenLO parece bastante acertado, pero yo no usaria mascara. Usando mascara va pesar mas todabia la animacion! directamente borraria el mismo dibujo en vector. Es decir: Borras un pedazo, nuevo keyframe, borras otro pedazo, nuevo keyframe y asi... cuadno terminas seleccionas los frames y le pones "reverse frames"!!! Lo que antes se desarmaba ahora se arma! :D

Para los "movimientos" con respecto al mouse es un AS bastante simple donde se mueven varios MC (que contienen las figuras) segun las pos del mouse usando diferentes pixeles de movimiento de frame a frame... Para la rotacion del botoncito: Un poco de pitagoras no hace mal a nadie, refrescando coseno y seno calculas la rotacion de un MC para que apounte al mouse con teorema de pitagoras.

Para desefocar las fotos de los teléfonos: Ahi si que se complica. Cuando tube que blurear de esa forma hice los siguiente: Me arme un par de PNGS semi transparentes de los telefonos y los fui superponiendo para lograr un efecto liviano del blur. Asi me ahorre de tener 20 imagenes en JPG con todas las instancias del blureo y safaba bastante bien... no es perfecto pero bueno, algo es algo. Tenia 4 PNGS semitransparentes, la foto sin BLUR y la foto con BLUR. De ahi ya tenia 6 instancias de la animacion, solo me quedaba generar las intermedias jugando con el elpha de mis pngs y supeponiendolos. Y queda bastante bien... y eso que el blureo era lento y a 20 FPS!
AL final: El SWF va a pesar MUCHO. Entre PNGs y la cantidad de vectores que tenes puede irse todo al cuerno. Recomendacion: Usa lo menos posible, cuanto mas SHAPE puedas usar mucho mejor, el borrar cuadro por cuadro (ya se mascara o no) lo hace mucho mas pesado que un mismo tween! Trata de armarte una especia de "galeria de sprites" y combinarlos usando shape para lograr el efecto. Puede ser ULTRA engorroso por la cantidad infinita de layers que vas a tener, pero te juro que va a pesar muchisimo menos y el resultado va a ser un lujo total.
Espero ser de ayuda.... saludos!!!!
  #8 (permalink)  
Antiguo 19/07/2006, 05:03
Avatar de Pablografia  
Fecha de Ingreso: abril-2004
Ubicación: Valencia, pero soy argentino
Mensajes: 68
Antigüedad: 13 años, 8 meses
Puntos: 0
Gracias Gente, Me Sivieron Un Monton Las Respuestas. Ya Lo Estoy Haciendo Y Aparentemente Me Esta Qeudando Bien. Gracias.!!!
__________________
MAXIMUS EL HISPANO
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:17.