Mostrando entradas con la etiqueta Flash. Mostrar todas las entradas
Mostrando entradas con la etiqueta Flash. Mostrar todas las entradas

Reproductor para vídeos en formato flv..

Categorías: , 

Flv Player nos da la opción de poder tener un reproductor personalizable para poder agregar nuestros propios vídeos en nuestro blog o pagina web..

Este reproductor puede reproducir archivos flv, otros formatos no son permitidos..

¿Pero como lo empiezo a usar en mi blog o web?

Para esto entramos aqui, y empezamos a generar el reproductor a nuestro gusto, cuenta con innumerables opciones que lo hace un mas atractivo..

Las opciones son las siguientes..

flv: Introduciremos la url de nuestro vídeo, en este caso con extensión flv..

Title: El titulo del vídeo..

Star image: Imagen que se vera al inicio del vídeo. La imagen de fondo que tendrá el vídeo antes de ser reproducido..

Width: Ancho del vídeo..

Height: La altura del vídeo..

Loop: Si esta opción tiene el numero cero seleccionado no se repetirá el vídeo, si es el numero uno el que seleccionemos este mismo se repetirá..

Autoplay: Dejamos el cero si queremos que el vídeo reproduzca al dar clic sobre el botón de play, agregamos el numero uno si queremos que el vídeo inicie por su cuenta..

Autolad: De la misma manera que Autoplay solo que este en lugar de iniciar solo la reproduccion, se descargara solo..

Srt: Esta opción dejemosla como esta..

Buffer: La opción 5 por defecto seria la mejor para que la visualizacion del vídeo no tenga muchas interrupciones con una conexion lenta..

Las opciones anteriores solo nos servirán para personalizar el reproductor..

Las tres opciones siguientes no pierden importancia ya que en ellas se encuentran los códigos necesarios para poder poner el vídeo en nuestro blog. En este caso solo utilizaremos, HTML code..

Cabe recordar que al terminar de llenar los campos de personalizacion del reproductor el código que se encuentra dentro de "HTML code" se genera sin necesidad de que nosotros hagamos nada, a excepción claro de mover algunas de las opciones antes vistas..

Al terminar de personalizar introducimos el código que nos proporciona el generador en el lugar donde queramos que este el reproductor..

El código que pegaremos es algo muy parecido a esto..

codigo

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv.swf" width="320" height="240">
<param name="movie" value="http://flv-player.net/medias/player_flv.swf" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="flv=Nombredelvideo.flv" />
</object>



Esta es la apariencia del reproductor una vez personalizado y agregado a nuestro blog..








Datos importantes..

El reproductor solo servirá con archivos flv y url validas..

El reproductor se puede descargar desde la misma pagina, además la web cuenta con distintos reproductores que también puedes descargar de forma gratuita pero por supuesto bago licencia..

Para mas información sobre esto puedes visitar la web principal que es // FLVPlayer.net


Entradas relacionadas

Como subir y agregar un video a Blogger..
Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Dar estilo a las listas con CSS

Boton Play-Pause para sonido en flash..

Categorías: ,  , 

Hace tiempo que no posteaba nada relacionado con flash, así que hoy me decidí por este pequeño tutorial donde aprenderemos a crear un botón de Play-Pause para un sonido en flash..

Cabe recordar que este tutorial esta hecho con Macromedia Flash Profesional 8..

[1] Para comenzar a crear el botón antes mencionado, iniciamos creando un nuevo Símbolo, para esto vamos a Insertar - Nuevo Símbolo, de las tres opciones que tenemos para escoger seleccionamos Clip de Película y damos clic en Aceptar..




[2] Al dar clic sobre Aceptar nos aparecerá una pantalla, en ella editaremos nuestro Clip de película, en esa misma ventana nos colocaremos sobre el primer frame, lo seleccionamos y presionamos el botón secundario del mouse, en el menú que aparece elegimos la opción Insertar Fotograma..


Clic aquí para ampliar



[3] Podremos comprobar que ahora tenemos dos Fotogramas, seleccionamos el primero y le colocamos el nombre de "play", y empezamos a dibujar o a crear el botón que representara el Inicio de nuestro sonido tal y como se muestra en la siguiente imagen..


Clic aquí para ampliar



[4] Hacemos lo mismo con el segundo fotograma, solo que este al seleccionarlo le pondremos el nombre de "pause", después de ello creamos el botón que representara el Pause de nuestro botón de sonido..


Clic aquí para ampliar



[5] Regresamos el escenario principal y abrimos la Biblioteca, para esto presionamos Ctrl+L, buscamos nuestro Clip de Película y lo arrastramos hacia el escenario y le ponemos el siguiente nombre de instancia “Boton_btn”..


Clic aquí para ampliar



El sonido

[6] Esto es lo mas sencillo de todo el proceso, simplemente arrastramos el sonido que queramos agregar a nuestro botón hacia la Biblioteca..

Inmediatamente después localizamos el sonido y damos clic con el botón secundario sobre el y elegimos la opción Vinculacion, después de eso nos aparecerá un pequeño cuadro, ahí, marcamos la opción: Exportar para ActionScript, eso seria todo, pero antes de dar clic en Aceptar, localizamos la opción Identificador y cambiamos el nombre que tiene por el de "Sonidoenflash" y ahora si, damos clic en Aceptar..


Clic aquí para ampliar



El código

[7] Por ultimo seleccionamos el primer Fotograma, y presionamos la tecla F9 para abrir el Panel de Acciones, dentro copiamos y pegamos este código..

codigo

/* En la primer linea hemos declarados dos variables, pausa y estado, los dos
para coocer localizacion y estado del sonido*/

var pausa:Number = 0;
var estado:Number = 0;

/* Para detener el boton, sin esta linea el boton se movria de una imagen a otra rapidamente*/
Boton_btn.stop();
/*Linkeamos el sonido que se encuentra en el biblioteca con el nombre de Indentificacion el cual es Sonidoenflash"*/
_root.onLoad = function(){
misonido = new Sound();
misonido.attachSound("Sonidoenflash");
}
Boton_btn.onPress = function (){
if (estado == 0){
misonido.start(pausa/1000);
//Para cambiar a pause agregamos el valor 1
estado = 1;

//Con esta linea cambiamos el boton por el de Pause
Boton_btn.gotoAndStop("pause");
} else {

//Para detener el sonido
misonido.stop();
//Para detener el sonido es logico que modifiquemos el valor de 1 a o
estado = 0;

//Se cambia la apariencia del boton por la de Play
Boton_btn.gotoAndStop("play");
}
}



Para probarlo presionamos CTRL+Enter y revisamos si no cometimos ningún error al realizar nuestro botón..

Es sencillo si analizamos perfectamente el código y seguimos los pasos correspondientes..

Vista previa del archivo terminado..

Entradas relacionadas

Trabajando con mascaras. Parte 1
Animacion en Flash: Movimiento de nubes..
Trabajando con mascaras. Parte 2
Como subir y agregar un video a Blogger..
Imagenes en Blogger (parte 1)

Utilizando la orden Animar:Forma, creando animaciones simples..

Categorías: , 

Hoy simplemente aprenderemos a utilizar la orden Animar:Forma de una manera muy sencilla, también aprenderemos a crear animaciones simples que pueden usarse en cualquiera de nuestros proyectos..

1. Como primer paso crearemos una figura en el primer fotograma, puede ser un circulo o la figura que nosotros queramos, en mi caso sera un circulo de color negro..


Clic aqui para ampliar



2. En este paso crearemos un fotograma clave, para esto nos colocamos en el fotograma 15 de la capa que estamos utilizando, sobre el fotograma 15 presionamos el botón secundario de nuestro mouse y seleccionamos la opción Insertar fotograma clave..


Clic aqui para ampliar



3. Ahora dibujaremos una imagen mas, esta va a ser la figura en la que se transformara cuando se realize el efecto la primera figura, en este caso el circulo. Dibujare un rectángulo del lado derecho como se muestra en la imagen..


Clic aqui para ampliar



4. Finalmente nos colocamos en el fotograma uno y seleccionamos la opción Animar:Forma, esto lo haremos para crear la animación de la primer figura a la segunda, el efecto sera algo parecido a una pequeña transformación..


Clic aqui para ampliar



5. Presionamos Crtl+Enter para probar nuestro archivo, podremos comprobrar que hemos creado un ejemplo de transformación de figuras muy simple pero con un poco de mas dedicación y tiempo podemos sacarle provecho de alguna u otra forma..

