Comunidad de diseño web y desarrollo en internet online

Creación de un lightsaber (Sable de luz) en Flash MX 2004

Paso 1.- Dibujos preliminares

Para este ejemplo hemos elejido dibujar el lightsaber que Anakin Skywalker utiliza en Star Wars - Episodio III.
Puedes buscar otras imágenes o crear tu propia arma jedi aplicando los mismos conceptos que se explicarán en este tutorial.

Abrimos un nuevo documento Flash con las siguientes características:
Fondo: negro, Dimensiones: 200 px (anchura) x 500 px (altura).

A la capa actual nombramos: "foto". Creamos 4 capas superiores con los nombres de: "rotulos", "acciones", "botones" y "lightsaber".

En la capa "foto" importamos la foto del lightsaber. Archivo > Importar > Importar a escenario.
Para este ejemplo el dibujo será vertical, por lo que rotamos la foto 90º.

Seleccionamos la capa "lightsaber". Del panel de herramientas elegimos la Herramienta Rectángulo (r). Dibujamos un rectángulo con borde negro. Activamos el panel Mezclador de colores (shift+F9) donde elegimos que el estilo de relleno sea: "Lineal", asignamos una selección de colores entre diferentes tonos de plomo y blanco como se muestra en la figura. Para aumentar más punteros de tonalidades, simplemente se dan clicks en la barra de colores donde se desee ingresar un tono más. El máximo número posible es de 8 diferentes tonos. Por defecto los tonos estarán de forma vertical.

Si por algún motivo se necesita ajustar el relleno, lo seleccionamos con la herramienta de transformación de relleno (f), aparecerá un contorno con 2 símbolos sobre una línea que demarca el área del relleno, con el símbolo de un cuadrado, se acorta o aumenta el área del relleno y con el símbolo de un círculo se rota el mismo.

    

Seleccionamos la herramienta de selección (v), acercamos el cursor al centro de la base del rectángulo y manteniendo el mouse presionado curveamos el lado inferior como se muestra en la imagen superior.

Tip.- Al aproximar la herramienta de selección (v) al borde de una figura, ya sea relleno o trazo, el cursor cambia a una flecha negra con una curva debajo, si es un lado de la figura; o a una flecha negra con un ángulo recto, si es una arista. En ambas situaciones se mantiene presionado el botón principal del mouse para deformar la figura según se desee.

Seleccionamos el borde negro del dibujo y lo convertimos en relleno mediante: Modificar > Forma > Convertir líneas en rellenos. Esto dará mejor calidad al dibujo cuando se disminuya su tamaño.

Convertimos la figura en símbolo (F8) tipo Clip de Película con el nombre de: "parte_metal". Este será nuestro principal símbolo para dibujar la empuñadura del lightsaber, ya que lo reutilizaremos en varias ocaciones con el fin de realizar un archivo liviano para internet y agilizar a la vez el proceso de dibujo.

Tip.- La reutilización de símbolos en Flash repercute en un ahorro de los recursos del mismo; al no crear nuevos símbolos y dibujos, el archivo termina pesando menos, siendo esto un factor de importancia en toda publicación web.

Paso 2.- Dibujo de la empuñadura

Seleccionamos el símbolo "parte_metal" y lo copiamos repetidas veces.

Tip.- La manera más rápida de realizar copias de un símbolo es arrastrarlo con el mouse mientras se presiona la tecla "ALT".

Con la ayuda de la herramienta de Transformación libre (q) modificamos las copias escalando, rotando y sesgando, según sea necesario. En la última imagen se ha realizado una modificación de color al símbolo, seleccionando en la barra de Propiedades: Color > Tinta: Negro al 72%.

Tip.- La organización de los símbolos en un mismo fotograma se realiza mediante: Modificar > Organizar > Traer al frente, traer hacia adelante, enviar hacia atrás o enviar al fondo. La manera más rápida de hacerlo es mediante los hotkeys: Ctrl + Shift +↑, Shift +↑, Shift +↓, Ctrl + Shift +↓ respectivamente.

lightsaber_handle

Pasamos a dibujar los los detalles que sobresalen en la parte superior de la empuñadura. Para este fin, la reutilización del símbolo "parte_metal" es más que suficiente. Entonces realizamos copias del mismo, las escalamos, rotamos y ordenamos.

Para realizar la placa dorada central, seleccionamos el símbolo "parte_metal", lo duplicamos mediante: Modificar > Símbolo > Duplicar símbolo, o con el botón derecho del mouse. Ingresamos a este nuevo símbolo y cambiamos el color plomo del relleno por un amarillo semejante a la imagen, además dibujamos con la herramienta Rectángulo las ranuras de la placa.

Para el acabado central del metal, dibujamos 2 rectángulos a cada lado de la placa, de color negro y con alfa = 30%, para su cuadriculado seleccionamos la herramienta Borrador (E), elegimos una forma cuadrada y borramos alternadamente ambos rectángulos. Con todo esto la empuñadura esta terminada, es recomendable seleccionar todos los elementos y guardarlos en un nuevo símbolo.

Paso 3.- Dibujo del laser

Se dibuja un largo rectángulo de color: "3D6DFF", para el brillo realizamos Modificar > Forma > Suavizar bordes de relleno, Distancia = 20 px, número de escenarios = 20, expandir. Seleccionamos el rectángulo original y cambiamos su relleno a blanco. Convertimos el dibujo en símbolo y lo posicionamos encima de la empuñadura. El resultado: un arma mortal de un Jedi.

Paso 4.- Creación de botones

Esta parte es opcional, lo que se hará simplemente es agregar interactividad para que el lightsaber tenga un laser azul o rojo.
Nos ubicamos en el fotograma 19 y seleccionamos todas las capas a esa altura, click derecho del mouse y elejimos insertar fotograma.

En la capa "lightsaber" insertamos un nuevo fotograma clave en la capa 10, seleccionamos el símbolo del laser de este fotograma y en propiedades cambiamos su color en Tinta: Rojo 85% . Se puede crear un nuevo símbolo que contenga un rectángulo rosado casi blanco, para ponerlo en el centro del sable rojo y darle más brillo.

En la capa "rotulos" en el fotograma 1 y en el 10 insertamos fotogramas claves y los etiquetamos como "fuerza" y "darkside" respectivamente.

En la capa "acciones" insertamos fotogramas claves en los fotogramas 8 y 18, abrimos el panel de acciones (F9) y en ambos fotogramas insertamos el código:

stop();

En la capa "botones" creamos 2 botones de distinto color de la forma que uno quiera, más una pregunta y el texto de las opciones para cada selección. Seleccionamos cada botón creado e ingresamos las siguientes acciones:

Para el 1º botón:

on (release){
	gotoAndPlay("fuerza");
}

Este lleva al sable laser azul. Y para el 2º botón:

on (release){
	gotoAndPlay("darkside");
}

El resultado final es:

Que la fuerza te acompañe.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate