GESTION INFORMATICA

Componentes ActionScript 3.0


Los componentes de Adobe® Flash® Professional CS5 son clips de película con parámetros que permiten modificar su aspecto y comportamiento. Un componente puede ser un control simple de la interfaz de usuario, como los componentes RadioButton o CheckBox, o bien, puede incluir contenido, como los componentes List o DataGrid.
Los componentes permiten crear con facilidad y rapidez Flash aplicaciones sólidas con apariencia y comportamiento uniformes. En lugar de crear botones personalizados, cuadros combinados y listas, se pueden utilizar los componentes de Flash que implementan dichos controles. Basta con arrastrar dichos componentes del panel Componentes al documento de aplicación. Asimismo, la apariencia de estos componentes se puede personalizar fácilmente y conseguir, de esta manera, una mayor adaptación al diseño de la aplicación.
Es posible realizar todo esto sin tener conocimientos avanzados de ActionScript y también utilizar ActionScript 3.0 para modificar el comportamiento de un componente o implementar uno nuevo. Cada componente dispone de un conjunto único de métodos, propiedades y eventos de ActionScript, llamado interfaz de programación de aplicaciones (API). La API permite crear y manipular componentes mientras se ejecuta la aplicación.
La API también permite crear componentes nuevos personalizados. Se pueden descargar componentes creados por miembros de la comunidad de Flash desde el sitio web de la zona de intercambio de Adobe, en la dirección www.adobe.com/go/flash_exchange_es. Para obtener información sobre la creación de un componente, consulte www.adobe.com/go/learn_fl_creating_components_es.
La arquitectura de componentes ActionScript 3.0 incluye clases en las que se basan todos los componentes, estilos y aspectos que permiten personalizar la apariencia, un modelo de gestión de eventos, la administración de la selección, una interfaz de accesibilidad, etc.
Nota: Adobe Flash CS5 incluye componentes ActionScript 2.0 y componentes ActionScript 3.0. Estos dos conjuntos de componentes no se pueden mezclar. Debe utilizarse uno de los dos conjuntos en una aplicación concreta. Flash CS5 presenta componentes ActionScript 2.0 o componentes ActionScript 3.0 en función de si se abre un archivo de ActionScript 2.0 o de ActionScript 3.0. Al crear un documento de Flash, debe elegirse entre Archivo de Flash (ActionScript 3.0) o Archivo de Flash (ActionScript 2.0). Cuando se abre un documento existente, Flash examina la Configuración de publicación para determinar el conjunto de componentes que se debe utilizar. Para obtener información sobre los componentes ActionScript 2.0, consulte Uso de componentes Adobe® ActionScript® 2.0.
Para ver una lista completa de los componentes ActionScript 3.0 para Flash, consulte Tipos de componentes.
Tipos de componentes

Los componentes de Flash se instalan durante la instalación de Flash CS5.
Los componentes ActionScript 3.0 incluyen los siguientes componentes de interfaz de usuario (IU):
Button
 List
 TextArea
CheckBox
 NumericStepper
 TextInput
ColorPicker
 RadioButton
 TileList
ComboBox
 ProgressBar
 UILoader
DataGrid
 ScrollPane
 UIScrollBar
Label
 Slider
  
Además de los componentes de interfaz de usuario, los componentes ActionScript 3.0 de Flash incluyen los siguientes componentes y clases de soporte:
  • El componente FLVPlayback (fl.video.FLVPlayback), que es un componente basado en SWC.
    El componente FLVPlayback permite incluir fácilmente un reproductor de vídeo en la aplicación Flash para reproducir vídeo transmitido de forma progresiva a través de HTTP desde Adobe® Flash® Video Streaming Service (FVSS) o desde Macromedia® Flash® Media Server de Adobe (FMS). Para obtener más información, consulte Uso del componente FLVPlayback.
  • Los componentes de interfaz de usuario personalizados FLVPlayback, que se basan en FLA y funcionan en las versiones ActionScript 2.0 y ActionScript 3.0 del componente FLVPlayback. Para obtener más información, consulte Uso del componente FLVPlayback.
  • El componente FLVPlaybackCaptioning, que proporciona subtitulación oculta para FLVPlayback. Consulte Uso del componente FLVPlaybackCaptioning.
    Para obtener una lista completa de los componentes ActionScript 3.0 y las clases que admiten, consulte la Referencia de ActionScript 3.0.

Ver componentes de Flash:

Para ver los componentes ActionScript 3.0 de Flash en el panel Componentes, siga los pasos que se indican a continuación.
  1. Inicie Flash.
  2. Cree un archivo de Flash (ActionScript 3.0) o abra un documento de Flash ya existente que tenga definido ActionScript 3.0 en la Configuración de publicación.
  3. Seleccione Ventana > Componentes para abrir el panel Componentes si aún no está abierto.
    Interfaz de usuario y componentes de vídeo en panel Componentes
    Panel Componentes con componentes de interfaz de usuario
    También se pueden descargar componentes adicionales del sitio web de la zona de intercambio de Adobe en www.adobe.com/go/flash_exchange_es. Para instalar componentes descargados de la zona de intercambio, es necesario descargar e instalar Adobe® Extension Manager en www.adobe.com/go/exchange_es. Haga clic en el vínculo Página principal de la zona de intercambio de Adobe y busque el vínculo Extension Manager.
    Cualquier componente puede aparecer en el panel Componentes de Flash. Realice estos pasos para instalar componentes en un equipo con Windows® o Macintosh®

Instalar componentes en un equipo con Windows o Macintosh:

  1. Salga de Flash.
  2. Coloque el archivo SWC o FLA que contiene el componente en la siguiente carpeta del disco duro:
    • En Windows:
      C:\Archivos de programa\Adobe\Adobe FlashCS5\idioma\Configuration\Components
    • En Macintosh:
      Macintosh HD:Aplicaciones:Adobe Flash CS5:Configuration:Components
  3. Inicie Flash.
  4. Seleccione Ventana > Componentes para ver los componentes del panel Componentes, si aún no está abierto.
    Para más información sobre archivos de componentes, consulte Trabajo con archivos de componente.

Añadir y eliminar componentes de un documento


Cuando se arrastra un componente basado en FLA del panel Componentes al escenario, Flash importa un clip de película editable en la biblioteca. Cuando se arrastra un componente basado en SWC al escenario, Flash importa un clip compilado en la biblioteca. Tras importar un componente en la biblioteca, se pueden arrastrar instancias del mismo al escenario, desde la biblioteca o desde el panel Componentes.

Añadir componentes durante edición

Para añadir un componente a un documento, basta con arrastrarlo desde el panel Componentes. Se pueden definir las propiedades de cada instancia de un componente en la ficha Parámetros o en inspector de propiedades en la ficha del inspector de componentes.
  1. Seleccione Ventana > Componentes.
  2. Haga doble clic en el componente en el panel Componentes o arrastre el componente al escenario.
  3. Seleccione el componente en el escenario.
  4. Si el inspector de propiedades no está visible, seleccione Ventana > Propiedades > Propiedades.
  5. En el inspector de propiedades, introduzca un nombre para la instancia de componente.
  6. Seleccione Ventana > inspector de componentes y seleccione la ficha Parámetros para configurar los parámetros para la instancia.
    Para más información, consulte Configuración de parámetros y propiedades.
  7. Cambie el tamaño del componente como desee, editando los valores de anchura (An.:) y altura (Al.:).
    Para más información sobre la dimensión de tipos de componente específicos, consulte Personalización de los componentes de la interfaz de usuario.
  8. Seleccione > Control Probar película o presione Control+Intro para compilar el documento y ver los resultados de la configuración.
    También es posible cambiar el color y el formato de texto de un componente si se definen propiedades de estilo o se personaliza su apariencia mediante la edición de los aspectos del componente. Para más información sobre estos temas, consulte Personalización de los componentes de la interfaz de usuario.
    Si se arrastra un componente al escenario durante la edición, se puede hacer referencia al componente a través de su nombre de instancia (por ejemplo, myButton).

Añadir componentes en tiempo de ejecución mediante ActionScript