Este es el archivo terminado..


Entradas relacionadas

Trabajando con mascaras. Parte 1
Animacion en Flash: Movimiento de nubes..
Trabajando con mascaras. Parte 2
Botón flash con un enlace a otra web..
IE6, Un problema para los diseñadores y bloggers

Trabajando con mascaras. Parte 2

Categorías: , 

Como habiamos visto en la primer parte de este tutorial, crear mascaras es una tarea sencilla, ahora veremos como agregar una imagen en movimiento tras una mascara de texto..

1. Para comenzar, crearemos un nuevo documento Flash e importamos la imagen que queramos agregar como fondo del texto. Para esto presionamos Crtl+R o seguimos esta ruta: Archivo > Importar > Importar a Escenario

Al aparecer la nueva ventana elegimos el archivo que queremos como fondo del texto, y damos clic en Aceptar para que el archivo sea importado a el escenario..

2. Insertamos una Nueva Capa, para esto hacemos clic sobre el icono de Inserta Capa..

mascarasflash
Clic aqui para ampliar



3. Ahora que ya esta lista la segunda capa, seleccionaremos el primer Frame de dicha capa, e insertamos el texto usando la herramienta de Texto, escribimos lo que queramos y lo acomodamos como nos paresca mejor..

Es importante que el texto quede dentro del primer Fotograma de la Capa 2..

mascarasflash
Clic aqui para ampliar



4.
Ahora sobre capa 1, que en este caso es la imagen de fondo, insertaremos un fotograma clave en el frame 30, seleccionamos el fotograma 30 y presinamos la tecla F6..

Movemos la imagen a la segunda posicion de la animacion de izquierda a derecha..

mascarasflash
Clic aqui para ampliar



5. Seleccionamos cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades hacemos clic en Animar > Movimiento.

mascarasflash
Clic aqui para ampliar



6. Ahora toca insertar un fotograma clave en la capa 2, nos colocamos nuevamente en el fotograma 30 de la capa 2 y presionamos la tecla F5..

7.
Por ultimo seleccionamos la capa 2, hacemos clic sobre ella con el botón secundario del mouse y seleccionamos la opción Mascara y inmediatamente notaremos el cambio y la aparición de nuestra mascara..

mascarasflash
Clic aqui para ampliar



Presionamos CRTL+Enter y listo, hemos terminado de crear un texto con fondo en movimiento :)



Entradas relacionadas

Trabajando con mascaras. Parte 1
Animacion en Flash: Movimiento de nubes..
Reloj sencillo en Flash
Botón flash con un enlace a otra web..
Botón Flash con Sonido..

Botón Flash con Sonido..

Categorías: ,  , 

Para realizar esto partiremos del boton creado hace poco en este mismo blog, si no sabes de que estoy hablando entra aqui..

Cuando tengamos el boton terminado en el tutorial anterior del boton basico, abriremos la Biblioteca, para abrirla presionamos la tecla F11 o bien siguiendo la ruta: Ventana > Biblioteca..

Ahora dentro de la Biblioteca importaremos un archivo de sonido, para esto presionamos Ctrl+R..

Buscamos el archivo de sonido que deseamos agregar al botón y de la damos en Aceptar..

Ahora que hemos importado el sonido a la Biblioteca vamos a editar el botón, para esto buscamos el botón que esta dentro de la Biblioteca damos clic con el botón secundario del mouse y elegimos la opción Edición..


Clic aqui para ampliar



Lo editaremos de una manera muy fácil, nos colocaremos en el frame llamado Sobre y arrastramos el sonido que guardamos en la Biblioteca directamente sobre el botón que se encuentra en el..


Clic aqui para ampliar



Ya solo resta probar nuestro archivo para eso usamos las teclas CTRL+Enter y comprobamos si todo ha salido bien pasando el puntero sobre nuestro archivo, si todo esta correcto debemos escuchar el sonido que agregamos en el..


Ya al final podemos hacer botones que nos hablen, botones para menús con sonido o muchas cosas mas, todo dependerá de nuestra imaginación :)





Entradas relacionadas

