manual sobre swishmax

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Manual sobre SwishMax

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Michel Delisée MoreiraResponsable WEBhttp://www.energysistem.com/ (14 capítulos)

Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html © Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.

1

http://www.desarrolloweb.com/

http://www.desarrolloweb.com/manuales/swishmax.html

http://www.energysistem.com/


Introducción al SwishMax

SwishMax es un programa de creación en FLASH. Es muy fácil de manejar y tremendamente potente, capaz de crear animaciones y efectos con imágenes, textos, formas, gráficos y sonidos. Dispone de cientos de efectos ya creados, listos para su uso. Además posee un potente lenguaje de programación interpretado llamado SWiSHscript.

Las animaciones generadas con swishmax se exportan al formato SWF usado por Macromedia Flash.

Su principal ventaja es la facilidad de uso frente a Macromedia Flash y con resultados realmente sorprendentes.

La finalidad de la creación de animaciones es la incorporación de las mismas en páginas web, correo electrónico, Microsoft Powerpoint o incluso en un documento de Word.

Al abrir el programa, nos encontramos con la siguiente pantalla:

Antes de nada, vamos a intentar usar las herramientas básicas para crear un dibujo y familiarizarnos con el programa.

En la parte central veremos un cuadro blanco, que llamamos ventana de diseño. Allí se creará toda la animación.


2




En la parte izquierda de la animación nos encontramos con la caja de herramientas.

Vamos a empezar probando las herramientas básicas para crear dibujos. Éstas son las herramientas que nos permitirán crear formas básicas:

Artículo por Michel Delisée Moreira

Herramientas de Swishmax: lápiz, línea y Bezier o polígonos

Cómo dibujar una línea

Haz clic en la herramienta línea.

• Coloca el puntero en el punto donde quieras que empiece la línea. • Pulsa el botón izquierdo del ratón y sin soltarlo mueve el ratón hasta que veas la línea

dibujada. • Suelta el botón.

Si mantenemos pulsada la tecla SHIFT, conseguiremos que el ángulo vaya en pasos de 15º.

Intenta dibujar varias líneas en la ventana de animación. Luego bórralas haciendo clic en cada una de ellas y pulsando la tecla SUPR.

Cómo dibujar con el lápiz

Haz clic en la herramienta lápiz.

• Coloca el puntero en el punto donde quieras empezar a dibujar. • Pulsa el botón izquierdo del ratón y sin soltarlo mueve el ratón hasta que consigas el

dibujo que quieras hacer. • Suelta el botón.


3




Si terminamos el dibujo en el mismo lugar en el que empezamos a dibujar, se creará una forma cerrada.

Intenta dibujar con el lápiz. Luego borra lo que has hecho haciendo clic en cada dibujo y pulsando la tecla SUPR.

Cómo crear curvas de Bezier o polígonos

Haz clic en la herramienta curvas de Bezier.

1. Creación de un polígono:

• Coloca el puntero en el punto donde quieras empezar a dibujar. • Pulsa el botón izquierdo del ratón para indicar el punto inicial. • Dibuja la línea y haz clic para terminarla. • Sigue dibujando y haciendo clic en cada final de línea. • Haz doble clic para terminar o pulsa la tecla ESC.

2. Creación de una curva de Bezier:

• Coloca el puntero en el punto donde quieras empezar a dibujar. • Pulsa el botón izquierdo del ratón para indicar el punto inicial. • Dibuja la línea y haz clic para terminarla pero no sueltes el botón del ratón. • Arrastra el puntero en dirección de la tangente de la curva que deseas dibujar. • Suelta el botón del ratón y desplaza el ratón para ajustar su curva y haz clic para

colocar el punto de anclaje. • Haz doble clic para terminar o pulsa la tecla ESC.

Si terminamos el dibujo en el mismo lugar en el que empezamos a dibujar, se creará una forma cerrada. Si mantenemos pulsada la tecla SHIFT, conseguiremos que el ángulo vaya en pasos de 15º. Si pulsamos la tecla SUPR conseguiremos eliminar el último punto creado.

Intenta dibujar un polígono y practica con las curvas de Bezier. No te preocupes si no te sale bien, es normal y además se puede corregir muy fácilmente. Lo veremos más adelante.


Herramientas de Swishmax: cuadrado y círculo

Cómo crear un cuadrado o un rectángulo.

Haz clic en la herramienta rectángulo.

• Coloca el puntero en el punto donde quieras poner una esquina del rectángulo. • Pulsa el botón izquierdo del ratón y sin soltarlo mueve el ratón en diagonal hasta

ajustar el tamaño del rectángulo. • Suelta el botón.

Si quieres que las esquinas sean redondeadas, haz clic en el punto inicial y suelta el botón del ratón. Arrastra el puntero y haz clic en el punto final y no sueltes el botón. Arrastra el puntero


4




hacia el interior del rectángulo y suelta el botón cuando veas que las esquinas tengan su redondez deseada.

Si terminamos el dibujo en el mismo lugar en el que empezamos a dibujar, se creará una forma cerrada. Si mantenemos pulsada la tecla SHIFT, conseguiremos que el ángulo vaya en pasos de 15º. Si pulsamos la tecla SUPR conseguiremos eliminar el último punto creado.

Intenta dibujar un polígono y practica con las curvas de Bezier. No te preocupes si no te sale bien, es normal y además se puede corregir muy fácilmente. Lo veremos más adelante.

Cómo crear una elipse o un círculo.

Haz clic en la herramienta círculo.

• Coloca el puntero en el punto donde quieras empezar a dibujar la elipse. • Haz clic y sin soltar mueve el ratón hasta terminar la elipse. • Suelta el botón.

Para dibujar un círculo pulsa y mantén apretada la tecla SHIFT mientras dibujas.


Cómo crear una autoforma en Swishmax

Las autoformas permiten dibujar formas ya creadas.

Haz clic y deja pulsado el botón en la herramienta autoforma hasta que aparezcan todas las formas disponibles:

Luego haz clic en la forma deseada. Tenemos las siguientes formas incorporadas:

Rectángulo redondeado Corazón

Flecha


5




Flecha con muesca

Flecha izquierda derecha

Estrella

Polígono Cubo

Botón biselado Botón redondeado

Recuerda el uso de la tecla SHIFT en el caso que quieras que las proporciones sean exactas.

En el caso del rectángulo redondeado, al terminar de dibujarlo nos aparece un puntito verde que nos permite redondear a gusto de cada uno.

El punto verde permite modificar la forma.

El punto verde central permite aumentar la cantidad de brazos con el botón izquierdo del ratón y disminuye con el botón derecho. El punto verde externo permite girar la estrella. El punto verde medio permite ajustar la profundidad de los brazos.

El punto central aumenta o disminuye la cantidad de lados del polígono de la misma manera que lo hace la estrella. El punto externo permite girar el polígono.

Los dos puntos centrales permiten ajustar la perspectiva del cubo. El punto externo ajusta las sombras.

El punto central ajusta la perspectiva y el punto externo su sombra.

Bueno, ya hemos visto cómo se dibujan formas sencillas. Ahora vamos a ver cómo se modifican una vez dibujadas.

Primero tenemos que saber cómo seleccionamos los objetos que hemos dibujado. Para ello tenemos la herramienta selección.


6




Si tu ventana contiene elementos, bórralos seleccionándolos previamente y suprímelos con la tecla SUPR.

Dibuja un rectángulo que no sea grande.

Mueve el ratón por encima del objeto dibujado hasta que veas

Cuando aparece éste símbolo, el programa indica que podemos mover el objeto pulsando el botón izquierdo del ratón y sin soltarlo arrastrando el objeto.

Desplaza el rectángulo hasta el centro de la ventana.

Localiza en la izquierda de la ventana de animación la caja de opciones

Escalar

Redimensionado

Rotación / Inclinación

Distorsionar

Pulsa el botón Escalar y selecciona el rectángulo que dibujaste.

Verás que alrededor del rectángulo aparecen 8 cuadraditos. (tiradores)

Arrastra el tirador de la esquina superior izquierda y observa su comportamiento.

Arrastra el tirador superior medio y observa su comportamiento.

Intenta que el rectángulo ocupe toda la ventana de la animación.

Siempre que quieras volver a un estado anterior puedes usar la combinación de teclas CTRL-Z y en caso contrario usa CTRL-Y.

Acabamos de aprender a usar el botón Escalar.

Ahora pulsa el botón de Redimensionar y vuelve a ajustar el rectángulo hasta que ocupe el centro de la ventana como lo tenías antes.

Verás que ahora los tiradores tienen la siguiente forma:

¿Notas algo diferente?

Aparentemente la herramienta Escalar y Redimensionar hacen lo mismo pero no es así. Veamos cómo provocar que tenga un objetivo distinto.

La diferencia radica en que cuando un objeto tiene un contorno, si usamos la herramienta escalar, el grosor del contorno variará mientras que con la herramienta Redimensionar no variará su grosor al modificarse su tamaño.



7




Transformar formas con Swishmax

Vamos a poner un contorno al objeto.

En la parte derecha de la ventana nos encontramos con este panel:

En concreto tenemos visible la pestaña Shape (forma) y nos permite cambiar ciertas opciones referentes al objeto seleccionado.

A la derecha de la palabra Line tenemos un cuadro desplegable, ábrelo y selecciona la primera línea que aparece como ejemplo. Una vez seleccionado el tipo de línea, aparecerá a la derecha una casilla para indicar qué grosor queremos. Pon el valor 5.

Observa cómo ahora el rectángulo que dibujaste tiene una línea alrededor de color negro.

Redimensiona el objeto aumentando su tamaño. Observa que el contorno negro no varía su grosor.

Pulsa la combinación de teclas CTRL-Z para volver a dejarlo como lo tenías antes.

Escoge la herramienta Escalar ahora y haz lo mismo, cambia su tamaño y observa el grosor de la línea que rodea al rectángulo.


8




Vamos a probar ahora la herramienta Rotación / Inclinación. ¡Pínchala!

Pasa con el puntero del ratón por encima de cada uno de los tiradores. Verás que en las

esquinas aparece el siguiente símbolo que indica que pinchando y arrastrando podremos

girar el rectángulo. En los demás tiradores aparece el símbolo que nos permite inclinar el objeto en la dirección que arrastremos.

Prueba las dos opciones inclinando ligeramente el rectángulo y girándolo un poco.

Observa que el punto de anclaje está situado en el centro del objeto.

¿Cómo podremos cambiar el lugar del punto de anclaje?

Para ello debemos activar el panel Transform de la derecha y modificar la zona que pone Anchor point.

Origin... Predeterminado Top left... Arriba izquierda Top right... Arriba derecha Center left... Centro izquierda Center... Centro Center right... Centro derecha Bottom left... Abajo izquierda Bottom center... Abajo centro Bottom right... Abajo derecha


9




Custom... Personalizado

Si seleccionamos Custom podemos mover manualmente el punto de anclaje situándonos encima de la y arrastrando a una nueva posición.

Practica con los puntos de anclaje y gira el rectángulo las veces que haga falta, hasta que entiendas el funcionamiento.

Ya que tenemos el panel Transform activado vamos a explicar el resto de las opciones que contiene.

Observa las explicaciones del cuadro:

La X indica la posición absoluta de X (horizontal) del punto de anclaje del objeto. La Y indica la posición absoluta de Y (vertical) del punto de anclaje del objeto.

La W indica el tamaño en anchura del objeto. La H indica el tamaño en altura del objeto.

El primer valor refleja el porcentaje actual en anchura del objeto desde que se creó. El segundo valor refleja el porcentaje actual en altura del objeto desde que se creó. Cuando se marca la casilla X=Y, los valores en ambas casillas serán idénticas.

El primer valor refleja el grado de rotación horizontal relativo a su posición inicial. El segundo valor refleja el grado de rotación vertical relativo a su posición inicial. Cuando se marca la casilla X=Y, los valores en ambas casillas serán idénticas.

El modo Scale activa la herramienta escala ya comentada. El modo Resize activa la herramienta redimensionar ya comentada.

Copy copia en memoria los valores actuales.


10




Paste reemplaza los valores por los que tiene en memoria. Reset deja los valores originales.

Nos queda por ver la herramienta distorsionar.

Veámosla:

Pincha la herramienta distorsionar.

Activa un objeto que tengas en la ventana y tira de sus tiradores

Verás que puedes estirar cada tirador y distorsionar el objeto.

Bueno ya sabemos cómo dibujar un objeto, escalarlo, redimensionarlo, ponerle un contorno, rotarlo, inclinarlo y distorsionarlo.

Vamos ahora a practicar todo lo que hemos visto, así que pulsa la combinación de teclas CTRL-N para crear un nuevo documento, y haz clic en NO cuando te pregunte el programa si quieres guardarlo.

Intenta realizar el siguiente ejercicio:

Una estrella de 8 brazos Un polígono de 3 lados. Gira el polígono 45 grados. Pon un contorno con valor de 3 a la estrella.

Deberás obtener los siguientes objetos:

Practica por tu cuenta los distintos objetos y transformaciones que ya conoces.


