Está en la página 1de 48

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

com

Manual sobre SwishMax

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Michel Delise Moreira
Responsable WEB http://www.energysistem.com/ (14 captulos)

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Introduccin al SwishMax
SwishMax es un programa de creacin en FLASH. Es muy fcil de manejar y tremendamente potente, capaz de crear animaciones y efectos con imgenes, textos, formas, grficos y sonidos. Dispone de cientos de efectos ya creados, listos para su uso. Adems posee un potente lenguaje de programacin 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 creacin de animaciones es la incorporacin de las mismas en pginas web, correo electrnico, 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 bsicas para crear un dibujo y familiarizarnos con el programa. En la parte central veremos un cuadro blanco, que llamamos ventana de diseo. All se crear toda la animacin.

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En la parte izquierda de la animacin nos encontramos con la caja de herramientas. Vamos a empezar probando las herramientas bsicas para crear dibujos. stas son las herramientas que nos permitirn crear formas bsicas:

Artculo por Michel Delise Moreira

Herramientas de Swishmax: lpiz, lnea y Bezier o polgonos


Cmo dibujar una lnea Haz clic en la herramienta lnea.

Coloca el puntero en el punto donde quieras que empiece la lnea. Pulsa el botn izquierdo del ratn y sin soltarlo mueve el ratn hasta que veas la lnea dibujada. Suelta el botn.

Si mantenemos pulsada la tecla SHIFT, conseguiremos que el ngulo vaya en pasos de 15. Intenta dibujar varias lneas en la ventana de animacin. Luego brralas haciendo clic en cada una de ellas y pulsando la tecla SUPR. Cmo dibujar con el lpiz Haz clic en la herramienta lpiz.

Coloca el puntero en el punto donde quieras empezar a dibujar. Pulsa el botn izquierdo del ratn y sin soltarlo mueve el ratn hasta que consigas el dibujo que quieras hacer. Suelta el botn.

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Si terminamos el dibujo en el mismo lugar en el que empezamos a dibujar, se crear una forma cerrada. Intenta dibujar con el lpiz. Luego borra lo que has hecho haciendo clic en cada dibujo y pulsando la tecla SUPR. Cmo crear curvas de Bezier o polgonos Haz clic en la herramienta curvas de Bezier. 1. Creacin de un polgono:

Coloca el puntero en el punto donde quieras empezar a dibujar. Pulsa el botn izquierdo del ratn para indicar el punto inicial. Dibuja la lnea y haz clic para terminarla. Sigue dibujando y haciendo clic en cada final de lnea. Haz doble clic para terminar o pulsa la tecla ESC.

2. Creacin de una curva de Bezier:


Coloca el puntero en el punto donde quieras empezar a dibujar. Pulsa el botn izquierdo del ratn para indicar el punto inicial. Dibuja la lnea y haz clic para terminarla pero no sueltes el botn del ratn. Arrastra el puntero en direccin de la tangente de la curva que deseas dibujar. Suelta el botn del ratn y desplaza el ratn 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 polgono y practica con las curvas de Bezier. No te preocupes si no te sale bien, es normal y adems se puede corregir muy fcilmente. Lo veremos ms adelante. Artculo por Michel Delise Moreira

Herramientas de Swishmax: cuadrado y crculo


Cmo crear un cuadrado o un rectngulo. Haz clic en la herramienta rectngulo.

Coloca el puntero en el punto donde quieras poner una esquina del rectngulo. Pulsa el botn izquierdo del ratn y sin soltarlo mueve el ratn en diagonal hasta ajustar el tamao del rectngulo. Suelta el botn.

Si quieres que las esquinas sean redondeadas, haz clic en el punto inicial y suelta el botn del ratn. Arrastra el puntero y haz clic en el punto final y no sueltes el botn. Arrastra el puntero
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 4

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

hacia el interior del rectngulo y suelta el botn 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 polgono y practica con las curvas de Bezier. No te preocupes si no te sale bien, es normal y adems se puede corregir muy fcilmente. Lo veremos ms adelante.

Cmo crear una elipse o un crculo. Haz clic en la herramienta crculo.


Coloca el puntero en el punto donde quieras empezar a dibujar la elipse. Haz clic y sin soltar mueve el ratn hasta terminar la elipse. Suelta el botn.

