trabajo con texto

Computación Multimedia 2

Patricio Rodríguez M. Escuela de Diseño | Duoc UC | Sede Viña del Mar

Conceptos básicos de animación con AS Para poder entender el modo en que se aplica el lenguaje de programación ActionScript (AS), es preciso saber como se constituye una sintaxis para una acción básica. Lo primero y mas importante de entender es que la programación de ActionScript es aplicada solamente a objetos, en el caso de Flash puede ser sobre un fotograma clave en la línea de tiempo para controlar el funcionamiento de esta o puede ser asignada a los símbolos. En el caso de los símbolos también es importante hacer la siguiente distinción, para los botones se deben de aplicar las acciones una vez se haya seleccionado el símbolo en la escena, por tanto los pasos son los siguientes:

1. se crea el símbolo botón 2. se edita el símbolo, haciendo doble clic sobre este para ingresar en su línea de tiempo 3. se marca en la escena el símbolo botón y se revisa que se encuentre marcado en la barra

de propiedades (debe de aparecer su icono en esta barra) 4. se hace clic sobre el icono de acción o panel de script (el circulo que tiene en su interior

una flecha en el costado derecho de la barra de propiedades) 5. se aplica el script

Para el caso de los clip de película se debe aplicar en una capa aparte la acción y al objeto que se encuentra en escena y se comporta como símbolo clip de película debes asignarle un nombre de instancia. Un nombre de instancia es asignar un nombre propio a el objeto puesto en escena y que diferencia una copia de otra de un símbolo en escena. Los pasos para asignar acciones a un clip de película son los siguientes:

1. se crea el símbolo clip de película 2. se asigna un nombre de instancia al clip de película por medio de la barra de propiedades,

asignando un nombre en el cajetín de instancia (costado superior izquierdo de la barra de propiedades)

3. se crea una capa nueva sobre la capa que contiene el clip de película 4. se abre el panel de acciones y se aplican estas acciones sobre el fotograma clave inicial de

esta nueva capa



Ejemplo de uso de acciones sobre clip de película Vamos a considerar el siguiente caso:

1. creamos en escena un rectángulo el que convertiremos en símbolo clip de película 2. una vez convertido en clip, asignamos un nombre de instancia, en mi caso le pondré por

nombre de instancia barra 3. creamos una capa nueva en la cual colocaremos el código de control para este símbolo,

abrimos el panel de script 4. en el panel de script quitamos el atributo de asistente de script y colocamos el siguiente

código: barra._alpha = 50;

Con esto le estamos diciendo al programa que cuando encuentre en escena un objeto llamado barra (en este caso nuestro rectángulo), le asigne un atributo de transparencia del 50%. En escena nuestro objeto se debiese de ver semitranslucido.

Otras variables de animación por medio de AS Podemos una serie de atributos a nuestro símbolo, a continuación declaro los mas utilizados: barra._rotation = 45;

Rotación me permite hacer que un objeto cambie su ángulo de visualización dentro del escenario, se expresa en grados de rotación barra._width = 90;

Ancho me permite definir el ancho que tendrá mi clip de película al momento de cargar la aplicación y que no necesariamente responde al ancho con que fue creado el objeto. En el caso de querer trabajar por ejemplo con el atributo de transparencia alpha, y animar esta propiedad al punto de hacer que nuestro clip de película comience a aparecer gradualmente, podemos trabajar el código de ActionScript de la siguiente manera: barra.onEnterFrame = function() { this._alpha += 5; if (this._alpha>=100) { delete this.onEnterFrame; } };