Para añadir un componente a un documento en tiempo de ejecución mediante ActionScript, el componente debe hallarse en la biblioteca de la aplicación (Ventana > Biblioteca) cuando se compila el archivo SWF. Para añadir un componente a la biblioteca, arrastre el componente del panel Componentes al panel Biblioteca. Para más información sobre la biblioteca, consulte Biblioteca.
También es necesario importar el archivo de clase del componente para que su API esté disponible para la aplicación. Los archivos de clase de componente se instalan en paquetes que contienen una o varias clases. Para importar una clase de componente, se debe utilizar la sentencia import y especificar el nombre de paquete y el nombre de clase. Por ejemplo, se podría importar la clase Button con la siguiente sentencia import:
import fl.controls.Button;
Para obtener información sobre qué componente contiene cada paquete, consulte la Referencia de ActionScript 3.0. Para más información sobre la ubicación de los archivos de origen de componentes, consulte Trabajo con archivos de componente.
Para crear una instancia del componente, es necesario llamar al método constructor de ActionScript para el componente. Por ejemplo, la siguiente sentencia crea una instancia de Button denominada aButton:
var aButton:Button = new Button();
Finalmente, es necesario llamar al método estático addChild() para añadir la instancia del componente al escenario o contenedor de aplicación. Por ejemplo, la siguiente sentencia añade la instancia aButton:
addChild(aButton);
En este punto, se puede utilizar la API del componente para especificar de forma dinámica el tamaño y la posición del componente en el escenario, detectar eventos y definir propiedades para modificar su comportamiento. Para obtener más información sobre la API de un componente concreto, consulte la Referencia de ActionScript 3.0.
Para más información sobre el método addChild(), consulte Trabajo con la lista de visualización.

Eliminación de un componente

Para eliminar una instancia de un componente del escenario durante la edición, basta con seleccionarla y presionar la tecla Supr. De esta forma, se eliminará la instancia del escenario pero no se quitará el componente de la aplicación.
Para eliminar un componente de un documento de Flash después de haberlo colocado en el escenario o en la biblioteca, es necesario eliminar el componente y sus activos asociados de la biblioteca. No basta con eliminar el componente del escenario. Si no se elimina de la biblioteca, se incluirá en la aplicación cuando se compile.
  1. En el panel Biblioteca, seleccione el símbolo del componente.
  2. Haga clic en el botón Eliminar situado en la parte inferior del panel Biblioteca, o seleccione Eliminar en el menú del panel Biblioteca.
    Repita estos pasos para eliminar los activos asociados al componente.
    Para información sobre la eliminación de un componente del contenedor durante la ejecución de la aplicación, consulte Eliminación de un componente de la lista de visualización.

Búsqueda de la versión del componente


Los componentes ActionScript 3.0 de Flash tienen una propiedad de versión que puede mostrarse si es necesario proporcionarla al servicio técnico de Adobe o si se precisa saber la versión del componente que se está utilizando.

Para mostrar el número de versión de un componente de interfaz de usuario:

  1. Cree un documento de archivo de Flash (ActionScript 3.0).
  2. Arrastre el componente al escenario y asígnele un nombre de instancia. Por ejemplo, arrastre una instancia de ComboBox al escenario y denomínela aCb.
  3. Presione la tecla F9 o seleccione Ventana > Acciones para abrir el panel Acciones.
  4. Haga clic en el primer fotograma de la línea de tiempo principal y añada el siguiente código al panel Acciones:
    trace(aCb.version);
    En el panel Salida debería aparecer un número de versión similar al de la siguiente ilustración.
    En los componentes FLVPlayback y FLVPlaybackCaptioning, es necesario hacer referencia al nombre de clase y no al nombre de instancia porque el número de versión se almacena en una constante de clase.

Mostrar el nombre de versión de los componentes FLVPlayback y FLVPlaybackCaptioning:

  1. Cree un documento de archivo de Flash (ActionScript 3.0).
  2. Arrastre los componentes FLVPlayback y FLVPlaybackCaptioning al panel Biblioteca.
  3. Presione la tecla F9 o seleccione Ventana > Acciones para abrir el panel Acciones.
  4. Haga clic en el primer fotograma de la línea de tiempo principal y añada el siguiente código al panel Acciones.
    import fl.video.*; 
