Ejemplo prctico de diseo con Swish

Swish es una herramienta fcil de usar que permite producir en pocos minutos complejas animaciones
con texto e imgenes. Contempla ms de 150 efectos especiales: Aparecer, Desaparecer, Giro 3D,
Vrtice, Onda, etc. que se pueden aplicar a un cuadro de texto o a una imagen. Las animaciones
producidas se pueden importar desde Flash para incorporarlas a nuestra pelcula.

Al pulsar este botn, se muestra el cuadro de dilogo Descarga de archivos. Pulsa el botn Abrir para continuar la instalacin.

1
Abre Swish haciendo doble clic sobre su icono en el escritorio
2
Clic en el botn Insertar Texto de la barra de herramientas o bien Insertar >Texto. Se insertar
una nueva capa que muestra el cuadro de texto

Botn Texto para insertar un cuadro

3
En la ventana Texto teclea el texto. En este caso es "Bienvenidos". En este cuadro de dilogo es
posible definir previamente el tipo de fuente, tamao, orientacin del texto, alineacin, color, etc.
4
Para insertar un efecto animado selecciona Insertar > Efectos > ... Prueba con un efecto
cualquiera: Giro 3D, Vrtice, Explosin, Onda, etc. En la ventana que se despliega puedes
definir ciertos parmetros de esta animacin. Clic en el botn Cerrar de la ventana para concluir.
5
Para visualizar el efecto haz clic en el botn Reproducir de la barra de herramientas.

Linea de tiempo de la animacin de texto realizada con Swish

6
Archivo > Exportar > SWF para guardar esta animacin en un archivo SWF en el disco. Por
ejemplo en la carpeta Mis documentos.
7
Cerrar el programa Swish y abrir Flash.
8
Desde Flash , Archivo > Importar > Importar a escenario para importar el archivo SWF que
hemos creado con Swish. Ntese que los fotogramas de la animacin se insertan en la capa activa
y en la biblioteca aparecen los smbolos grficos que contienen las letras animadas del rtulo
animado.

Nota:
Este texto animado se puede importar a un smbolo de Clip de Pelcula mediante Archivo >
Importar > Importar a escenario durante la edicin de un smbolo de este tipo. De esta forma
se podr situar el clip que contiene el texto animado en cualquier parte de la pelcula principal. No
obstante se reproducir de forma contnua con independencia de la lnea de tiempo principal.
Swish no viene integrado con Flash. Es un programa independiente fabricado por la empresa DJJ
Holdings. Hemos incluido este breve apunte en el Curso por su utilidad y sencillez en la animacin
de textos para nuestras pelculas de Flash. Algunos docentes utilizan este programa para el diseo
web y multimedia en lugar de Flash ya que ofrece ciertas prestaciones (muchas ms de las vistas
aqu) y es ms fcil de manejar.

Animacin caras con Swishmax no solo con Flash puedes animar

Vimos este tutorial realizado en Flash y algunas personas nos preguntaron si se poda
hacer en Swish y la respuesta es si.
El poder que tiene Swishmax es muy parecida a la de Flash asi que aqu les dejamos
este tutorial en la web. No olviden visitar las referencias
PASO 1
Crear un nuevo documento de Swishmax.

Animacin caras con Swishmax

PASO 2
Vamos a la ventana properties al botn Movie Properties y aplicamos los valores que
se ven en la imagen.

Animacin caras con Swishmax

PASO 3
Con la herramienta Pen Tool vamos a crear la forma de la cara de nuestro personaje
dibujando una forma como la que se ve en la imagen con un color de relleno #D5A866
y una lnea de 7 pts.

Animacin caras con Swishmax

PASO 4
Con la herramienta Pen Tool vamos a crear la forma de la oreja como se observa en la
imagen.

Animacin caras con Swishmax

PASO 5
Con la herramienta Pen Tool vamos a aplicarle detalle a la oreja con unas formas como
se ve en la imagen.

Animacin caras con Swishmax

PASO 6
Con la herramienta Pen Tool vamos a crear la forma de la papada como se observa en
la imagen.

Animacin caras con Swishmax