Botón flash con un enlace a otra web..
Trabajando con mascaras, Parte 1
Animacion en Flash: Movimiento de nubes..
Reloj sencillo en Flash..
La Fecha en Flash

Animacion en Flash: Movimiento de nubes..

Categorías: ,  , 

Por fin llega el momento de ver un poco de animación en flash, hoy veremos la forma de darle movimiento a las nubes en una de nuestras animaciones, por así decirlo.

Este ejemplo se realizara mediante un Clip de película que a su vez lo convertiremos en un Componente para así poder utilizar las acciones para crear el efecto de movimiento..

1. Como primer paso crearemos un documento con las siguiente propiedades.. Por supuesto esto es solo para el ejemplo tu puedes agregar las propiedades que creas convenientes.

Yo agregare las siguientes propiedades al documento..

a) 400 px de ancho y 250 px de altura..
b) Además utilizare el color de fondo azul, para así simular el cielo..
c) Y por ultimo cambiare la Velocidad de Fotogramas a 20 fps, esto es para darle mas realismo a la animación..

nubes
Clic aqui para ampliar



2. Como siguiente paso crearemos un Símbolo, para esto presionamos las teclas Ctrl + F8, a este símbolo le agregamos el nombre de nube y elegimos la opción Clip de Película..

nubesflash
Clic aqui para ampliar



3. Ha llegado el momento de dibujar la nube, dentro del símbolo que acabamos de crear, dibujamos una nube pequeña..

Ahí mismo después de dibujar la nube, crearemos otro símbolo, presionando Crtl + F8, a este le agregaremos los siguientes valores: el nombre del símbolo ahora será componentedenube y elegimos la misma opción, Clip de Película..

animacionconnubes
Clic aqui para ampliar



4. Para continuar abriremos la Biblioteca, para abrirla presionamos la tecla F11, nos colocaremos sobre el símbolo componentedenube, hacemos clic sobre el con el botón secundario del Mouse, y elegimos la opción Definición de Componente en el menú despegable..

animacionconnubes
Clic aqui para ampliar



5. Al seleccionar la opción anterior se abrirá el panel de Definición de componente, simplemente agregaremos 3 Parámetros como siguiente paso, para eso presionamos el signo de mas +..

a) Cambiamos el nombre de los tres primeros parámetros por vel, alfa y x max..
b) También cambiamos el valor de los parámetros a 10, 100 y -900..

Lo demás lo dejamos como esta y damos clic en Aceptar..

animacionconnubes
Clic aqui para ampliar



6. Inmediatamente al dar clic en Aceptar el icono del símbolo cambiara al de un componente..

Lo que haremos a continuación es muy sencillo, tomaremos el símbolo nube y los arrastraremos al componente o símbolo componentedenube..

Abriremos el panel de Acciones. para esto presionamos la tecla F9 y agregamos el siguiente código dentro de el..

codigo

onClipEvent (load) {
_alpha = _parent.alfa;
}
onClipEvent (enterFrame) {
(_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0);
}



7. Regresamos a Escena1 y arrastramos desde la biblioteca el componente, componentedenube, colocaremos dos veces este componente, notaras en la imagen siguiente que los he colocado fuera de la Escena, por ultimo colocamos las coordenadas para asignar el lugar de salida, yo colocare las coordenadas X= 420.0 y Y= 50.0 al ultimo componente que agregamos y el primero lo deje como estaba..

animacionconnubes
Clic aqui para ampliar



8. Como ultimo paso seleccionamos alguno de los dos componente que arrastramos a Escena, abrimos el Panel de Parámetros y modificamos los valores de los parámetros, pueden ser los valores que queramos ejemplo: 10, 50, -700..

animacionconnubes
Clic aqui para ampliar



Esto lo haremos para simular la transición de la animación, así que si lo deseas puedes agregar varias veces el componente y modificar los parámetros, eso dependerá de tu imaginación y creatividad..

Presionamos Ctrl + Enter para probar y visualizar nuestra animación, si no hay ningún error y seguimos los pasos correctamente no habrá ningún problema, podrás ver como las nubes tienen movimiento en el cielo :)..

Con algo de tiempo podremos crear una pequeña animación con algún avión o algunos pájaros xD




Entradas relacionadas

Botón flash con un enlace a otra web..
Botón Flash con Sonido..
La Fecha en Flash..
Trabajando con mascaras, Parte 1
Insertar archivos SWF en Blogger

