[lol]

Voy a explicar como hacer userbars usando flash. He pasado de usar el Macromedia Flash 8 al Adobe Flash CS3 (o 9), y sí, como puede verse por el nombre del programa Adobe ha comprado Macromedia. No obstante lo indicado en el anterior tutorial sobre lo que se muestra en pantalla sigue teniendo validez. Quiero dar las gracias a Ax3l por permitirme usar su firma para este ejemplo.

Necesitaremos las imágenes de las userbars (que para este tutorial son 11) e imágenes para superponer las partes que no queramos ver cambiar (para este tutorial la cara y la zona de "ESTO NO ES UNA USERBAR").

Lo primero es, si o si, abrir el Adobe Flash (pero que listo soy :P). El cambio del flash 8 al cs3 (o 9) al principio parece un abismo, pero la ventana se mantiene practicamente igual. Al ejecutarlo es donde aparece la primera variante, un menú para elegir que queremos hacer:





Open Recent File nos los últimos archivos que hemos modificado.

Create New nos permite crear un archivo nueva. ActionScript (AS desde ahora) es la versión del código que usa flash, como el cambio de AS2 a AS3 me está costando un infierno (si el AS4 no se llama ASJava será un milagro), usaremos el 2, de manera que seleccionaremos Flash File (ActionScript 2.0).





Create from Template nunca lo he usado y desconozco que es, pero por el nombre y el menú al que lleva parece servir para empezar desde algún tipo de plantilla.

Ahora arrastramos la primera imagen a la biblioteca:





Hacemos click derecho sobre ella, seleccionamos Propiedades/Properties:





marcamos la opción Permitir Suavizado/Allow Smoothing para que la imagen se reescale con suavizado para intentar disimular el pixelado y aceptamos (OK).





Repetimos el proceso con todas las imágenes. Una vez estén todas, y para tener un poco de orden, creamos una carpeta haciendo click en el dibujo de la carpeta que hay en la parte de abajo de la biblioteca y ponemos un nombre a la carpeta:





Después arrastramos las imágenes a la carpeta:





Para adecuar el tamaño del flash al de las imágenes, vamos a Configuración/Settings:





En Dimensiones/Dimensiones ponemos el Ancho/Width de las imágenes y el Alto/Height en los recuadros (en el caso del tutorial es 300x69). Cambiamos el Frame Rate a 60 fps (en mi opinión para crear estas userbars queda mejor hacerlo a 60 que a 30 como en el caso del anterior tutorial) y aceptamos (OK).





Al lado de Configuración/Settings pulsamos el recuadro al lado de Color de Fondo/Background y ponemos en hexadecimal el color de fondo que queramos (#f2f2f2 en el caso de OffTopicalia).





Seleccionamos todas las imágenes en la biblioteca y las arrastramos hasta la zona de dibujo, sólo se verá una, las demás estarán debajo.





Hacemos click en la imagen que se muestra y pulsamos (F8) para abrir el menú de creación de objetos, donde pondremos el nombre a la imagen (img11 en el tutorial, ya que la primera imagen que se muestra es la última), en Tipo/Type marcamos Clip de Película/MovieClip y aceptamos (OK):





Teniendo seleccionado nuestro recien creado Clip de Película miramos la pestaña Propiedades/Properties y nos vamos al recuadro Nombre de Instancia/Instance Name, donde pondremos un nombre al Clip de Película, img11 para el tutorial y para aceptar pulsamos (INTRO).





Debemos hacer esto con cada imagen, con distinto nombre para cada imagen (tanto de Clip de Película como de Nombre de Instancia, siendo estos dos iguales para identificarlo más facilmente). Recomiendo que, ya que es una userbar con degradado entre barras, se use un nombre simple como img seguido de una numeración, como img1, img2, img3 etc). Para pasar el Clip de Película a abajo del todo y seguir con la siguiente imágen mantenemos pulsados unos segundos (CONTROL IZQUIERDA) y (FLECHA ABAJO).

Una vez tenemos todas las imágenes convertidas a Clips de Película, si queremos (yo lo recomiendo siempre) tener orden en la biblioteca hacemos lo mismo que con las imágenes, esto es, meter los Clips de Película de la biblioteca en una carpeta.

Ahora vamos a la parte del código. Haz click en la parte sin dibujar del escenario para deseleccionar cualquier cosa que tuvieses seleccionada y pulsa (F9) para abrir el panel de código.





Escribe a mano o copia y pega (más fácil, ¿no? :D) esto:

Código [Seleccionar] Expandir

onLoad = function(){

_root._quality="MEDIUM";

for (i=2; i<12; i++){
this["img"+i]._alpha=0;
}

modtrans = (100/60);
contador = 0;
img = 1;
}

onEnterFrame = function(){

contador+=1;

if(contador<62){
switch(img){
case(1): img1._alpha-=modtrans; img2._alpha+=modtrans; break;
case(2): img2._alpha-=modtrans; img3._alpha+=modtrans; break;
case(3): img3._alpha-=modtrans; img4._alpha+=modtrans; break;
case(4): img4._alpha-=modtrans; img5._alpha+=modtrans; break;
case(5): img5._alpha-=modtrans; img6._alpha+=modtrans; break;
case(6): img6._alpha-=modtrans; img7._alpha+=modtrans; break;
case(7): img7._alpha-=modtrans; img8._alpha+=modtrans; break;
case(8): img8._alpha-=modtrans; img9._alpha+=modtrans; break;
case(9): img9._alpha-=modtrans; img10._alpha+=modtrans; break;
case(10): img10._alpha-=modtrans; img11._alpha+=modtrans; break;
case(11): img11._alpha-=modtrans; img1._alpha+=modtrans; break;
}
}

if(contador>120){
img+=1;
if (img==12){img=1};
contador=0;
}

}

Debe quedar así:





Procedo a explicar las partes del código como buenamente pueda:

Código [Seleccionar] Expandir

onLoad = function(){

_root._quality="MEDIUM";

for (i=2; i<12; i++){
this["img"+i]._alpha=0;
}

modtrans = (100/60);
contador = 0;
img = 1;
}

Código [Seleccionar] Expandir

onLoad=function(){

}Todo el código que se escriba entre esa función se ejecuta una única vez cuando el fotograma se carga.

_root._quality="MEDIUM"; establece la calidad a Media. Al ser imágenes lo que se muestra la calidad no es muy importante.

Código [Seleccionar] Expandir

for (i=2; i<12; i++){
this["img"+i]._alpha=0;
}Crea un bucle, empezando la cuenta en 2 (i=2) que es ejecutado mientras i sea menor de 12 (i<12) y tras cada repetición suma 1 al valor de i (i++). En cada repetición del bucle la transparencia del Clip de Película de nombre img y numeración i se establece en 0 (100 es visible al 100% y 0 visible al 0% haciéndola completamente invisible) (this["img"+i]._alpha=0;).

Código [Seleccionar] Expandir

modtrans = (100/60);
contador = 0;
img = 1;Crea tres variables:
modtrans es lo que variará la transparencia de los Clips de Película. Está establecida dividiendo el míinimo nivel de transparencia (100) entre los fps, así tardará un segundo en completarse la transición entre las imágenes.
contador almacena los fps que han pasado. Empieza en 0.
img almacena la última imagen mostrada en pantalla. Empieza en 1.

Código [Seleccionar] Expandir

onEnterFrame = function(){

contador+=1;

if(contador<62){
switch(img){
case(1): img1._alpha-=modtrans; img2._alpha+=modtrans; break;
case(2): img2._alpha-=modtrans; img3._alpha+=modtrans; break;
case(3): img3._alpha-=modtrans; img4._alpha+=modtrans; break;
case(4): img4._alpha-=modtrans; img5._alpha+=modtrans; break;
case(5): img5._alpha-=modtrans; img6._alpha+=modtrans; break;
case(6): img6._alpha-=modtrans; img7._alpha+=modtrans; break;
case(7): img7._alpha-=modtrans; img8._alpha+=modtrans; break;
case(8): img8._alpha-=modtrans; img9._alpha+=modtrans; break;
case(9): img9._alpha-=modtrans; img10._alpha+=modtrans; break;
case(10): img10._alpha-=modtrans; img11._alpha+=modtrans; break;
case(11): img11._alpha-=modtrans; img1._alpha+=modtrans; break;
}
}

if(contador>120){
img+=1;
if (img==12){img=1};
contador=0;
}

}

Código [Seleccionar] Expandir

onEnterFrame=function(){

}Todo lo que vaya contenido en esa función se ejecutará a cada frame.

Código [Seleccionar] Expandir

contador+=1;Suma 1 al contador.

Código [Seleccionar] Expandir

if(contador<62){
switch(img){
case(1): img1._alpha-=modtrans; img2._alpha+=modtrans; break;
case(2): img2._alpha-=modtrans; img3._alpha+=modtrans; break;
case(3): img3._alpha-=modtrans; img4._alpha+=modtrans; break;
case(4): img4._alpha-=modtrans; img5._alpha+=modtrans; break;
case(5): img5._alpha-=modtrans; img6._alpha+=modtrans; break;
case(6): img6._alpha-=modtrans; img7._alpha+=modtrans; break;
case(7): img7._alpha-=modtrans; img8._alpha+=modtrans; break;
case(8): img8._alpha-=modtrans; img9._alpha+=modtrans; break;
case(9): img9._alpha-=modtrans; img10._alpha+=modtrans; break;
case(10): img10._alpha-=modtrans; img11._alpha+=modtrans; break;
case(11): img11._alpha-=modtrans; img1._alpha+=modtrans; break;
}
}Si el valor del contador es menor que 62 realiza el cambio en la transparencia de dos imágenes de un modo que enseguida explico. Está puesto a 62 para asegurarse de que se cambia por completo (100/60 tiene infinitos decimales).