Cómo corregir formas dibujadas manualmente

Haz clic en la herramienta cambiar forma.

• Selecciona un objeto dibujado manualmente (no uses autoformas).

Verás que aparecen unos nuevos tiradores más pequeños que los que hemos visto hasta ahora.


11




• Anclaje de unión entre líneas o curvas (Vertex - puntos de modificación de dirección de la línea perimétrica del objeto)

• Anclaje de control de curvas.

Si hemos seleccionado un objeto con curvas, aparecerán los dos modelos. Si no existen curvas, sólo el tirador blanco aparecerá.

¿Cómo se usan?

Los tiradores blancos funcionan de un modo parecido a la herramienta distorsionar. Los azules permiten ajustar con más precisión zonas controladas por tiradores.

Hagamos una prueba:

Dibuja un círculo perfecto (recuerda usar la tecla SHIFT para ello)

Activa la herramienta "cambiar forma".

El aspecto tiene que ser éste.

Ahora vamos a arrastrar el tirador del centro de la derecha hasta llegar al centro del círculo. ¡Ojo! No uses el tirador externo más grande.

Usa la tecla SHIFT para que al arrastrar el tirador no varíe su altura por el movimiento del ratón.

Su aspecto tiene que ser éste:

Intentemos que nuestro dibujo se parezca a una tarta cortada.

Haz clic con el botón derecho del ratón en el punto central.

Aparecen opciones relativas al Vertex:


12




Cusp forma una cúspideSmooth unión suaveSymmetrical simétricoSharpen angulosoRemove Vertex elimina el VertexInsert Vertex inserta un Vertex nuevoSlice recorta

Nos interesa eliminar la curva así que seleccionamos la opción Sharpen

Ahora pulsa CTRL-Z o el botón (debajo de la barra de menús) para dejarlo como lo teníamos antes de hacer Sharpen.

Activa el menú de opciones en el mismo punto central y esta vez selecciona Remove Vertex.

Acabamos de eliminar un Vertex del dibujo.

Puede que algunas veces notes que las curvas no son perfectas pero no te preocupes, en la animación saldrán perfectas.

Practica ahora con los puntos azules e intenta conseguir que el resultado sea el siguiente:


13




Pulsa CTRL-N sin guardar los cambios.

Intenta realizar los siguientes ejercicios partiendo siempre de un círculo. Guarda cada ejercicio en tu carpeta de prácticas con números consecutivos (del 1 al 4).


Otras opciones de los Vertex en Swishmax

Crea una hoja nueva (CTRL-N) Dibuja un cuadrado perfecto (recuerda usar la tecla SHIFT para ello). Activa la herramienta cambiar forma.

Selecciona la opción Smooth del Vertex derecho superior.

Fíjate que la esquina pierde su ángulo para convertirse en una curva suave. Además ese punto ahora tiene dos brazos de estiramiento.


14




Cada brazo puede tener su longitud propia pero siempre marcarán los dos el mismo grado de inclinación. Mueve un punto azul del Vertex mencionado para que veas su funcionamiento. Después de hacer la prueba, pulsa CTRL-Z para dejarlo como estaba.

Vamos a ver cómo podemos hacer que cada brazo sea totalmente independiente:

Vuelve a activar las opciones del Vertex y escoge la opción Cusp.De momento no notarás ninguna diferencia pero internamente ese punto deja de curvarse al mover los brazos. Hagamos la prueba: Vuelve a mover un punto azul del mismo Vertex y observa como ahora el otro punto azul no sigue la inclinación de su opuesto.

Practica ahora con esos 2 puntos para intentar dejar que su apariencia sea otra vez la de un cuadrado.

Ahora vamos a probar la opción Symmetrical:

Selecciona la opción Symmetrical del mismo Vertex. En apariencia se parece a la opción Smooth ¿verdad?

Ahora estira y desplaza un punto azul y verás que el otro opuesto tiene la misma inclinación y la misma longitud.

¿Cómo podríamos dejar el cuadrado tal como se encontraba al principio? ¿Qué opción seleccionamos?


15




Sharpen (anguloso), ¡claro! ¡Hazlo!

Ahora elimina ese Vertex con Remove vertex.

Obtenemos un triángulo como este:

Tan sólo nos quedan 2 opciones por ver del Vertex: Insert vertex y Slice.

Vamos a verlas.

Pon el puntero encima de la cruz central y activa la opción Insert vertex. Ahora aparece de nuevo un punto Vertex. Estira el Vertex hacia arriba y a la derecha para volver a tener un cuadrado.

Recuerda que si tienes problemas, no temas en llamar a tu asesor, está para ayudarte.

La opción Slice recorta cualquier objeto por dónde nosotros digamos.

Vamos a ver cómo se utiliza: Para no marearnos vamos a utilizar el mismo vertex con el que hemos hecho nuestras prácticas (arriba derecha). Selecciona la opción Slice en ese punto. Mueve el puntero del ratón y observa que ahora aparece una línea negra que queda anclada al Vortex. Para cortar el objeto tenemos que llevar el extremo de la línea a cualquier contorno del objeto

hasta que aparezca el símbolo o en cualquier otro Vertex y volver a pulsar el botón derecho y seleccionar Slice de nuevo.

Intenta cortar el cuadrado como en el ejemplo.

Partiendo del resultado final vamos a probar más deformaciones.

Pon el puntero en el medio de la línea de corte hasta que veas el símbolo y arrastra hacia la derecha manteniendo pulsada la tecla SHIFT para facilitar su desplazamiento horizontal.


16




Volvamos a su estado anterior pulsando CTRL-Z

En el mismo punto de antes vamos a ver sus opciones (botón derecho sobre la línea)

Vemos que está activada la opción Linear que no permite curvatura.

Si seleccionamos la opción Quadratic, conseguiremos que los dos extremos de la línea estén atados con un único punto azul de ajuste de curvas.

Selecciona Quadratic y desplaza el punto azul hacia la derecha.

Vuelve a su estado anterior con CTRL-Z (2 veces) hasta que desaparezca el punto azul.

Y activa ahora la opción Cubic y desplaza los 2 puntos azules como en el ejemplo.

Recuerda que Quadratic crea un único punto de ajuste para ambos Vertex y Cubic lo separa


17




en 2 puntos de control independientes.

Deja la ventana limpia sin objetos.

Intenta realizar los siguientes ejercicios:

Nota: No inventes, trata de repasar las lecciones anteriores e intenta usar el mínimo de opciones para realizar cada ejercicio.

• 1) Dibuja un cuadrado perfecto y usando opciones ya vistas, modifica el cuadrado hasta que se convierta en un círculo y guarda el ejercicio con el nombre 5.

• 2) Intenta conseguir que ese nuevo círculo sea de nuevo un cuadrado y guárdalo con el nombre 6.

• 3) Borra los objetos que tengas y dibuja un círculo perfecto. Córtalo por su mitad verticalmente con la opción adecuada. Guárdalo con el nombre 7.

• 4) Corrige el medio círculo hasta que consigas que se parezca a una media luna y guárdalo con el nombre 8.

• 5) Gira la media luna ligeramente hacia la izquierda y guarda con el nombre 9.

• 6) Crea un contorno al objeto con una línea punteada de grosor 1 y guarda el ejercicio con el nombre 10.

Bueno, no te desesperes, cuanto más practiques, mejor te irán saliendo los ejercicios.


Trabajo con colores en Swishmax

Dibuja un cuadrado en la ventana. Ya sabemos que por defecto, el programa te lo mostrará en color rojo.

Observa el panel de la derecha (pestaña Shape).


18




Crea un contorno al cuadrado, sin importarte su grosor (recordará el último utilizado).

Veamos primero el segundo botón (inferior)

Pínchalo y aparecerá la ventana de paleta de colores:

Aunque la ventana parece algo complicada, no lo es. Vamos a explicar por partes:

En la parte superior veremos un cuadro que nos muestra a su izquierda el color actual y a su derecha el color que seleccionamos (para verlo, mueve el puntero por encima de los colores


19




que hay en la parte inferior).

Esta herramienta nos permite seleccionar un color que se encuentra en cualquier parte del programa y nos permite seleccionar el color que se encuentre por debajo del puntero sin tener que averiguar los valores de sus componentes rojo, verde y azul (RGB).

Este botón activa o desactiva una gama de colores compatible con todos los navegadores web.

Este botón muestra el cuadro de colores propio de Windows con toda la gama de colores existente.

Cada cuadro indica el valor entre 0 y 255 de cada componente (rojo, verde y azul). Un valor bajo rebaja la intensidad del color seleccionado y un valor alto aumenta su intensidad.

Por ejemplo, si le damos el valor 0 a los 3 componentes, el color resultante será el negro (ausencia de color). Si indicamos el valor 255 para cada componente, obtendremos el color blanco (mezcla de los 3 componentes).

El cuadro Hex (Hexadecimal) representa el valor en hexadecimal, usado en muchos programas de diseño web.

El sistema hexadecimal frente al decimal cuenta desde 0 hasta 15.

0123456789ABCDEF A=10; B=11; C=12; D=13; E=14; F=15

Sin complicarnos mucho la vida, el procedimiento para calcular el valor A5 sería: 10 x 16 + 5 = 165 así que FF sería 15 x 16 + 15 = 255

En el cuadro en cuestión tenemos 3 bloques de 2 dígitos para representar en hexadecimal el color seleccionado.

En la parte superior nos encontramos con los valores del color actual y por debajo podemos ajustar manualmente los valores nuevos.

Alpha nos permite indicar la opacidad del objeto seleccionado. Si ponemos un valor alto, el objeto será más visible, en cambio si bajamos su valor, el color será más transparente. El valor 0 indica una transparencia total y el valor 100 hace que el


20




objeto sea opaco.

Con este panel puedes seleccionar el color que deseas darle al objeto.

Muestra los colores usados recientemente.Aparece una rejilla cuando el color no es opaco.

Este botón acepta el color seleccionado y cierra el cuadro.

Nota: Si pulsamos la tecla SHIFT mientras seleccionemos el color, el cuadro no se cierra.

Ve practicando con los colores, dibuja varios objetos con colores y transparencias distintas.

Cuando ya hayas probado todas las opciones del panel de colores, elimina los objetos que hayas dibujado y deja un cuadrado perfecto.


Trabajo con colores en Swishmax II

Pínchalo y aparecerá una lista de opciones.

Ve probando mientras explico a continuación las opciones que iremos viendo.

Si activamos la opción None, desaparecerá el color de relleno del objeto convirtiéndole en


21




transparente. ¡Pruébalo!

Solid rellena uniformemente el objeto con un color específico (opción por defecto).

Linea gradient permite crear un degradado lineal. Usa un cambio progresivo del color a lo largo del objeto. El panel de control que aparece al seleccionarlo, permite cambiar los colores en el degradado.

Antes de continuar, veamos cómo funciona el panel de control de degradados. Observamos que debajo del rectángulo tenemos dos cursores: El primero de la izquierda tiene un color blanco opaco y el de la derecha es negro transparente. Recuerda lo que comentamos antes sobre los valores Alpha.

En este caso le estamos diciendo al programa que el objeto tendrá un degradado que empieza desde el blanco opaco hasta el negro transparente. En el rectángulo superior podemos observar una muestra del efecto.

Haz clic en la flechita que aparece a la derecha del panel de control

Se abre una ventana con muestras ya existentes dentro del programa y podemos seleccionar una de ellas. Vamos a seleccionar la primera de todas, así que usa la barra de desplazamiento para subir hasta arriba y selecciona la siguiente combinación:

Al pinchar en esa combinación, el objeto tendrá el siguiente aspecto:


22




Observa el panel de control ahora. Se entiende perfectamente que el color pasará de negro a blanco.

Para añadir un color, basta con hacer clic en la zona que queramos insertar un color y aparecerá el panel de colores.

Intenta incrustar el color rojo en la parte central del degradado.

Ahora aparecen 3 cursores y los colores pasan de uno a otro gradualmente.

Arrastra el cursor central hacia ambos lados para ver su efecto.

Ahora vamos a ver cómo se elimina un color.

Arrastra el cursor blanco y suéltalo fuera de la regla.

Ahora nos queda el negro y el rojo. ¿correcto?

Intenta poner el color amarillo allá donde estaba el blanco (a la derecha del todo)

Cambia el color del negro por verde pulsando simplemente encima del cursor y seleccionando el color verde.

Hemos aprendido a:

• Añadir colores • Eliminar colores • Mover colores • Modificar color

Con el botón podemos acceder a los valores del posicionamiento del degradado.

El botón hará que cualquier transformación del relleno, vuelva a su origen.

La opción hará que el relleno quede íntegramente dentro del objeto.

Haz prácticas con todo lo referente a rellenos graduales.

¿Cómo podemos conseguir que el relleno esté en diagonal como en esta muestra?


23




Debajo de la herramienta seleccionar tenemos la herramienta transformar relleno Esta herramienta nos permite girar el relleno que contiene el objeto.

Vamos a intentarlo.