Insertar archivos SWF en Blogger

Categorías: ,  , 

Una tarea común entre los bloggers es insertar archivos Flash, pero que pasa con lo que aun no conocen el código necesario para efectuar esta tarea..

Todo esto es muy simple, a continuación daremos las pautas necesarias para insertar archivos SWF en blogger o en cualquier otra Web..

Sintaxis simple..
Este es el código que se utiliza de una forma sencilla, solo debes agregar la ruta de enlace, el ancho y el alto del archivo y listo..

codigo

<embed src="enlacedelarchivo.swf" type="application/x-shockwave-flash" width="120" height="50"></embed>



Aquí podemos cambiar tres valores, en este caso el valor enlacedelarchivo.swf, lo cambiamos por la ruta o enlace del archivo y los valores width y height, que son el ancho y el alto de nuestro archivo..

Sintaxis básica..
Este es el código mas adecuado y el que se utiliza con frecuencia para abarcar todos los elementos disponibles, el tag esencial es el tag object..

También se pueden agregar parámetros utilizando el tag param. Por ejemplo podemos agregar el modo de transparencia (wmode), calidad (quality), color de fondo (bgcolor), variables (flashvras) entre otros.

codigo

<object type="application/x-shockwave-flash" id="movie" data="archivo.swf" width="200" height="100">
<param name="movie" value="archivo.swf">
<param name="wmode" value="transparent">
<param name="quality" value="high">
<embed src="enlacedelarchivo.swf" width="200" height="100" wmode="transparent" quality="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash">
</embed>
</object> 



Dentro de este código podremos cambiar los valores width (ancho) y height (altura), también los valores de param, movie, puedes cambiarlo por el nombre de tu archivo, wmode en este caso puede ser o no transparente el fondo de tu archivo, quality es la calidad del video para cambiarla a baja, usa la orden low..

Dentro de embed agregamos la ruta o el enlace de nuestro archivo flash, cambiamos los valores width y height y agregamos valores como los descritos anteriormente..

Es así de sencillo, si alguien tiene algún otro código para agregar archivos flash será bienvenido :)..


Entradas relacionadas

Como subir y agregar un video a Blogger..
Imagenes en Blogger (parte 1)
Icono en la barra de navegación
Como agregar bordes directamente a las imagenes..
Dar estilo a las listas con CSS

Botón flash con un enlace a otra web..

Categorías: ,  , 

Hoy crearemos un botón en flash que nos enlace a otra pagina de una manera muy sencilla..

Para esto crearemos una nuevo documento en flash con las siguientes dimensiones: 120px de ancho y 50px de alto..

Ahora presionamos la combinación de teclas siguiente: Ctrl+F8, hacemos esta combinación para Insertar un nuevo símbolo. Elegimos la opción Botón y le pondremos como nombre Botón 1..

botonflash
Clic aqui para ampliar



Le damos Aceptar y comenzamos a crear un rectángulo del color que mas nos agrade.

Después nos posicionaremos sobre el fotograma llamado Reposo, hacemos clic con el botón secundario del Mouse sobre el y seleccionamos la opción Insertar fotograma clave..

Clic aqui para ampliar
Clic aqui para ampliar



Cuando agreguemos el Fotograma Clave, inmediatamente pasaremos al fotograma llamado Sobre, en esa opción dibujaremos un rectángulo que será el que aparezca cuando pasemos el puntero del ratón sobre el. Para esto solo tendremos que ir a la Herramienta Color de Relleno y le cambiamos el color que tiene por el que mas nos agrade..

botonflash
Clic aqui para ampliar



Regresamos a Escena 1..Presionamos Ctrl+L para abrir la Biblioteca y poder visualizar el Botón, si la biblioteca ya estaba visible pasamos a lo siguiente..

En la biblioteca se encuentra Boton1 si realizamos todo correctamente, lo jalamos hacia el escenario y ajustamos el tamaño de acuerdo al documento.. (ancho 120px, alto 50px)..

Trata de que el botón quede centrado para que la visualización final sea la correcta..

botonflash
Clic aqui para ampliar



Ahora agregaremos el código para enlazar a una Web..
Seleccionamos el botón con un clic, presionamos F9 y agregamos el siguiente código en el Panel de Acciones..