PASO 7
Ahora dibujamos una forma de color negro para darle mayor realce a nuestro dibujo.

Animacin caras con Swishmax

PASO 8
Ahora vamos a dibujar en el centro de la cara una especie de letra U como la que se
ve en la imagen.

Animacin caras con Swishmax

PASO 9
Ahora vamos a crear una forma como la que se ve en la imagen esto va a hacer la
boca de nuestro personaje.

Animacin caras con Swishmax

PASO 10
Con la herramienta Pen Tool dibujamos una forma como la que se ve en la imagen
para darle un mejor acabado a la boca.

Animacin caras con Swishmax

PASO 11
Por ultimo dibujamos una forma de color #CD994B para darle realce a la boca.

Animacin caras con Swishmax

PASO 12
Ahora seguimos dibujando creamos la mejilla de nuestro personaje como se ve en la
imagen.

Animacin caras con Swishmax

PASO 13
Con la ayuda de la herramienta
elipse Tool vamos a crear la forma
de un ojo como se ve en la imagen.
Animacin caras con Swishmax
PASO 14
Con la herramienta Pen Tool vamos
a crear una forma como la que se
ve en la imagen con un color de
relleno negro y una opacidad de
30%.

Animacin caras con Swishmax

PASO 15
Ahora con la herramienta Pen tool dibujamos la forma de la nariz como se observa en
la imagen.

Animacin caras con Swishmax

PASO 16
Ahora dibujamos otro ojo como se ve en la imagen.

Animacin caras con Swishmax

PASO 17
Ya tenemos nuestra cara finalizada ahora vamos a agrupar cada parte de nuestro
mueco en grupos haciendo clic derecho sobre ello y luego en la opcin Grouping
Group as Group y renombramos cada grupo con el nombre de cada parte de la cara.

Animacin caras con Swishmax

PASO 18
Ya finalizado nos debera de quedar como se muestra en la imagen.

Animacin caras con Swishmax

PASO 19
Ahora seleccionamos el grupo de la oreja y vamos a la ventana Transform y colocamos
el punto de referencia en la esquina superior izquierda como se ven en la imagen.

Animacin caras con Swishmax

PASO 20
Ahora vamos a nuestra Timeline y vamos a colocar un movimiento de 13 frames u
vamos a mover nuestra oreja hacia abajo como se ve en la imagen.

Animacin caras con Swishmax

PASO 21
Ahora vamos a agregar un movimiento de 17 frames y vamos a moverla a su posicin
original.

Animacin caras con Swishmax

PASO 22
Ahora al grupo llamado debajo de la nariz vamos a colocar el punto de referencia en la
esquina superior izquierda y vamos a agregarle un movimiento de 15 frames y con la
herramienta free Tranform Tool vamos a girarlo en el sentido de las agujas del reloj
como se ve en la imagen.

Animacin caras con Swishmax

PASO 23
Agregamos un movimiento de 15 frames y lo regresamos a su posicin original

Animacin caras con Swishmax

PASO 24
Ahora al grupo Boca vamos a colocarle un movimiento de 15 frames y vamos a mover
nuestro grupo como se ve en la imagen.

Animacin caras con Swishmax

PASO 25
Ahora agregamos un movimiento de 15 frames y regresamos a su posicin inicial.

Animacin caras con Swishmax

PASO 26
Al grupo de la mejilla vamos a agregarle un movimiento circular con varios
movimientos como se ve en la imagen.

Animacin caras con Swishmax

PASO 27
Ahora a nuestro grupo del ojo izquierdo vamos a agregarle un movimiento de 15
frames y vamos a moverlo un poco hacia arriba.

Animacin caras con Swishmax

PASO 28
Vamos a agregarle un movimiento de 15 frames y vamos a regresarlo a su posicin
original

Animacin caras con Swishmax

PASO 29
Al grupo sombra del ojo izquierdo vamos a agregarle un movimiento de 15 frames y
vamos a mover nuestro trazo como se ve en la imagen.

Animacin caras con Swishmax

PASO 30
Ahora agregamos un movimiento de 15 frames ms y regresamos el trazo a su
posicin inicial.