trace("FLVPlayback.VERSION: " + FLVPlayback.VERSION); 
trace("FLVPLaybackCaptioning.VERSION: " + FLVPlaybackCaptioning.VERSION);
    Los números de versión aparecen en el panel Salida.


Una aplicación sencilla


En esta sección se describen los pasos para crear una sencilla aplicación ActionScript 3.0 con los componentes de Flash y la herramienta de edición de Flash. El ejemplo se ofrece como un archivo FLA con el código ActionScript incluido en la línea de tiempo y también como un archivo de clase ActionScript externo con un archivo FLA que contiene sólo los componentes de la biblioteca. Por lo general, se desarrollarán aplicaciones más extensas con archivos de clase externos para poder compartir código entre las clases y aplicaciones, y para facilitar el mantenimiento de las aplicaciones. Para más información sobre la programación con ActionScript 3.0, consulte Programación con ActionScript 3.0.

Diseño de la aplicación

El primer ejemplo de una aplicación de componentes ActionScript es una variación de la aplicación "Hello World" estándar, de modo que su diseño es bastante sencillo:
  • La aplicación se denominará Greetings.
  • Utiliza un componente TextArea para mostrar un saludo que inicialmente es "Hello World".
  • Utiliza un componente ColorPicker que permite cambiar el color del texto.
  • Utiliza tres componentes RadioButton que permiten definir el tamaño del texto en pequeño, mayor o máximo.
  • Utiliza un componente ComboBox que permite seleccionar un saludo distinto en una lista desplegable.
  • La aplicación utiliza componentes del panel Componentes y también crea elementos de aplicación a través de código ActionScript.
    Teniendo en cuenta esta definición, ya puede empezar a crear la aplicación.

Creación de la aplicación Greetings

A continuación se describen los pasos para crear la aplicación Greetings utilizando la herramienta de edición de Flash para crear un archivo FLA, colocar componentes en el escenario y añadir código ActionScript a la línea de tiempo.