codigo

on (release) {

getURL("AQUILADIRECCIONDELAPAGINA", "_blank");

}



Presionamos la siguiente combinación de teclas..Ctrl+Enter, para probar si nuestro botón funciona correctamente..

Lo mas seguro que al guardar el archivo y probarlo desde nuestro ordenador nos aparezca un mensaje de aviso, para que esto no pase subiremos el archivo a un servidor para probar su funcionamiento..

Al final el resultado será este..




Lo que hemos visto es lo mas básico en la realización de botones con enlaces, con un poco de imaginación y paciencia podemos llegar a hacer botones mas vistosos o hasta menús personalizados, todo es cuestión de practica :)..


Entradas relacionadas

Botón Flash con Sonido..
Animacion en Flash: Movimiento de nubes..
Trabajando con mascaras, Parte 1
La Fecha en Flash
Reloj sencillo en Flash

Trabajando con mascaras. Parte 1

Categorías: ,  , 

Hoy trabajaremos con mascaras, los efectos que podemos realizar con este tipo de elementos son excelentes, así como el ejemplo siguiente..



Este ejercicio es muy sencillo, notamos que participan dos imágenes, una borrosa y otra con buena calidad, y por supuesto no olvidemos el circulo que funcionara como mascara..

Estas son las imágenes que utilizare yo, tu puedes usar las que quieras..

mascarasflash


Comenzaremos Insertando 4 capas (layers). En la primer capa pondremos la imagen borrosa, en la segunda la imagen normal, en la tercer capa dibujaremos un circulo que será nuestra mascara y la ultima la utilizaremos para las acciones..

Quedaría algo así..

mascarasflash
Clic aqui para ampliar



Como paso siguiente seleccionaremos el circulo que que dibujamos en la capa Mascara, lo convertimos en Clip de película, para esto presionamos la tecla F8, elegimos la opción Clip de película y le dejamos el nombre de Símbolo 1, en el nombre de instancia le pondremos el nombre de mascara, estoy es muy importante..

mascarasflash
Clic aqui para ampliar



Ahora nos colocaremos sobre la capa a la que nombramos Mascara, la convertiremos en una capa de mascara. Para esto hacemos clic con el botón secundario del Mouse sobre la capa y seleccionamos la opción mascara (mask)..

mascarasflash
Clic aqui para ampliar



Notaras que nuestra escena a cambiado, quedara algo parecido a esto..


Clic aqui para ampliar



Ahora solo resta pegar el código que le dará el efecto, para ello seleccionamos el primer fotograma de la capa Acciones, presionamos la tecla F9 y pegamos este código dentro del panel..

codigo

Mouse.hide();

onEnterFrame = function() {
mascara._x = _xmouse;
mascara._y = _ymouse;
}



Presionamos Ctrl + Enter y listo¡¡ hemos terminado :)..




Entradas relacionadas

Reloj sencillo en Flash
La Fecha en Flash
Botón flash con un enlace a otra web..
Cursor personalizado en CSS..
Como agregar bordes directamente a las imagenes..

La Fecha en Flash

Categorías: ,  , 

En este pequeño tutorial tratare de explicarles como crear la fecha en flash con la clase Date. Este flash se ejecuta de manera local por lo tanto tomara la fecha de nuestro ordenador. El siguiente ejemplo será el resultado de utilizar la clase antes mencionada..

Antes de comenzar debemos darle una gran importancia al siguiente objeto..

codigo

fecha = new Date();



Con el codigo anterior lo que haremos sera sencillamente capturar la fecha del momento en que fue generado..

Los datos siguientes nos ayudaran a obtener los días los meses y años..

codigo

fecha.getDate(): // Obtiene el número del día del mes..

fecha.getDay():// Obtiene el número del día de la semana..

fecha.getMonth():// Obtiene el número del día del mes..

fecha.getFullYear():// Obtiene el año en un formato de 4 dígitos..



Ahora llega el momento de empesar a crear la fecha..

Empecemos creando un nuevo documento en Flash con dimensiones 250px de ancho y 50px de altura, con fondo blanco o el que tu quieras..


Relojenflash
Click aqui para ampliar