Animacin caras con Swishmax

PASO 31
Ahora vamos al grupo Nariz y vamos a agregarle un movimiento de 15 frames y
vamos a moverla como se ve en la imagen.

Animacin caras con Swishmax

PASO 32
Ahora vamos a agregarle un movimiento de 15 frames ms y regresamos el grupo
nariz a su posicin inicial.

Animacin caras con Swishmax

PASO 33
Ahora vamos al grupo ojo derecho y vamos a agregarle un movimiento de 15 frames y
vamos a moverlo un poco hacia arriba para que nos quede como se ve en la imagen.

Animacin caras con Swishmax

PASO 34
Ahora vamos al grupo sombra ojo derecho y vamos a agregarle un movimiento de 15
frames y la movemos hacia abajo como se ve en la imagen.

Animacin caras con Swishmax

PASO 35
Agregamos un movimiento de 15 frames ms y la movemos hacia su posicin inicial.

Animacin caras con Swishmax

PASO 36
Ya en este punto tenemos la animacin como se ven en este ejemplo

PASO 37
Ahora vamos a la ventana Outline y seleccionamos todos nuestros grupo y damos clic
derecho sobre ellos y luego vamos a la opcin Grouping Group as Movie Clip.

Animacin caras con Swishmax

PASO 38
Ahora nuevamente vamos al aventana Outline y damos clic derecho sobre nuestro
movie clip y vamos a la opcin Grouping Group as Movie Clip para agruparlo
nuevamente en un nuevo movie clip.

Animacin caras con Swishmax

PASO 39
Ahora vamos a desplegar nuestro movie clip y vamos a nuestra timeline y a nuestro
segundo movie clip vamos a agregarle un movimiento de 15 frames como se ve en la
imagen.

Animacin caras con Swishmax

PASO 40
Con la herramienta Free Tranform Tool vamos a hacer la cabeza un poco mas grande
como se observa en la imagen.

Animacin caras con Swishmax

PASO 41
Ahora agregamos un movimiento de 15 frames ms y regresamos la casa a su tamao
original.

Animacin caras con Swishmax

PASO 42
Final ya tenemos nuestra cara lista con animacin, podemos crear todas las caras que
queramos, como se ve en el ejemplo.

Caricatura de Sol Illustrator

Paso 1

Crear un nuevo documento y con la herramienta Elipse (L), crear una elipse.

Paso 2

Llene la elipse con un degradado radial desde el panel Degradado. En el panel

Degradado, cambie el nivel de color por primera vez en el gradiente de un color
naranja claro y cambiar la parada del segundo color a un color naranja. A
continuacin, desde el panel Degradado, seleccione el primer color naranja claro
detener y cambiar la ubicacin a 43. Seleccione la Middlepoint en el control deslizante
de degradado y cambiar la ubicacin a 60. Con la herramienta degradado (G) mover
el centro de la pendiente ligeramente hacia arriba y hacia la derecha.

Paso 3
Crear una nueva elipse y lo rellenamos con un degradado radial. Haga el nivel de color
por primera vez en el blanco y el color gradiente de segunda parada en un color gris
claro. Cambiar la ubicacin de Middlepoint del degradado a 87.

Paso 4

Crear una nueva elipse ms pequea en el centro ya la derecha de la elipse

anterior. Llene la elipse con un degradado radial con el color de la primera parada una
luz de color cian y el segundo color detener un oscuro color cian. Cambiar la ubicacin
de Middlepoint del degradado a 87.

Paso 5

Crear otra elipse en el centro de la elipse anterior y lo rellenamos de negro. A

continuacin, cree otras dos ms pequeas elipses blancas y colocarlos sobre la elipse
negro. Ahora tenemos un ojo!

Paso 6

Seleccione la elipse ojo blanco, Copiar (Ctrl + C) y Pegar detrs (Ctrl + B). Con la copia
seleccionado, moverlo hacia arriba un poco. Cambiar el relleno de la elipse a un color
naranja oscuro. Seleccione la elipse blanca de nuevo, Copiar (Ctrl + C) y Pegar detrs
(Ctrl + B). Esta vez, mover la copia ligeramente hacia abajo y cambiar el color a un
color amarillo claro.