Borra todo lo que tengas en pantalla Crea un cuadrado con relleno gradual multicolor (lo tienes en la lista de rellenos)

Selecciona la herramienta transformar relleno

Activa si no lo está la opción rotación de objeto Gira el relleno hasta conseguir el efecto en diagonal

Cuando se selecciona la herramienta Transformar objetos. Al seleccionar la opción escalar o rotar, la transformación se aplicará al relleno exclusivamente. Los tiradores funcionan del modo tradicional aunque su apariencia sea distinta precisamente para no confundirnos.

Intenta dibujar la bandera española usando rellenos graduales y guarda el ejercicio con el nombre 11.

Radial gradient permite crear un degradado a partir del centro de forma concéntrica dentro del objeto. Dispone igualmente un panel de control de relleno y su funcionamiento es similar al de lineal gradient.

Tiled image permite crear una misma imagen repetidamente hasta rellenar todo el objeto.

Para probar esta opción, primero vamos a dibujar un rectángulo. Seleccionamos esta opción y Swishmax nos mostrará su logo como ejemplo.


Trabajo con imágenes en SwishMax

Vamos a meter una imagen externa que se encuentra en la carpeta de archivos necesarios.


24




Haz clic en el botón abrir imagen

En la ventana de carpetas, localiza la carpeta de archivos necesarios y abre el archivo swish colores.jpg

Los formatos de imagen permitidos y sus variantes son: BMP, DIB GIF JPG, JIF, JPEG PNG

Ahora vemos la imagen repetida dentro del rectángulo.

La imagen original la podemos ver en el cuadro de muestra del panel de control de imagen repetida.

El mismo panel también nos informa de su tamaño: 151 de ancho x 147 de alto. También nos dirá la cantidad de colores que tiene: 24 bits Y el tamaño que ocupa en memoria: 6 Kb.

Para entrar en el panel de propiedades de la imagen elegida tenemos que pulsar el botón Properties o hacer doble clic en la imagen de muestra.


25




En la parte superior izquierda nos encontramos con el panel de valores que representa su posición, tamaño dentro del objeto, ángulo de rotación, etc.

Arriba a la derecha tenemos la posibilidad de ir cambiando los valores originales que se vayan a usar en el programa.

Trataré de explicar esta parte que para nosotros es nueva.

El apartado Preload no lo voy a explicar de momento hasta que no hagamos alguna animación.

La casilla Don't Smooth nos permite activar o desactiva el efecto Antialias. Púlsalo para ver el efecto. Te resultará difícil apreciarlo así que mira el ejemplo:


26




Esta parte del panel nos permite definir el tipo de compresión y bits de colores en cada punto (píxel)

Ve probando las distintas opciones de compresión y observa su resultado en la imagen de muestra.

Cuando selecciones 24 bits/píxel JPEG, intenta variar su valor rebajando la calidad y observando el resultado en la imagen de muestra.

Aquí podemos ver la anchura y altura de la imagen (izquierda) y a el tamaño que ocupa en memoria (derecha) antes (original) y después de comprimir (Exported).

¿Por qué cambiar la compresión de una imagen si su calidad es perfecta?

Porque lo que intentamos hacer es una animación en flash que se visualizará en una página web así que si dejamos la imagen tal cual sin comprimir, el tiempo de carga de la animación puede tardar minutos o pocos segundos si aprendemos a comprimir correctamente la imagen y tal vez sin que se aprecie su compresión.

Intenta comprimir la imagen hasta que veas que no se note pérdida de calidad y que la casilla que nos indica el tamaño final de exportación sea un número muy inferior al tamaño original.

Cuando hayas terminado el ejercicio pulsa el botón OK y observa el panel


27




Vuelve al cuadro de propiedades de la imagen porque nos queda una cosa por ver.

El cuadro es bastante significativo pero por si acaso explico a continuación cómo se usa:

Arrastrando el deslizador de contraste (Contrast) hacia la izquierda, conseguiremos que la imagen tenga menos contraste y viceversa.

Arrastrando el deslizador de brillo (Brightness) hacia la izquierda, conseguiremos que la imagen tenga menos brillo y viceversa.

Arrastrando el deslizador de contraste (Saturation) hacia la izquierda, conseguiremos que la imagen tenga menos fuerza de color y viceversa.

Arrastrando el deslizador de gama (Hue) podremos ir variando un color por otro.

Rebajando la resolución (Resolution) haremos que la imagen se vea cada vez más pixelada (como si usáramos una lupa).

El botón Reset vuelve a dejar los valores normales.

La casilla Transparency nos permite hacer que un color se vea transparente.

Activa la casilla Transparency

Verás que ahora aparece:

El botón Transparent color nos abrirá el panel de colores que ya conocemos y así podremos indicar el color que nos interese que se vea transparente (se recomienda usar el cuentagotas

para seleccionar el color directamente sobre la imagen).


28




Tolerance nos da la opción de indicar la tolerancia de color semejante. Un valor 0 sólo hará transparente el color exacto y un valor máximo de 255 hará que todo sea transparente.

Vamos a hacer una prueba de transparencias para que entiendas su utilidad.

Borra todo lo que tengas en la ventana o pulsa CTRL-N sin guardar para empezar un trabajo nuevo.

Crea un cuadrado grande que ocupe casi toda la ventana de animación. Ahora inserta la imagen "swish transparencia.jpg" pero usando el botón señalado abajo. Búscalo arriba, debajo de la barra de menús.

Verás que la imagen se centrará y estará por encima del cuadrado que creaste.

Nuestra intención es hacer que la parte amarilla de la imagen sea transparente para que se funda con el cuadrado (no lo conseguiremos del todo pero sirve como ejemplo).

Selecciona la imagen que acabas de insertar. Entra en las propiedades de esa imagen. Activa el botón transparencia. Elige el color amarillo como color transparente. Ajusta la tolerancia hasta que el amarillo del fondo desaparezca.

Verás que no es muy fácil usar esta herramienta y tampoco siempre se consigue el efecto deseado pero es recomendable que no la olvides, ya que en algunas imágenes el resultado es


29




sorprendente.

Bueno, dejemos ya el tema de las transparencias así que borra todo y crea de nuevo un rectángulo.

Clipped image hará que una imagen ajuste su tamaño para ocupar el tamaño del objeto. Su función es la misma que lo que acabamos de ver pero sin repetir la imagen.

esta opción fuerza la imagen para que se ajuste al tamaño del objeto.

Veamos las opciones que nos quedan por ver del panel de imagen.

El botón doble flechita hace que la imagen vuelva a leerse del disco por si, por ejemplo, la hemos estropeado.

La flechita azul despliega una serie de imágenes de muestra recordando las últimas imágenes que hemos usado.

El botón Reset Transform deja la imagen con los valores predeterminados sin transformar.


Opciones de visualización en SwishMax

En la parte inferior de la barra de herramientas nos encontramos con los botones que nos van a facilitar diseñar con mayor precisión.

Si hacemos clic en la zona alta de ese apartado, aparece un menú como éste:


30




Selecciona 25% - En este caso veremos el tamaño reducido 4 veces al original. Selecciona 500% - En este otro caso la visualización es 5 veces mayor.

Prueba los 4 botones que se refieren a la visualización y cuando veas que puedas necesitarlos, no dudes en usarlos.

Vamos a hacer algunas prácticas con las rejillas.

Pulsa el botón que ajusta el porcentaje de visualización para que se vea toda la ventana. Activa el botón que activa la rejilla.

Aparece una rejilla que no se verá en la animación pero nos servirá para cuadrar objetos dentro de la ventana.


31




Ahora crea un cuadrado que ocupe tres casillas en todos sus lados. Usa la rejilla como referencia.

Aún con la ayuda de la rejilla es algo difícil que no nos salgamos de las líneas, así que vamos a activar el efecto rejilla con imán.

Activa el botón rejilla con efecto imán.

Elimina el cuadrado y vuelve a dibujarlo.

¿Lo tienes? ¿Fácil, no?

Arrastra el cuadrado a otra zona y observa cómo el efecto imán hará que se adhiera a la rejilla.

Bueno, creo que ya es hora que veamos un nuevo panel, el de las guías.

Activa el panel y veamos sus opciones.

Nos encontramos con tres apartados, Guides (guías), Grids (rejillas) y Snap (imán).


32




Veamos el segundo de ellos (Grids) porque ya nos tiene que resultar familiar.

Ya vemos que los botones que aparecen son los mismos que acabamos de aprender. Además del botón visualizar rejilla (show) y el botón imantar (snap) vemos que también podemos cambiar el color de la rejilla pulsando el botón correspondiente.

Cambiar el color de la rejilla por el color verde y luego vuelve a dejarlo con el color previo que teníamos.

Debajo podemos ver dos casillas que nos permiten indicar la distancia entre las rejillas.

Pon 40 en la casilla de H (horizontal) y 40 en la casilla V (vertical).

Ahora ajusta el cuadrado para que siga ocupando 3 casillas.

Ahora desactiva la rejilla y su imán (las dos opciones)

Vamos a ver ahora el apartado superior (Guides)

Las guías vienen a ser como rejillas personalizables y no tienen relación con las rejillas.

Cambia el color de las guías por el color negro.

Para usar las guías, es recomendable que sean visibles las reglas verticales y horizontales. En principio ya deberían de estar activadas pero para que sepas cómo activarlas o desactivarlas,

pulsa el botón Ruler y deja que se vean las reglas.

Si movemos el puntero dentro de la ventana de animación, podemos observar que en las reglas se puede ver la posición actual del mismo puntero.

¿Cómo se crean líneas guías?

Existen 2 maneras:

La primera consiste en hacer un clic en la regla (horizontal y/o vertical) en el lugar exacto que queramos que aparezca.

La segunda manera es parecida pero en vez de hacer un clic, lo que haremos es arrastrar el puntero desde la regla hacia dentro de la ventana y soltamos.

¿Lo probamos?

Primer método:

Calcula más o menos el valor medio de tu regla horizontal y haz un clic allí.

Si te ha salido bien verás una línea vertical que atraviesa toda la ventana.

Mueve el puntero hacia esa guía (dentro de la ventana) y arrástrala hacia otro punto. Se podrá


33




mover cuando veas que el puntero cambia a una flecha doble. Dependiendo de la guía que intentes mover, verás el puntero así:

Crea otra guía pero ahora que sea horizontal así que haz clic en la regla vertical (en la mitad de la regla)

Arrastra las dos guías para que queden cruzadas en el centro de la ventana.

Si usas la tecla SHIFT, tanto para crear o para arrastrar una guía, la línea se alineará a la regla.

Segundo método:

Para crear una guía, coloca el puntero sobre la regla y arrastra el puntero hacia el interior de la ventana.

Prueba este segundo método para enmarcar todo el cuadrado hasta que te quede así:

Si quieres ver u ocultar las guías, pulsa el botón pero de momento déjalas visibles.

Arrastra el cuadrado hasta que quede más o menos como aquí:


34




Intenta arrastrarlo de nuevo como para dejarlo en el mismo sitio de antes.

¿Qué herramienta nos vendría bien para ejecutar este último paso?

¡El imán de guías!

Pulsa la herramienta imán de guías y ajusta de nuevo la posición del cuadrado.

Buen invento, ¿verdad?

Para que las guías no se puedan mover accidentalmente, tenemos el botón que bloquea las guías o las desbloquea si lo desactivamos.

El botón elimina todas las guías que hemos creado. ¡No lo pulses!, quiero que veas cómo se elimina una guía antes de eliminar todas las guías de golpe.

Arrastra una guía cualquiera hacia fuera de la ventana y desaparecerá.

Ahora ya puedes eliminarlas todas de golpe con el botón adecuado para ello.


Opciones de visualización en SwishMax II

Vamos a ver ahora el apartado inferior (Snap)

Crea otro cuadrado pero en color azul.


35




Intenta juntar los bordes de los dos cuadrados.

Verás que no es nada fácil pero tenemos una herramienta que nos facilita el proceso:

Primero desplegamos las opciones de la flecha azul Tolerance (tolerancia). Aparecen las opciones que vemos a continuación:

A mayor valor más grande será el salto al arrastrar los objetos.

Very close tiene el valor 1, close (3), normal (6), distant (12) y very distant (24).

Activa very distant (muy lejano) y arrastra uno de los cuadrados.

¿Notamos algo? ¡No!

Para que el imán de objetos funcione, vamos a activar el botón imantar al objeto

Vuelve a probar mover un cuadrado y acércate a los lados del otro cuadrado para ver el efecto imán funcionando.

Prueba con distintos valores de tolerancia y verás que cuanto menor más fino será el desplazamiento y observa que cuando llegues a tocar el borde del otro cuadrado, se produce como un ligero frenazo.

Para usar el otro botón imantar al píxel necesitaremos ampliar la zona al menos un 500% para poder ver su efecto.

Desactiva el botón imantar al objeto y activa el botón imantar al píxel. Aumenta el factor de visualización al 500% o más y trata de ver los colores de los dos cuadrados juntos en la ventana. Puede que tengas que usar las barras de desplazamiento para centrarte en la zona de trabajo. Ahora arrastra un cuadrado hacia el otro con la herramienta activada y sin ella.

