Google Web after-hours
Septiembre 2005
LunMarMieJueVieSabDom
 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

 
« Ago Oct »

Archivo para la categoría Flash mx

Usabilidad - Flash anchors

Miercoles, Enero 26th, 2005

En esta ocasión veremos las distintas formas en que podemos implementar anclas en flash. Veremos tres ejemplos:
Como crear anclas que enlacen con un documento HTML
Un sistema para navegar la lí nea de tiempo
El botón atrás y favoritos con Flash MX

1. Anclas desde flash a HTML

Supongamos que tenemos una página que se compone de una película flash (SWF) y una código HTML, por ejemplo una página HTML con un menú Flash cuyos enlaces, están en un solo documento.

on (release){
getURL("pagina.html#ancla");
}
// Código para el botón estilo MX
btn_miboton.onRelease=function(){
getURL("pagina.html#ancla");
}
// donde #ancla es el nombre del anchor HTML

2. Anclas en Flash 5 (botón Back)

El botón Back de un navegador es útil porque memoriza cada página visitada, y permite retroceder a …

Flash MX - Menu III (Botón con estado activo)

Lunes, Agosto 23rd, 2004

Dificultad
Ejemplo

Aunque el menú del ejemplo, no contiene ningún efecto espectacular, el código usado para construirlo es muy interesante, ya que se observan diferentes técnicas de escritura actionScript imprescindibles para crear un código bien estructurado.

o textFormatuso de arrays bidimensionalesdesahabilitar un botón

Para crear este menú, tan solo es necesario crear un clip de pelí cula como el que puedes ver en la imagen, dicho clip de pelí cula consta unicamente de un campo de texto.

Vincular el clip de pelí cula

El clip de pelí cula debe estar vinculado para exportar a actionScript.
Selecciona el clip de pelí cula en tu biblioteca.Haz clic con el botón derecho del ratón.Selecciona la opción Vinculación… del menú contextual.En la ventana de dialogo …

Menú acordeón

Viernes, Agosto 20th, 2004

Dificultad

Ejemplo

Crear un clip de pelí cula botón como el de la imagen:

Capa acciones:

Fotograma 1:

Stop()
this.texto.autoSize)true

Fotograma 10:

Play();

Fotograma 20:

Stop();
rminado el clip de pelí cula botón, arrastrar cuantas instancias sean necesarias al escenario.

actionScript

En una nueva capa, escribir el siguiente código actionScript:

Declarar variables que recogen la posición inicial de los botones

posy1 = boton1_mc._y;
posy2 = boton2_mc._y;
posy3 = boton3_mc._y;
posy4 = boton4_mc._y;

variable que determina el espacio que se desplazan los botones al seleccionar uno de ellos.

desplazamiento = 100;

Redefinir las variables de posicionamiento cuando se selecciona un botón

boton1_mc.onRelease = function() {
y2 = posy2+desplazamiento;
y3 = posy3+desplazamiento;
y4 = posy4+desplazamiento;
};
boton2_mc.onRelease = function() {
y2 = posy2;
y3 = posy3+desplazamiento;
y4 = posy4+desplazamiento;
};
boton3_mc.onRelease = function() {
y2 = posy2;
y3 = posy3;
y4 = posy4+desplazamiento;
};
boton4_mc.onRelease …

Flash MX - MX 2004 EmbedFonts con texto dinámico

Miercoles, Agosto 11th, 2004

Dificultad:

Dotar a nuestros sitios de personalidad, infundirles un estilo propio. La tipografí a juega un papel importante en este aspecto del diseño, pero podemos encontrarnos con barreras: el uso de fuentes que no son de sistema puede provocar que nuestro trabajo se vea afectado negativamente.

¿Que ocurre si un visitante no dispone de nuestra fuente favorita?

El sistema buscará la más parecida, resultado: imprevisible. Con Flash MX - Flash MX 2004, solucionar este problema, es muy sencillo, veamos los pasos que deberemos seguir:

Selección de fuente
Abre el panel biblioteca Crtl +LEn la parte superior derecha de la biblioteca, hacer clic sobre el icono de menú.En el menú seleccionar nueva fuenteEn la ventana Propiedades de Sí mbolo de fuente, selecciona la tipografí a …

WebViever - galerí a de fotos

Jueves, Agosto 5th, 2004

WebViewer
es una aplicación flash que permite crear galerias de fotos completamente personalizables sin necesidad de tocar una sola lí nea de código.

A fin de adaptar WebViewer a necesidades personales o profesionales, su interface es completamente personalizable, WebViewer dispone de las herramientas necesarias para crear skins propios.

Importante Gratis!!

Testing preloaders en local

Miercoles, Julio 28th, 2004

Este truco, es tan viejo como flash, pero ayer me sorprendió saber que hay quien no lo conoce, por tanto creo que puede ser útil para quien se inicie con flash.

Cuando creamos preloaders para nuestras páginas, nos encontramos con la frustración de no ver como actua en el entorno local, es decir, nos vemos obligados a subir los swf al servidor.

El truco: desde flash, pulsa la combinación de teclas Ctrl+Intro dos veces consecutivas y comprobarás como el preloader es visible. Lo interesante, es que si tenemos un sitio que carga diferentes pelí culas, mostrará todos los preloaders existentes (solo para flash MX 2004).

Ejemplo
Una página principal (con preloader) consta de un menú de 4 botones que cargan respectivamente una nueva …