Paso 7

Seleccionar todas las formas de los ojos, Copiar (Ctrl + C) y Pegar en Frente (Comando
+ F). Con las copias seleccionadas, moverlos a la derecha de la elipse principal y de
bajar un poco con la herramienta Seleccin (V).

Paso 8
Con la herramienta Rectngulo (M) crear un rectngulo sobre la anchura de la forma
del ojo y alrededor de un cuarto de su altura.

Paso 9

Ir Efectos> Estilizar> Redondear vrtices y en el dilogo de esquinas redondas,

cambiar el radio a 10 px. El radio puede cambiar dependiendo de la dimensin de su
obra de arte. Simplemente juega hasta que obtengas algo similar a la imagen de vista
previa a continuacin. A continuacin, vaya Object> Expand Appearance.

Paso 10

Ir Efectos> Arco> Warp. Con las opciones de deformacin de dilogo abierto,

asegrese de que el botn radial en horizontal seleccionado, cambie el porcentaje de

curva a 25, y cambiar la distorsin horizontal a 40. A continuacin, vaya Object>

Expand Appearance.

Paso 11

Cambiar el relleno de la forma retorcida con un degradado lineal. Haga el nivel de

color por primera vez en el gradiente de un color rojo-marrn y el color segunda
parada en un oscuro color marrn rojizo. Con la herramienta degradado (G) ajustar el
gradiente por lo que la parte ms oscura del gradiente se encuentra en la parte
inferior de la forma.

Paso 12

Copia (Ctrl + C) la forma de las cejas y Pegar detrs (Ctrl + B). Con la copia
seleccionada, se mueven hacia abajo y ligeramente hacia la izquierda. Cambiar el
relleno de la copia de un color naranja oscuro.

Paso 13

Con ambas formas de la ceja seleccionado, rotarlas ligeramente hacia la izquierda con
la herramienta Seleccin (V). Copia (Ctrl + C) las formas de la ceja y Pegar en Frente
(Comando + F). Con la copia seleccionada, vaya Objeto> Transformar> Reflejar. En el

cuadro de dilogo refleja, seleccione el botn radial vertical y pulse Aceptar. A

continuacin, se mueven las copias para el otro lado de la cara por encima del otro
ojo. Seleccione la sombra naranja oscuro de las copias y moverlo el lado izquierdo de
la ceja.

Paso 14

Crear un elipse sobre el tamao de uno de los ojos y lo coloca en medio de los ojos
hacia la parte inferior.

Paso 15

Llene la nueva elipse con un degradado radial. Para este degradado vamos a agregar
una parada ms color, haciendo un total de tres paradas de color en el
degradado. Para ello, haga clic en el centro del regulador de degradado del panel
Degradado. A continuacin, cambie el nivel de color primero en un color ms claro que
tu color naranja de color naranja claro original de la forma de sol principal, cambiar el
color del medio a la misma deje de color naranja como la forma de sol el cuerpo
principal, y cambiar el color de la ltima parada a la misma luz naranja como la forma
principal de dom. Cambiar el Middlepoint primero de la parada del primer color de dos
a 65 aos. Por ltimo, con la herramienta Degradado (G), escalar la pendiente por lo
que el centro de la pendiente est en la esquina superior derecha de la elipse.

Paso 16

Copia (Ctrl + C) la forma de la nariz y Pegar detrs (Ctrl + B). Con la herramienta de
seleccin directa (A) tomar el punto de anclaje inferior y arrastre hacia abajo ya la
izquierda, creando una sombra.

Paso 17

Crear un elipse alrededor de la mitad del tamao de la forma de sol principal. Dibuje
un rectngulo que cubra la mitad superior de la elipse. Seleccione las dos formas y
pulse el botn frontal de menos en el panel de Pathfinder.

Paso 18

Llenar la forma de la boca nueva con un gradiente lineal con el color de la primera
parada de un color rojo-marrn y el segundo color ms oscuro detener a un color
marrn rojizo. Con la herramienta degradado (G) ajustar el fondo gradiente hasta por
lo que la parte ms oscura del gradiente se encuentra en la parte superior de la boca.

