Tutoriales en la Web

Doodle Google Hargreaves

Posteado el 09. May, 2011 por tuto in Swishmax

Aqui les dejamos el Doodle de hoy de Google nosotros lo preparamos así en Swishmax

PASO 1
Creamos un nuevo documento de Swishmas en Blanco (Blank Movie).

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

PASO 3
A nuestra película vamos a arrastrar una de las imágenes del Doodle de Roger Hargreaves.

PASO 4
Vamos a la ventana Outline y agrupamos la imagen en un Movie Clip.

PASO 5
Al Movie Clip le colocamos el nombre de imagen_1 y marcamos las opciones Stop playing at end y Use bottom object as mask.

PASO 6
Desplegamos nuestro Movie Clip y dentro de este creamos un cuadrado pequeño como el de la imagen.

PASO 7
Duplicamos el cuadrado y lo acomodamos a lo largo de la imagen.

PASO 8
En la ventana Outline seleccionamos todos los cuadrados y los agrupamos en un Movie Clip.

PASO 9
Le colocamos el nombre de mascara y marcamos la opción Stop playing at end.

PASO 10
Movemos el Movie clip de la máscara por debajo de la imagen.

PASO 11
Desplegamos nuestro Movie y vamos a la Timeline y al primer cuadrado le agregamos un movimiento de 2 frames.

PASO 12
Le agregamos el mismo movimiento a los otros cuadrados como se ve en la imagen.

PASO 13
Ahora fuera de nuestros Movie Clips vamos a dibujar las flechas de nuestro rotador y un cuadro mucho más grande que la imagen.

PASO 14
Movemos el Movie Clip imagen_1 a la parte superior de nuestro documento.

PASO 15
En la ventana Outline seleccionamos el cuadro que cubre la imagen y el Movie clip Imagen_1 y los agrupamos en un nuevo Movie Clip.

PASO 16
Al Movie Clip le colocamos el nombre imágenes y marcamos la opción Use bottom object as mask.

PASO 17
Creamos otros Movie Clips de imágenes con diferentes tipos de efectos de máscaras para las imágenes.

PASO 18
En la timeline a la imagen 1 vamos a agregarle un movimiento de 1 frame.

PASO 19
Agregamos un nuevo movimiento de 5 frames y movemos el Movie clip hacia la izquierda.

PASO 20
Repetimos el proceso con todos los Movie Clips para el lado derecho.

PASO 21
Seleccionamos el Movie Clip Imágenes y vamos a la ventana Script y copiamos el siguiente Action Script.

Code block

onFrame (1) {
    stop();
}
onFrame (7) {
    stop();
}
onFrame (13) {
    stop();
}
onFrame (19) {
    stop();
}
onFrame (25) {
    stop();
}
onFrame (31) {
    stop();
}
onFrame (37) {
    stop();
}
onFrame (43) {
    stop();
}
onFrame (49) {
    stop();
}
onFrame (55) {
    stop();
}
onFrame (61) {
    stop();
}
onFrame (68) {
    stop();
}
onFrame (74) {
    stop();
}
onFrame (80) {
    stop();
}
onFrame (86) {
    stop();
}
onFrame (92) {
    stop();
}
onFrame (98) {
    stop();
}
onFrame (104) {
    stop();
}
onFrame (110) {
    stop();
}
onFrame (116) {
    stop();
}
onFrame (122) {
    stop();
}
onFrame (128) {
    stop();
}

PASO 22
Contraemos nuestro Movie Clip y lo ocultamos.

PASO 23
Seleccionamos las 2 flechas y las agrupamos en un Movie Clip.

PASO 24
Vamos a duplicar las flechas 10 veces y en la timeline les vamos a agregar un place y un remove como se ve en la imagen.

PASO 25
Seleccionamos el Movie Clip flechas y en la ventana Script copiamos el siguiente código Action Script.

Code block

onFrame (1) {
    stop();
}
onFrame (2) {
    stop();
}
onFrame (3) {
    stop();
}
onFrame (4) {
    stop();
}
onFrame (5) {
    stop();
}
onFrame (6) {
    stop();
}
onFrame (7) {
    stop();
}
onFrame (8) {
    stop();
}
onFrame (9) {
    stop();
}
onFrame (10) {
    stop();
}
onFrame (11) {
    stop();
}

PASO 26

Seleccionamos la primera flecha (lado izquierdo) y vamos a nuestra ventana Script y copiamos el siguiente código ActionScript.

Code block

on (press) {
    _parent.imagenes.gotoAndPlay(69);
    gotoAndStop(8);
}

PASO 27
Ahora seleccionamos la segunda flecha (lado derecho) y vamos a la ventana Script y copiamos el siguiente código ActionScript.

Code block

on (press) {
    _parent.imagenes.gotoAndPlay(69);
    gotoAndStop(8);
}

PASO 28
En todas las flechas vamos a colocar los códigos Action Script siguientes:

Code block

Izquierda 
on (press) {
    _parent.imagenes.gotoAndPlay(129);
    gotoAndStop(1);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(8);
    gotoAndStop(3);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(123);
    gotoAndStop(2);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(14);
    gotoAndStop(4);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(117);
    gotoAndStop(3);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(20);
    gotoAndStop(5);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(111);
    gotoAndStop(4);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(26);
    gotoAndStop(6);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(105);
    gotoAndStop(5);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(32);
    gotoAndStop(7);
}
 
Izquierda 
on (press) {
    _parent.imagenes.gotoAndPlay(99);
    gotoAndStop(6);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(38);
    gotoAndStop(8);
}
 
Izquierda 
on (press) {
    _parent.imagenes.gotoAndPlay(93);
    gotoAndStop(7);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(44);
    gotoAndStop(9);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(87);
    gotoAndStop(8);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(50);
    gotoAndStop(10);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(81);
    gotoAndStop(9);
}
 
Derecha
on (press) {
    _parent.imagenes.gotoAndPlay(56);
    gotoAndStop(11);
}
 
Izquierda
on (press) {
    _parent.imagenes.gotoAndPlay(75);
    gotoAndStop(10);
}
 
Derecha
 
on (press) {
    _parent.imagenes.gotoAndPlay(62);
    gotoAndStop(1);
}

PASO 29
Listo ya tenemos nuestro rotador terminado.

Descarga el editable

Articulos relacionados:

Tags: Doodle 4 Google, Swishmax