Para dibujar un crculo pulsa y mantn apretada la tecla SHIFT mientras dibujas. Artculo por Michel Delise Moreira

Cmo crear una autoforma en Swishmax


Las autoformas permiten dibujar formas ya creadas. Haz clic y deja pulsado el botn en la herramienta autoforma hasta que aparezcan todas las formas disponibles:

Luego haz clic en la forma deseada. Tenemos las siguientes formas incorporadas: Rectngulo redondeado Corazn Flecha

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Flecha con muesca Flecha izquierda derecha Estrella Polgono Cubo Botn biselado Botn redondeado Recuerda el uso de la tecla SHIFT en el caso que quieras que las proporciones sean exactas. En el caso del rectngulo 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 botn izquierdo del ratn y disminuye con el botn 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 polgono de la misma manera que lo hace la estrella. El punto externo permite girar el polgono.

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 cmo se dibujan formas sencillas. Ahora vamos a ver cmo se modifican una vez dibujadas. Primero tenemos que saber cmo seleccionamos los objetos que hemos dibujado. Para ello tenemos la herramienta seleccin.

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Si tu ventana contiene elementos, brralos seleccionndolos previamente y suprmelos con la tecla SUPR. Dibuja un rectngulo que no sea grande. Mueve el ratn por encima del objeto dibujado hasta que veas Cuando aparece ste smbolo, el programa indica que podemos mover el objeto pulsando el botn izquierdo del ratn y sin soltarlo arrastrando el objeto. Desplaza el rectngulo hasta el centro de la ventana. Localiza en la izquierda de la ventana de animacin la caja de opciones

Escalar Redimensionado Rotacin / Inclinacin Distorsionar Pulsa el botn Escalar y selecciona el rectngulo que dibujaste. Vers que alrededor del rectngulo 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 rectngulo ocupe toda la ventana de la animacin. Siempre que quieras volver a un estado anterior puedes usar la combinacin de teclas CTRL-Z y en caso contrario usa CTRL-Y. Acabamos de aprender a usar el botn Escalar. Ahora pulsa el botn de Redimensionar y vuelve a ajustar el rectngulo hasta que ocupe el centro de la ventana como lo tenas antes. Vers 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 cmo 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 tamao. Artculo por Michel Delise Moreira

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 pestaa 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 lnea que aparece como ejemplo. Una vez seleccionado el tipo de lnea, aparecer a la derecha una casilla para indicar qu grosor queremos. Pon el valor 5. Observa cmo ahora el rectngulo que dibujaste tiene una lnea alrededor de color negro. Redimensiona su grosor. el objeto aumentando su tamao. Observa que el contorno negro no vara

Pulsa la combinacin de teclas CTRL-Z para volver a dejarlo como lo tenas antes. Escoge la herramienta Escalar ahora y haz lo mismo, cambia su tamao y observa el grosor de la lnea que rodea al rectngulo.

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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Vamos a probar ahora la herramienta Rotacin / Inclinacin. Pnchala! Pasa con el puntero del ratn por encima de cada uno de los tiradores. Vers que en las esquinas aparece el siguiente smbolo que indica que pinchando y arrastrando podremos que nos permite inclinar el

girar el rectngulo. En los dems tiradores aparece el smbolo objeto en la direccin que arrastremos.

Prueba las dos opciones inclinando ligeramente el rectngulo y girndolo un poco. Observa que el punto de anclaje est situado en el centro del objeto. Cmo 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
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 9

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Custom... Personalizado Si seleccionamos Custom podemos mover manualmente el punto de anclaje situndonos encima de la y arrastrando a una nueva posicin. Practica con los puntos de anclaje y gira el rectngulo 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 posicin absoluta de X (horizontal) del punto de anclaje del objeto. La Y indica la posicin absoluta de Y (vertical) del punto de anclaje del objeto.

La W indica el tamao en anchura del objeto. La H indica el tamao 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 sern idnticas.

El primer valor refleja el grado de rotacin horizontal relativo a su posicin inicial. El segundo valor refleja el grado de rotacin vertical relativo a su posicin inicial. Cuando se marca la casilla X=Y, los valores en ambas casillas sern idnticas.

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.


Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 10

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Paste reemplaza los valores por los que tiene en memoria. Reset deja los valores originales. Nos queda por ver la herramienta distorsionar. Vemosla: Pincha la herramienta distorsionar. Activa un objeto que tengas en la ventana y tira de sus tiradores Vers que puedes estirar cada tirador y distorsionar el objeto. Bueno ya sabemos cmo 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 combinacin de teclas CTRLN 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 polgono de 3 lados. Gira el polgono 45 grados. Pon un contorno con valor de 3 a la estrella. Debers obtener los siguientes objetos:

Practica por tu cuenta los distintos objetos y transformaciones que ya conoces. Artculo por Michel Delise Moreira

Cmo corregir formas dibujadas manualmente


Haz clic en la herramienta cambiar forma.

Selecciona un objeto dibujado manualmente (no uses autoformas).

Vers que aparecen unos nuevos tiradores ms pequeos que los que hemos visto hasta ahora.
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 11

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Anclaje de unin entre lneas o curvas (Vertex - puntos de modificacin de direccin de la lnea perimtrica del objeto) Anclaje de control de curvas.

Si hemos seleccionado un objeto con curvas, aparecern los dos modelos. Si no existen curvas, slo el tirador blanco aparecer. Cmo se usan? Los tiradores blancos funcionan de un modo parecido a la herramienta distorsionar. Los azules permiten ajustar con ms precisin zonas controladas por tiradores. Hagamos una prueba: Dibuja un crculo 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 crculo. Ojo! No uses el tirador externo ms grande. Usa la tecla SHIFT para que al arrastrar el tirador no vare su altura por el movimiento del ratn. Su aspecto tiene que ser ste:

Intentemos que nuestro dibujo se parezca a una tarta cortada. Haz clic con el botn derecho del ratn en el punto central. Aparecen opciones relativas al Vertex:

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

12

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Cusp Smooth Symmetrical Sharpen Remove Vertex Insert Vertex Slice

forma una cspide unin suave simtrico anguloso elimina el Vertex inserta un Vertex nuevo recorta

Nos interesa eliminar la curva as que seleccionamos la opcin Sharpen

Ahora pulsa CTRL-Z o el botn (debajo de la barra de mens) para dejarlo como lo tenamos 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 animacin saldrn perfectas. Practica ahora con los puntos azules e intenta conseguir que el resultado sea el siguiente:

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

13

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Pulsa CTRL-N sin guardar los cambios. Intenta realizar los siguientes ejercicios partiendo siempre de un crculo. Guarda cada ejercicio en tu carpeta de prcticas con nmeros consecutivos (del 1 al 4).

Artculo por Michel Delise Moreira

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 opcin Smooth del Vertex derecho superior. Fjate que la esquina pierde su ngulo para convertirse en una curva suave. Adems ese punto ahora tiene dos brazos de estiramiento.
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 14

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Cada brazo puede tener su longitud propia pero siempre marcarn los dos el mismo grado de inclinacin. Mueve un punto azul del Vertex mencionado para que veas su funcionamiento. Despus de hacer la prueba, pulsa CTRL-Z para dejarlo como estaba.

Vamos a ver cmo podemos hacer que cada brazo sea totalmente independiente:

Vuelve a activar las opciones del Vertex y escoge la opcin Cusp. De momento no notars 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 inclinacin 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 opcin Symmetrical: Selecciona la opcin Symmetrical del mismo Vertex. En apariencia se parece a la opcin Smooth verdad? Ahora estira y desplaza un punto azul y vers que el otro opuesto tiene la misma inclinacin y la misma longitud. Cmo podramos dejar el cuadrado tal como se encontraba al principio? Qu opcin seleccionamos?

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

15

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Sharpen (anguloso), claro! Hazlo! Ahora elimina ese Vertex con Remove vertex. Obtenemos un tringulo como este:

Tan slo 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 opcin 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 opcin Slice recorta cualquier objeto por dnde nosotros digamos. Vamos a ver cmo se utiliza: Para no marearnos vamos a utilizar el mismo vertex con el que hemos hecho nuestras prcticas (arriba derecha). Selecciona la opcin Slice en ese punto. Mueve el puntero del ratn y observa que ahora aparece una lnea negra que queda anclada al Vortex. Para cortar el objeto tenemos que llevar el extremo de la lnea a cualquier contorno del objeto hasta que aparezca el smbolo o en cualquier otro Vertex y volver a pulsar el botn derecho y seleccionar Slice de nuevo. Intenta cortar el cuadrado como en el ejemplo.

Partiendo del resultado final vamos a probar ms deformaciones. Pon el puntero en el medio de la lnea de corte hasta que veas el smbolo y arrastra hacia la derecha manteniendo pulsada la tecla SHIFT para facilitar su desplazamiento horizontal.

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

16

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Volvamos a su estado anterior pulsando CTRL-Z En el mismo punto de antes vamos a ver sus opciones (botn derecho sobre la lnea)

Vemos que est activada la opcin Linear que no permite curvatura.

Si seleccionamos la opcin Quadratic, conseguiremos que los dos extremos de la lnea estn 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 opcin 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

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

17

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 mnimo 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 crculo y guarda el ejercicio con el nombre 5. 2) Intenta conseguir que ese nuevo crculo sea de nuevo un cuadrado y gurdalo con el nombre 6. 3) Borra los objetos que tengas y dibuja un crculo perfecto. Crtalo por su mitad verticalmente con la opcin adecuada. Gurdalo con el nombre 7. 4) Corrige el medio crculo hasta que consigas que se parezca a una media luna y gurdalo 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 lnea punteada de grosor 1 y guarda el ejercicio con el nombre 10.

Bueno, no te desesperes, cuanto ms practiques, mejor te irn saliendo los ejercicios. Artculo por Michel Delise Moreira

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 (pestaa Shape).

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

18

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Crea un contorno al cuadrado, sin importarte su grosor (recordar el ltimo utilizado). Veamos primero el segundo botn (inferior) Pnchalo 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
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 19

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 botn activa o desactiva una gama de colores compatible con todos los navegadores web. Este botn 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 diseo 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 sera: 10 x 16 + 5 = 165 as que FF sera 15 x 16 + 15 = 255 En el cuadro en cuestin tenemos 3 bloques de 2 dgitos 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 ms visible, en cambio si bajamos su valor, el color ser ms transparente. El valor 0 indica una transparencia total y el valor 100 hace que el

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

20

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 botn 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. Artculo por Michel Delise Moreira

Trabajo con colores en Swishmax II

Pnchalo y aparecer una lista de opciones.

Ve probando mientras explico a continuacin las opciones que iremos viendo. Si activamos la opcin None, desaparecer el color de relleno del objeto convirtindole en

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

21

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