Crear la aplicación Greetings en un archivo FLA:

  1. Seleccione Archivo > Nuevo.
  2. En el cuadro de diálogo Nuevo documento, seleccione Archivo de Flash (ActionScript 3.0) y haga clic en Aceptar.
    Se abre una nueva ventana de Flash.
  3. Seleccione Archivo > Guardar, asigne al archivo de Flash el nombre Greetings.fla y haga clic en el botón Guardar.
  4. En el panel Componentes de Flash, seleccione un componente TextArea y arrástrelo al escenario.
  5. En la ventana Propiedades, con el componente TextArea seleccionado en el escenario, escriba aTa como nombre de instancia e introduzca la siguiente información:
    • Introduzca 230 en el valor An. (anchura).
    • Introduzca 44 en el valor Al. (altura).
    • Introduzca 165 en el valor X (posición horizontal).
    • Introduzca 57 en el valor Y (posición vertical).
    • Introduzca Hello World! en el parámetro de texto, en la ficha Parámetros.
  6. Arrastre un componente ColorPicker al escenario, colóquelo a la izquierda del componente TextArea y asígnele el nombre de instancia txtCp. Introduzca la siguiente información en el inspector de propiedades:
    • Introduzca 96 en el valor X.
    • Introduzca 72 en el valor Y.
  7. Arrastre tres componentes RadioButton al escenario, de forma consecutiva, y asígneles los nombres de instancia smallRb, largerRb y largestRb. Introduzca la siguiente información para dichos componentes en el inspector de propiedades:
    • Introduzca 100 en el valor de anchura y 22 en el valor de altura en cada uno de ellos.
    • Introduzca 155 en el valor X.
    • Introduzca 120 en el valor Y de smallRb, 148 en el de largerRb y 175 en el de largestRb.
    • Introduzca fontRbGrp en el parámetro groupName de cada uno de ellos.
    • Introduzca etiquetas en la ficha Parámetros de Small, Larger, Largest.
  8. Arrastre un componente ComboBox al escenario y asígnele el nombre de instancia msgCb. Introduzca la siguiente información para dicho componente en el inspector de propiedades:
    • Introduzca 130 en el valor de anchura.
    • Introduzca 265 en el valor X.
    • Introduzca 120 en el valor Y.
    • En la ficha Parámetros, introduzca Greetings en el parámetro prompt.
    • Haga doble clic en el campo de texto del parámetro dataProvider para abrir el cuadro de diálogo Valores.
    • Haga clic en el signo más y reemplace el valor de la etiqueta con Hello World!
    • Repita el paso anterior para añadir los valores de etiqueta Have a nice day! y Top of the Morning!
    • Haga clic en Aceptar para cerrar el cuadro de diálogo Valores.
  9. Guarde el archivo.
  10. Si aún no está abierto, abra el panel Acciones presionando F9 o seleccionando Acciones en el menú Ventana. Haga clic en el primer fotograma de la línea de tiempo principal y añada el siguiente código al panel Acciones:
    import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);
    Las primeras tres líneas importan las clases de eventos que utiliza la aplicación. Un evento se produce cuando un usuario interactúa con uno de los componentes. Las siguientes cinco líneas registran controladores de eventos para los eventos que la aplicación desea detectar. Un evento click se produce en un componente RadioButton cuando un usuario hace clic en él. Un evento change se produce cuando un usuario selecciona un color distinto en el componente ColorPicker. Un evento change se produce en el componente ComboBox cuando un usuario elige otro saludo de la lista desplegable.
    La cuarta línea importa la clase RadioButtonGroup para que la aplicación pueda asignar un detector de eventos en el grupo de componentes RadioButton en lugar de asignar el detector a cada botón de forma individual.
  11. Añada la siguiente línea de código al panel Acciones para crear el objeto TextFormat tf que la aplicación utiliza para cambiar las propiedades de estilo size y color del texto en el componente TextArea.
    var tf:TextFormat = new TextFormat();
  12. Añada el siguiente código para crear la función de gestión de eventos rbHandler. Esta función gestiona un evento click cuando un usuario hace clic en uno de los componentes RadioButton.
    function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}
    Esta función utiliza una sentencia switch para examinar la propiedad target del objeto event con el fin de determinar cuál de los componentes RadioButton activó el evento. La propiedad currentTarget contiene el nombre del objeto que activó el evento. Según cuál sea el componente RadioButton en el que haya hecho clic el usuario, la aplicación cambia el tamaño del texto en el componente TextArea a 14, 18 ó 24 puntos.
  13. Añada el siguiente código para implementar la función cpHandler(), que gestiona un cambio en el valor de ColorPicker:
    function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}
    Esta función establece la propiedad color del objeto TextFormat tf en el color seleccionado en ColorPicker y luego llama a setStyle() para aplicarlo al texto en la instancia aTa de TextArea.
  14. Añada el siguiente código para implementar la función cbHandler(), que gestiona un cambio en la selección de ComboBox:
    function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}
    Esta función simplemente reemplaza el texto de TextArea con el texto seleccionado en ComboBox, event.target.selectedItem.label.
  15. Seleccione Control > Probar película o presione Control+Intro para compilar el código y probar la aplicación Greetings.
    En la siguiente sección se muestra cómo generar la misma aplicación con una clase ActionScript externa y un archivo FLA que sólo contiene los componentes necesarios en la biblioteca.

