Posts Tagged ‘ ejemplo ’

3
19
Nov

Hacer un texto curvado con Firewokrs y trazados

Bueno, este tip es realmente sencillo, es solo para descubrirles una sencilla función que quizás desconozcan, pues aunque uso bastante Fireworks, hasta no hace tanto que no me había dado cuenta de ella. Se trata de la función “Unir al trazado“. Esta función es solo para texto, y permite que un texto se vuelva curvo, siguiendo el perfil y la forma de un trazado previamente dibujado. Como es difícil explicarlo y mucho mas fácil mostrarlo, hagamos un ejemplo y se lo voy describiendo sobre la marcha:

Ejemplo de uso y sus características:

En este caso partimos de una imagen sencilla como es esta:

Imagen 1 del tip

Luego dibujamos un trazado usando la herramienta Pluma (P). No importa el grosor, el color o el estilo de trazado, solamente el recorrido que este describe. Un trazado podría ser esta curva, por ejemplo:

Imagen 2 del tip

A continuación insertamos el texto que destinaremos a que siga el trazado dibujado antes:

Imagen 3 del tip

Bien, sencillo hasta aquí. Ahora es cuando viene lo esencial:
Seleccionamos al mismo tiempo el trazado y el texto:

Imagen 4 del tip

Estando ambos seleccionados, nos dirigimos al menú “Texto” y hacemos clic en “Unir al trazado (Ctrl+Mayús+Y)”:

Imagen 5 del tip

Inmediatamente se hace la magia y el texto se pone donde estaba el trazado, siguiendo su forma. Del mismo modo, el trazado original desparece. Digamos que es como en flash, una guía, y como tal no se ve. Este proceso, hace que el texto se posicione encima del trazado y siga sus curvas y recorrido. La gracia de todo esto, es que el susodicho texto se mantiene como texto editable, con todas sus propiedades modificables sin problema alguno. Y esto mola.

Imagen 6 del tip

Procedamos a arreglar un poco la presentación, y así de paso les muestro algunas cosillas mas:
Observamos que ahora el texto se queda pequeño, puesto que está inclinado, ahora tiene más espacio. Lo hacemos mas grande cambiando el tamaño de la fuente en el panel Propiedades:

Imagen 7 del tip

Para no concluir el tip aquí, haremos unos retoques de más para que veáis algunas opciones más y como afectan al texto en cuestión:

Por ejemplo, copiamos el texto y lo pegamos un poco más abajo, de la siguiente forma:

Imagen 8 del tip

A continuación, teniendo seleccionado el segundo texto que acabamos de pegar, nos dirigimos al menú “Texto” y hacemos clic en la opción “Separar del trazado”:

Imagen 9 del tip

Una vez esto, lo que sucede es que volvemos a tener el trazado y el texto originales:

Imagen 10 del tip

Por ahora el texto no nos interesa, así que lo eliminamos. Vamos a centrarnos en el trazado: Lo retocamos un poco, le definimos un bonito estilo de linea y le damos un grosor apropiado mediante el panel propiedades:

Imagen 11 del tip

Ya tenemos una sencilla y clara imagen:

Imagen 12 del tip

De todas formas, veamos unas cuantas más opciones para poder estilizar el texto curvado de distintas formas. En el mismo menú de “Texto”, teniendo el texto curvado seleccionado, podemos variar su “Orientación” como sigue en las imágenes:
(La primera opción es la opción por defecto, es la mostrada en las imagen anterior)

Imagen 13 del tip
Imagen 14 del tip
Imagen 15 del tip

Bueno, hasta aquí el tip. Solamente déjenme enseñarles otro ejemplo, quizás algo más artístico y sofisticado. A la izquierda pueden observar el resultado, mientras que a la derecha pueden ver los trazados originales de la imagen:

Copa con letras de agua y trazados

No es nada complicado, solo hace falta echarle un poco de imaginación y tener buen gusto!
Espero les sea de ayuda en sus diseños/presentaciones! ;)

4
1
May

Física en Flash: Mov. Armónico Inframortiguado

Un movimiento oscilatorio simple, es el que realiza un muelle ideal en que no hay perdidas de energía mecánica. Son muy bonitos, pero en esta vida nada es “ideal”, en la realidad, los movimientos oscilatorios, con el tiempo, van perdiendo su fuerza, y su movimiento se reduce hasta detenerse.

Pues esto, si sabemos la formula física que lo representa, no puede ser más sencillo de implementar en Flash (teniendo unos mínimos conocimientos de AS, claro)

Siguiendo la ecuación, es sencillo:
Ecuación de un movimiento Armónico Simple inframortido

No amortiguado Amortiguado
http://blog.bleend.net/downloads/MHS.swf http://blog.bleend.net/downloads/MHSinframortido.swf

Se pueden definir parámetros tales como:

  1. Frecuencia angular.
  2. Amplitud (En este caso se define por el drag).
  3. Angulo de fase inicial
  4. Coeficiente de amortiguamiento.(Beta, en este caso 0,2)
  5. Y el propio paso del tiempo.

Este es el código, siendo p la instancia del Movie Clip al que aplicamos el movimiento:

[as]A = 0;
w = 1;
O = 0;
t = 0;
Xo = 48;
Yo = 200;
b = 0.2; //coeficiente de amortiguamiento
p.onPress = function() {
delete (onEnterFrame);
t = 0;
this.startDrag(true, Xo, -1000, Xo, 1000);
};
p.onRelease = function() {
compartida();
};
p.onReleaseOutside = function() {
compartida();
};
function compartida() {
this.stopDrag();
A = p._y-Yo;
_root.onEnterFrame = function() {
p._y = A*Math.pow(Math.E, -b*t)*Math.cos(w*t+O)+Yo;
t += 0.1;
};
}
[/as]

El archivo original, *.fla, lo podrán encontrarán Archivo Flashaquí.

Post Relacionado: Física en flash: Movimiento pendular