transparente. Prubalo! Solid rellena uniformemente el objeto con un color especfico (opcin 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 cmo funciona el panel de control de degradados. Observamos que debajo del rectngulo 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 rectngulo 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 combinacin:

Al pinchar en esa combinacin, el objeto tendr el siguiente aspecto:


Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 22

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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

Para aadir 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 cmo se elimina un color. Arrastra el cursor blanco y sultalo 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:

Aadir colores Eliminar colores Mover colores Modificar color podemos acceder a los valores del posicionamiento del degradado. har que cualquier transformacin del relleno, vuelva a su origen. har que el relleno quede ntegramente dentro del objeto.

Con el botn El botn La opcin

Haz prcticas con todo lo referente a rellenos graduales. Cmo podemos conseguir que el relleno est en diagonal como en esta muestra?

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

23

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 opcin rotacin de objeto Gira el relleno hasta conseguir el efecto en diagonal Cuando se selecciona la herramienta Transformar objetos. Al seleccionar la opcin escalar o rotar, la transformacin se aplicar al relleno exclusivamente. Los tiradores funcionan del modo tradicional aunque su apariencia sea distinta precisamente para no confundirnos. Intenta dibujar la bandera espaola usando rellenos graduales y guarda el ejercicio con el nombre 11. Radial gradient permite crear un degradado a partir del centro de forma concntrica 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 opcin, primero vamos a dibujar un rectngulo. Seleccionamos esta opcin y Swishmax nos mostrar su logo como ejemplo. Artculo por Michel Delise Moreira

Trabajo con imgenes en SwishMax


Vamos a meter una imagen externa que se encuentra en la carpeta de archivos necesarios.
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 24

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Haz clic en el botn 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 rectngulo.

La imagen original la podemos ver en el cuadro de muestra del panel de control de imagen repetida. El mismo panel tambin nos informa de su tamao: 151 de ancho x 147 de alto. Tambin nos dir la cantidad de colores que tiene: 24 bits Y el tamao que ocupa en memoria: 6 Kb. Para entrar en el panel de propiedades de la imagen elegida tenemos que pulsar el botn Properties o hacer doble clic en la imagen de muestra.

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

25

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En la parte superior izquierda nos encontramos con el panel de valores que representa su posicin, tamao dentro del objeto, ngulo de rotacin, 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 animacin. La casilla Don't Smooth nos permite activar o desactiva el efecto Antialias. Plsalo para ver el efecto. Te resultar difcil apreciarlo as que mira el ejemplo:

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

26

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Esta parte del panel nos permite definir el tipo de compresin y bits de colores en cada punto (pxel)

Ve probando las distintas opciones de compresin y observa su resultado en la imagen de muestra. Cuando selecciones 24 bits/pxel 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 tamao que ocupa en memoria (derecha) antes (original) y despus de comprimir (Exported). Por qu cambiar la compresin de una imagen si su calidad es perfecta? Porque lo que intentamos hacer es una animacin en flash que se visualizar en una pgina web as que si dejamos la imagen tal cual sin comprimir, el tiempo de carga de la animacin puede tardar minutos o pocos segundos si aprendemos a comprimir correctamente la imagen y tal vez sin que se aprecie su compresin. Intenta comprimir la imagen hasta que veas que no se note prdida de calidad y que la casilla que nos indica el tamao final de exportacin sea un nmero muy inferior al tamao original. Cuando hayas terminado el ejercicio pulsa el botn OK y observa el panel

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

27

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 continuacin cmo 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 resolucin (Resolution) haremos que la imagen se vea cada vez ms pixelada (como si usramos una lupa). El botn Reset vuelve a dejar los valores normales. La casilla Transparency nos permite hacer que un color se vea transparente. Activa la casilla Transparency Vers que ahora aparece:

El botn 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).
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 28

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tolerance nos da la opcin de indicar la tolerancia de color semejante. Un valor 0 slo har transparente el color exacto y un valor mximo 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 animacin. Ahora inserta la imagen "swish transparencia.jpg" pero usando el botn sealado abajo. Bscalo arriba, debajo de la barra de mens.

Vers que la imagen se centrar y estar por encima del cuadrado que creaste.

Nuestra intencin 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 botn transparencia. Elige el color amarillo como color transparente. Ajusta la tolerancia hasta que el amarillo del fondo desaparezca. Vers que no es muy fcil usar esta herramienta y tampoco siempre se consigue el efecto deseado pero es recomendable que no la olvides, ya que en algunas imgenes el resultado es

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

29

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

sorprendente. Bueno, dejemos ya el tema de las transparencias as que borra todo y crea de nuevo un rectngulo. Clipped image har que una imagen ajuste su tamao para ocupar el tamao del objeto. Su funcin es la misma que lo que acabamos de ver pero sin repetir la imagen. esta opcin fuerza la imagen para que se ajuste al tamao del objeto. Veamos las opciones que nos quedan por ver del panel de imagen.

El botn 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 imgenes de muestra recordando las ltimas imgenes que hemos usado. El botn Reset Transform deja la imagen con los valores predeterminados sin transformar. Artculo por Michel Delise Moreira

Opciones de visualizacin en SwishMax


En la parte inferior de la barra de herramientas nos encontramos con los botones que nos van a facilitar disear con mayor precisin.

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

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

30

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Selecciona 25% - En este caso veremos el tamao reducido 4 veces al original. Selecciona 500% - En este otro caso la visualizacin es 5 veces mayor.

Prueba los 4 botones que se refieren a la visualizacin y cuando veas que puedas necesitarlos, no dudes en usarlos. Vamos a hacer algunas prcticas con las rejillas. Pulsa el botn que ajusta el porcentaje de visualizacin para que se vea toda la ventana. Activa el botn que activa la rejilla. Aparece una rejilla que no se ver en la animacin pero nos servir para cuadrar objetos dentro de la ventana.

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

31

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ahora crea un cuadrado que ocupe tres casillas en todos sus lados. Usa la rejilla como referencia. An con la ayuda de la rejilla es algo difcil que no nos salgamos de las lneas, as que vamos a activar el efecto rejilla con imn. Activa el botn rejilla con efecto imn. Elimina el cuadrado y vuelve a dibujarlo. Lo tienes? Fcil, no? Arrastra el cuadrado a otra zona y observa cmo el efecto imn har que se adhiera a la rejilla. Bueno, creo que ya es hora que veamos un nuevo panel, el de las guas.

