Embed Size (px)
Citation preview
El lector de Flash, normalmente, permite ver sólo una proyección .SWF, pero utilizando elaction Load Movie es posible ver más proyecciones externas.
En este ejemplo se invoca el file loadmovie1.swf y se le asigna el nivel 1. La película principal tiene valore de nivel igual a 0. Todas las películas cargadas cogen color de fondo, frecuencia de fotogramas y dimensiones de este nivel. Cuando se carga una película externa, hay que asociar un número de nivel superior a 0, para evitar la sustitución con la película de base a nivel 0. La voz Unload movie from location permite descargar el movie ya sea de la película que de la memoria cache del browser. Si se selecciona, tendremos que incluir el número de nivel en el que está presente el movie que hay que descargar.La propiedad Variables se usa conjuntamente con la vozLoad variables into location. El uso de estas propiedades permite enviar variables a un CGI externo con modalidad GET o POST, según se necesite.
Para quien se está iniciando en la programación en general, es necesario aprender algunas nociones básicas. Un ejemplo son lasvariables.
Se puede definir una variable como un contenedor dentro del cual encontramos un valor:
Los valores pueden sernuméricos (4, 55, 82, 204, 5930 ecc..), cadenas ("html", "hola", "pluto", "ser o no ser" etc.) o bien el resultado deexpresiones (4+3, 345-15, en estos casos la variable asume el resultado de laexpresión).Los valorescadena son identificados por los limitadores " " mientras los valores numéricos y cadena no necesitan limitadores.
Además de las variables, existen las constantes. Se diferencian, como su propio nombre indica, por el hecho de que las variables pueden tomar valores diferentes según sean las situaciones que afrontan las constantes sin embargo, poseen siempre el mismo valor.En Flash, sin embargo, no existe esta distinción; por tanto, también las constantes se consideran variables (digamos... variables no modificables...).
Usando el lenguaje de programación Flash, se a menudo será necesario insertar variables, por ejemplo cuando se quiera crear un módulo para la recogida de datos. Todos los campos presentes en el módulo son variables.
En las lecciones que vendrán a continuación, explicaré el uso de las variables y cómo programar el valor.
A tavés de la acción Set Variable es posible darle un valor a una variable.
Pongamos un ejemplo:hemos incluido en nuestro movie Flash un form para la recogida de datos y se quiere insertar la tecla Reimposta que, cuando se pulse, borre los valores de todos los campos presentes en el form. Para hacerlo, necesitamos la instrucción Set Variable, incluida en el evento Release del botón y programada con los nombres de los campos al valor null.Adelanto que, incluyendo un campo de texto, y asignándole como nombre el mismo nombre de una variable, el campo se convierte en la variable misma y es posible invocarla en nuestras action.
Al pulsad reprograma se ha asignado esta ActionScript:
On (Release) Set Variable: "nombre" = "" Set Variable: "email" = ""End On
Dónde nombre e email son los nombres que se han asignado a los dos casilleros de texto. Por eso, cuando el usuario pulsa reprograma se les asigna a los dos casilleros de texto el valor nulo, y en consecuencia se cancelan los valores presentes en su interior.
¡Cuidado!Cuando se settan variables con determinados vaores, es importante especificar qué tipo de valores se está incluyendo. Flash permite incluir valores string literal o expression. Los valores string literal son valores fijos, no cambian según sean los eventos, mientras que los valores expression son valores dinámicos, que normalmente son el resultado de expresiones entre variables. En el ejemplo anterior se ha incluido un valor string literal, en cuanto que el valor que se asigna a los casilleros de texto es siempre el mismo (null).Sigue un ejemplo de Set Variabile a través de un valor expression (para cualquier aclaración, hay que consultar la lección Valores numéricos y cadena).
En este ejemplo están presentes tres casilleros de texto: num1, num2 e total.En el evento Release del botón calcula se ha incluido esta ActionScript:
On (Release) Set Variable: "totale" = num1+num2End On
A la variable/casillero de texto total se asigna el valor de las expresiones num1+num2 y por tanto el resultado de la suma entre el primer valor incluido y el segundo. Fijaos en la ausencia de las comillas "" que identifica un valor expression.
Breve precisiónPara para referirse a variables presentes en clip o películas externas, la sintaxis es la siguiente:
nometarget : nomevariabile
dónde nometarget es el nombre del target (consúltese la siguiente lección Especificación de los Target) en el cual reside la variable especificada con nombrevariable.
Presentemos algunos ejemplos...Si queremos convocar la variable pippo presente en una película externa cargada a nivel 1, la sintaxis es ésta:
_level1:pippo
Si, por el contrario, quisiéramos convocar la variable pippo presente en el interior de la clip pluto, ésta es la sintaxis:
/pluto:pippo
Contador
Ocurrirá a menudo que habra que utilizar un contador en nuestras action. Un contador es una variable que se incrementa con tot cada vez que la acción la convoca.¿Qué habría que hacer si quisiéramos añadir 1 a la variable x con valor 23?Con esta action:
Set Variable: "x" = x + 1
asignamos a la variable x el valor de x (es decir el valor que está dentro) más uno:
"x" = x + 1"x" = 23 + 1
quindi "x" = 24
La próxima vez que sea invocado, será incrementado con 1 y llegará a la cuota 25. Y así todas las veces que sea invocada...
Descarga la fuente del primer ejemploDescarga la fuente del segundo ejemplo
Antes de proseguir el curso con las demás lecciones, será bueno entender qué son los target y qué hay que hacer para invocarlos.
Target, traducido literalmente, significa objetivo. Es decir un objeto al que se ha asignado una función determinada.Pero, ¿cuáles son nuestros objetivos en Flash? ¿Aprender a usarlo? Si, así es, pero entendía algo más inherente a la programación Flash. ;-)Se pueden especificar como target sólo los movieclip o las películas externas cargadas a través de Load Movie.El target es necesario en algunas action que estudiaremos más adelante. Por ejemplo, redimensionar la longitud de un movieclip, o controlar el cabezal de lectura frame de una película externa o, sin más, arrastrar con el ratón un movieclip.
Es durante la escritura de las action cuando tendremos que especificar el nombre del target que hay que controlar. ¿Pero que nombre hay que usar? Muy sencillo, el nombre que le daremos a la solicitud del movieclip después de haberlo incluido en el área de trabajo (para las películas externas, ya explicaré más adelante el procedimiento). Veamos cómo actuar:
1) seleccionar el movieclip deseado y arrastrarlo al área de trabajo sin dejar de presionar el pulsante del ratón hasta que se encuentre la posición precisa para la clip:
2) liberar el pulsante del ratón y el movieclip aparece en el área de trabajo:
3) señalad con el pulsante derecho del ratón en el movieclip apenas incluido y digitad un nombre para la instancia:
El nombre que se especifica para la instancia, conviene elegirlo lo más corto posible e inherente (es obvio) con elmovieclip. En este caso, he llamado la instancia de logo HTML, simplemente logo.
Será este nombre el que nos permitirá controlar el movieclip en nuestras action. Por tanto, el nombre de la instancia, es esencial.
Bien, si habéis llegado hasta aquí tranquilamente..., preparaos para lo peor.
Cuando incluyáis un movieclip en la película, es necesario prestar mucha atención a dónde se coloca. Porque Flash tiene una estructura de los objetos similar a la de los directorios de un sistema operativo.
Me explico...Como acabamos de hacer, la instancia logo del movieclip logo HTMLpoint se ha incluido en el Scene principal de nuestro movie. Si hubiésemos incluido el movieclip en otro movieclip de nombre pippo entonces la instancia logo se encontraría en la clip pippo y no en la película principal.
En este caso la instancia logo está en la película principal del movie.
Para entender mejor la cuestión, he aquí un esquema que muestra la estructura de las clip:
Película.swf (nivel 0) Clip logo Clip htmlPelícula1.swf (nivel 1) Clip pippo
En este caso, en la película principal se encuentra la clip logo que a su vez contiene la clip html. Mientras en la película secundaria "Película1" se encuentra la clip pippo.
Estoy explicando todo esto por el hecho de que, cuando se especifica un target, hay que incluir, además del nombre, también el recorrido de la clip.Invocando la clip logo, tendremos que incluir como target: /logo (la barra / significa que la clip está situada en la película principal del movie).Para invocar la clip html tendremos que escribir: /logo/html porque está situada dentro de la clip logo que está en la película principal.Y por fin, para invocar la clip pippo habrá que escribir: _level1/pippo. Cuando se invocan clip de películas externas, hay que incluir la voz _leveln donde en lugar de n se incluye el número de nivel de la película que contiene la clip (hay que prestar atención a incluir también el carácter underscore _ ). Podremos, por tanto, escribir _level0/logo para invocar la clip logo, pero nos arriesgamos a que la lectura de nuestras action sea difícil.
Os aconsejo que aprendáis bien esta lección, que es muy importante para afrontar con mayor facilidad todo lo que falta a propósito de la programación Flash.
La instrucción Tell Target nos permite controlar algunas situaciones para las clip o películas indicadas como target.
Veamos un sencillo ejemplo de Tell Target:
Los dos botones dirigen la lectura del frame (adelante y atrás) del movieclip logo.
Lo primero, arrastarar el movieclip deseado a la zona de trabajo y asignarle un nombre a su instancia (en este caso, la instancia se llama logo). Incluir también los dos botones y asignarle el action Tell Target de esta manera:
Hay que señalar que Flash ofrece un menú de todas las instancias incluidas en el movie principal, pero no es necesario seleccionar a la fuerza una voz del menú, se puede también escribir directamente en la propiedad Target el nombre de la instancia.
Se selecciona, por tanto, la clip logo como target de Tell Target. Desde este momento todas las action que incluimos en Tell Target serán asignadas a la clip logo. Incluimos pues Go to Previous Frame para el boton atrás y Go to Next Frame para el botón adelante.Éstas son las 2 ActionScript:
Botón atrás:
On (Release) Begin Tell Target ("/logo") Go to Previous Frame End Tell TargetEnd On
Botón adelante:
On (Release) Begin Tell Target ("/logo") Go to Next Frame
End Tell TargetEnd On
De esta manera, pulsando el botón adelante, el movieclip logo es invocado y el "cabezal" de lectura frame es trasladada al frame sucesivo al que se encuentra. Análogamente, si se pulsa el botón atrás el cabezal de lectura frame se traslada al frame anterior.
N.B. Para efectuar esta animación, se han insertado dos action Stop en el primero y en el último frame del movieclip logo (si no, la animación se repetiría hasta el infinito).
ProfundizaciónEs posible especificar como target también la película principal, insertando la barra / sin especificar nada más:
On (Release) Begin Tell Target ("/") Stop End Tell TargetEnd On
En esta action la película principal se para en el Release del ratón.
Descarga el ejemplo de esta leccion
En una película Flash interactivamente rica, puede resultar útil la opción de arrastre de clip, quizá un pequeño menú que pueda trasladarse de un punto a otro del movie, o incluso el mismo efecto MouseTrace, el efecto, visto ya en muchos sitios, en el que el usuario es entretenido por una animación condicionada por el movimiento del cursos. El arrastre es posible a través del action Drag Movieclip.
Éstas son las propiedades para el action:
Por defecto, es seleccionado Start drag operation que indica la activación del arrastre de la clip indicada en la propiedad Target. Es posible seleccionar una clip a través del uso del Target Editor (clicar sobre el instrumento abc):
La opción Lock mouse to center permite situar la clip con su centro exactamente en el ángulo superior izquierdo del cursor del ratón. En los dos ejemplos de esta página, se activa esta opción.La opción Constraint to rectangle, sin embargo, limita el arrastre al interior de un rectángulo con las dimensiones indicadas en los parámetros left, top, right y bottom:
Seleccionando la voz Stop Drag Operation se termina la operación de arrastre.
Descarga el primer ejemplo de esta lecciónDescarga el segundo ejemplo de esta lección
Esta lección es muy importante para entender del mejor modo las siguientes. Os aconsejo, por lo tanto, leer con mucha atención, aunque bastantes cosas os parecerán obvias.
Está claro que cuando se habla de valores numéricos se entiende un número, mientras que por valores cadena se entiende una palabra; ¿no es así? Pues en absoluto. Puedo hablar de valores cadena también cuando se trata de números; he aquí algunos ejemplos:
23, 1730, "sitio", "sitio2", "222"
Los valores numéricos están coloreados de rojo, mientras los cadena lo están de azul. Los valores cadena tienen la particularidad de estar encerrados por limitadores " ". Por eso, si quisiéramos darle a una variable de nombre x el valor numérico 23 no seria exacto escribir así:
Set Variable: "x" = "23"
(dejando activa la voz Cadena Literal en el parámetro Value)porque de este modo, la variable x asumiría un valor cadena ("23") y no un valor numérico (23). He dicho que "no sería exacto" por el hecho de que si para hacer, quisiésemos añadir 1 a la variable x (x + 1) después de haberle asignado ese valor cadena, automáticamente Flash reconocería el valor insertado como numérico y ejecutaría la operación.Si intentásemos sumarle a un valor cadena (para hacer. "html") uno numérico, Flash lo transformaría literalmente en 0 y añadiría el segundo valor de la suma:
"html" + 5 = 5o bien
0 + 5 = 5
Para escribir correctamente la action, dadle un valor expresión (que identifica tambien un valor numérico) a la variable:
Set Variable: "x" = 23
Con valores numéricos podemos ejecutar operaciones como suma, resta, división y multiplicación, algo imposible si usamos valores cadena donde la única operación permitida es la concatenación.He aquí una tabla que resume todos los posibles operadores para los dos tipos de valores:
OPERADORES
SIGNIFICADOValores numéricos Valores cadena
+-/
&SumaResta
DivisiónMultiplicación
*
=<><>
<=>=
eq (equals)ni (not equals)lt (less than)gt (greather than)las (less than or equal to)ge (greather than or equal to)
IgualDistinto
Menor queMayor que
Menor o igual queMayor o igual que
Como se puede ver, al + numérico corresponde el & cadena, al = numérico corresponde eq cadena, etc.
Planteando el caso de que se tuviesen dos variables x y k con valores, respectivamente, de 23 y "HTML" (es decir numérico y cadena), las dos action:
Set Variable: "x" = x + 1Set Variable: "k" = k & ".it"
darían como resultado x = 24 y k = "HTMLpoint". La concatenación entre dos valores cadena da como resultado la unión de los dos (en este caso, k tenía ya valor "HTML" en su interior, el mismo resultado lo da el action k = "HTML" & ".it").
Los operadores comparativos se utilizarán en las siguientes lecciones. Por ahora, limitaos a entender que: cuando se crean condiciones de igualdad, mayoría o minoría hay que utilizar los operadores adecuados, según los tipos de valores que se estén comparando. Por eso, emplear el operador eq para valores numericos es un error, del mismo modo que usar = para valores cadena.
Cuidado, por tanto, cuando se haga referencia a variables; habrá que escribir algo así:
Set Variable: "x" = "x + 1"
(por tanto cadena literal)quiere decir asignarle a x el valor "x + 1" entendido como cadena, por el contrario, nosotros queremos que se considere como expresión, y por tanto como resultado de x +1. Por ello, habrá que clicar en expression para eliminar los limitadores quot; ":
Set Variable: "x" = x + 1
Además de los operadores para estos dos tipos de valores, existen también unas funciones que implemetan el uso.
Funciones numéricas
Para los valores numéricos existen exclusivamente dos funciones: Int y Random.
IntTransforma en enteros valores numéricos decimales.La sintaxis es la siguiente: Int ( number )Donde number es el número o la variable que hay que transformar en un entero.
RandomGenera un valor numérico entero casual en el intervalo de valores entre 0 y el número incluido como valor number. La sintaxis es la siguiente: Random ( number )
En este caso number tiene valor 1000, y ésta es la action del botón:
On (Release) Set Variable: "x" = Random (1000)End On
donde, obviamente, x es el nombre de la casilla de texto.
Funciones cadena
Para los valores cadena existen estas funciones: Substring, Length, Chr e Ord.
SubstringPermite extrapolar parte de una cadena.La sintaxis es: Substring ( string, index, count )Donde string es la cadena o la variable de la que tomar el "trozo", index es el número del carácter del que partir para la extrapolación y count es el número de caracteres que tiene que tomar para la extrapolación.Por tanto, una action de este tipo: Substring ("HTML.it", 3, 4) da como resultado "ML.i" o sea 4 caracteres a partir del tercero.
LengthRestituye el número de caracteres que componen una cadena o una variable.La sintaxis es: Length ( string ).Length ("HTMLpoint") restituye valor 7.
ChrConvierte un código ASCII en carácter.La sintaxis es: Chr ( asciiCode )
OrdConvierte en carácter un código ASCII.La sintaxis es: Ord ( character )
Descarga el primer ejemplo de esta lecciónDescarga el segundo ejemplo de esta lecciónDescarga el tercer ejemplo de esta lección
Get property
La action GetProperty restituye el valor de la propiedad del target especificado.
He aquí cómo se presenta la sintaxis de la instrucción GetProperty:
GetProperty ( target, property )
donde target es el nombre de la instancia de la que tomar el valor de la propiedad (property) deseada.
Para cada clip hay muchas propiedades que describiré en las lecciones siguientes.Todas las propiedades tienen la particularidad de estar precedidas por el carácter underscore _ antes del nominativo.En esta lección me limitaré a explicar el uso de las propiedades _x y _y.
"_x" y "_y"
A través de _x e _y es posible saber la posición x e y en puntos de la clip especificada como target:
En esta película, la clip logo se convierte en arrastrable a través de la action Drag Movieclip y las variables x e y tienen como valor la action GetProperty:
Set Variable: "x" = GetProperty ( "/logo", _x )Set Variable: "y" = GetProperty ( "/logo", _y )
De esta manera, la variable x toma el valor de la propiedad _x (posición horizontal de la clip) de logo. Para crear esta action, al incluir la instrucción Set Variable, hay que asignar x como target y en el campo value abir el expression editor:
En ese momento, se tiene que seleccionar del menú Functions la voz GetProperty:
borrar las cadenas target y property, y sustituirlas por "/logo" y _x. Tened cuidado de incluir el nombre del target con los limitadores " " si no, os arriesgáis a que no se vea absolutamente nada.
Hay que repetir la misma operación para la variable y especificando como propiedad _y.
Descarga el ejemplo de esta leccion
Otras propiedades de Get property
Otras propiedades
La sintaxis para saber el valor de las otras propiedades es la misma, por tanto me limitaré a resumir el significado para cada una de ellas.
"_xscale" e "_yscale"Porcentaje escalar de la clip. En pocas palabras, indica el "zoom" de la clip.
"_rotation"Grado de rotación de la clip.
"_width" e "_height"Anchura y alura, en pixel, de la clip.
"_name"Nombre de el clip.
"_url"Recorrido del file .swf que contiene la clip.
"_target"Nombre del target.
"_visible"Indica si la clip es visibile o no. El valor 1 indica que la clip es visibile, mientras que el valor 0 indica que es invisible.
"_alpha"Porcentaje de transparencia de la clip.
"_totalframes, _framesloaded, _currentframe"Respectivamente: encuadres totales, encuadre cargado y encuadre corriente. En este caso se refieren a los encuadres que componen el movieclip logo (en cuanto que ha sido asignado como target) y no a la película principal.
Descarga el ejemplo de esta lección
Con el action Set Property se puede programar una propiedad de la clip señalada como target.Haced la prueba de incluir 2 valores numéricos para x e y en los campos de la película subyacente y clicad en "programa":
Como se habrá visto, la clip logo se coloca en el punto x,y señalado en los valores incluidos. El desplazamiento ha sido posible programando, a través de Set Property, las propiedades X Position e Y Position del target logo.
La sintaxis para esta action es la siguiente:
Set Property ( target, property ) = value
donde target es el nombre de la instancia sobre la que settar la propiedad property con valor value.
En el ejemplo que acabamos de ofrecer, la action para el botón "programa" es la siguiente:
On (Release) Set Property ("/logo", X Position) = x Set Property ("/logo", Y Position) = yEnd On
Cuando se deja de pulsar la tecla del ratón, logo adopta la posición horizontal y vertical (x e y position) igual a los campos x e y (los valores que se han incluido en las casillas de texto). Tened cuidado de no incluir el valor de value como valor String Literali sino Expression pues de otro modo existiría el riesgo de no ver ningún resultado.
A diferencia de GetProperty, las propiedades de esta action se pueden elegir exclusivamente del menú en cascada que Flash propone:
y se explicarán en la próxima lección.
Descarga el ejemplo de esta lección
Otras propiedades
Dado que la sintaxis y el procedimiento para las otras propiedades de Set Property
son iguales para todas, me limitaré a describir el significado:
"X Scale" e "Y Scale"Programa la escala de la clip (en porcentajes). En pocas palabras, indica el "zoom" de la clip.
"Rotation"Programa el grado de rotación de la clip.
"Name"Es posible settar un nuevo nombre para la clip. La clip asumirá un nuevo nombre y las referencias a ella con el viejo nombre no tendrán efecto.
"Visibility"Programa la visibilidad de la clip. Settando un valor igual a 1 la clip se hace visible (si no lo es ya); con valor igual a 0 sin embargo, la clip se hace invisible.
"Alpha"Programa la transparencia de la clip (en porcentaje).
"High quality"Programa la alta calidad (1 activada, 0 desactivada) para la película. No es posible asignarle esta propiedad solo a una clip.
"Show focus rectangle"Si se le asigna valor 1 a esta propiedad, durante la visión del movie, clicando en la tecla TAB del teclado, se verá un rectángulo amarillo rodeando a la clip botón incluida. Asignad valor 0
para evitar todo esto; También esta propiedad se puede asignar exclusivamente a toda la película y no a clip individuales.
"Sound buffer time"Establece el número de segundos de streaming para el pre-buffer. Por defecto se ha settado a 5 segundos.
Descarga los ejemplos de esta leccion en formato ZIP (36kb)
La action FS Command permite enviar mensajes al programa host, en el cual está la película Flash. El programa host puede ser el proyector Flash o bien el browser web.
Utilizando FS Command para el proyector de Flash, la sintaxis resulta tan veloz como simple:
De hecho, basta con seleccionar una voz del menu For standalone player para conseguir que la orden se ejecute.
Éstas las propiedades posibles:
Fullscreensitúa la película en toda la pantalla (true para activarlo, false para desactivarlo).
AllowscaleSi true coloca la película en la modalidad Mostra tutto. Si false coloca la película al 100% de sus dimensiones sin escalas.
ShowmenuSi true activa el menú completo al clic del pulsante derecho del ratón sobre la película. Si false desactiva la visión.
ExecEjecuta una aplicación dentro del proyector (hay que especificar en arguments la aplicación que se quiere ejecutar).
QuitCierra el proyector.
Como ya se ha dicho, el action FS Command permite enviar mensajes al programa host que hospeda a la película Flash. Si se envían informaciones al browser web hay que crear scripts capaces de "capturar" dichos mensajes e interpretarlos.
En esta lección propondré un ejemplo simple de cómo conseguir abrir una nueva ventana del browser de un botón Flash. No explicaré, sin embargo, el funcionamiento del JavaScript pues no me aprece pertinente en un curso Flash.
1a Fase - Configuración de los tag <OBJECT> e <EMBED>
Para empezar, hay que preparar el código HTML de la página web en la que está la película Flash. Es necesario aportar algún pequeño cambio en los tag <OBJECT> y <EMBED> que asignan los parámetros a la película Flash.
Antes de nada, tenemos que convertir la película "capturable" para los scripts. Para hacer esto, le damos un nombre a la película Flash; con este nombre, después, los scripts podrán identificar las informaciones que le enviaremos al browser.Añadamos a los dos tag <OBJECT> y <EMBED> las voces ID e NAME:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" WIDTH="100" HEIGHT="100" ID="AbreVen."><PARAM NAME="MOVIE" VALUE="prova.swf"><PARAM NAME="PLAY" VALUE="TRUE"><PARAM NAME="LOOP" VALUE="FALSE"><PARAM NAME="QUALITY" VALUE="HIGH"><PARAM NAME="SCALE" VALUE="showall">
<EMBED NAME="AbreVen" swLiveConnect="true"SRC="prova.swf" SCALE="showall" PLAY="true" LOOP="false" QUALITY="high" WIDTH="100" HEIGHT="100" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED></OBJECT>
(el código que se muestra sirve sólo como ejemplo para comprender mejor la posición de los parámetros ID y NAME)
En este ejemplo se ha asignado a los parámetros ID y NAME el valor AbreVen. Éste es el valor con el que los scripts podrán interceptar las informaciones e interpretarlas.
El parámetro swLiveConnect se incluye exclusivamente en el tag <EMBED> y permite cargar Java en la visión de la pagina. De esta manera, el browser no ralentiza la ejecución de los script cargando Java en el momento en que se abre la ventana.
2a Fase - Asignación de la action en el botón
Llegados a este punto, incluimos en la película Flash la clip botón que le permitirá ,cuando se clica, que se abra una nueva ventana del browser.Asignamos esta action:
On (Release) FS Command ("nueva-ventana", "http://www.htmlpoint.com")End On
dove nueva-ventana y el nombre que se hemos ya asignado a la orden (podemos asignarle cualquier nombre, es suficiente con que el valor en los scripts sea el mismo), y http://www.htmlpoint.com es el argumento (la nueva página web que hay que abrir).
3a Fase - Creación de los script
Podemos ya proceder a la creación de los script que van a permitir que se abra una nueva ventana del browser.
Éste es el código JavaScript que permite ejecutar la operación:
<SCRIPT LANGUAGE="JavaScript"> <!--
function ApriFin_DoFSCommand(command, args) { if ( command == "nueva-ventana" ){ window.open(args,'','scrollbars=yes,width=650,height=400');}}
//--> </SCRIPT>
La función Java DoFSCommand convoca a la película Flash AbreVen y recupera las variables command y args (que en nuestro caso tienen valor "nueva-ventana" y "http://www.htmlpoint.com").
¡Cuidado!Si tenéis intención de modificar los valores de los parámetros ID y NAME tened cuidado de sustituir con el mismo valor el nombre de la función DoFSCommand.Pongamos un ejemplo: si en lugar de AbreVen hubiésemos elegido seleccionar el nombre Pippo, la función JavaScript sería ésta: Pippo_DoFSCommand(..).
Como se ve, la función puede aceptar más elecciones enviadas por Flash y ejecutar operaciones diferentes. De hecho, en este ejemplo se ejecuta la operación de apertura de la ventana si el command es igual a nueva-ventana. Por tanto podemos incluir mas alecciones en la misma función y asignarle a cada una de ellas una operación.
Llegados a este punto, con Netscape podemos ver los resultados de la lección, mientras que con Explorer tenemos que insertar una parte más de código:
<SCRIPT LANGUAGE="VBScript"><!-- // Para IE.
Sub AbreFin_FSCommand(ByVal command, ByVal args)call AbreVen_DoFSCommand(command, args)end sub
//--></SCRIPT>
siendo el VBScript el lenguaje por defecto.Esta breve función convoca el JavaScript creado anteriormente y le envía las variables recibidas por la película Flash.
Estos dos script hay que insertarlos dentro de los tag <HEAD> y </HEAD>.
Profundización
Por desgracia, la orden FS Command no es compatible con todas las versiones de los browser, como sucede si se quiere convocar JavaScript directamente con la acción Get Url. He aquí una tabla que resume la compatibilidad o incompatibilidad de los distintos browser:
Script para la
marcación plug-in
Load Movie
"JavaScript:" nel GetURL
FSCommand, comunicacion entre Flash y
JavaScript
Netscape 3.0 y superiores
Mac 68k No No No No
Mac PowerPC
Sí Sí Sí Sí
Windows 3.1 Sí No No No
Windows 95/98/NT/2K
Sí Sí Sí Sí
Internet Explorer 3.0 y superiores
Versione 3Macintosh
No No Sí No
Versión 4.5Macintosh
No Si No No
Versión 5.0Macintosh
Sí Sí Sí No
Versión 3Windows 3.1
No No No No
Versión 3Windows 95/98/NT
Sí Sí No Sí
Versión 4Windows 95/98/NT
Sí Sí Sí Sí
Versión 5Windows
95/98/NT/2K
Sí Sí Sí Sí
Mira el resultado de esta lección
Descarga el ejemplo de esta lección (file ZIP)
A menudo puede ocurrir que se crean efectos dinámicos que necesitan la inclusión de más instancias de una clip; esto haría que la película fuese demasiado complicada de gestionar. Para evitarlo, se ha introducido en Flash la action Duplicad Movieclip que, cada vez que se utiliza, crea un duplicado (una instancia) de la clip especificada como target. He aquí un ejemplo muy simple:
Cuando se pulsa la tecla DUPLICA se ejecuta la action Duplicad Movieclip además de la formulación de otros parámetros que permiten desplazar la nueva clip duplicada más a la derecha respecto a la original:
On (Release) Set Variable: "x" = x+1 Duplicad Movie Clip ("/logo", "logo" & x, x) Set Property ("/logo" & x, X Position) = (GetProperty ( "/logo", _x ) * x)End On
Como se ve por la imagen, es fácil entender la sintaxis de laaction.En el parámetro target incluid el nombre de la clip original que se tiene que duplicar; en New Name dad el nuevo nombre que debe tener el duplicado y, para terminar, en Depth asignad un valor numérico de superposición respecto a la clip original (qué clip tiene que superponerse a otra).
Seguro que se habrá notado que en los parámetros New Name y Depth no hay valores numéricos, sino valores expression. El motivo hay que buscarlo en el hecho de que la action carece de valores de este tipo ("dinámicos"), Duplicad Movleclip sólo tendría efecto una vez. En efecto, si hubiesemos incluido valores fijos logo1 y 1 respectivamente para New Name y Depth, cada vez que se eligiese el botón el nuevo duplicado sustituiría al viejo sin crear uno nuevo. Por esta razon, es necesario incluir valores dinámicos. En efecto, cada vez que se libera el botón, se genera una clip con nombre "logo" & x; después logo1 la primera vez; logo2 la segunda; logo3, la tercera, etc. (¿recordáis el uso del operador & para concatenar más cadenas?) También Depth asume un valor dinámico que cada vez se va incrementando de unidad en unidad.
La variable x tiene que asumir un nuevo valor (incrementado de 1) todas las veces que se libere el botón, por eso antes de ejecutar la action Duplicad Movieclip incluimos:
Set Variable: "x" = x+1
Después, para darle la nueva posición a la clip que se acabe de duplicar, será necesario utilizar la action Set Property que asigna un valor a la propiedad X Position (posición horizontal) de la clip "/logo" & x:
Set Property ("/logo" & x, X Position)
Dado que la posición de la nueva clip varía dinámicamente con el número liberaciones del bottone, es necesario crear una expresión que permita desplazar de tot pixel el nuevo duplicado que se haya generado:
GetProperty ( "/logo", _x ) * x
El valor de la posición horizontal de la clip logo original hay que multiplicarlo por el valor de la variable x.Para evitar que la primera clip duplicada se superponga a la original (x tendría valor 0), incluimos
Set Variable: "x" = "1"
en el primer keyframe del movie Flash.
Step by stepPara entender mejor estas instrucciones, hagamos un test "step by step"...Entonces, se ejecuta la animacion y la variable x adquiere valor 1 (para la action incluida en el primer keyframe).Cuando el usuario clica en el botón y lo suelta, veamos qué sucede (suponiendo que la clip logo se haya colocado en posición horizontal igual a 30):
ACTION RESULTADO
Set Variable: "x" = x+1 2(da 1+1)
Duplicate Movie Clip ("/logo", "logo" & x, x) Name: logo2Depth: 2
Set Property ("/logo" & x, X Position) = (GetProperty ( "/logo", _x )*x)
60(da 30*2)
Por lo tanto, se genera una nueva clip logo2 con valores "duplicados" del orioginal (posición, nombre y depth).
La segunda vez que se suelta, esto es lo que pasa:
ACTION RISULTATO
Set Variable: "x" = x+1 3(da 2+1)
Duplicate Movie Clip ("/logo", "logo" & x, x)Name: logo3Depth: 3
Set Property ("/logo" & x, X Position) = (GetProperty ( "/logo", _x ) * x)
90(da 30*3)
y así para cada vez que se suelta el botón.
Remove Movieclip
Con este parámetro, se elimina la clip especificada como target.Si las clip se han creado dinámicamente, es necesario especificar también este valor dinámicamente.
Descarga el ejemplo de esta lección
Quien haya tenido experiencias de programación con cualquier lenguaje, puede saltarse tranquilamente esta lección, ya que intentaré explicar con brevedad el uso y el significado de la condición IF.
Os sucederá a menudo que tenéis que usar estas instrucciones en películas interactivas.Por ejemplo, si nuestra película incluye un módulo para enviar datos, ¿no os parece "elegante" añadir un control de los campos? Es decir, una vez que el usuario ha clicado en el bottone "envía", la película hace una comprobación y, si todos los campos han sido compilados, el módulo se envía; si no, aparece un mensaje que nos insta a compilar completamente el form.
Traduciendo las tres instrucciones if, then, else deducimos si, entonces, si no. En definitiva, las bases de la programación.
En la película de antes, he empleado la condición If de este modo:
si nombre (nombre del campo) es igual a "" (nada... valor nulo, por lo tanto no ha sido digitado nada) o bien email (nombre del campo) es igual a "" entonces muestra el error si no envía el módulo.
Traducido al lenguaje interno de Flash:
If (nome eq "" or email eq "") Go to and Stop ("error") Else Go to and Stop ("enviado")End If
En Flash se omite la palabra Then tras la condición If, y quizá esto puede confundir, pero basta incluir las action que hay que ejecutar, si la condición es verdadera, después de la cadena inicial If:
If (nombre eq "" or email eq "") Then Go to and Stop ("error") ... aquí se pueden incluir también otras action que ejecutar si la condición es verdadera...End If
Para añadir la instrucción Else en Flash, hay que seleccionar la primera línea de la condición ( If (condición) ) y clicar en el botón Add Else/Else If clause:
En el campo Actions se añadira la condición Else y todo lo que se incluya inmediatamente después se considerará "si no" (los dos campos de texto no tienen valores nulos).
Como habréis podido apreciar, la condición IF utiliza algunos parámetros, llamados operadores lógicos, que implementan el uso. Estoy hablando de OR y AND.OR (o bien) permite verificar una condición o bien otra (o tantas otras, depende de las veces que se añada). Por eso, para que la condición resulte verdadera al menos una de las elecciones tiene que resultar verdadera.Con AND (y) sin embargo, tienen que satisfacerse todas las elecciones incluidas, pues si no la condición no tendrá lugar.Si en lugar de or hubiéramos incluido and en el ejemplo anterior, la condición se habría visto satisfecha sólo si los campos nombre y email hubiesen resultado iguales a "".
Una vez añadida la condición Else y seleccionándola, tendremos la oportunidad de elegir Else o Else If:
Con Else If se puede añadir una condición ulterior al bloque If... End If.Colocad después de esta condición todas las action que se tendrían que ejecutar se si ésta resultase verdadera.
Descarga el ejemplo de esta lección
Cuando una action se tiene que ejecutar un cierto número de veces, se utiliza la instrucción loop, que permite crear un ciclo en cuyo interior se ejecutan las action para un tot número de veces.
Suponiendo que en nuestra película necesitásemos incrementar la variable x en una unidad 100 veces, la sintaxis sería:
Loop While (x < 100) Set Variable: "x" = x + 1End Loop
Todo lo que se encuentre dentro del bloque Loop... End Loop se ejecutará 100 veces.While significa "mientras", por eso: ejecuta el ciclo mientras x èsea menor que 100.
Observad el ejemplo de aquí abajo, en que se una la action Duplicate Movieclip en un ciclo loop:
Veamos cómo se presenta la action para la duplicación del movieclip:
Loop While (x < 12) Set Variable: "x" = x + 1 Duplicate Movie Clip ("/logo", "logo" & x, x) Set Property ("/logo" & x, X Position) = (GetProperty ( "/logo", _x ) * x)End Loop
Para doce veces se:- incrementa x en 1- duplicada la movieclip logo- desplazado el duplicado de x pixel hacia la derecha
A menudo, el loop se usa con una variable que se incrementa en su interior como en este caso.Cada vez que se termina un ciclo, está el control sobre la condición y por tanto es posible salir. En efecto, incluyendo una condición IF se podría controlar el valor de x y, asignándole uno igual a 12, tener la salida prematura del ciclo.
Descarga el ejemplo de esta lección
Call permite invocar el frame preciso de un movieclip o de una película. Normalmente se usa para ejecutar operaciones comunes a más clip de la película. En efecto, no sería muy conveniente en términos de tiempo asignarle a más botones por ejemplo, las mismas action. En este caso, el papel de salvavidas lo desempeña call.
La sintaxis para call es:
Call ("nomeclip:labelclip")
donde nombreclip es el nombre de la instancia de la clip que se quiere invocar y labelclip la label a la que referirse.
Un ejemplo puede serlo un teclado numérico de este tipo:
El display de este teclado está en un movieclip llamado pantalla y cada vez que se presiona un botón numérico, se ejecuta esta action:
On (Release) Set Variable: "/pantalla:tecla" = "0" Call ("/pantalla:AñadidaTecla")End On
Tecla es una variable que reside en el movieclip pantalla y por por esto se invoca empleando antes el nombre del movieclip "recipiente". Obviamente, su valor cambia según el botón que se toque. En este caso, se muestra la action para el botón 0.Call invoca el frame con label AñadeTecla del movieclip pantalla:
Como se puede ver, he separado con dos niveles las operaciones y el display del teclado. Esto permite que se trabaje mejor y que no se cree confusión con eventuales cambios futuros.
En el frame AñadidaTecla está presente esta action:
Set Variable: "display" = display & tecla
De esta manera, se le une a display el nuevo valor que viene del Release de la tecla seleccionada.
Si fuese sólo así, este ejemplo resultaría escaso y, además, no habría permitido que se entendiesen mejor las posibilidades del call, por tanto, no contentos con esto, añadamos una pequeña comprobación:-)
Queremos que este teclado digite exclusivamente 9 nueve cifras y no más. Añadamos entonces un control en el frame AñadeTecla que comprueba el display: si display es mayor de 9 cifras, entonces no incluir más cifras, si no, añade:
ed ecco l'action:
If (Length ( display ) >= 9) Set Variable: "display" = displayElse Set Variable: "display" = display & tastoEnd If
Éste es el punto de partida para crear una calculadora en Flash.Ahora se ve mejor cómo puede facilitar nuestro trabajo la action call. En efecto, si no la hubiésemos usado, tendríamos que haber escrito las mismas acciones para cada botón del teclado.
Descarga el ejemplo de esta lección
Flash es un software estudiado para la web con el cual se pueden crear efectos dinámicos y animaciones de alto nivel gráfico sin aumentar excesivamente el peso del file exportado que se quiere descargar. Pero Flash no es sólo esto. Flash es interactividad. Todo el que tiene fantasía y sabe usar bien este software es capaz de crear animaciones con un alto contenido de interactividad que divierte al usuario visitante. Hasta ahora he intentado explicar lo mejor posible el lenguaje interno de programación de Flash, su corazón, porque es a través de este lenguaje como es posible la interacción entre el usuario y la máquina.
Esta lección está dedicada a la propiedad _droptarget.Habréis visto algún sitio en el que un objeto tenga que trasladarse con el ratón a un punto preciso de la película, ¿no es así? Precisamente como en este caso (arrastrad al pequeño dentro del círculo):
La propiedad _droptarget restituye, después del Drag Movieclip, la clip sobre la que se ha superpuesto la clip arrastrada (si no se ha arrastrado a ninguna clip, devuelve el valor nulo). De este modo, añadiendo un control, es posible establece qué tiene que ocurrir en el caso en que una clip se arrastrase dentro de otra.En mi ejemplo anterior, si la clip hombre se arrastra al círculo, primero deja de verse y después se aparta de un frame el movieclip círculo (frame en el que se mostrará el círculo con el pequeño dentro y el interruptor "desengancha").
Pero vayamos por partes...Primero, creamos la clip movieclip hombre y dibujamos al pequeño hombrecillo del logotipo HTMLpoint. El mismo "pequeñajo" lo usaremos para crear un área sensible. Un área sensible es una clip botón que contiene objetos sólo en el frame HIT. De esta manera, el botón resulta invisible, pero es posible clicar en él. He aquí cómo aparece el botón área_sensible:
Cuando se arrastre la instancia a la clip hombre, el botón aparecerá transparente y de una tinta única de distinto color:
Arrastrar el botón área_sensible hasta hacerlo encajar perfectamente con el dibujo del hombrecillo:
El área sensible es necesaria para conseguir que sea arrastrable la clip hombre. En efecto, el arrastre tiene que activarse cuando el usuario clica con el ratón sobre la clip hombre y desactivarse cuando se suelta el pulsante. Para hacer esto es necesario usar un botón dentro de un movieclip, dado que sólo los movieclip tienen la posibilidad de tener un nombre en la instancia que les permita activar el arrastre, y sólo los botones pueden usar la action On Mouse Event.
Para que la clip hombre sea arrastrable incluyámosla como action del área sensible:
On (Press) Start Drag ("/hombre", lockcenter)End On
On (Release) Stop DragEnd On
De este modo, cuando el usuario clica sobre el hombrecillo, la clip se convierte en arrastrable hasta que se suelte el pulsante del ratón.
Creamos también la clip movieclip círculo, dibujamos el círculo en su interior y le asignamos el mismo nombre a la instancia de ella. Cuidado de no insertar una clip graphic ya que el nombre de esta clip nos servirá para el uso de _droptarget, pues este parámetro restituye exclusivamente nombres de las instancias de movieclip (o películas externas).Añádase un frame al movieclip, diséñese el círculo con el hombrecillo dentro (de hecho, el logotipo completo) e inclúyase un botón "desengancha" que permita que la operación de arrastre se repita. En el botón "desengancha" asignense, por ejemplo, estas action:
On (Release) Set Property ("/uomo", Visibility) = "1" Set Property ("/uomo", X Position) = "205" Set Property ("/uomo", Y Position) = "65" Go to Previous FrameEnd On
que permite ver de nuevo la clip hombre, la coloca en un punto preciso de la película y vuelve al frame anterior.
Llegados a este punto, en las action del botón área_sensible, añadimos el control sobre el arrastre:
On (Press) Start Drag ("/hombre", lockcenter)End On
On (Release) If (_droptarget eq "/círculo") Set Property ("/hombre", Visibility) = "0" Begin Tell Target ("/círculo") Go to and Stop (2) End Tell Target End If Stop DragEnd On
Viene controlado el valor de _droptarget. Si es igual a "/círculo" (nótese que está presente también el recorrido del movieclip) entonces se hace invisible la clip hombre y se direcciona al frame número 2 el movieclip círculo.
Y aquí ya el juego está hecho. No queda sino testar nuestra nueva animación interactiva. :-)
Descarga el ejemplo de esta lección
La función Get Timer ofrece el tiempo transcurrido (en milésimas de segundo) desde el momento de la apertura de la película Flash:
Programando el valor de una variable con el valor de Get Timer el resultado sería éste:
(obviamente, al clic en "start" el tiempo no comienza de 0 porque, como queda dicho, Get Timer ofrece el valor en milésimas de segundo desde el momento de la apertura de la película Flash, prácticamente desde la apertura de la página web)
Para acceder al tiempo en segundos, y no en milésimas, es necesario introducir una pequeña expresión que permite transformar las milésimas en segundos:
Set Variable: "display" = Int(GetTimer / 1000)
donde display es el nombre del campo.Esta expresión transforma en entero (para evitar que los segundos esten en decimales... ) el valor de Get Timer dividido por 1000 (milésimas en segundos).He aquí el resultado:
Veamos entonces cómo construir un cronómetro similar al primer ejemplo que hemos mostrado.
Necesitamos 3 frame de un único nivel.El primer frame se asigna a la declaración de algunas variables; el segundo para actualizar el campo de texto y el tercero para volver al precedente de manera que se repita continuamente la animación.
En un cronómetro los segundos llegan hasta 60 y después vuelven a empezar de 0, ¿no es verdad? Por desgracia, será necesario resolver este problema, ya que Flash cuenta los segundos en progresión, sin pararse (¿habéis notado que, pasados los 60, sigue aumentando el valor?).
Empecemos asignando el valor a display (nuestro campo de texto) igual a:
Set Variable: "display" = min & ":" & sec
min identifica los minutos transcurridos; sec, los segundos, y sendos valores se unen entre ellos utilizando también el carácter : (¿qué cronómetro sería si no?).Ahora nuestra tarea será asignarle los valores a min y seg.
Puesto que seg tiene que volver a empezar de 0 una una vez que ha llegado a 60, no podemos asignarle directamente el valor de Int(GetTimer / 1000), por tanto tendremos que emplear otra variable x_seg para el resultado de esta expresión. De modo que tenemos x_seg que ofrece el valor del tiempo transcurrido en segundos.
¿Cada cuánto tiene que saltar de 1, min? Es obvio que despues de cada 60 segundos.Podemos utilizar otra variable, x_min, con valor inicial de 60 , que permite efectuar el control en x_seg:
If (x_seg = x_min) Set Variable: "seg" = 0 Set Variable: "min" = min + 1 Set Variable: "x_min" = x_min + 60End If
Se x_seg es igual a 60 (supongamos que haya alcanzado los primeros 60 segundos), entonces setta la variable seg igual a 0 (inmediatamente se pone a cero...), aumenta en 1 la variable min (otro minuto más) y aumenta también x_min en 60 (porque el siguiente control se tendrá que hacer entre 60+60 segundos, es decir 120... ¿entendido?). Esta condición se repetirá cada minuto del tiempo transcurrido.
Falta sólo settar la variable seg para cada segundo (hasta ahora se ha settado para cada minuto). He aquí la action:
Set Variable: "seg" = (x_seg - x_min) + 60
Esta action es muy personal...En concreto, seg tiene que asumir un valor de 0 a 60 para cada minuto que transcurre. Resulta imposible si se asigna directamente el valor de Get Timer por la razón ya expuesta, y por eso he creado esta simple expresión...Imaginemos que x_seg haya llegado a 124 segundos (o sea 2 minutos y 4 segundos), el resultado de esta expresión sería: (124 - 180) + 60 = 4 .x_min tiene valor 180, porque, teniendo como valor inicial 60, y aumentando cada minuto de 60, llegados a 124 segundos (2 minutos) resulta igual a 180.El +60 se ha incluido porque el valor de x_min es siempre mayor respecto a x_seg en 60. Se podría obviar añadiendo otra variable parecida a x_min, pero con valor inicial igual a 0 y no 60.
En definitiva, para evitar que los segundos por debajo del valor 10 aparezcan sin el 0 delante de la única cifra (1 en lugar de 01) metemos esta última action:
If (sec < 10) Set Variable: "seg" = "0" & segEnd If
Y he aquí la action en su totalidad:
Set Variable: "x_seg" = Int(GetTimer/1000)Set Variable: "seg" = (x_seg - x_min) + 60If (x_seg = x_min) Set Variable: "seg" = 0 Set Variable: "min" = min + 1 Set Variable: "x_min" = x_min + 60End IfIf (sec < 10) Set Variable: "seg" = "0" & segEnd IfSet Variable: "display" = min & ":" & seg
Falta sólo la programación inicial de las variables x_min y min respectivamente a 60 y a 0, que habrá que incluir en el primer frame de la animación; así, el juego está hecho.
Descarga el ejemplo de esta lección
Hoy por hoy, en todos los programas de gráfica está presente un instrumento para recrear el efecto sombra en cualquier objeto (se trate de una imagen o de un texto). En Flash, por desgracia, no existe una opción de este tipo y, por tanto, hay que recurrir a una pequeña estrategia.
Estos tres ejemplos se diferencian entre sí sólo por alguna pequeñísima modificación. Veamos cómo crearlos...
En una nueva clip graphic añadimos el texto deseado ("HTMLpoint" en este caso). Seleccionamos el bloque de texto y, del menú Modify bajo la voz Curves, elegimos Break Apart. Este instrumento permite transformar el texto en vectores como si se tratase de cualquier dibujo.En este punto hay que aplicar al texto el instrumento Soften Edges, el cual permite recrear un efecto de fundido de los bordes del objeto.Seleccionando Soften Edges se abrirá esta ventana:
Asignad a Distance el valor 6 para tener un efecto muy marcado:
El primer ejemplo ya ha sido recreado:-)
Para el segundo, basta añadir un nuevo bloque de texto con la mismo contenido y colorearlo de blanco. Colocad el nuevo bloque de texto exactamente sobre el que se ha creato anteriormente... y ¡voilà! También este ejemplo ha sido reproducido (mi consejo es añadir los bloques de texto en niveles separados y "bloquead" el de base -en este caso, el primer bloque de texto creado- para trabajar de la mejor manera posible en la superposición).
Para el tercer ejemplo, antes de anada hay que colorear el texto en blanco de negro, después seleccionar el bloque con el efecto soften y seleccionar, del menú Modify, la voz Group (CTRL+G). Hay que transformar el objeto en símbolo con F8 (o con Insert - Convert to symbol), darle un nombre y aplicarle una transparencia del 75%. Desplazar ligeramente este símbolo hacia abajo a la derecha respecto al texto y también el tercer ejemplo esta hecho.
El efecto "máquina de escribir" que seguramente habréis visto en algunos sitios Flash, es muy fácil de conseguir también sin la ayuda de programas externos.
Para empezar, creamos una nueva clip movieclip en el primer keyframe
inseriamo il testo desiderato:
Una vez incluido el texto, y decidido el alineamiento que le vamos a dar, del primer keyframe borramos todas las letras del texto menos la primera (en este caso "w"). Añadimos después un nuevo keyframe y la segunda letra al bloque de texto. Hay que proceder de este modo hasta que se complete el texto:
Para cada keyframe incluido tenemos una nueva letra visualizada. Una vez que se ha terminado la movieclip, insertar en su último keyframe , la action Stop y arrastrar una instancia a la película principal. He aquí el resultado:
Añadiendo un minuto a nuestro tiempo de elaboración de la película, podemos obtener este efecto:
Ésta es la time-line de esta película:
Descarga el primer ejemplo de esta lecciónDescarga el segundo ejemplo de esta lección
Quien crea sitios web en HTML jamás se habrá planteado el problema del desplazamiento del texto, puesto que la gestión de esta parte se le deja al browser, que es el que se ocupa de ello. Sin embargo, en Flash es necesario "adaptarse" y encontrar un modo oportuno para solucionar este inconveniente.
Flash propone una manera muy funcional en la técnica, aunque un poco menos estéticamente.
Hay dos propiedades Flash que permiten la gestión del desplazamiento del texto, estas propiedade son .scroll y .maxscroll. Asociadas con una casilla de texto, permiten gestionar la visión en líneas:
texto.scroll Ofrece el numero de la línea superior visibile en la casilla de texto. Este valor puede modificarse dinámicamente.
texto.maxscroll Muestra el limite maximo que resulta en el scroll de texto. Este valor es constante y no se puede cambiar.
Para entender mejor las dos propiedades pongamos un simple ejemplo.Si la tabla de aquí abajo fuese una casilla de texto llamada texto:
Éste es un ejemplo paraentender de la mejor forma posible las propiedades.scroll y .maxscroll de Flash.Con estas propiedades y pos-
la propiedad texto.scroll ofrecería valor 1 (en tanto que se muestra en la anto la primera línea del texto) mientras que la propiedad testo.maxscroll daría valor 5 (el número de la línea que representa el límite del campo de texto). Si aumentáramos en 1 el valor de texto.scroll (por tanto resultaría 2) tendríamos:
entender de la mejor manera las propiedades.scroll y .maxscroll de Flash.Con estas propiedades se puede programar el...,etc...
, por tanto la segunda linea se convierte en el límite superior y .maxscroll adopta siempre un valor igual a 5.
Teniendo estos dos valores, resulta fácil ocuparse del desplazamiento. Dándole a +1 la propiedad .scroll del campo de texto, automáticamente se desplazará hacia abajo, mientras si se da -1 para desplazamientos hacia arriba.
Crear una casilla de texto con desplazamiento
Explicaré paso a paso cómo crear una casilla de texto que puede desfilar en la pantalla a través de las propiedades .scroll y .maxscroll.
Antes de nada, añadir en un nuevo nivel de la movie, una casilla de texto y darle un nombre... por ejemplo texto, para no complicarnos. Programar ya las dimensiones que tiene que tener usando el cursor para las dimensiones del texto:
Programamos las propiedades para la nueva casilla de texto apenas creada:
Es necesario Multiline, si no la casilla de texto tiene la dimensión de una sola línea.Seleccionamos también Disable editing para evitar cambios por parte del usuario, pero dejamos desactivada la voz Disable selection, ya que podría resultarle útil al usuario seleccionar el texto para copiarlo.
Como ya se ha dicho, este método para el scrolling es muy funcional, pero pierde estéticamente. Y esto sucede porque la casilla de texto texto tiene que tomar el valor (es decir el texto... perdonad el juego de palabras) a través de la action Set Variable (así no se podrá tener formateado del texto). Es necesario actuar de esta manera porque si el texto se añade en el momento de la creación de la casilla, esta toma altura según sea la anchura del campo y no puede cambiarse (por lo tanto no podremos elegir la dimensión que queramos). En efecto, la altura de la casilla se adapta de acuerdo con la anchura programada (sólo si hay texto dentro).
Dicho esto, incluir en el keyframe de la casilla la action:
Set Variable: "texto" = "bla bla bla"
donde, obviamente, en lugar de "bla bla bla" se incluirá el texto elegido.En este momento, introducimos en un nuevo nivel las dos clip botón que representan el "arriba" y el "abajo" para el texto.Para desfilar en la pantalla hacia abajo y hacia arriba, por desgracia no es suficiente aumentar o disminuir en 1 (1 línea) la propiedad .scroll, es necesario también añadir controles que permitan "parar" el scrolling una vez que se ha llegado a la última línea, para el scrolling hacia abajo, y a la primera línea, para el scrolling hacia arriba. Por lo que respecta a la primera línea, no hay problema: el valor de la primera línea será siempre igual a 1, mientras que el valor de la última línea podemos tomarlo de .maxscroll.He aquí la action para la clip botón "arriba":
On (Release) Set Variable: "scr" = texto.scroll If (scr > 1) Set Variable: "texto.scroll" = scr - 1 End If
End On
Por tanto, cuando el usuario suelta el botón, la variable scr toma el valor de la primera línea mostrada en ese momento, y después se ejecuta el control: si scr es mayor de 1 (por tanto, no es la primera línea), entonces disminuye en 1 el valor de texto.scroll de modo que la casilla se mueva una línea hacia arriba, si no, si scr es igual a 1 (estamos en la primera línea), no es mayor de 1, no pasa nada.
He aquí la action para la clip botón "abajo":
On (Release) Set Variable: "scr" = texto.scroll If (scr < texto.maxscroll) Set Variable: "texto.scroll" = scr + 1 End IfEnd On
Cuando se suelta el botón, scr toma el valor de la primera líneaa visualizada en ese momento y después de hace el control: si scr es menor de texto.maxscroll (por eso no estamos en la última línea), entonces aumenta en uno el scroll, si no, si scr es igual a texto.maxscroll no pasa nada.
Veamos cómo resulta el ejemplo que acabamos de crear:
Para entender lo mejor posible el procedimiento, he incluido también los valores de texto.scroll y texto.maxscroll.
Descarga el ejemplo de esta lección
Quien tiene bastante fantasía y habilidad al usar Flash, podría ya haber pensado cómo resolver el problema del scrolling de texto sin usar las propriedades .scroll y .maxscroll. En esta lección, explicaré un método muy simple para crear uno.
En nuestra animación, incluimos una nueva clip graphic y un bloque de texto dentro:
Ahora creamos una nueva clip movieclip y añadimos la clip graphic texto dentro, creando un motion tween del texto que se desplaza de abajo hacia arriba de este modo:
La técnica consiste en pilotar el scrolling del texto a través de la action Tell Target, por tanto, cuando incluimos la instancia del movieclip del texto que se desplaza, le asignamos el nombre texto.Creamos las dos clip botón que identificaran los pulsantes "arriba" y "abajo" del scrolling. Darle al botón "arriba" esta action:
On (Roll Over) Begin Tell Target ("/testo") Go to Next Frame End Tell TargetEnd On
De esta manera, cuando el usuario se coloca con el puntero sobre el botón "abajo", el cabezal de lectura frame se lleva delante de un frame desplazando el texto. Esto para el botón "arriba" con la única diferencia que el cabezal de lectura frame se tiene que colocar en el frame anterior (Go to Previous Frame). Obviamente, el movieclip tiene que tener en el primero y en el último keyframe la action Stop, si no existe el riesgo de que la animación se ejecute sin motivo y al infinito.De esta manera el avance se generaría exclusivamente cada vez que el usuario se coloca con el puntero en el botón. Queremos, sin embargo, que una vez situado sobre el botón el texto se mueva de forma continua sin tener que volver a colocar el puntero.Veamos cómo resulta la animación sin este control (colocar más veces el puntero encima de los botones de scrolling):
Para evitar todo esto, es necesario incluir un nuevo keyframe con una action que nos haga volver al frame precedente de manera que se efectúe de nuevo el control sobre dónde se encuentra el puntero y, por tanto ejecutar el procedimiento sin esperar la nueva posición:
En el primer keyframe de la animación, asignar la action Stop, mientras en las action de los botones "arriba" y "abajo" del primer keyframe (sólo el primero, el segundo no debe tener estas action) añadid Go to and Play ("scroll"):
On (Roll Over) Begin Tell Target ("/testo") Go to Previous Frame End Tell Target Go to and Play ("scroll")End On
donde scroll es la label que identifica el primer keyframe de la animación (como se puede ver en la imagen de arriba).Añadiendo estas action el resultado será éste:
Descarga el ejemplo de esta lección
Cuando la dimensión de un file .swf comienza a ser demasiado grande como para ralentizar la reproducción de la película, se puede usar una funcion que
permite ver una animación incluso mientras la película no se ha cargado totalmente.Esta función se denomina preload o precarga.No es sino una action que utiliza el frame cargado en el momento en que se invoca y le es posible ejecutar el evento.Ésta es la sintaxis:
If Frame Is Loaded ("fine") Go to and Play ("comienzo")End Frame Loaded
En este caso fine es la label con la que se ha identificado el último frame de la película, y comienzo es el frame incial de la misma.Veamos cómo se lee esta action:
si fine ha sido cargado entonces ve al frame comienzo y reproduce la película
Obviamente, el preload hay que incluirlo en el primer keyframe de la película Flash, puesto que se tiene que ejecutar inmediatamente, al inicio de ésta.En el segundokeyframe se deberá incluir una action que remita al primero, si no el preload se comprobará sólo la primera vez. Bastara incluir un Go to and Play (1) en el segundo frame para resolver este problema.
Llegados a este punto, las action han sido creadas; falta sólo añadir una animación (un movieclip) en el primer keyframe del nivel preload para conseguir que se vea ya cuando la película todavía no ha sido cargada.
¡Cuidado!Los primeros dos frame están exclusivamente dedicados al preload. Adelantad la película en 4-5 frame adelante como en la figura:
Si ya habéis completado vuestra película y quereis añadir solo ahora el preload, no hay problema: apartad el nivel preload a la última posición hacia abajo (para no crear confusión), después, trasladaos hasta el primer nivel de la animación y seleccionad el primer frame. Manteniendo pulsada la tecla del ratón, desplazaos hasta el último nivel de la animación (excluyendo de este modo elpreload) y soltad la tecla del ratón. Ahora habéis seleccionado todos los frame de la película; en este momento, es suficiente clicar sobre el primero y hacerlo avanzar en 4-5 para trasladar la película intera.
Descarga el ejemplo de esta lección
Crear un preload es una operación entusiasmante para la fantasía. Ya se han estandarizado preload con un porcentaje de avance o con una barra de desplazamiento.
En esta leccion explicaré cómo crear un preload con porcentaje de avance y con barra de avance.
Preload con porcentaje de avanceNo presenta grandes diferencias respecto al preload normal.Antes de nada, añadir un campo de texto en el primer keyframe del nivel preload y darle como nombre avance.En este momento, añadirle al action del preload la cadena:
Set Variable: "avance" = int((_framesloaded * 100)/_totalframes) & "%"
avance devuelve el resultado de la expresión que calcula el frame cargado en ese momento, lo multiplica por 100 y le divide los frame totales de la animación (para encontrar el porcentaje). De convertir el número derivado en entero se ocupa la función int y además se añade la cadena "%" para mostrar tambien el símbolo % al lado del número.Para ulteriores informaciones sobre _framesloaded y _totalframes os remito a las lecciones dedicadas.
Preload con barra de avanceSe introduce un nivel que llamaremos barra de desplazamiento y se arrastra una instancia de la clip donde se habrá diseñado ya la barra con su anchura total. Dadle a la instancia el nombre barra. Despues, abrid la ventana Transform (si no está abierta ya, la encontráis en Inspector), y observad el valor escalar de la barra que se acaba de crear:
En el segundo frame del nivel barra de desplazamiento introducimos esta acción:
Set Property ("/barra", X Scale) = ((int((_framesloaded * 100)/_totalframes)) * anchura) / 100
Nota: he puesto el punto de aparte con la action por motivos de espacio.
De esta manera escalamos sobre el eje x la clip barra del valor resultante de la expresión. La expresión calcula primero el porcentaje de avance de la película, después la multiplica por anchura, variable que representa la anchura total (o la escala... que no es la misma cosa, pero en este ejemplo nos servimos de la escala porque no hay otra posibilidad para aumentar la dimensión de una clip) de la barra en pixel (he aquí la razón de que os haya hecho mirar en la ventana Transform de la barra), y que tendremos que settar en el primer keyframe de la película. De este modo, la barra se puede escalar progresivamente hasta alcanzar su "anchura" total.
Descarga un ejemplo del preload con porcentajeDescarga un ejemplo del preload con barra de avance
Sobre todo en los sitios de las empresas, resulta útil e, incluso, necesario introducir un módulo que rellenar para el envío de informaciones por parte del usuario interesado.Las próximas lecciones están dedicadas exclusivamente a la creación de los form para enviar datos, desde las más simples hasta las más complejas.Explicaré únicamente los módulos que permiten el envío de los datos a un CGI externo elaborador. No voy a explicar, por tanto, el envío de los datos directamente por correo electrónico.
Un form de ese tipo:
Nombre: Apellido:
Teléfono: Email:
Usuario: Contraseña:
Informaciones:
es facilísimo reproducirlo en Flash.En este caso el form se refiere a una dirección desconocida "http://www.nomesito.com/cgi-bin/nomecgi.cgi" y obviamente se tiene que sustituir por el correcto.En su interior están presentes también 2 campos escondidos. Veamos el código HTML del módulo:
<form action="http://www.nomesito.com/cgi-bin/nomecgi.cgi" method="post"><input type="hidden" name="mail" value="[email protected]"><input type="hidden" name="soggetto" value="Modulo utenti"><div align="center"><table border="0" cellpadding="4" cellspacing="0"><tr><td>Nombre:</td><td><input type="text" name="nombre" size="15"></td><td>Apellido:</td><td><input type="text" name="apellido" size="15"></td></tr><tr><td>Teléfono:</td><td><input type="text" name="tel" size="15"></td><td>Email:</td><td><input type="text" name="email" size="15"></td></tr><tr>
<td>Usuario:</td><td><input type="text" name="usuario" size="15"></td><td>Contraseña:</td><td><input type="contraseña" name="contraseña" size="15"></td></tr><tr><td colspan="4"><p align="center">Informaciones: <textarea rows="4" name="info" cols="40"></textarea><p align="center"><input type="submit" value="Envía" name="envía"> <input type="reset" value="Reprograma" name="reprograma"></td></tr></table></div></form>
Por lo tanto en el módulo están presentes 2 campos escondidos mail e sujeto, 5 capos de texto nombre, apellido, tel, email y usuario, un campo contraseña contraseña y , para acabar, un campo TextArea info.
¡Nada más fácil!
Campos de textoPara introducir campos normales de texto como nombre, es necesario incluir un bloque de texto con la función Text Field (campo de texto) activada:
Una vez creado el campo, clicad en él con el pulsante derecho del ratón y dadle el nombre a ese campo:
Repetid la operación para todos los campos de texto presentes en el módulo.
Campos TextAreaLos campos TextArea tienen la particularidad de que se pueden compilar sobre más líneas de texto respecto a lo única línea de los normales campos de texto.
Para crear un campo de este tipo en Flash, la operación es idéntica al campo de texto normal, con la excepción de tener que seleccionar la voz Multiline que se encuentra en la ventana Text Field Properties:
Activando esta opción, es posible activar también Word wrap, que permite el punto y aparte automáticamente con la palabra entera digitada si ésta supera la longitud del campo:
Habréis notado seguramente que para moverse arriba y abajo en el campo hay que usar el cursor de texto, ¿no?Uhm... no resulta en absoluto funcional... intentemos intoducir un scroll de texto y veamos si mejora:
Decididamente mejor, ¿no os parece? :-)Para entender cómo funciona el scroll de texto os remito a la lección dedicada.
Campos escondidosPara crear campos escondidos hay 2 métodos...
El primero consiste en crear un campo de texto normal, escribir en él el valor asignado y colocarlo lejos del área de trabajo, de manera que no se vea durante la reproducción de la película.Con el segundo método, sin embargo, es suficiente asignar el valor a una variable con el mismo nombre del campo antes del envío de los datos y asunto concluido:
Set Variable: "mail" = "[email protected]"Set Variable: "sujeto" = "Módulo usuario"
Campos contraseñaIntroducir un campo de texto normal y activar la opción Contraseña:
Crear el pulsante ReprogramarPara recrear el efecto de este pulsante en Flash, hay que escribir unas action al Release del botón ponen a cero los vores de todos los campos de texto presentes en el módulo:
On (Release) Set Variable: "nombre" = "" Set Variable: "apellido" = "" Set Variable: "tel" = "" Set Variable: "email" = "" Set Variable: "usuario" = "" Set Variable: "contraseña" = "" Set Variable: "info" = ""End On
Crear el pulsante Envía Una vez creado el botón, asignarle esta action:
On (Release) Get URL ("http://www.nomesito.com/cgi-bin/nomecgi.cgi", vars=POST)End On
teniendo cuidado de seleccionar el tipo de envío de las variables (normalmente POST):
Otras propiedadesHay otras opciones seleccionables para un campo de texto.Veamos cuáles:
Restrict text length to x characters limita la digitación, dentro del campo, a x caracteres (x es el valor incluido).
Disable editing desabilita la escritura en el campo de texto.
Disable selection desabilita la la selección del texto en el campo (el usuario no es capaz de poder hacer copia/pega).
He aquí la traducción del módulo en Flash
¡Y es incluso más bonito estéticamente! ;-)
Descarga el ejemplo de esta lecciónPara la creación de form más complejos, se utilizan opciones particulares como las casillas de control (checkbox):
Casilla de control
Lo primero, creamos 2 dibujos que representen la casilla activa/desactiva:
y los incluimos en dos frame diferentes de un nuevo movieclip que llamaremos checkbox. En el primero de estos 2 frame, incluimos la action Stop para evitar que el movieclip se repita con ciclo infinito. Hay que arrastrar una instancia del movieclip a la película principal y darle el
nombre check.Llegados a este punto, creamos un área sensible (consúltese la lección dedicada), ya que tendremos que hacer clicable la casilla de control, que cierre la casilla de control con el texto. Se coloca la instancia del área sensible en en un nuevo nivel de la película principal.
Las action que hay que asignarle al área sensible tienen que conseguir que, si la casilla se anula, entonces se selecciones y viceversa. Para hacer esto, nos serviremos de una variable de nombre elección que tomará valor 0 en el caso en que se anule la selección y 1 si se selecciona (elección será después el valor que se enciará al CGI externo, así como el nombre de la casilla de control para la elaboración de los datos; por tanto, asígnese el valor deseado en lugar de 0 y 1).Sobre la base de este valor, se dirigirá el movieclip check al primero o al segundo frame (activado o desactivado) y se re-programará elección según los casos:
On (Release) If (scelta = 0) Begin Tell Target ("/check") Go to Next Frame End Tell Target Set Variable: "elección" = 1 Else Begin Tell Target ("/check") Go to Previous Frame End Tell Target Set Variable: "elección" = 0 End IfEnd On
Si elección es igual a 0 (desactivado) entonces coloca el cabezal de lectura frame del movieclip check en el siguiente (activado) y setta elección a 1, si no, coloca el cabezal de lectura frame en el frame anterior del movieclip check y setta la variable elección a 0.No queda sino incluir nuestra casilla de control en el form y hemos acabado. En efecto, en el momento del envío del módulo, Flash enviará todas las variables, incluida elección.
Éste es el resultado:
Descarga el ejemplo de esta lección
Otra opción para los form son los Radio Button, es decir los botones que permiten efectuar una sola elección entre diversas propuestas:
Flash
HTML
JavaScript
Applet Java
Para empezar, dibujamos los pulsantes característicos de los RadioButton (crear nuevas clip graphic):
que, vistos al 100%, producen este efecto: .
Crear un nuevo movieclip con nombre radio y introducir tantos RadioButton como sean las elecciones que el usuario pueda consultar, teniendo en cuenta que la primera elección tendrá que seleccionarse:
Nel mio caso, le scelte possibili saranno 4.Se asigna al primer keyframe la action Stop.Inclúyanse después tantos keyframe como sean las elecciones posibles (4), y para cada keyframe, el RadioButton seleccionado tiene que resultar en el Button siguiente:
Crear un nuevo nivel y asignar para cada RadioButton una etiqueta (creando un nuevo nivel que cubra los 4 keyframe creados antes, impedirá que se tenga que repetir la operacion por 4 veces):
Crear un área sensible (consultar la lección dedicada) que cubra un RadioButton y la etiqueta a él asignada e introducirle 4 instancias (para cada voz) en un nuevo nivel que llamaremos áreas sensibles:
Para la primera área sensible, ésta es la action que ha que digitar:
On (Release) Go to and Stop (1) Set Variable: "/:scelta" = "Flash"End On
Como se puede ver, la variable elección se inicializa en la película principal de Flash. Esto se debe al hecho de que, cuando los datos se envíen al CGI, Flash envía exclusivamente las variables presentes en dicha película principal y no las que están en las clip.
Para las otras áreas sensibles el procedimiento es el mismo, aunque cambia el valor de Go to and Stop(n) (donde para n habrá que introducir el número de keyframe en que se debe colocar el cabezal de lectura frame, cuando el usuario clica en la voz deseada) y Set Variable: "/:elección" = " *** " (donde, en lugar de ***, hay que añadir el valor que tiene que adoptar elección según sea la selección del usuario):
On (Release) Go to and Stop (2) Set Variable: "/:elección" = "HTML"End On
On (Release) Go to and Stop (3) Set Variable: "/:elección" = "JavaScript"End On
On (Release) Go to and Stop (4) Set Variable: "/:elección" = "Applet Java"End On
He aquí el resultado:
Descarga el ejemplo de esta lección