Paso 19
Copia (Ctrl + C) la forma de la boca y pegar en la espalda (Comando + B). Mueva la
copia un poco y cambiar el color a tu color naranja oscuro. Copia (Ctrl + C) la forma de
la boca y pegar en la espalda (Comando + B) otra vez. Esta vez, mover la forma abajo
y cambiar el relleno a su color naranja claro.

Paso 20
Crear un elipse oblonga que es aproximadamente un tercio del tamao de la
boca. Copia (Ctrl + C) de la elipse y Pegar en Frente (Comando + F). Mueva la copia
ligeramente hacia abajo y aumentar alrededor de un cuarto del tamao original. A
continuacin, seleccione las dos formas y pulse el botn frontal Menos desde el panel
de Pathfinder.

Paso 21

Llene la forma nueva con el color naranja oscuro. Copia (Ctrl + C) la forma y Pegar
detrs (Ctrl + B). A continuacin, la escala de la forma de copiar y cambiar el color a
tu color naranja claro. Centro de las dos formas en la parte inferior de las formas de la
boca ya se ha creado.

Paso 22

Seleccione las nuevas formas curvas que ha creado, Copiar (Ctrl + C) y Pegar en
Frente (Comando + F). Escala hacia abajo y girar las formas a la izquierda con la
herramienta de seleccin (V), a continuacin, colocarlos en el lado izquierdo superior
de la boca. A continuacin, Copiar (Ctrl + C) las formas originales curvas, Pegar en
Frente (Comando + F), rotar y escalar las formas a la derecha, y el lugar en el lado
derecho de la forma de la boca.

Paso 23

Seleccione la forma principal de la boca oscura, Copiar (Ctrl + C) y Pegar en Frente

(Comando + F).Con la herramienta Seleccin (V), mantenga pulsada la tecla Mays y
la escala de la parte inferior copia un poco. An con la herramienta Seleccin (V),
aplastar a la forma copiada de la de abajo hacia arriba hasta que la copia es de
aproximadamente una cuarta parte del tamao original. Cambiar el nivel de color por
primera vez en el degradado lineal de blanco y el segundo a un color naranja
claro.Adems, cambiar la ubicacin de la Middlepoint a 80.

Paso 24

Con la herramienta Estrella (que se encuentra en las herramientas de forma en el

panel Herramientas), haga clic en la mesa de trabajo para abrir el dilogo de
Estrellas. En el cuadro de dilogo de Cambiar radio 1 a 30 px, px Radio 2 a 15, y el
punto al 3 (de sus cotas de radio puede ser diferente dependiendo de la dimensin de
su obra de arte, slo asegrese de que Radio 2 es la mitad del tamao de la Radio
1) . Aplasta la forma de tringulo horizontal a la mitad de su tamao original. Coloque
el tringulo sobre el centro de los dientes a la derecha. A continuacin, seleccione los
dientes y el tringulo y pulse el botn frontal Menos desde el panel de Pathfinder.

Paso 25

Con la herramienta Elipse (L) crear dos elipse hacia la parte inferior de la forma de la
boca, haciendo un medio seguro de las elipses estn colgando fuera de la forma de la
boca. Seleccione la forma principal de la boca oscura, Copiar (Ctrl + C) y Pegar en
Frente (Comando + F) dos veces. Seleccione una de las copias, seleccione la elipse
derecha, y pulse el botn Interseccin desde el panel de Pathfinder.Repita lo mismo
para la elipse izquierda. Llene los dos elipses con un gradiente lineal con el color de la
primera parada un rosa claro y el color de la segunda parada de un color
rosado. Ajustar por separado cada una gradiente de elipse con la herramienta
Degradado (G) de la parte superior derecha de la elipse de la parte inferior izquierda.

Paso 26

Seleccione todas las formas de la boca y colocarlos en la cara del sol. A continuacin,
gire la forma de la boca ligeramente hacia la izquierda.

Paso 27

