Tutoriales en la Web

Transicion Swishmax

Posteado el 09. Nov, 2010 por tuto in Swishmax

Este tutorial esta dedicado a Faraon y Jorge quienes pidieron como hacer este efecto de transición y como hacer el mouse over para que desplegue información con Swishmax.
Sabemos que a toda la comunidad les servirá ya que es muy útil para los proyectos web

Este es el efecto lo puedes usar tanto para tus galerías de fotos como para textos. Recuerda darle mouse over a los logos para ver el efecto de deplegado que tiene

Aqui te dejamo lo que aprenderás.

PASO 1
Creamos un nuevo documento de Swishmax en blanco (Blank Movie).

PASO 2
Vamos a la ventana Properties – Botón Movie Properties y en la venta colocamos los valores que se ven en la imagen.

PASO 3
Con la herramienta Rectangle Tool vamos a crear un rectángulo que cubra toda nuestra película.

PASO 4
Ahora con la herramienta Autoshape Tool vamos a dibujar un cuadrado con las esquinas redondeadas como se ven en la imagen.

PASO 5
Vamos a arrastramos la imagen que nos servirá como lateral, esta la trabaje en Photoshop para darle unos efectos de sombra.

PASO 6
Con la herramienta Rectangle tool vamos a crear una forma que nos servirá como máscara así que cubriremos solamente la parte del cuadro redondeado que queremos que se vea.

PASO 7
En la ventana Outline movemos el cuadrado por debajo del rectángulo con las esquinas redondeadas.

PASO 8
Seleccionamos la forma que usaremos como máscara y el cuadrado con las esquinas y los agrupamos en un Movie Clip.

PASO 9
En la ventana Properites le colocamos el nombre de mascara a nuestro Movie Clip y marcamos la opción Use bottom object as mask.

PASO 10
Desplegamos nuestro Movie clip y al cuadro con puntas redondeadas en la Timeline vamos a agregarle un Place.

PASO 11
Ahora le agregamos un movimiento de 11 frames y movemos nuestro cuadro blanco hacia la izquierda.

PASO 12
Agregamos un nuevo movimiento de 12 frames y movemos solo un poco hacia la izquierda nuestro cuado.

PASO 13
Por ultimo agregamos un movimiento de 19 frames y movemos el cuadro a su posición inicial.

PASO 14
En el frame 1 del movie Clip damos clic derecho y vamos a la opción Movie Control – stop().

PASO 15
Repetimos el paso anterior en el frame 52.

PASO 16
Arrastramos a nuestro documento las imágenes de los iconitos de Adobe y los colocamos en la posición que nos guste dentro de nuestro documento.

PASO 17
Vamos a la ventana Outline y seleccionamos las imágenes de los iconos y las agrupamos en un Movie Clip.

PASO 18
En al ventana Propertis al movie clip le colocamos el nombre de logos_1

PASO 19
Desplegamos nuestro Movie Clip y seleccionamos el primer icono y los agrupamos en un Botón.

PASO 20
En la ventana Properties le colocamos el nombre de suite y marcamos la opción Has separate over state y Use bounding box for hit-state.

PASO 21
Desplegamos nuestro botón y en el grupo Over State vamos a escribir el nombre del programa que representa el icono.

PASO 22
Repetimos los pasos anteriores con todos los iconos.

PASO 23
Ahora seleccionamos todos los botones y en la timeline en el frame 51 les agregamos un Fade In a todos.

PASO 24
Movemos los iconos hacia abajo solo un poco.

PASO 25
En el frame 61 agregamos un Stop.

PASO 26
Ahora en el frame 62 a todos los botones les agregamos un Fade Out.

PASO 27
Movemos los botones un poco más hacia abajo.

PASO 28
Colocamos un Stop en el frame 72.

PASO 29
Creamos un nuevo movie clip y lo nombramos logos_2 y colocamos el resto de logotipos que faltan solo que esta vez en el frame 1 agregamos un stop.

PASO 30
Contraemos nuestro Movie Clip y con al herramienta Text Tool vamos a escribir la palabra Logos 1 y Logos 2 y vamos a convertir cada uno de los textos en un botón.

PASO 31
Ahora al botón Logos 1 en la ventana Script vamos a agregarle el siguiente Código Action Script.

Code block

on (press) {
    mascara.gotoAndPlay(2);
    logos_2.gotoAndPlay(62);
    logos_1.gotoAndPlay(2);
 
}

PASO 32
En el botón Logos 2 vamos a agregarle el siguiente Código Action Script.

Code block

on (press) {
    mascara.gotoAndPlay(2);
    logos_1.gotoAndPlay(62);
    logos_2.gotoAndPlay(2);
}

PASO 33
Listo ya tenemos nuestro efecto terminado ahora con el comando Ctrl + T vemos una vista previa de nuestro efecto.

Descarga el editable de transicion Swishmax

Articulos relacionados:

Tags: adobe, Swishmax