Activa el panel y veamos sus opciones. Nos encontramos con tres apartados, Guides (guas), Grids (rejillas) y Snap (imn).

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

32

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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. Adems del botn visualizar rejilla (show) y el botn imantar (snap) vemos que tambin podemos cambiar el color de la rejilla pulsando el botn correspondiente. Cambiar el color de la rejilla por el color verde y luego vuelve a dejarlo con el color previo que tenamos. 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 imn (las dos opciones) Vamos a ver ahora el apartado superior (Guides) Las guas vienen a ser como rejillas personalizables y no tienen relacin con las rejillas. Cambia el color de las guas por el color negro. Para usar las guas, es recomendable que sean visibles las reglas verticales y horizontales. En principio ya deberan de estar activadas pero para que sepas cmo activarlas o desactivarlas, pulsa el botn Ruler y deja que se vean las reglas.

Si movemos el puntero dentro de la ventana de animacin, podemos observar que en las reglas se puede ver la posicin actual del mismo puntero. Cmo se crean lneas guas? 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 mtodo: Calcula ms o menos el valor medio de tu regla horizontal y haz un clic all. Si te ha salido bien vers una lnea vertical que atraviesa toda la ventana. Mueve el puntero hacia esa gua (dentro de la ventana) y arrstrala hacia otro punto. Se podr
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 33

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

mover cuando veas que el puntero cambia a una flecha doble. Dependiendo de la gua que intentes mover, vers el puntero as:

Crea otra gua pero ahora que sea horizontal as que haz clic en la regla vertical (en la mitad de la regla) Arrastra las dos guas para que queden cruzadas en el centro de la ventana. Si usas la tecla SHIFT, tanto para crear o para arrastrar una gua, la lnea se alinear a la regla. Segundo mtodo: Para crear una gua, coloca el puntero sobre la regla y arrastra el puntero hacia el interior de la ventana. Prueba este segundo mtodo para enmarcar todo el cuadrado hasta que te quede as:

Si quieres ver u ocultar las guas, pulsa el botn

pero de momento djalas visibles.

Arrastra el cuadrado hasta que quede ms o menos como aqu:

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

34

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Intenta arrastrarlo de nuevo como para dejarlo en el mismo sitio de antes. Qu herramienta nos vendra bien para ejecutar este ltimo paso? El imn de guas! Pulsa la herramienta imn de guas Buen invento, verdad? Para que las guas no se puedan mover accidentalmente, tenemos el botn bloquea las guas o las desbloquea si lo desactivamos. que y ajusta de nuevo la posicin del cuadrado.

El botn elimina todas las guas que hemos creado. No lo pulses!, quiero que veas cmo se elimina una gua antes de eliminar todas las guas de golpe. Arrastra una gua cualquiera hacia fuera de la ventana y desaparecer. Ahora ya puedes eliminarlas todas de golpe con el botn adecuado para ello. Artculo por Michel Delise Moreira

Opciones de visualizacin en SwishMax II


Vamos a ver ahora el apartado inferior (Snap) Crea otro cuadrado pero en color azul.

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

35

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Intenta juntar los bordes de los dos cuadrados. Vers que no es nada fcil 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 continuacin:

A mayor valor ms 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 imn de objetos funcione, vamos a activar el botn imantar al objeto Vuelve a probar mover un cuadrado y acrcate a los lados del otro cuadrado para ver el efecto imn funcionando. Prueba con distintos valores de tolerancia y vers que cuanto menor ms 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 botn imantar al pxel para poder ver su efecto. necesitaremos ampliar la zona al menos un 500%

Desactiva el botn imantar al objeto y activa el botn imantar al pxel. Aumenta el factor de visualizacin al 500% o ms 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 guas, vamos a intentar dibujar otra vez la bandera de Espaa pero esta vez usando 3 objetos. Borra todo lo que tengas y sigue mis pasos: Primero vamos a definir el tamao total de la ventana de la animacin. Aunque no hayamos visto cmo hacerlo, definir el tamao no es nada difcil.

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