Como ejercicio final de guías, vamos a intentar dibujar otra vez la bandera de España pero esta vez usando 3 objetos.

Borra todo lo que tengas y sigue mis pasos:

Primero vamos a definir el tamaño total de la ventana de la animación. Aunque no hayamos visto cómo hacerlo, definir el tamaño no es nada difícil.


36




Activa la pestaña Movie de los paneles de la derecha.

Pon estos valores en el cuadro:

300 indica la anchura y 250 la altura. Deja el fondo con el color blanco.

Pon la visualización al 100%

Dibuja un cuadrado.

Ahora vamos a modificar sus parámetros para que sea rectangular y lo haremos usando el panel Transform

Introduce los siguientes valores en el sitio correspondiente.

250 indica que el cuadrado va a tener una anchura de 250 píxeles y una altura de 50. Ya tenemos el rectángulo creado. No te preocupes si se sale fuera de la ventana.

Selecciona el objeto y pulsa CTRL-C para copiarlo en memoria.

Ahora pulsa CTRL-V para pegarlo en la ventana.

Ya tenemos 2 rectángulos idénticos.

Crea una guía horizontal en el píxel 50 y otra en el píxel 200.

Crea otra guía vertical en el píxel 50.

Mi intención es dejar la guía vertical en la posición 25 pero al no verse claramente en la regla, usaremos la barra de estado que nos indicará dónde nos encontramos.

Veamos cómo hacerlo:

Por si no sabes dónde está la barra de estado, te diré que es lo que se ve abajo del todo de la ventana del programa. Mira abajo a la izquierda y si pones el puntero encima de la guía vertical creada, verás que aparece el valor 50.0 .

Arrastra la guía hacia la izquierda observando el valor que irá apareciendo en la barra de estado e intenta dejarlo en 25.0 .

Recuerda que la tecla SHIFT te ayudará a conseguirlo si tu ratón no es muy bueno.


37




Activa el panel Guides y comprueba que está seleccionada una tolerancia de 6.

Activa el imán de guías y arrastra los rectángulos para que queden de la siguiente manera:

Bueno ya tenemos los bordes, ahora nos queda por crear el centro amarillo.

Crea un rectángulo que quede en la zona central y le pones el color amarillo.

Verás que al intentar crear el cuadrado, no encontrarás dificultad en la zona inferior pero si no tenemos activada el imán de objetos, nos resultará difícil cuadrarlo por la derecha y abajo. Así que si no tienes activado el imán de objetos, actívalo y termina el dibujo para que quede perfecto.

Ahora observa el panel de la izquierda y verás lo siguiente:

Esto nos indica que dentro de la escena tenemos 3 formas (shapes)

Cuando selecciones cualquiera de las 3 formas que aparecen en ese panel, verás que en la ventana de animación la forma se selecciona también. Prueba ir seleccionando una a una y comprobar su funcionamiento.

Elimina las guías usando el botón apropiado.

Mi intención ahora es desplazar la bandera y dejarla en el centro de la animación.

No lo intentes hasta que te explique cómo hacerlo.

Recuerda que cada objeto es independiente y si intentas arrastrar uno por uno, te costará


38




volver a dejarlos pegados.

De momento vamos a intentar seleccionar los 3 objetos al mismo tiempo.

Para ello vamos a usar el panel izquierdo e intentaremos que queden seleccionadas así:

¿Cómo se hace?

Haz clic en el primer Shape que aparece.

Ahora presiona la tecla SHIFT y sin soltarla haz clic en el tercer Shape.

La tecla SHIFT en las selecciones permite seleccionar desde un punto hasta el otro sin tener que marcar una por una.

¿Ya tienes las 3 formas seleccionadas? Espero que sí.

Si usas la tecla CTRL en vez de SHIFT, podrás ir seleccionando los objetos que quieras, marcándolos o desmarcándolos.

Ahora intenta mover toda la bandera pero hazlo sólo cuando veas que el puntero tiene la

siguiente forma:

¿Puedes dejar la bandera en el centro de la ventana sin problemas?

Si ves que no te resulta fácil centrarla es porque no tienes activado el botón imantar al objeto así que actívalo y trata de centrar la bandera hasta que te quede así:

Guarda el ejercicio con el nombre 12.

¿Crees que podrías hacer que la bandera sea más pequeña?

Inténtalo.

Supongo que no lo habrás conseguido ya que al reducir los 3 objetos al mismo tiempo, cada uno de ellos se reduce de manera independiente y no de forma global.

¿Cómo podremos solucionarlo?

Agrupando los 3 objetos en 1 solo.

Veamos cómo hacerlo.

Una vez que estén seleccionados los 3 objetos pulsaremos CTRL-G (grupo) y veremos que en el panel izquierdo aparece ahora:


39




Verás que delante de Group tenemos el signo + que nos indica que dentro del grupo hay objetos.

Pulsa el signo más que aparece allí.

Verás que ahora están dentro de Group los 3 objetos que teníamos antes.

Ahora para conseguir reducir el tamaño de la bandera, tan sólo tenemos que seleccionar del panel de la izquierda Group y reducir su tamaño con los tiradores.

Reduce el tamaño de la bandera y recuerda usar la tecla SHIFT al hacerlo para que las proporciones no cambien.

Si quieres seleccionar un objeto del grupo, selecciónalo directamente del panel izquierdo y

asegúrate que el puntero tenga el aspecto

Cuando quieras trabajar con el grupo y no con su contenido, recuerda pulsar el signo - (contraer grupo) para que sólo trabaje con el grupo o bien asegúrate que el puntero tenga el

aspecto

Me gustaría más que los nombres de los objetos fuesen más descriptivos así que vamos a hacerlo.

Haz clic en Group y pulsa la tecla F2. Cambia la palabra Group por bandera y pulsa Intro.

Haz lo mismo para el resto de los objetos, poniendo como nombre su color.

Guarda el ejercicio con el nombre 13.


Fusión de objetos en SwishMax

¿Qué ventaja tiene fusionar objetos?

Obtener una forma única que además de ser más fácil de manipular, también reduce el tamaño final de la animación.


40




Vamos a partir de un documento nuevo y practicar la fusión de objetos.

Crea dos objetos en la ventana.

Selecciona los dos objetos desde el panel izquierdo o hazlo enmarcando los dos objetos desde la misma ventana.

Abre el menú Modify y selecciona Grouping y luego Group as shape. Te aparecerá la siguiente ventana:

Lo que nos está preguntando el programa es:

¿Deseas que las zonas de los objetos que estén por encima de otros objetos, que tengan el mismo color de relleno, queden transparentes por dentro?