Código [Seleccionar] Expandir

switch(img){
case(1): img1._alpha-=modtrans; img2._alpha+=modtrans; break;
case(2): img2._alpha-=modtrans; img3._alpha+=modtrans; break;
case(3): img3._alpha-=modtrans; img4._alpha+=modtrans; break;
case(4): img4._alpha-=modtrans; img5._alpha+=modtrans; break;
case(5): img5._alpha-=modtrans; img6._alpha+=modtrans; break;
case(6): img6._alpha-=modtrans; img7._alpha+=modtrans; break;
case(7): img7._alpha-=modtrans; img8._alpha+=modtrans; break;
case(8): img8._alpha-=modtrans; img9._alpha+=modtrans; break;
case(9): img9._alpha-=modtrans; img10._alpha+=modtrans; break;
case(10): img10._alpha-=modtrans; img11._alpha+=modtrans; break;
case(11): img11._alpha-=modtrans; img1._alpha+=modtrans; break;
}switch(variable) toma una variable e identifica su valor, la condición se termina de establecer con case(#), de manera que tienen lugar aquella acciones indicadas tras el case(#) que coincida con el valor de la variable indicada en el switch(variable), break es necesario para cerrar la condición. img#._alpha-=modtrans; img#._alpha+=modtrans; resta modtrans a la transparencia de la imágen que se muestra en pantalla y se lo suma a la siguiente que se va a ver creando un efecto de transición mediante cambio de transparencia entre ambas.

Código [Seleccionar] Expandir

if(contador>120){
img+=1;
if (img==12){img=1};
contador=0;
}Si la variable contador es mayor que 120 (lo que serían dos segundos para el caso del tutorial) la imagen que está visible cambia (img+=1). Si ese valor indica una imagen que no existe (en este caso la imagen 12) pasa a señalar la primera imagen (if (img==12){img=1};). Finalmente reinicia el contador (contador=0;) para que el ciclo comience de nuevo.

Pulsamos a la vez (CONTROL IZQUIERDA) e (INTRO) y miramos que todo animación funcione bien:

http://www.swfupload.com/files/53701Userbarsintapar.swf



Vemos que todo se transparenta, pero sin embargo hay partes que no nos interesa que lo hagan. Muy fácil. Incluimos en la biblioteca las imágenes para tapar esas partes:





Las colocamos ahora sobre las zonas que queremos mantener sin transparencia:





Ahora de nuevo pulsamos a la vez (CONTROL IZQUIERDA) e (INTRO) y comprobamos que ahora esas zonas parecen no tener transición:

http://www.swfupload.com/files/37816Userbartapada.swf



Sólo nos queda exportar nuestro flash. Para ellos pulsamos a la vez (CONTROL IZQUIERDA), (ALT), (SHIFT IZQUIERDA) y (S). Nos aparecerá un menú de exportación que lo dejaremos como se muestra en la siguiente imagen:





Ya está, tenemos nuestra userbar hecha con flash y lista para usarse.

Código [Seleccionar] Expandir

[flash=300,69]http://www.swfupload.com/files/37816Userbartapada.swf[/flash]

http://www.swfupload.com/files/37816Userbartapada.swf




Archivos del tutorial.

Tutoriales anteriores: {Photoshop} Cortar y Rotar Imágenes y {Flash} Inicio e Imagen Siguiendo al Ratón


Atentamente: lol

[PES Hero]

Muy interesante, lo he agregado a la lista de tutoriales.

[Darkokova]

Joe, menudo curro 
Gracias por el tuto, me han entrado ganas de hacerme una firma. :-[

[lol]

Joe, menudo curro 
Gracias por el tuto, me han entrado ganas de hacerme una firma. :-[

Si te animas y te surge alguna duda no dudes en decirlo .


Atentamente: lol

[Darkokova]

El caso es que yo tenía un Macromedia, pero creo que luego llevaba la coletilla de Dreamwork o algo así, ese también vale?.
A ver si lo encuentro y me pongo.

[lol]

El caso es que yo tenía un Macromedia, pero creo que luego llevaba la coletilla de Dreamwork o algo así, ese también vale?.
A ver si lo encuentro y me pongo.

No, el dreamweaver (creo que es al que te refieres) es para creación de páginas webs si no me equivoco. Si quieres pillar la versión actual (CS3) no busques por Macromedia, que ya no existe como tal sino como parte de Adobe, busca por Adobe .


Atentamente: lol