Comunidad de diseño web y desarrollo en internet online

Dibujar linea finita

Citar            
MensajeEscrito el 13 Feb 2008 03:34 pm
hola, estoy intentando hacer el efecto de dibujar la linea verde de esta web:

http://five3d.mathieu-badimon.com/

tengo hecho lo de dibujarla y que cambie de grosor pero no se como hacer para que se vaya borrando, alguno se le ocurre como se podria hacer?

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox
Citar            
MensajeEscrito el 13 Feb 2008 10:27 pm
creo que tienes que descargar el five3d... Nose, solo supongo :P

Por gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

firefox
Citar            
MensajeEscrito el 13 Feb 2008 11:44 pm
No es necesario el five3D para ese efecto.
Simple "memoria del mouse" I :
Un array que "graba" las n últimas posiciones del mouse.
A cada movimimiento un push-pull pongo el movimiento nuevo y borro el del final.
en el caso del ejemplo usa un array de clips que los coloca según el otro array de posiciones y duplicación de clip que se remueven al cargarse en el mismo nivel.
El escalado de esos clips se controla con el valor de su coordenada _y para efecto de profundidad.
El paso y cambio de color es un simple hitTest con el clip en forma de hoja para desplazar posición y cambiar color.

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 14 Feb 2008 10:03 am
yo creo que no es una duplicacion de clip pq si lo mueves rapido no se nota la forma del clip, traza rectas. Lo he intentado con duplicado de clip y se nota, lo mas parecido que he logrado hacer es esto:

http://clipdepelicula.com/linea/

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox
Citar            
MensajeEscrito el 15 Feb 2008 08:07 am
alguna sugerencia?

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox
Citar            
MensajeEscrito el 15 Feb 2008 09:11 am
Es exactamente lo que digo.
Usa lineTo. en lugar de duplicatemovie:

Crea un array de elementos(puntos) que será la longitud de la linea.
Crea una funcion que:

-borre el dibujo clear() y
-dibuje los n primeros puntos del array veces (lineTo) según el estilo los puntos del array.
-vaya eliminando el primer elemento [0] en cada llamada array.shift().
- la colocamos en un setInterval().

Otra funcion onMouseMove() que al mover el mouse vaya "grabando" la posicion en el array:
array.push(). y updateAfterEvent().

Simplemente eso.
el movie clip o beginFill se usa si es una "brocha" compleja y no una simple linea o punto.


Nota: si quieres esa "forma" aplanada u otra cambia la rutina de dibujo:
el lugar de un simple lineTo pasa mover y dibujar moveTo +lineTo + lineTo etc que si queremos también podemos determinar el "ángulo" de variación del movimiento del mouse y aplicarlo ahí.


Pd. creo que hubiera tardado menos en escribir el código que la explicación.:crap:

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox
Citar            
MensajeEscrito el 15 Feb 2008 09:30 am
jeje, gracias por tu respuesta de nuevo. este fin de semana me pongo. un saludo!

Por clipdepelicula

237 de clabLevel



 

Valencia (España)

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.