Con la herramienta Estrella, haga clic en la mesa de trabajo para abrir el dilogo de
las Estrellas. Crear una estrella con un radio de 1 de 100 px, un radio de 2 pxeles de
50, y 3 puntos (al igual que antes de estas dimensiones puede ser diferente

dependiendo de su obra de arte). A continuacin, vaya Efectos> Estilizar> Redondear

vrtices y en el dilogo de esquinas redondas, cambiar a la radio a 20 px. Ampliar la
forma y aplastar hacia abajo ligeramente con la herramienta Seleccin (V).

Paso 28

Llene el tringulo con un degradado de color tres paradas, por lo que el color de la
primera parada de un color naranja claro, la segunda de color naranja, y el tercero, un
oscuro color naranja. Seleccione la Middlepoint entre las dos primeras detenciones de
color y cambiar la ubicacin a 65 aos. A continuacin, cambie la ubicacin de la
parada del segundo color a 60 y de la ubicacin de Middlepoint de los dos ltimos
detencin de color a 15. Ajustar el gradiente de arriba a abajo con la herramienta
Degradado (G).

Paso 29

Haga una copia del tringulo por lo que tiene un total de dos. Con la copia
seleccionada, vaya Efecto> Arco> Warp. En el cuadro de dilogo Opciones de
deformacin, seleccione el botn radial vertical y cambiar el porcentaje de curva a 30
y ampliar la apariencia.

Paso 30

Haga una copia del primer tringulo se mueven, y gire la copia por lo que se irradia
desde la forma de la cara del sol, la creacin de explosiones solares. Asegrese de

que el tringulo est detrs de todas las ilustraciones otra por ir Objeto> Disposicin>
Enviar al fondo. A continuacin, girar y colocar copias de los tringulos, alternando
entre los dos, alrededor del sol. Asegurarse de que todos los tringulos son enviados a
la parte posterior.

Paso 31

Seleccione la forma de sol cara principal, (Ctrl + C) y Pegar detrs (Ctrl + B). Con la
copia seleccionado, moverlo ligeramente hacia abajo y cambiar el color a tu color
naranja oscuro.

Paso 32

Para agregar slo un poco ms de detalle y la diversin al sol, dibujar diferentes

elipses de tamao por encima de las esquinas de la boca. Ya est!

INSERTAR ANIMACIONES EN SWISHMAX

Con Swishmax puedes insertar varios tipos de animaciones, para lograr esto debemos de:

1.- Insertemos un texto

2.- Selecciona tu objeto e identifica el siguiente men:

3.- Al dar clic en este men, podremos elegir el efecto que deseemos aplicar a nuestro objeto que hemos
insertado

4.- Para nuestro ejemplo, daremos clic en la opcin de bucle continuo

5.- Aparecer la siguiente ventana y vamos a seleccionar la opcin de rocas

6.- Observemos los cambios se surgen en la barra de tiempo:

Se agrega una opcin nueva, donde se muestra el nombre del efecto que agregamos asi como a que objeto
agregamos el efecto.
7.- Para ver los efectos que agregamos podremos utilizar la siguiente opcion en la barra de herramientas:

8.- Al presionar play, observaras el efecto funcionando

Puedes agregar o combinar varios efectos a un solo objeto.

Insertar una imagen en Swishmax

Swishmax es un programa con muchas opciones para elaborar animaciones, en esta serie de pasos lograremos
insertar una imagen a nuestra rea de trabajo.

1.- Demos clic en la opcin de insertar de la barra de herramientas:

2.- AL dar clic tendremos las siguientes opciones, y daremos clic en la opcin de importar imagen:

3.- Al dar clic en la opcin de importar imagen, tendremos la siguiente pantalla:

Aqu podremos seleccionar la carpeta donde este guardada la imagen que deseamos insertar, al identificar
dicha imagen, se selecciona y damos la opcin de abrir. Ejemplo:

4.- Al dar el botn abrir, la imagen se insertara en nuestra rea de trabajo

Una vez insertada la imagen podremos manipularla de acuerdo a nuestro diseo

INSERTAR Y EDITAR TEXTO EN SWISHMAX

Escrito en Animaciones Multimedia.

