Share
En este Consejo rápido, aprenderá cómo usar la función de interfaz externa de Flash y agregará un poco de jQuery para crear un "interruptor de luz" que atenúe la página web. Esto es realmente efectivo para usar con reproductores de video, presentaciones de diapositivas, etc..
Para crear este interruptor de luz, usaremos el comando ExternalInterface en Flash. Crearemos una llamada a una función jQuery que atenúe la página web cuando se haga clic en el botón. Luego usaremos Dreamweaver (o cualquier programa de edición html) para crear una página web para mostrar el efecto..
Este es un efecto muy útil para agregar a las aplicaciones Flash (como reproductores de video) para mejorar la experiencia del usuario y agregar un poco de funcionalidad adicional a su sitio web.
Cree un nuevo documento de ActionScript 3 y configúrelo a 120 x 120 px. Crea un cuadrado de 100 x 100px con un radio de esquina de 10.
Rellénalo con un gradiente de #BBBBBB a # 999999. Utilice la herramienta de transformación de degradado (tecla de método abreviado 'F') para rotar el gradiente de modo que #BBBBBB esté en la parte superior en lugar de la derecha.
Luego, seleccione el fondo y conviértalo en un símbolo (Modificar> Convertir en símbolo) y asígnele el nombre 'buttonBackground'.
Vaya dentro del botón de fondo del botón haciendo doble clic en él y seleccione el degradado. Luego presione CTRL + C para copiarlo, CTRL + MAYÚS + V para pegarlo en la misma ubicación y luego, sin deseleccionarlo, vaya a Modificar> Forma> Expandir relleno y insértelo 2px. Cambia el gradiente para que pase de #CCCCCC a #AAAAAA.
Regrese a la línea de tiempo principal y seleccione el botón movieclip luego vaya a Modificar> Convertir a símbolo y elija Botón con el nombre luces apagadas.
Ahora ve dentro del botón haciendo doble clic en él y crea 2 nuevas capas sobre la capa de fondo llamada Bulbo y Texto. Escribe "Lights Off" en la capa de texto. Usé Arial Bold en 20 puntos y un color de # 444444. También creé una bombilla simple usando un círculo para la parte superior y algunos rectángulos redondeados para la base. Hice la bombilla de un color de # 5D5D5D..
Vaya al siguiente fotograma clave para el estado "sobre" del botón, haga que el color del texto # 353535 y el color de la bombilla # 4C4C4C. Dale al fondo un filtro de brillo con estas propiedades:
Para el estado inactivo, simplemente elimine el brillo del fondo y gire el fondo 180 °.
Vaya a su biblioteca, haga clic con el botón derecho en el botón de luces apagadas, seleccione "Duplicar" y nombre la nueva copia "luces en".
Entrar en el luces encendidas y cambie el texto a "Lights On" para todos los estados. Además, agregue algunos rayos de luz alrededor de la bombilla como se muestra en la siguiente imagen:
Vuelve al escenario principal. Asegúrate de tener una instancia de luces apagadas en el escenario y uno luces encendidas movieclip Dales los nombres de instancia de "lightsOff" y "lightsOn" respectivamente. Centre ambos botones en el escenario usando el panel de alineación. Si no puede verlo, vaya a Ventana> Alinear (o presione CTRL + K). Asegúrate de hacer clic en el botón "Alinear al escenario" en la parte inferior del panel..
Abra un nuevo archivo de ActionScript y escriba la clase de documento básica. Si no sabe acerca de las clases de documentos, lea el consejo rápido de Michael para ayudarlo a comenzar.
Guarde el archivo Actionscript como "Lights.as" y luego, en flash, configure la clase de documento de .fla en Luces.
Esto puede parecer una gran cantidad de código, pero una vez que lees los comentarios es bastante simple.
Accentsconagua
paquete import flash.display.MovieClip; importar flash.external.ExternalInterface; // Importe la clase necesaria para llamar a una función jQuery import flash.events.MouseEvent; // Importe la clase necesaria para detectar un clic del ratón. Clase pública Lights extiende MovieClip public function Lights () lightsOn.visible = false; // Hacer que el botón lightsOn sea invisible lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Agregar un oyente para hacer clic con el mouse en el botón lightsOff lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Agregar un oyente para hacer clic con el mouse en la función del botón lightsOn turnLightsOff (e: MouseEvent): void // Apagar la función de las luces lightsOn.visible = true; // Hacer que el botón de las luces se vea visible lightsOff.visible = false; // Hacer que el botón lightsOff sea invisible ExternalInterface.call ("lightsOff"); // Llame a la función jQuery 'lightsOff' function turnLightsOn (e: MouseEvent): void // Encienda la función de lights lightsOn.visible = false; // Hacer que el botón de luces se encienda invisible lightsOff.visible = true; // Hacer visible el botón lightsOff ExternalInterface.call ("lightsOn"); // Llamar a la función jQuery 'lightsOn' Abre tu editor de texto para crear páginas HTML. En mi caso estoy usando Adobe Dreamweaver. Cree un documento HTML en blanco y guárdelo como luceswitch.html en el mismo directorio que su SWF. A continuación, configure su documento con el siguiente código:
Voy a agregar en el archivo flash usando swfobject. Si no sabe acerca de swfobject, puede leer la Sección 1 del tutorial de Angel sobre el uso de swfobject para insertar sus archivos SWF en su documento HTML. Una vez que tenga control sobre swfobject y tenga los archivos necesarios, puede continuar.
Deberá agregar el siguiente código dentro de Etiquetas en tu página HTML. Como puedes ver, necesitarás la swfobject.js y expressInstall.swf archivos en el mismo directorio que su página swf y html.
Ahora todo lo que tenemos que hacer es escribir las funciones de jQuery. Estas son dos funciones simples que se llamarán desde el SWF cuando haga clic en el botón.
Estos también van dentro del Etiquetas debajo del código swfobject. Como puede ver, obtengo el archivo jQuery directamente del servidor de Google.
Ahora, si prueba su archivo HTML, debería ver el interruptor de luz funcionando como en la demostración. Este es un efecto muy útil para los reproductores de video Flash cuando desea mejorar la experiencia del usuario en su sitio. Hace que sea mucho más fácil para el usuario centrarse en el SWF.
Espero que te haya gustado este tutorial y gracias por leer.!