El código se desglosa de la siguiente manera: onEnterFrame: responde a la función de línea de tiempo y significa que cuando el cabezal ingrese en el fotograma que contiene la acción va a definir una función. this: expresa sobre quien se va a asignar la acción, reemplaza al nombre de instancia de nuestro símbolo, en este caso reemplaza al nombre de instancia barra. ._alpha +=5: significa que desde su valor original (en nuestro caso 50) el símbolo clip de película aumentará de 5 en 5% su intensidad de color. El valor 5 puede ser modificado dependiendo cuan rápido deseas que se ejecute la animación. if(this._alpha>=100): estamos diciendo que si el objeto símbolo (this) sobre el cual estamos aplicando la animación leva su capacidad de transparencia a un valor mayor o igual a 100 va a desencadenar una nueva acción. Siempre la sentencia if responde a decir “si es que pasa esto, entonces a funcionar esta nueva situación”. delete this.onEnterFrame: lo que se expresa en esta línea de código es que si se cumple la instancia anterior en que el valor de transparencia del objeto llega a 100 entonces ya no necesito que se siga aumentando la tolerancia a transparencia, por eso se expresa que se borre la función inicial de carga de fotograma que decía que aumentaba gradualmente de 5 en 5 su opacidad.



Utilización del modo enabled (activo y desactivo) Esta propiedad sirve para especificar un botón esta activado o no. El valor predeterminado es true, true significa que por omisión al aplicar esta propiedad el botón aparecerá activo. Esta propiedad es bastante útil al momento de presentar un menú de navegación para un sitio web, en donde el usuario necesita saber en todo momento donde se encuentra dentro de la estructura de sitio. Funciona cuando el usuario pulsa un botón que carga la navegación para nuestro documento sea esta interna o externa, además de eso, este mismo botón se vuelve inactivo, de tal manera de no volver a presionarlo hasta no cambiar de tema. Para entender esta propiedad vamos a desarrollar el siguiente ejemplo: 1. creamos una película nueva 2. en la primera capa de esta nueva película vamos a crear tres botones, estos objetos los convertimos en símbolo botón y asignamos las cuatro instancias (reposo, sobre, presionado y zona activa) a cada uno de ellos por separado. 3. seleccionamos el primero de ellos en el escenario y en el inspector de propiedades, vamos a asignarle una etiqueta de instancia, en mi caso al primer botón le coloqué boton_1, al siguiente boton_2 y al último boton_3. 4. dentro de esta misma capa, vamos a agregar una caja de texto dinámica en donde va a aparecer el texto al momento de hacer clic sobre el botón. Una caja de texto dinámica se crea seleccionando la herramienta de texto (letra A de la barra de herramientas), en el inspector de propiedades seleccionamos la opción texto dinámico que se encuentra en el list box donde dice texto estático. Los valores de tipo de letra, tamaño y color se definen de la misma manera como se definen estas propiedades para el resto de los textos.

5. el siguiente paso es bastante importante y consiste en definir una variable para nuestra caja de texto, en Actionscript asignar una variable que significa otorgarle a un objeto un nombre propio que luego permita reconocerlo en la sintaxis del código. En el mismo inspector de propiedades y teniendo seleccionada la caja de texto en el campo de texto que dice var vamos a asignar un nombre a nuestra caja de texto, en mi caso asigne el nombre de texto.



6. dentro de la misma línea de tiempo raíz vamos a crear una capa nueva en la cual vamos a desarrollar nuestro código 7. seleccionamos el primer fotograma de esta capa y abrimos el panel de acciones, lo primero que vamos a definir es que vamos a trabajar en la línea de tiempo raíz, asignando propiedades a un objeto que se encuentra en ella, en este caso el boton_1; la sintaxis es la siguiente: _root.boton_1.onRelease = function(){ boton_1._alpha = 30; boton_2._alpha = 100; boton_3._alpha = 100; boton_1.enabled = false; boton_2.enabled = true; boton_3.enabled = true; texto=”estas en la sección 1”; } Desglosando el contenido, estamos diciendo lo siguiente: � en la primera línea estamos diciendo que en la raíz de nuestro documento se encuentra un objeto llamado boton_1 al cual cuando liberemos el clic del botón gatillará la siguiente función � al boton_1 le bajamos su intensidad, dos y tres la mantienen, el boton_1 se desactiva, dos y tres siguen activos, pero además de esto estamos diciendo que en la caja de texto llamada “texto” se escriba la frase que nos dice que estamos en la sección 1. Repetir lo mismo para los botones 2 y 3 cambiando las variables para cada caso.

trabajo con texto

Documents