Después de ello creamos un campo de texto dinámico..que ocupe todo el documento..
Le agregamos en la opcion variable la palabra calendario..


Relojenflash
Click aqui para ampliar



Ahora nos posicióonaremos sobre el primer frame, presionamos la tecla F9 para abrir el cuadro de las acciones y agregamos el siguiente código..

codigo


meses = new Array('enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre');
dias = new Array('domingo', 'lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sabado');
onEnterFrame = function() {
fecha = new Date();
dia = fecha.getDate();
< dia_sem = dias[fecha.getDay()];
mes = meses[fecha.getMonth()];
anio = fecha.getFullYear();
calendario = dia_sem + " " + dia + " de " + mes + " del " + anio;
}



Si quieres ver el resultado presiona Ctrl + Enter..

Puedes modificar los valores de los días y los meses, por ejemplo: lun en lugar de lunes..
Solo no cambies el orden de los días, la orden new Array siempre debe comenzar en domingo..


Entradas relacionadas

The Unfair Platformer. ¿Te atreves a jugarlo?
Reloj sencillo en Flash
Trabajando con mascaras, Parte 1
Animacion en Flash: Movimiento de nubes..
Botón flash con un enlace a otra web..

Reloj sencillo en Flash..

Categorías: ,  , 

En este tutorial aprenderemos a crear un sencillo reloj en flash sin muchas complicaciones..

Cabe recordar que este tutorial se ha hecho paso por paso en Macromedia Flash 8 :)


Abrimos el programa y comencamos a crear un nuevo documento con las siguientes dimensiones: 200px de ancho x 70px de alto..

Ahora renombremos la Capa 1 con el nombre de reloj haciendo doble click sobre ella.

Después de ello insertamos una nueva capa y la nombramos actions, esta nos servirá para poner todo el código que vamos a utilizar, así nuestro trabajo será mas organizado..


Click aqui para ampliar



Como siguiente paso hacemos click sobre la capa reloj y comenzaremos a dibujar el reloj, para esto crearemos tres cuadros de texto dinámicos, para crearlos usaremos la herramienta Texto que se encuentra en la parte izquierda del programa..

Para asegurarnos de que son textos dinámicos hacemos click sobre alguno para que se abra el panel de Propiedades..

En el mismo panel de Propiedades agregamos un nombre de instancia a cada cuadro así como se muestra en el ejemplo siguiente..

codigo

hora_txt (1er Cuadro de Texto)
minutos_txt (2do Cuadro de Texto)
segundos_txt (3er Cuadro de Texto)




Click aqui para ampliar



Insertaremos también dos cuadros de texto estáticos que digan " : " para separar la hora de los minutos y los segundos.
Dentro de los primeros cuadros que creamos ingresaremos dos ceros a cada uno..

Nos debe quedar algo parecido a esto..


Click aqui para ampliar



Ahora agregaremos las acciones que lo harán funcionar correctamente..

Seleccionamos el primer fotograma de la capa actions y presionamos la tecla F9 para abrir el Panel de Acciones. Copiamos y pegamos el siguiente código dentro del panel..


codigo

time = new Date();

onEnterFrame()

{

hora = time.getHours();

minutos = time.getMinutes();

segundos = time.getSeconds();

hora_txt.text = hora;

minutos_txt.text = minutos;

segundos_txt.text = segundos;

}



Presionamos Ctrl + E para probar nuestra película. Si eres buen observador podrás ver que muestra la hora pero no se actualiza.

Para esto debemos hacer una ultima cosa, debemos insertar un segundo fotograma, para esto hacemos click con el botón secundario de nuestro Mouse sobre el primer fotograma de cada capa y seleccionamos Insertar fotograma..


Click aqui para ampliar



Probaremos la película nuevamente tecleamos Ctrl + Enter y wuala¡¡ un reloj en flash terminado en menos de 10 minutos, sencillo pero de gran calidad :)..

Por supuesto puedes personalizarlo como tu quieras, puedes modificar su tamaño, su color o agregar una imagen de fondo..

Aqui el documento flash terminado..



Entradas relacionadas

Botón Flash con Sonido..
Cubo 3D con el Logo de tu Blog o Web..
Animacion en Flash: Movimiento de nubes..
Insertar archivos SWF en Blogger..
Trabajando con mascaras. Parte 1