Flash MX - El objeto Sound - Básico

Jueves, Julio 1st, 2004

Como sabes el sonido de un aplicación flash, puede ser incorporado arrastrando los archivos de sonido que tenemos en la biblioteca y dejándolos en un fotograma clave, sin embargo, esta no es siempre el mejor sistema, flash cuenta con el objeto Sound() que permite un mayor control y número de propiedades, en este tutorial, analizaremos los aspectos básicos para insertar sonido de forma dinámica con Flash MX (flash 2004 dispone además del componente Media).

Importando un archivo de sonido para vinculación

El primer paso, consiste en importar un sonido a la biblioteca de flash para seguidamente vincularlo, veremos como y para que.

Selecciona Menú>Archivo>Importar a biblioteca.
Selecciona el archivo de sonido de la biblioteca.
Haz clic con el botón derecho del Mouse
Selecciona vinculación
En la ventana …

Stage.onResize IV - Cuerpo centrado sin tablas, sin CSS!

Domingo, Junio 20th, 2004

El cometido de este tutorial, no es desvirtuar el uso de CSS, si no ver un ejemplo más de las posibilidades que nos brinda Stage.onResize().

En otros tutoriales, hemos visto como gracias al objeto Stage y su método onResize(), podemos controlar la posición y tamaño de los objetos de nuestras pelí culas flash.

En esta ocasión, veremos como mantener el cuerpo de nuestra página siempre centrado, es decir, si modificamos el tamaño del navegador, la parte central del site, mantiene la distancia proporcional entre sus bordes laterales y los del navegador, consiguiendo que siempre aparezca centrado, además el fondo de la pelí cula, mantiene sus proporciones.

Puedes ver un ejemplo terminado haciendo clic aquí

(Probado en IE6, Opera y MozillaFirebird)

Material

Para el …

Flash MX - Mapas de bits como patrones para relleno de color.

Sabado, Junio 19th, 2004

Están muy de moda los sitios con fondos geométricos, florales, tribales, etc. En este tutorial, veremos como crear este tipo de fondos con las herramientas de dibujo de flash a partir de un mapa de bits.

Dibujar un rectángulo

Selecciona la herramienta rectángulo ®
Dibuja un rectángulo con las idénticas medidas a las del documento. (550px 400px en este ejemplo) con color de relleno blanco y sin trazo.
Sitúa el rectángulo en las posiciones x =0 y = 0 del escenario.
Bloquea la capa.

Importar un mapa de Bits

Inserta una nueva capa y selecciónala.
Importa el mapa de bits que has elegido para crear el fondo
Selecciona el mapa de bits
Separa el mapa de bits (ctrl.+B)

Los tres pasos (imagen ampliada)

Crear el patrón

Una vez el …

Flash MX - AHpreloader Component

Miercoles, Junio 9th, 2004

He rescatado este fla que data de hace un año aproximadamente, época en la que empecé a interesarme por hacer mis propios componentes. Seguramente el código no es lo mejor, pero funciona bien y es de fácil uso. Se trata de una cargador de archivos externos (JPG, SWF) con preloader.

Para ver la precarga, refresca la pantalla F5

Estos son los parámetros que podemos modificar en el panel ‘Inspector de propiedades’:
Archivo externo: nombre del archivo que se cargará
Evitar caché: Boleano (true-false)
Posición x para la barra de precarga.
Posición y para la barra de precarga.
Mostrar barra de precarga: Boleano (true-false)
Borde barra de precarga:color
Relleno barra de precarga:color
Mostrar texto precarga: Boleano (true-false)
Texto precarga: String
Color texto precarga: color
Fuente texto …

Imágenes de alta resolución en flash

Lunes, Mayo 31st, 2004

Sin duda, todos los que nos hayamos inmersos en el estudio y la aplicación de flash en nuestros proyectos, dedicamos una buena parte de nuestro tiempo a la ‘investigación’ ya sea leyendo libros, haciendo pruebas, etc. con el fin de perfeccionar en lo posible nuestros trabajos; temas como optimización de recursos, tipografí as, imagen…

Es en este último punto donde me voy a centrar en este artí culo, ya que de siempre ha sido tema de estudio y debate conseguir que nuestras pelí culas flash tengan la mejor calidad de imagen sin que esto incida negativamente en el peso final del proyecto, por lógica cuanto mayor es la calidad de la imagen, mayor es el peso del .SWF.

Hoy, he descubierto …

Flash MX - Poblando el componente ComboBox con un archivo .TXT

Martes, Abril 27th, 2004

Mantener una lista de enlaces para tu página web, puede ser muy sencillo, en este ejemplo, veremos como hacerlo usando el componente comboBox y un sencillo archivo de texto.

or de texto y crea tu lista de enlaces, esta constará de una serie de variables que usaremos para almacenar el nombre del sitio web, la url y una única variable que determine el número de enlaces que contiene la lista.(guarda como tipo UTF-8)

enlaces.txt

&nombre0=Google
&enlace0=http://www.google.com
&nombre1=Macromedia
&enlace1=http://www.macromedia.com
&num_enlaces=2

2. abre una nueva pelí cula y arrastra una instancia del componente comboBox.
3. selecciona el componente y asignale un nombre de instancia, para el ejemplo
‘miCombo’.
4. inserta una capa nueva y escribe el siguiente código actionScript:

// – función llamada al seleccionar un elemento de la lista comboBox
function seleccion(component) {