Comunidad de diseño web y desarrollo en internet online

Efecto tinta o ramas de un arbol

Citar            
MensajeEscrito el 14 Nov 2006 06:31 am
Buenas, sabeis de algun script [o como programar] el efecto de tinta corriendose o que parezca un arbol al que le van creciendo las ramas?

Ahora no me acuerdo de ninguna web donde lo haya visto, pero supongo que ya sabreis a que me refiero.

La cosa es que a gusto lo programaria yo mismo, pero ni se em ocurre por donde empezar, y bueno, si ya esta hecho y lo hay de uso libre, pues eso que me ahorro.


He estado buscando algo por ahi, pero no aparece lo que quiero [quizas no lo sepa buscar bien].

Ale, un saludo.

Por Animatek

419 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador grafico web

opera
Citar            
MensajeEscrito el 14 Nov 2006 02:26 pm
No tengo tiempo de escribir el código, pero acá tenés la forma en la que yo haría el efecto (resalto yo, porque no puedo asegurar que sea la mejor manera):



Armás una clase nueva, arboles.as o algo así. Lo que la clase debería tener es la posibilidad de setear 4 variables con setters. Las 4 variables serían: la posición inicial en x y en y, el número de nodos (voy a explicar esto más adelante) y la altura máxima que alcanza la rama (este sería negativo para la tinta).

Dentro de la clase, armás una función que dibuja las ramas (tendrías que ejecutarla 1 vez por cada rama que le quieras hacer al árbol). Para esto, la función arma una serie de números aleatorios con posiciones en x y y. La cantidad de pares de números aleatorios (pares porque a cada posición en x le corresponde una posición en y) debería ser igual al número de nodos.

Entonces, dentro de esa función, usás un onEnterFrame para que comience a dibujar las ramas. Primero, con un moveTo, moves el principio de las futuras líneas hacia el primer nodo, que sería la posición en x y y seteada en los setters del principio de la clase. Luego, lo que hacés es usar trigonometría para determinar distintos puntos entre 2 nodos consecutivos. No sé si me explico, armás pasos de 2 o 3 píxeles y ponés un lineTo que dibuje así:

Código :

lineTo (siguientePuntoX, siguientePuntoY);


Entoncés, termina la acción del fotograma, cuando vuelva a comenzar, esta acción se vuelve a ejecutar, pero el siguientePuntoX y siguientePuntoY cambió.

Entonces, eso va a dibujar lentamente, las ramas (también, reemplazando el onEnterFrame por un intervalo, tendrías un dominio mucho mayor de la "velocidad de crecimiento"). Por último, cuando cambies de nodo, si escribiste la función con esto en mente, no debería pasar nada, simplemente, la dirección de dibujo cambiaría.


Las últimas consideraciones serían estas:

1) La posición en y de los nodos consecutivos, no debería ser muy dispares, para dar un efecto realista.

2) Con un if determinás si la altura máxima es menor a cero, para saber si la función dibuja hacia abajo o hacia arriba.

3) Con lineStyle, podés ir cambiando gradualmente el grosor y color de las ramas, para volverlas más finas y claras a medida que se van dibujando.

4) Por último, cuando determinás la posición x de los nodos, pensá que la suma de estos valores, menos la posición inicial en x no puede ser mayor a la altura máxima.


Espero mi guía te sirva de algo ^^

Por HernanRivas

Claber

3416 de clabLevel

26 tutoriales

 

Argentina

msie
Citar            
MensajeEscrito el 14 Nov 2006 05:40 pm
Ole que buenisima esplicacion...

a ver si mañana me animo a intentarlo y si tengo exito ya os traere el resultado.


Gracias por marcarme el camino (y)

Por Animatek

419 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador grafico web

opera
Citar            
MensajeEscrito el 15 Nov 2006 05:33 am
interesante hernanR, deberias hacer un tutorial sobre esta explicacion que hicistes, pero un poquito mas a fondo (o mas explicada) por que igual yo no entendi algunos conceptos que dijistes a qui, bueno eso ya dependeria de ti.
saludos.

Por Emmanuel

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Nov 2006 09:59 am
Aqui tienes un tutorial:
http://www.washeebo.com/sargento/02_flsh/02_flsh.php?pag=2#dcs

Por oxk4r

56 de clabLevel



 

Orense·España

firefox

 

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