Les comparto esta informacion, agradecemos tus cometnarios y sugerencias

Insertar y editar texto en Swishmax

Swishmax nos permite el insertar y editar texto para poder insertarlo a nuestra animacin, para poder insertar el
texto debemos de:
En la caja de herramientas damos clic en la opcin texto

Posteriormente arrastramos y dibujamos en el rea de trabajo un espacio para escribir el texto

Dentro de este cuadro que dibujamos, podemos escribir lo que necesitemos

Al seleccionar el texto, se activan las opciones de propiedades para poder editar el texto

Aqu podemos cambiar el formato del texto, como el tipo de letra, color, orientacin, etc.

Con estas opciones podremos cambiar en su totalidad el formato para poder mejorar la calidad de nuestras
animaciones

Elementos que integra el sistema multimedia

Texto
Este elemento, Es el mtodo habitual para la comunicacin asncrona entre las personas (el habla lo es para la
comunicacin sncrona). Ha sido la forma tradicional de comunicacin entre las personas y las computadoras.

Se Clasifica en:
Texto sin formato (ASCII)
Texto formateado (RTF, PDF).
Texto lineal e hipertexto (link, ligas, hipervnculos, utilizamos hoy da en internet).
Lenguajes de de programacin para internet (HTML, SGML, XML)

Grficos
Los grficos son utilizados para representar esquemas, planos, dibujos lineales, mapas, diagramas etc. Estos
son formados por una serie de formas bsicas (puntos, segmentos, crculos, cuadros, cilindros, etc.). Se pueden
modificar de muchas maneras diferentes (traslacin, escalado, rotacin, cambio de atributos, colores, tipos de
lnea, tamao, etc.)

Imgenes

Las imgenes se usan para representar fielmente la realidad en un determinado tiempo (fotografas). Son
documentos formados por pixeles y se generan escaneado, tomado fotografa digital, y estos tienden a ser
archivos de gran tamao (pesados).
Existen varios tipos o formatos de imgenes tales como:

.jpg, gif, bmp, png, tga, tif, lbm entre muchos ms.

Vdeo
Se define como la presentacin de un nmero de imgenes por segundo, que crean en el usuario la sensacin
de movimiento. Las imgenes pueden ser sintetizadas (creadas manualmente) o captadas a partir del entorno
(vdeo). Al igual que en el caso de las imgenes estticas, los archivos pueden ser muy pesados, y tienen unas
capacidades de modificacin limitadas.

Existen varios formatos tales como:

Avi, mpeg, mov, rm, wmv, flv

Sonido.
Los sonidos utilizados en un para un sistema multimedia se pueden clasificar en:
Habla.
Msica.
Otros sonidos.

Este tipo de archivos se pueden editar para su manipulacin, (grabacin, edicin y reproduccin)
Dentro de este tambin existen varios formatos, tales como:
Mp3, wmv, mp4, midi

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.

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).
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 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:

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

y ajusta de nuevo la posicin del cuadrado.

Buen invento, verdad?

Para que las guas no se puedan mover accidentalmente, tenemos el botn

que bloquea las

guas o las desbloquea si lo desactivamos.

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.
Opciones de visualizacin en SwishMax II

Por Michel Delise Moreira

22 de agosto de 2007

1 Comentarios

Manuales de aplicaciones

Continuamos viendo las opciones de visualizacin.

Vamos a ver ahora el apartado inferior (Snap)
Crea otro cuadrado pero en color azul.
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

necesitaremos ampliar la zona al menos un 500% para

poder ver su efecto.

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.
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.
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 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

imantar al 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.
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:

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.
Fusin de objetos en SwishMax

Aparte de poder crear un grupo de objetos, tambin podemos

fusionar varios objetos en uno solo.
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.
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:

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.

Orden de los objetos en SwishMax

Por Michel Delise Moreira

04 de septiembre de 2007

4 Comentarios

Manuales de aplicaciones

Cada vez que creemos un objeto, ste estar dispuesto por encima de
los dems.
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:

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.
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. 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:

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

en el puntero, sino modificaras la posicin del centro del objeto.

Comprueba el resultado:

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.
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.