Para crear la aplicación Greetings2 con un archivo de clase externo:

  1. Seleccione Archivo > Nuevo.
  2. En el cuadro de diálogo Nuevo documento, seleccione Archivo de Flash (ActionScript 3.0) y haga clic en Aceptar.
    Se abre una nueva ventana de Flash.
  3. Seleccione Archivo > Guardar, asigne al archivo de Flash el nombre Greetings2.fla y haga clic en el botón Guardar.
  4. Arrastre cada uno de los componentes siguientes del panel Componentes a la biblioteca:
    • ColorPicker
    • ComboBox
    • RadioButton
    • TextArea
      El archivo SWF compilado utilizará todos estos activos, de forma que hay que añadirlos a la biblioteca. Arrastre los componentes a la parte inferior del panel Biblioteca. A medida que añada estos componentes a la biblioteca, se añadirán automáticamente otros activos (como List, TextInput y UIScrollBox).
  5. En la ventana Propiedades, escriba Greetings2 en Clase de documento.
    Si Flash muestra una advertencia indicando que "no se pudo encontrar una definición para la clase del documento", páselo por alto. Definirá la clase Greetings2 en los siguientes pasos. Esta clase define la funcionalidad principal de la aplicación.
  6. Guarde el archivo Greetings2.fla.
  7. Seleccione Archivo > Nuevo.
  8. En el cuadro de diálogo Nuevo documento, seleccione Archivo ActionScript y haga clic en Aceptar.
    Se abre una nueva ventana Script.
  9. Añada el siguiente código a la ventana Script:
    package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {
    El script define una clase de ActionScript 3.0 denominada Greetings2. El script realiza lo siguiente:
    • Importa las clases que se utilizarán en el archivo. Normalmente, estas sentencias import se añadirían a medida que se hace referencia a las distintas clases en el código pero, para ser breves, en este ejemplo se importan todas en un solo paso.
    • Declara variables que representan los distintos tipos de objetos de componente que se añadirán al código. Otra variable crea el objeto TextFormat tf.
    • Define una función constructora, Greetings2(), para la clase. En los siguientes pasos se añadirán líneas a esta función y otros métodos a la clase.
  10. Seleccione Archivo > Guardar, asigne al archivo el nombre Greetings2.as y haga clic en el botón Guardar.
  11. Añada las siguientes líneas de código a la función Greeting2():
        createUI(); 
    setUpHandlers(); 
}
    La función debería tener el siguiente aspecto:
    public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}
  12. Añada las siguientes líneas de código después de la llave de cierre del método Greeting2():
    private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}
    Estas líneas realizan lo siguiente:
    • Crean instancias de los componentes que se utilizan en la aplicación.
    • Definen el tamaño, la posición y las propiedades de cada componente.
    • Añaden cada componente al escenario, a través del método addChild().
  13. Después de la llave de cierre del método bldRadioButtons(), añada el siguiente código para el método setUpHandlers():
    private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}
    Estas funciones definen los detectores de eventos de los componentes.
  14. Seleccione Archivo > Guardar para guardar el archivo.
  15. Seleccione Control > Probar película o presione Control+Intro para compilar el código y probar la aplicación Greetings2.

Desarrollo y ejecución de ejemplos posteriores

Después de desarrollar y ejecutar la aplicación Greetings, habrá adquirido los conocimientos básicos que necesita para ejecutar los demás ejemplos de código presentados en este manual. En ellos se resaltará y explicará el código ActionScript 3.0 relevante de cada ejemplo y debería poder cortar y pegar cada uno de los ejemplos de este manual en un archivo FLA, compilarlo y ejecutarlo.














INTRODUCCIÓN
 Vamos a realizar un sencillo ejercicio en el que utilizaremos el componente TextArea.
CONFIGURACIÓN DE LA ESCENA

1.-  Cree un nuevo documento Flash.

2.-  Dibuje un cuadrado relleno con un degradado radial verde de los que se ofrecen
por defecto. 




 

UBICACIÓN DEL COMPONENTE
3 .- Active el panel Componentes mediante la opción Ventana/Componentes (o pulse
las teclas [Ctrl] + [F7] ), abra la categoría Usar Interfaces. 


 


 4 .- Haga doble clip sobre el componente TextArea para i insertar   el   competente   y  ubicar una instancia del componente en la escena. 


 5 .- Mediante el panel Propiedades asigne a la instancia el nombre texto.
 



6.-  Mediante el panel Propiedades asigne a la instancia unas dimensiones por ejemplo:
de 200 x 150 pixel. 





PARAMETRIZACIÓN
7.-  En el panel Propiedades haga clip en la pestaña Parámetros.

8.-  En la casilla wordWrap asegúrese de que aparezca el parámetro true.

9.-  En la casilla texto escriba todo el texto que desea que aparezca en el interior del
componente. Cuando haya finalizado, pulse Enter, el contenido aparecerá en el
componente en el escenario. 








 






