EFECTO LUMINOSO EN LOGOTIPO CON FLASH (primera parte)

Hola ya estoy de regreso una vez más. En esta ocasión tengo para los usuarios un nuevo tutorial, el cual trata la explicación de una máscara que simula el reflejo de una luz, la cual actúa sobre un logotipo de la bmw. ¿Comenzamos?.

Lo primero que hay que hacer es un documento de propiedades 160 px *160 px de ancho y alto respectivamente, y en la casilla de velocidad de fotograma (fps) aumentarla a 15 fps. Poner mucha atención en el paso # 7.

La película consta solamente de dos símbolos. Para crear el primero presionar (ctrl.+F8), nombrarlo logo_bmw y dar como comportamiento Gráfico.

En este símbolo se dibujara el logotipo de la BMW, primero dibujar un círculo de 155.0 px *155.0 px y colocarlo en coordenadas X = 0.0 y Y = 0.0, el círculo no debe de llevar borde solamente relleno el cual será #000000

Ahora dibujar un círculo más pequeño de color de relleno #FFFFFF y de dimensiones 100.0 px *100.0 px y colocarlo en coordenadas X = 0.0 y Y = 0.0

Para terminar con el diseño del logotipo, dividir en cuatro partes el círculo pequeño y a dos de las partes dejarlas de color #FFFFFF las otras dos partes rellenarlas de color #0083A9. Insertar también tres campos de texto estático y en cada uno de ello escribir BMW, Girar la letra B -53.0º con ayuda del panel de Transformar la letra W Girarla 53º. La letra B colocarla en coordenadas X = 4.8 y Y = 20.0, la letra W colocarla en coordenadas X = 102.1 y Y = 16.6.

Crear el segundo símbolo (ctrl.+F8), nombrarlo sombra y de comportamiento Clip de película.

En este símbolo se realizara la animación la cual simulara el reflejo de luz en el logotipo. Primero hacer un círculo de dimensiones 155.0 px *155.0 px sin borde y el color de relleno no importa ya que este solamente servirá como mascara colocar el dibujo en coordenadas X = 0.0 y Y = 0.0. Luego hacer un segundo círculo pero este de dimensiones 140.0 px *140.0 px colocar el dibujo en coordenadas X = 7.0 y Y = 7.0. En el siguiente paso solamente aparecerá el borde negro del primer círculo ya que se elimino el círculo de color verde, si se suprime este paso por el de dibujar un círculo de borde 10 sin relleno la máscara no funcionara.

Insertar un segunda capa por debajo de la primera y en ella hacer una rectángulo (barra) de dimensiones 25.0 px *295.0 px sin borde y de color de relleno aplicar un degradado lineal el cual se realizara con la ayuda del panel de Mezclador de colores (ctrl. + T), en los extremos del degradado lleva un color #FFFFFF y con el alfa reducido a 0% y en el centro también lleva color #FFFFFF pero con el alfa reducido solamente al 81%. Colocar esta barra en coordenadas X = -27.0 y Y = -30.1.

En el siguiente paso insertar un fotograma en la Capa 1 (F5) en el frame #10, luego insertar un fotograma clave (F6) en la Capa 2 del frame #10. Seleccionar el fotograma #10 de la Capa 2 y colocar la barra en coordenadas X = 160.0 y Y = -30.1

Ahora hacer la animación para la barra, primero seleccionar el fotograma # 1 de la Capa 2 después en la barra de Propiedades se selecciona la opción Animar Forma. Si gustan probar (verificar) dar enter y observaran como se mueve la barra de izquierda a derecha cruzando todo el círculo si esto no sucede llamar al 911 porque algo hicieron mal jajajajajaja.

Y para terminar con la animación del logotipo ya solo e tiene que crear la mascara, seleccionar la Capa 1 hacer clic con el botón derecho del ratón y luego seleccionar la opción Máscara.

Regresar a la Escena y luego arrastrar desde la biblioteca del símbolo logo_bmw y colocarlo en coordenadas X = 2.0 y Y = 1.0.

Crear una segunda capa y en esta arrastrar desde la biblioteca el símbolo sombra colocarlo también en coordenadas X = 2.0 y Y = 1.0. Con esto se da por concluido el tutorial. Esperen un momento se mercaba de ocurrir que la animación se puede hacer Botón y que esta se mueva pero hasta que el cursor este sobre el Logotipo y se detenga una vez que se salga de el como ven ¿lo hacemos? ¡si si si si si si!, esta bien no se diga más ¿Comenzamos?.

P.D. Para los que no quieran hacer la segunda parte presionar ctrl. + enter para ver la animación, sin embargo, se perderán de algo sensacional. Hasta pronto.

Visualizar archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Búsquedas:

• efecto luminoso
• logo flash
• logo en flash
• logotipos en flash
• efecto logo flash
• animar logo en flash
• EFECTO LUMINOSO EN FLASH
• como animar un logo en flash
• animacion de logo en flash
• logotipo en flash

Artículos relacionados:

• EFECTO LUMINOSO EN LOGOTIPO CON FLASH (segunda parte)
• Efecto de Galería Zoom con Flash 8 (primera parte)
• Tutorial Adobe Flash CS3 Cronometro Cinematográfico Primera Parte
• Diseñar y Programar Galería En Adobe Flash Primera Parte