36

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Activa la pestaa 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 visualizacin al 100% Dibuja un cuadrado. Ahora vamos a modificar sus parmetros 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 pxeles y una altura de 50. Ya tenemos el rectngulo 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 rectngulos idnticos. Crea una gua horizontal en el pxel 50 y otra en el pxel 200. Crea otra gua vertical en el pxel 50. Mi intencin es dejar la gua vertical en la posicin 25 pero al no verse claramente en la regla, usaremos la barra de estado que nos indicar dnde nos encontramos. Veamos cmo hacerlo: Por si no sabes dnde 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 gua vertical creada, vers que aparece el valor 50.0 . Arrastra la gua 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 ratn no es muy bueno.
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 37

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Activa el panel Guides y comprueba que est seleccionada una tolerancia de 6. Activa el imn de guas y arrastra los rectngulos para que queden de la siguiente manera:

Bueno ya tenemos los bordes, ahora nos queda por crear el centro amarillo. Crea un rectngulo que quede en la zona central y le pones el color amarillo. Vers que al intentar crear el cuadrado, no encontrars dificultad en la zona inferior pero si no tenemos activada el imn de objetos, nos resultar difcil cuadrarlo por la derecha y abajo. As que si no tienes activado el imn de objetos, actvalo y termina el dibujo para que quede perfecto. Ahora observa el panel de la izquierda y vers 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, vers que en la ventana de animacin la forma se selecciona tambin. Prueba ir seleccionando una a una y comprobar su funcionamiento. Elimina las guas usando el botn apropiado. Mi intencin ahora es desplazar la bandera y dejarla en el centro de la animacin. No lo intentes hasta que te explique cmo hacerlo. Recuerda que cada objeto es independiente y si intentas arrastrar uno por uno, te costar
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 38

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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:

Cmo 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, podrs ir seleccionando los objetos que quieras, marcndolos o desmarcndolos. Ahora intenta mover toda la bandera pero hazlo slo 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 fcil centrarla es porque no tienes activado el botn objeto as que actvalo y trata de centrar la bandera hasta que te quede as: Guarda el ejercicio con el nombre 12. Crees que podras hacer que la bandera sea ms pequea? Intntalo.

imantar al

Supongo que no lo habrs 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. Cmo podremos solucionarlo? Agrupando los 3 objetos en 1 solo. Veamos cmo hacerlo. Una vez que estn seleccionados los 3 objetos pulsaremos CTRL-G (grupo) y veremos que en el panel izquierdo aparece ahora:
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 39

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Vers que delante de Group tenemos el signo + que nos indica que dentro del grupo hay objetos. Pulsa el signo ms que aparece all.

Vers que ahora estn dentro de Group los 3 objetos que tenamos antes. Ahora para conseguir reducir el tamao de la bandera, tan slo tenemos que seleccionar del panel de la izquierda Group y reducir su tamao con los tiradores. Reduce el tamao de la bandera y recuerda usar la tecla SHIFT al hacerlo para que las proporciones no cambien. Si quieres seleccionar un objeto del grupo, seleccinalo directamente del panel izquierdo y asegrate 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 slo trabaje con el grupo o bien asegrate que el puntero tenga el aspecto Me gustara ms que los nombres de los objetos fuesen ms 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. Artculo por Michel Delise Moreira

Fusin de objetos en SwishMax


Qu ventaja tiene fusionar objetos? Obtener una forma nica que adems de ser ms fcil de manipular, tambin reduce el tamao final de la animacin.

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

40

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Vamos a partir de un documento nuevo y practicar la fusin 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 estn por encima de otros objetos, que tengan el mismo color de relleno, queden transparentes por dentro? De momento contesta que NO. Enseguida vers que ahora tus dos objetos forman uno solo. Supongo que estars deseando ver qu ocurrira si hubisemos contestado S. Vamos a probarlo. Borra todo lo que hay y crea un cuadrado Copia el cuadrado con CTRL-C y pgalo con CTRL-V Pon un cuadrado encima del otro para que queden ms o menos como aqu:

Ahora fusiona los dos objetos, contestando que S a la pregunta que te formular el programa. El resultado final debera de ser el siguiente:

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

41

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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 crearn zonas transparentes.

Intenta dibujar un botn de camisa con 4 agujeros transparentes.

Artculo por Michel Delise Moreira

Orden de los objetos en SwishMax


Veamos un ejemplo: Dibuja un cuadrado y un crculo, cada uno con un color diferente. Arrastra uno de ellos por encima del el otro y vers el orden de los objetos. Si te fijas en el panel de la izquierda, vers como el objeto que se encuentre arriba en la lista, corresponde al ltimo creado y se encuentra por encima de los dems objetos. Cambia el nombre a los objetos poniendo cuadrado y crculo respectivamente. Para cambiar el orden, tan slo tienes que seleccionar el objeto y hacer clic en la flechita que corresponda para hacerlo subir o bajar un nivel. Mira este ejemplo:

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

42

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Est seleccionado el objeto 2. En la parte superior estn 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. Tambin puedes cambiar el orden de los objetos arrastrando hacia arriba o hacia abajo el objeto seleccionado. Si lo haces correctamente, el resultado debera 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! Slo en la pantalla, en la animacin 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 ningn 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.
Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 43

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Cuando seleccionamos la herramienta mano desplazar al mismo tiempo la escena.

, podremos mover el objeto seleccionado y

Para probar esta herramienta, amplia la zona de trabajo a 400%, luego intenta desplazar un objeto que veas. Vers que slo el objeto se desplaza. Si ahora activas la herramienta mano, podrs 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 enmarcacin. Si te fijas an nos quedan dos herramientas ms por ver pero lo haremos ms tarde ya que de momento no tienen que ver con dibujar. Creo que ya es la hora que empecemos a crear una pequea animacin. 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 parmetros: Anchura=400, Altura=300, Frame rate=20 Casilla Stop playing (parar la animacin al terminar la pelcula) activada. Ms tarde explicar qu es el Frame rate. Pulsa el botn de visualizacin completa ajustando el % automticamente. Recordemos que vamos a crear una pelcula (Movie) y que dentro de la pelcula podemos tener una o ms escenas (Scene). Ahora quiero que te fijes en la lnea de tiempo (arriba del todo)

En la parte superior vemos una regla que nos indica los cuadros (frames) de una animacin. En este caso estamos en la posicin 1 de la escena 1. Correcto? Dibuja un cuadrado que tenga cada lado el valor 50 y djalo en la esquina superior izquierda de la ventana de animacin. Puedes usar la opcin Imantar al objeto para que te sea ms cmodo ajustarlo en la esquina. Al objeto creado, ponle el nombre "cuadrado". Ahora tendremos en la lnea de tiempo lo siguiente:

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

44

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Pon el puntero encima del cuadrito azul (cuadro 1 de la lnea Cuadrado) y pulsa el botn derecho del ratn para ver el men contextual.

Selecciona la opcin 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 smbolo objeto. Comprueba el resultado: en el puntero, sino modificaras la posicin del centro del

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

45

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ahora vamos a analizar la lnea 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 animacin creada. El programa ha creado 10 cuadros que harn que el cuadrado parta del lado superior izquierdo y vaya progresivamente hacia la derecha inferior. Observa tambin que el cuadrado tiene los tiradores de color gris cuando no se encuentra al inicio o al final de la animacin. Adems si intentsemos arrastrar el cuadrado, no nos lo permitira el programa. Si en algn momento pierdes el control, pulsa en la lnea de tiempo el objeto "cuadrado".

Qu quiere decirnos esto? Que slo podremos modificar o bien el punto de partida (tiradores blancos) o el punto final (keyframe) que aparece con tiradores rojos. Ve a la posicin 10 y arrastra el objeto hacia la derecha superior. Observa cmo la animacin se corrige en funcin del punto final.

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

46

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Y si quisiramos curvar la animacin? Fcil! Lo que haremos es crear en la posicin 5 un nuevo Keyframe. Coloca el puntero encima de la posicin 5 pero referente al objeto, no a la regla o lnea de tiempo. Usa el botn derecho y selecciona Insert Keyframe

Arrastra ahora el objeto hacia el centro de la ventana. Has obtenido el siguiente resultado?

Arrastra ahora la animacin (izquierda y derecha) desde la lnea de tiempo y observa el cambio producido.

Artculo por Michel Delise Moreira


Manual sobre Swishmax: www.desarrolloweb.com/manuales/swishmax.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 47

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

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

48

También podría gustarte