Swish Nivel Iniciación
10
Click here to load reader
Transcript of Swish Nivel Iniciación
BOTON TRANSFORMAR RELLENO Vamos a tatar en este pequeño tutorial uno de los botones que a pesar de estar ahí, yo personalmente JAMÁS había utilizado. El botón es el de Transformación de relleno y ¿qué es eso? 1.- Dibujamos un rectángulo 2.- Le quitamos el borde 3.- Activamos la pestaña Forma 3.- Le aplicamos un degradado lineal 4.- Por defecto aparecen sólo dos colores, negro a la izquierda y blanco a la derecha 5.- Si pinchamos en medio del cuadro de color degradado, veremos que nos aparece un triangulo al poner el cursor sobre ese nuevo triángulo veremos que aparece una mano y se despliega la paleta de color, pues elegimo otro color y para este ejemplo vamos a elegir seis colores. 6.- Pues ahora hacemos clic sobre el botón Transformación de relleno que se encuentra al lado de la línea 7.- Vemos que este botón se queda activado, pero si pulsamos sobre él otra vez vuelve a su estado original, Pero eso de momento no nos interesa. 8.- Pinchamos sobre el rectángulo y vemos que nos aparecen siete tiradores. 9.- ahora sólo es cuestión de probar a mover cada uno de los tiradores y veremos el resultado expectacular que sale. 10.-El tirador del medio también funciona y lo que realmente haces esos tiradores es mover el degradado por el rectángulo. 11.-Ahora cuando todavía tenemos los tiradores en pantalla, probar con el botón rotar/sesgar Marvilloso. 12.-Antes de seguir hay que sesactivar el botón Transformación de de relleo pinchando sobre él. Facil no? javi.ten Salu2
FRAMES EN SWISH COMO USAR SWISH EN UNA PAGINA CON FRAMES Tanto flash como swish nos permite utilizar páginas con frames, en este tutorial vamos a ver como se utilizan en swish. 1.- Creamos un documento html como este <html> <head> </head> <frameset cols="20%,*%"> <frame src="Izquierda.html" name =izq"> <frame src="derecha.html" name ="der"> </fremeset> </html> 2.- Guardamos el documento como Index.html 3.- Abrimos el programa swish y vamos a crear el menú principal, si os fijais en el <frameset cols="20%,*%"> vemos que hemos dividido la pantalla en dos páginas una tiene el 20 porciento de la parte horizontal de la pantalla y la otra el resto, es decir el 80 por ciento. Teniendo en cuenta que la resolución en este ejemplo es 800 de longitud horizontal, vemos que el 20% son 160 pixeles, bueno pues vamos a crear la película de ancho 160, el alto irá en función de las opciones que pongamos en el menú. 4.- Creamos los botones del menu uno encima del otro. 5.- Una vez creados vamos a darles las acciones. 6.-Boton Opción_01 Al presionar Ir a URL y ponemos el nombre de la página html que va a abrir ese botón, en el primer cuadro de texto, en el segundo cuadro de texto que lleva por titulo Destino, debemos de poner der que es el name del frameset de la derecha donde queremos representar nuestras páginas. 7.- Estas mismas acciones pondremos en todos los botones, modificando la página que queremos que aparezca a la derecha. 8.- Lo importante de este tutorial es comprender que en destino hay que poner el ame del frame donde queremos representar la página es lo mismo que cuando usamos html y utilizamos el target.
9.- Ahora sólo queda exportar todas las páginas que hemos creado con swish a html y a funcionar. 10.-Fácil no? XIPXAP Salu2
MASCARA EN SWISH Aqui va un mini tutorial sobre como aplicar mascaras simples con Swish: 1.- Como siempre, abre tu swish y dibuja, un circulo, un cuadrado o utiliza la herramienta beizer para dibujar una forma a tu gusto, el color los bordes, es lo de menos. 2.- El siguiente paso es agruparlo en un sprite, ojo he dicho agruparlo no modificarlo. 3.- Una vez agrupado y abierto el Sprite, activamos la casilla Mascara con un simple clic, dentro del mismo sprite que suponte que hemos dibujado un circulo. 4.- Insertamos un texto y le aplicamos movimiento, tambien puede ser otra forma, o un grafico, u otro sprite con u gif animado como proponia alfini. 5.- Al ejecutar la pelicula vereis que sólo se verá lo que pase o quede por delante del circulo con mascara que hemos creado, es una operacion muy facil y tiene un sinfin de aplicaciones, os pondria por ejemplo el crear un globo terraqueo giratorio, como el del apartado el Desafio, como siempre en funcion de la creatividad del diseñador. 6.- Fácil no? ATMOSFERA7 Salu2
MOVER LA VENTANA DEL NAVEGADOR Este tutorial muestra como desde swish y mediante implementación de Javascrip, podemos mover la ventana del navegador hacia arriba, abajo, derecha e izquierda. 1.- Creamos cuatro botones 2.- Al boton que va a mover la ventana hacia arriba le damos la siguiente Acción Al presionar Elegimos JavaScript Escribimos esto según está moveWindowUp() 3.- Al boton que va a mover la ventana hacia abajo le damos la siguiente Acción Al presionar Elegimos JavaScript Escribimos esto según está moveWindowDown() 4.- Al boton que va a mover la ventana hacia la derecha le damos la siguiente Acción Al presionar Elegimos JavaScript Escribimos esto según está moveWindowRight() 5.- Al boton que va a mover la ventana hacia la Izquierda le damos la siguiente Acción Al presionar Elegimos JavaScript Escribimos esto según está moveWindowLeft() IMPORTANTE: para que esto funcione en la ventana del navegador, ésta no tiene que estar maximizada. 6.- En el fotograma cero de la escena le damos la siguiente acción: Javascript Escribimos esto exactamente function moveWindowLeft() {window.moveBy(-15, 0);window.moveBy(0, 0);}function moveWindowRight() {window.moveBy(15, 0);window.moveBy(0, 0);}function moveWindowUp() {window.moveBy(0, 0);window.moveBy(0, -15);}function moveWindowDown() {window.moveBy(0, 0);window.moveBy(0, 15);} 7.- Sólo queda exportar la película a html SOSER Salu2
INSTANCIAS EN SWISH Este tutorial también se basa en instancias, el efecto que he querido crear ha sido el de cómo si estuviese lloviendo, no es difícial hacerlo. 1.- Lo primero que he creado ha sido una línea y la he girado 45º del plano de las Y para que el efecto fuese como si soplase viento, para girarla con el botón rotar/sesgar y ya está, como la línea por defecto tiene el el centro el punto de control, pues nada, no tenemos que modificar nada más. 2.- Lo siguiente ha sido pulsar con el ratón sobre la barra de menús en Modificar - Agrupar - Agrupar como sprite, le he puesto como nombre gota. ACCIONES Y EFECTOS 3.- Desplegamos el sprite y nos vamos a la linea de tiempos, pero antes hemos de pinchar sobre el objeto de este sprite, es decir, sobre la barra. En la línea e tiempos de la barra, le damos el efecto de Mover con una duración de 5. Marcamos el fotograma que lleva el punto rojo del efecto mover y nos vamos a la pestaña Diseño, de ella escogemos el botón Camino de la animación y pinchamos en un lugar alejado de la línea pero que siga su prolongación. 4.- Nos vamos a la línea de tiempo y en el fotograma 5 del sprite le damos la acción Ir al fotograma cero. Ya tenemos nuestro sprite base del efecto lluvia. CREACIÓN DE LAS INSTANCIAS 5.- Salimos a la escena principal y pulsamos sobre la barra de menús esta vez en Insertar-Instancias, nos saldrá un cuadro de diálogo en el que debemos escoger el nombre del sprite gota. Hemos de crear tantas instancias como consederemos oportuno, estás formarán las gotas de nuestro swish. 6.- Una vez que tenemos las instancias creadas, las distribuimos por la escena de forma aleatoria. 7.- ¿Qué hemos creado? Pues simplemente un grupo de gotas de momento el swish es muy soso, pero no es eso lo que yo quiero hacer, simplemente se han creado copias exactas del sprite gota. 8.- Manteniendo pulsado la tecla Ctrol, vamos picando en cada una de las instacias y del sprite gota, una vez marcados nos vamos a Modificar - Agrupar - Agrupar como sprite y le damos un nombre. 9.- Copiamos este sprite y le pegamos por ejemplo 10 veces, ahora hemos conseguido un conjunto de grupos de gotas, los distribuimos aleatoriamente por la instancia y ya tenemos nuestro efecto Lluvia, que no nos gusta como queda distribuido, pues nada, los volvemos a distribuir o creamos más grupos de gotas. 10.-Fácil no? Javi.ten Salu2
BOTON Y TEXTO EN RELIEVE Boton y texto en relieve Vamos a ver en este pequeño tutorial como hacer que un botón tenga relieve tanto el contenedor como el texto que contiene en los tres estados, es decir Arriba, Sobre y Abajo. Para este ejemplo la película la vamos a dar el color AA AA AA 1.- Creamos un restángulo de color rojo 2.- Le quitamos el borde 3.- Picamos una sola vez sobre el rctángulo para que quede marcado 4.- Hacemos clic sobre el botón línea y elegimos el color negro y como en el rectángulo vemos los tiradores, marcamos una líme desde el centro del tirador superior derecho hasta el centro del tirador superior izquierdo. 5.- Volvemos a marcar el rectángulo para que se vean los tiradores. 6.- Seleccionamos otra vez el boton línea de color negro. 7.- Trazamos una linea desde el centro del tirador inferior derecho hasta el centro del tirador superior derecho. 8.- Seleccionamos otra vez más el rectangulo para que queden visibles los tiradores. 9.- Pulsamos sobre el botón línea y esta vez escogemos el color blanco. 10.-Trazamos una línea desde el centro del tirador inferior derecho hasta el centro del tirador inferior izquierdo. 12.- Volvemos a marcar el rectangulo 13.-Pinchamos sobre el botón línea y de color blanco 14.-Trazamos una línea desde el centro del tirador superior izquierdo hasta el centro del tirador inferior izquierdo. 15.-Con este ya tenemos un objeto en relieve, pero nada más. 16.-Creamos un texto de color negro que va a ir dentro del rectángulo 17.-Copiamos el texto y le pegamos y le damos el color blanco 19.-Pinchamos sobre éste último texto y le desplazamos un poco hacia la derecha y hacia abajo, veremos que ya tenemos un texto con sombra en un objeto con relieve, pero nada más.
20.-Manteniendo pulsada la tecla Ctrl marcamos uno a uno todos los objetos creados hasta el momento, otra manera más rápida de hacerlo es pinchar sobre uno de los objetos de los extremos que aparecen en el cuadro Esquema a la izquierda de la pantalla y manteniendo pulsada la tecla Shift pulsamos sobre el objeto del otro extremo, de esa manera se habrán marcado todos los objetos. 21.-Vamos a la barra de menús y hacemos clic sobre Modificar, Agrupar y Agrupar como Sprite 22.-Se nos despliega el sprite, pero nosotros vamos a cerrarle, una vez cerrado pinchamos sobre él con el botón derecho del ratón, y escogemos convertir en botón. 23.-Vemos que ahora tenemos un boton que contiene cuatro sprites, pertenecientes a cada uno de los cuatro estados. 25.-Vamos al estado de Arriba desplegamos el sprite y borramos todas las líneas con lo cual sólo deberán quedarnos el rectángulo y los dos textos. 26.-En el estado sobre desplegamos el sprite y borramos el texto en negro. Seguidamente marcamos el rectángulo y las líneas y las agrupamos como forma. 27.-Vamos al stado abajo y desplegamos también el sprite, ahora vamos marcamos la primera línea negra y le damos el color blanco y así con las demás, es decir, a las que al principio eran de color negras, las hemos de dar color blanco y a las blancas darles el color negro. 28.-De esta forma tan sencilla tememos un botón que tiene relieve con su texto tambien en relieve. Que cada uno haga las pruebas hasta que saque su tipo de botón. 29.-Fácil no? Javi.ten Salu2
TEXTO TRANSPARENTE Texto Transparente Esta es otra manera de crear una máscara o mejor dicho un texto por el que se ve el fonto sin nada más que dos objetos: 1.- Creamos un rectángulo de color rojo 2.- Creamos un texto del mismo color que el rectángulo 3.- Seleccionamos los dos objetos manteniendo pulsada la tecla Ctrl y pinchando sobre los objetos 4.- Una vez que están marcados los objetos, pinchamos sobre ellos con el botón derecho del ratón y escogemos Agrupar y Agrupar como forma, fijaros que no digo convertir sino agrupar. 5.- Ya tenemos nuestro texto transparente a través del cual podemos ver el fondo. 6.- Fácil no? Javi.ten Salu2