-Pulse Ctrl + Intro para reproducir la película y observe cómo el texto aparece dentro
del  componente  y,  si  no  cabe,  aparece  una  barra  de  desplazamiento  para  poder
moverse por el texto.











INTRODUCCIÓN


Vamos a realizar un sencillo ejercicio en el que utilizaremos el componente ScrollPane
paravisualizar una fotografía.


PREPARACIÓN DEL CONTENIDO DEL COMPONENTE


Lo primero que hay que hacer es crear o importar lo que queremos que aparezca enel interior del panel de desplazamiento. Puede ser un dibujo más o menos complejo ouna imagen en mapa de bits. Para este ejercicio utilizaremos un mapa de bits.
1.-Cree un documento nuevo en Flash.
2..-Mediante la orden Archivo/Importar/Importar a escenario importe el bitmap(ejemplo grecia.jpg) que se guardado previamente en una carpeta creada para elejercicio.




3 Después de haber importado el bitmap en el escenario, selecciónelo y active laopción Modificar/Convertir en símbolo o pulse la tecla de función [F8].








4 En la ventana que se abrirá asigne un nombre que identifique al nuevo símbolo (porejemplo, partenon) y active la casilla Clip de película.


¡No cierre la ventanatodavía!


5 Ahora, en la propia ventana, pulse en el botón Avanzado y verá cómo se amplía laventana.
6 En la sección Vinculación active la casilla Exportar para ActionScript y pulse enAceptar para cerrar la ventana.





7 Abra la Biblioteca mediante la orden Ventana/Biblioteca o pulse la secuencia deteclas [Ctrl]+[L], seleccione el clip de película y haga doble clic; dentro delescenario de este, verifique que el vértice superior izquierdo de ésta coincida con lacrucecita central del clip, sino fuese así, arrastre la imagen hasta que coincida en él.





Con esta operación ya tenemos preparado el contenido que deberá aparecer en el interiordel componente ScrollPane.Salga del clip de película pulsando la Flecha celeste y trabaje ahora el componenteScrollPane.

UBICACIÓN DEL COMPONENTE

8 Elimine de la escena el bitmap, ya que ahora se encuentra como clip de película en labiblioteca y ponga un color de fondo al escenario.


 9.-
 Active el panel Componentes mediante la opción
 Ventana/Componentes
 (o pulselas teclas [
 Ctrl] + [F7]
 ), abra la categorí
User Interface
10 Busque, seleccione y arrastre a la escena el componente
ScrollPan
 para mayor informacion ingresar aqui: http://es.scribd.com/doc/169859954/4-Uso-Del-Componente-ScrollPane

.


Iniciar y parar sonidos con botón.
Pasos a seguir:
1.-Abrir CS3 ActionScript 2.0
2.- Insertar nuevo símbolo ( CRTL + F8 )
3.-Dar nombre “ audio “
4.-Tipo de símbolo clip de película y aceptar
5.-Irse al fotograma Nº2 y F6
6.-Pulsar 2 veces F5
7.-Selecciona el fotograma 5 y pulsar 56
8.-Pulsar f5 hasta el fotograma Nº9 y seleccionar el fotograma nº10 y presionar f6
9.-Presionar f5 e insertar 3 veces
10.-En el fotograma 14 pulsar f6
11.-Dirigirse al fotograma n1 y pulsar f9
13.-Funciones globales , control de línea de tiempo
14.-Seleccionar STOP y StopAllSounds
15.-Cerrar la ventana de comandos
16.-Dirigirse al fotograma 14 y abrir la ventana de comandos
17.-Cargar el vídeo antes – Archivo importar el sonido que voy a utilizar
18.-Seleccionar el fotograma Nº5 y seleccionas el audio y arrastrar al escenario
19.-Dirigirse al fotograma nº14 y abrir la ventana de comandos
20.-Seleccionar el gotoandplay , en el paréntesis debe ir el fotograma nº 5
21.-Dirigirse al fotograma nº5 propiedades(en la parte de abajo) seleccionar sincronización y poner inicio y poner reproducir indefinidamente.