De momento contesta que NO.

Enseguida verás que ahora tus dos objetos forman uno solo.

Supongo que estarás deseando ver qué ocurriría si hubiésemos contestado SÍ.

Vamos a probarlo.

Borra todo lo que hay y crea un cuadrado

Copia el cuadrado con CTRL-C y pégalo con CTRL-V

Pon un cuadrado encima del otro para que queden más o menos como aquí:

Ahora fusiona los dos objetos, contestando que SÍ a la pregunta que te formulará el programa.

El resultado final debería de ser el siguiente:


41




Nota: Para que los objetos fundidos puedan crear zonas transparentes, hace falta que los objetos tengan exactamente el mismo color de relleno. Si no es así, no se crearán zonas transparentes.

Intenta dibujar un botón de camisa con 4 agujeros transparentes.


Orden de los objetos en SwishMax

Veamos un ejemplo:

Dibuja un cuadrado y un círculo, cada uno con un color diferente.

Arrastra uno de ellos por encima del el otro y verás el orden de los objetos.

Si te fijas en el panel de la izquierda, verás como el objeto que se encuentre arriba en la lista, corresponde al último creado y se encuentra por encima de los demás objetos.

Cambia el nombre a los objetos poniendo cuadrado y círculo respectivamente.

Para cambiar el orden, tan sólo tienes que seleccionar el objeto y hacer clic en la flechita que corresponda para hacerlo subir o bajar un nivel.

Mira este ejemplo:


42




Está seleccionado el objeto 2. En la parte superior están los botones de orden

Si pulsamos la flecha hacia arriba, el objeto 2 estará arriba del todo. Si pulsamos la flecha hacia abajo, el objeto 2 estará abajo del todo.

Intenta tú mismo cambiar el orden de tus dos objetos.

También puedes cambiar el orden de los objetos arrastrando hacia arriba o hacia abajo el objeto seleccionado.

Si lo haces correctamente, el resultado debería de ser éste:

Ya que estamos trabajando con el panel de objetos, veamos para qué sirve el ojo que sale delante de cada objeto.

Cuando el ojo está visible, el objeto será visible en la pantalla, si hacemos clic en el ojo, el programa hará que ese objeto no se vea en la pantalla. ¡Ojo! Sólo en la pantalla, en la animación terminada se seguirá viendo igual que antes.

Haz clic en el ojo del cuadrado.

Haz clic en el ojo oculto ahora.

Ahora aparece un candado que nos indica que el objeto es visible pero estará bloqueado para que en ningún momento podamos moverlo de sitio por accidente.

Haz clic en el candado.

Vuelve a aparecer el ojo como al principio.

Queda por comentar un par de herramientas que nos pueden ayudar a dibujar.


43




Cuando seleccionamos la herramienta mano , podremos mover el objeto seleccionado y desplazar al mismo tiempo la escena.

Para probar esta herramienta, amplia la zona de trabajo a 400%, luego intenta desplazar un objeto que veas. Verás que sólo el objeto se desplaza. Si ahora activas la herramienta mano, podrás desplazar el objeto y su fondo entero.

La otra herramienta que nos queda por ver es la lupa que nos permite ampliar la zona que nosotros enmarquemos con el seleccionador y arrastrando la zona de enmarcación.

Si te fijas aún nos quedan dos herramientas más por ver pero lo haremos más tarde ya que de momento no tienen que ver con dibujar.

Creo que ya es la hora que empecemos a crear una pequeña animación. ¿No crees?

Vayamos por partes, primero tenemos que entender el funcionamiento del programa.

Antes de nada, crea un documento nuevo con CTRL-N y no guardes los cambios.

Activa la ficha Movie y usa los siguientes parámetros:

Anchura=400, Altura=300, Frame rate=20

Casilla Stop playing (parar la animación al terminar la película) activada.

Más tarde explicaré qué es el Frame rate.

Pulsa el botón de visualización completa ajustando el % automáticamente.

Recordemos que vamos a crear una película (Movie) y que dentro de la película podemos tener una o más escenas (Scene).

Ahora quiero que te fijes en la línea de tiempo (arriba del todo)

En la parte superior vemos una regla que nos indica los cuadros (frames) de una animación.

En este caso estamos en la posición 1 de la escena 1. ¿Correcto?

Dibuja un cuadrado que tenga cada lado el valor 50 y déjalo en la esquina superior izquierda de la ventana de animación. Puedes usar la opción Imantar al objeto para que te sea más cómodo ajustarlo en la esquina.

Al objeto creado, ponle el nombre "cuadrado".

Ahora tendremos en la línea de tiempo lo siguiente:


44




Pon el puntero encima del cuadrito azul (cuadro 1 de la línea Cuadrado) y pulsa el botón derecho del ratón para ver el menú contextual.

Selecciona la opción Move (desplazar)

Comprueba que el resultado sea éste:

Ahora arrastra el cuadrado hasta la esquina inferior derecha. Procura desplazar el cuadro

cuando te salga el símbolo en el puntero, sino modificarías la posición del centro del objeto.

Comprueba el resultado:


45




Ahora vamos a analizar la línea de tiempo.

Ponte encima del cuadro rojo superior y arrastra hacia la izquierda y derecha, por encima de la regla de tiempo.

Observa los pasos de la animación creada.

El programa ha creado 10 cuadros que harán que el cuadrado parta del lado superior izquierdo y vaya progresivamente hacia la derecha inferior.

Observa también que el cuadrado tiene los tiradores de color gris cuando no se encuentra al inicio o al final de la animación. Además si intentásemos arrastrar el cuadrado, no nos lo permitiría el programa.

Si en algún momento pierdes el control, pulsa en la línea de tiempo el objeto "cuadrado".

¿Qué quiere decirnos esto?

Que sólo podremos modificar o bien el punto de partida (tiradores blancos) o el punto final (keyframe) que aparece con tiradores rojos.

Ve a la posición 10 y arrastra el objeto hacia la derecha superior.

Observa cómo la animación se corrige en función del punto final.


46




¿Y si quisiéramos curvar la animación?

¡Fácil!

Lo que haremos es crear en la posición 5 un nuevo Keyframe.

Coloca el puntero encima de la posición 5 pero referente al objeto, no a la regla o línea de tiempo.

Usa el botón derecho y selecciona Insert Keyframe

Arrastra ahora el objeto hacia el centro de la ventana.

¿Has obtenido el siguiente resultado?

Arrastra ahora la animación (izquierda y derecha) desde la línea de tiempo y observa el cambio producido.



47





48



manual sobre swishmax

Documents