23.-Para salir hacer clip en la flechita verde
Botones.-
1.-Ir opción ventana seleccionar biblioteca comunes y luego botones
2.-Seleccionar clásica botón y dar doble click en el botón amarillo
3.-Cerrar la carpeta que aparece
4.-Buscar el playback y abrir la carpeta y dirigirse playback-play y hacer un click y arrastrar al escenario
5.-Buscar el playback-stop y arrastrar al escenario
6.-Irse a la biblioteca y seleccionar el audio y arrastrar al escenario
7.-Irse a biblioteca y seleccionar el audio y arrastrar el escenario
8.-Irse a propiedades y poner instancia audio (debajo del clip de película)
9.-Seleccionar el botón play y abrir ventana de comandos
10.-Control de clip de película , insertar on y press
11.-Press = Presionar el botón ; rollover = pasar por encima del botón
12.-Insertar press
13.-Escribir audio en la segunda línea y un punto. Buscar gotoandplay y poner  fotograma 1 en el paréntesis
14.-Seleccionar el botón STOP y abrir ventana de comandos y pegar lo mismo, luego cerrar ventana de comandos
15.-Correr película
Imagen
.Antes abrir otra capa
.Poner Jesús te ama ( escribir) ( poner stop en comandos )
.Poner fotogramas hasta el nº9 ( y stop )
.Fotograma 10 y poner el texto
.Fotograma 10 y ingresar la imagen
.Modificar y activar separar ( 2 veces )
.Al final (Stop)





CREACIÓN Y PREPARACIÓN DEL CLIP
  • ·         PulseCtrl + F8, cree un nuevo símbolo de clip de película y asignarle el nombre audio
  • ·         Seleccione el fotograma nº 2 y pulseF6 para crear un fotograma clave.
  • ·         Seguid amente, pulseF5 dos veces para añadir dos fotogramas más a la línea de tiempo.
  • ·         Seleccione el fotograma nº 5 y pulseF6 para crear otro fotograma clave.
  • ·         Pulse ahora cuatro vecesF5 para añadir otros tantos fotogramas normales.6Seleccione el fotograma nº 10 y pulse F6 para crear otro fotograma clave.
  • ·         Pulse tres veces F5 para añadir otros tres fotogramas normales.
  • ·         Finalmente, seleccione el fotograma nº 14 y pulse F6 para convertirlo en clave. La figura muestra el aspecto que deberá tener ahora la línea de tiempo del clip.



INTRODUCCIÓN DE LAS ACCIONES PARA LA DETENCIÓN DEL SONIDO
  • Seleccione el fotograma nº 2 y en el panel Acciones introduzca el siguiente código, el cual de-tendrá la reproducción del clip y de cualquier sonido que esté produciéndose:
Stop();
stopAllSounds();






insertar sonido a los símbolos

  1. descargar imagen es de instrumentos musicales ( BOMBO, CAJA, TIMBALES, etc)
  2. descargar sonidos de los instrumentos dados( FORMATO WAV)
  3. ingresar a ADOBE FILAS PROFESIONAL.
  4. hacer clip en ARCHIVO/ importar/ IMPORTAR A BIBLIOTECA.
  5. INSERTAR cada una de las imagen es  y sonidos descargadas.
  6.  tomar la imagen del BOMBO.
  7. clip en MODIFICAR/ transformación libre y ajustar la imagen a su gusto.
  8. después presionar F8 para poder transformarlo a SÍMBOLO. 
  9. posteriormente hacer doble clip en la imagen .
  10. ya estando adentro de la  ESCENA te saldrán 4 fotogramas ( arriba, reposo,  sobre, presionado)
  11. en el fotograma REPOSO presionar la tecla F6 / en el fotograma SOBRE F6 / y en el fotograma PRESIONADO F6 ,PERO allí tienes que insertar el sonido correspondiente del instrumento musical.
  12. salimos de la ESCENA 
  13. SI TU DESEAS puedes ingresar otro sonido en el fotograma REPOSO ó SOBRE .
  14. terminado todo presionar las teclas CTRL+ ENTER  y podras observar como te quedo tu trabajo.




No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)