Share
En este tutorial, aprenderá cómo crear ventanas que se pueden arrastrar usando Flash y AS3. Cubriré los conceptos básicos de arrastrar y soltar, los límites de las ventanas, agregar contenido y cómo minimizar la ventana.
Echemos un vistazo al resultado final en el que trabajaremos:
Okey, vamos a ir! Crea un nuevo documento presionando CTRL + N y seleccionando Archivo Flash (ActionScript 3). Establezca el tamaño del escenario en 600x400 px y el color de fondo en #EEE. En la ventana Propiedades, establezca la clase en ventanas y guarda tu archivo como windows.fla.
Seleccione la herramienta Rectángulo (R) y dibuje un rectángulo con 280x90 px. Seleccione su forma, vaya a la paleta de colores (Ventana> Color) y cree un degradado de #FFF a #CCC.
Presione F para la Herramienta de degradado, seleccione su degradado, gírelo 90 grados (manteniendo presionado el botón Shift mientras lo gira) y acórtelo para que se adapte al rectángulo..
Selecciona toda la forma, presiona F8 para convertir en símbolo, nómbrela ventanaArea y establecer el punto de registro en la parte superior izquierda.
Seleccione el símbolo y en la ventana Propiedades establezca el nombre de instancia ventanaArea.
Para el borde, use el filtro Glow, con un desenfoque de 2px, fuerza del 500%, color # 666666. Utilicé un resplandor porque si usas un trazo, cuando cambias el tamaño de la ventana, el trazo también cambiará de tamaño.
Seleccione la herramienta Rectángulo (R) nuevamente y dibuje un rectángulo con 280x22 px y un trazo de 1px con el color # 666. Cree otro rectángulo encima de esto, pero esta vez en las Opciones de rectángulo, establezca el radio de la esquina Rectángulo en 5.
Ahora, elimina las esquinas necesarias como en la imagen de abajo..
Luego, pinte su forma, selecciónela, vaya a la paleta de colores (Ventana> Color) y cree un degradado de # 999 a # 333. Gire el gradiente 90 grados, como hicimos en el paso anterior.
Seleccione la forma de todos, pulse F8. Nombre: ventanabar; Tipo: Botón; Inscripción: arriba a la izquierda.
Seleccione el símbolo y en la ventana Propiedades establezca el nombre de instancia ventanabar.
Haga doble clic en la forma, crear fotogramas clave Para el Terminado y Abajo estados Ahora cambia los colores para cada uno..
He elegido:
Cree un rectángulo redondo con 14x11 px, radio de 5px, y cámbielo para que se vea como a continuación.
El signo menos lo haces creando un rectángulo de 5x2 px con el color # 999. Establezca el nombre de instancia en minimizarBtn.
Utilicé los mismos colores de la barra de la ventana, pero el estado de ARRIBA con un 40% de alfa para el gradiente.
Organice todas las formas en forma de ventana, presione F8 y cree un MovieClip con el nombre ventana e inscripción: arriba a la izquierda.
En la biblioteca, haga clic derecho en la ventana y vaya a Propiedades. Establecer la clase a ventana. De esta manera, la ventana se asignará a la clase que crearemos más adelante..
Seleccione el símbolo y en la Ventana de propiedades establecer el nombre de la instancia a ventana. En los filtros, haga clic en Añadir filtro (el botón dentro de un círculo en la imagen a continuación), y agregue una Sombra con el color # 333 como a continuación:
Haga doble clic en el símbolo para editarlo. Seleccionar todo (CTRL + A), clic derecho> Distribuir a capas.
En una nueva capa, escriba el texto del título de la ventana con Arial, 11pt, color #CCC, espacio entre letras: 1. Configúrelo Texto dinámico y nombrarlo ventanatítulo.
Ahora que el diseño está completo, comencemos a codificar nuestra escena. Lo primero que haremos es crear nuestro archivo ActionScript..
Presione Ctrl + N o vaya a Archivo> Nuevo y seleccione Archivo ActionScript. Guárdelo en el mismo directorio y con el mismo nombre (windows.as) de su archivo FLA.
Ahora vamos a crear nuestro paquete e importar las clases necesarias:
paquete import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; importar flash.events.ContextMenuEvent; import flash.geom.Rectangle; importar flash.filters.DropShadowFilter; importar flash.text.TextFormat; importar fl.transitions.Tween; importar fl.transitions.easing. *; importar fl.transitions.TweenEvent; ventana de clase pública extiende MovieClip
Ahora necesitas asignar funciones a nuestros botones. Necesitarás una función para cuando empecemos a arrastrar el ventanabar, otra para detener el arrastre, una para poner la ventana en primer plano al hacer clic en ella y otra para minimizarla.
Añadir estos oyentes de eventos a la Ventana de función pública () en nuestro código:
la ventana de clase pública extiende MovieClip // variables public var title: String; función pública Window () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // funciones de windows this.addEventListener (MouseEvent.MOUSE_UP, onWindowClick); this.windowBar.addEventListener (MouseEvent.MOUSE_DOWN, onWindowStartDrag); this.windowBar.addEventListener (MouseEvent.MOUSE_UP, onWindowStopDrag); this.minimizeBtn.addEventListener (MouseEvent.MOUSE_UP, minimowindow);
El público var título Se utiliza para el título de la ventana. Usaremos esto mas tarde.
Desde el ventanatítulo es un texto dinámico que inhabilitamos sus funciones del mouse para que no afecten el área de arrastre del ventanabar.
¡Aquí es donde empezamos a divertirnos! Copie el siguiente código después de la Ventana de función pública ():
/ * INICIAR DRAG ********************************************** ************ / private function onWindowStartDrag (e: MouseEvent): void var windowWidth = this.width; var windowHeight = this.height; var windowBarWidth = e.target.width; var windowBarHeight = e.target.height; var linesRect: Rectangle; // los límites arrastrables de la ventana si (windowArea.visible) límitesRect = nuevo Rectángulo (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else cornersRect = new Rectangle (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // trace (linesRect); this.startDrag (false ,bordRect); // traer la ventana al frente stage.addChild (this);
Lo primero que hacemos aquí es crear variables a los anchos y alturas de la ventana y la ventanabar.
A continuación, los límites de la ventana. Crearemos dos límites: uno cuando la ventana es normal (si windowArea es visible) y otro cuando está minimizado. Para ello, crea un rectángulo con el tamaño del escenario. El rectángulo soporta cuatro atributos (x, y, ancho, alto). Comenzará en la esquina de la pantalla (x: 0; y: 0) y se extenderá a la otra esquina de la pantalla. Debido a que los límites están relacionados con el punto de registro de la ventana, tendremos que restar el ancho y alto de la ventana (o el ventanabaren caso de que la ventana esté minimizada).
Una vez establecidos los límites, estableceremos la ventana para que se arrastre. Nosotros arrastraremos esta, la clase de ventana. En otras palabras, toda la ventana..
this.startDrag (false ,bordRect);
los startDrag La función soporta dos atributos: lockCenter y límites. Si no quieres límites solo escribe esto:
this.startDrag (false);
Si tenemos varias ventanas, tendremos que colocar la ventana actual en la parte superior de la pantalla. Hacemos esto con el addChild Añadiéndolo nuevamente a la etapa:
// traer la ventana al frente stage.addChild (this);
Este es realmente simple. Usaremos el detenerDrag funciona aqui Simplemente copia lo siguiente a tu código después del anterior onWindowStartDrag función:
/ * STOP DRAG ********************************************** ************ / private function onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Una vez más, muy simple. Cuando hagamos clic en la ventana lo llevaremos al frente usando addChild.
/ * CLICK PARA LA VENTANA ********************************************* ************ / private function onWindowClick (e: MouseEvent): void // trae la ventana al frente stage.addChild (this);
Para minimizar / mostrar la ventana, cambiaremos la visibilidad del ventanaArea Me gusta esto:
/ * MINIMIZAR VENTANA ********************************************** ************ / private function minimWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Puede mejorar esto desvaneciendo la ventana y ocultándola, y viceversa:
/ * MINIMIZAR VENTANA ********************************************** ************ / private function minimWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; fade.start (); función fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
La Tween soporta los siguientes valores:
Tween (objeto, "propiedad", EasingType, begin, end, duration, useSeconds);
Para una lectura más extensa, use los LiveDocs.
En nuestro caso, lo que estamos haciendo es, si el ventanaArea es visible (lo que significa: no minimizado), se desvanecerá ventanaArea y cuando termina la interpolación (TweenEvent.MOTION_FINISH), ocultará el ventanaArea. Viceversa si se minimiza.
Usaremos la variable t para cambiar el ventanatítulo. Las otras dos líneas son solo para resolver un problema de espacio entre letras. Si no los escribe, Flash restablecerá el espacio entre letras a cero..
/ * FIJAR EL TÍTULO DE WINDOW ********************************************* ************* / función pública Título (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (fmt); // espaciado entre letras, título = t;
Esta función se utilizará más adelante así:
Accentsconagua
YourWindowName.Title ("Nombre de tu ventana"); Esta función recibirá dos atributos: el ancho y el alto de la ventana. Si no se llena ninguno, se establecerá en el tamaño predeterminado (280x112 px)
Lo que hacemos aquí es cambiar el ancho de la ventanabar, la ventanaArea y el ventanatítulo. Para la altura solo cambiamos la ventanaArea's, dejando la altura de la ventana a su tamaño predeterminado, al igual que una ventana normal.
Al redimensionar tendremos que restablecer la posición del botón Minimizar. Que es igual al ancho de la ventana menos el ancho del botón y 6px.
/ * FIJAR EL TAMAÑO DE WINDOW ********************************************* ************* / public function Size (Width: int = 280, Height: int = 112): void // change width windowBar.width = Width; windowArea.width = Ancho; windowTitle.width = Ancho - 45; // cambiar la altura del contenido windowArea.height = Altura; // restablecer minimBtn escala / posición minimBtn.x = Ancho - minimizarBtn.width - 6;
Esta función se utilizará más adelante así:
YourWindowName.Size (350,200);
¿Recuerdas cuando colocamos una sombra debajo de la ventana? Bueno, si coloca la ventana por código, también tendrá que agregar la sombra paralela por código.
Todos los atributos anteriores se pueden establecer por código. Copia la función y cambia los valores a tu gusto:
/ * FIJAR EL FILTRO: DROP SHADOW ******************************************* *************** / public function DropShadow (color: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- bajo; 2- medio; 3- alto (máx. 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + color); this.filters = new Array (dropShadow); // agregar filtro a la ventana Esta función recibirá una cadena con el código hexadecimal del color. Si no se llena, el valor de color predeterminado será # 333333.
los calidad Puede ir de 1 a 15, siendo 1 2 3 - bajo, medio y alto. Aquí usamos bajo.
los color debe ser convertido de un Cuerda a una En t.
Después de definir los atributos debemos agregar el filtro a la ventana como en la última línea. Esto creará un Formación de filtros. Lo que significa que también podría agregar otros filtros a la ventana.
this.filters = new Array (dropShadow);
Esta función se utilizará más adelante así:
YourWindowName.DropShadow ("FF0000"); // añade una sombra roja Ahora cambie a su archivo Flash, cree una nueva capa, nómbrela as3 y presione F9 para el ActionScript (o vaya a Ventana> Acciones).
Agregar una ventana es muy simple. Todo lo que necesitas hacer es crear una variable (llamémosla mi ventana), asignándolo a la Ventana clase y el agregar la ventana a la etapa:
var myWindow: window = new window; addChild (myWindow);
Esto producirá una ventana con sus valores por defecto..
Puedes cambiar varios atributos de la ventana:
Nuevamente, lo primero que debe hacer es crear la variable asignada por la clase Window:
var myWindow: window = new window;
Entonces puedes empezar a cambiar los atributos:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); // añade una bonita sombra de lima myWindow.Size (350,200);
myWindow.x = 20; myWindow.y = 20;
addChild (myWindow);
El código todo será así:
var myWindow: window = new window; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); myWindow.Size (350,200); myWindow.x = 20; myWindow.y = 20; addChild (myWindow); 
Aquí hay otro ejemplo con dos ventanas agregadas por código y una predeterminada en la etapa:
var janela: ventana = nueva ventana; var janela02: ventana = nueva ventana; janela.Título ("Cabo Verde"); janela.DropShadow ("66CC00"); janela.Size (350,200); janela.x = 20; janela.y = 20; janela02.Título ("¡Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250,200); janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); 
Si necesita saber el título de la ventana, puede usar esto:
traza (janela.title);
¡Bien hecho por seguir hasta ahora! Ahora deberías haber logrado un resultado similar al que vimos al principio:
Si se da cuenta a estas alturas, puede cambiar todos los atributos de la ventana, pero el contenido sigue siendo el mismo. Así que vamos a crear el contenido..
Abra el MovieClip de Windows, cree una nueva capa para el contenido y vaya a Insertar> Nuevo símbolo (CTRL + F8). Elija MovieClip, llámelo contenido y pulsa OK. Ahora colóquelo en X: 0, Y: 22.
Seleccione el nuevo símbolo de contenido que acaba de crear y establezca su nombre de instancia en CONTENIDO.
Haga doble clic en el contenido, nombre la capa existente contenido y crea otro nombrado as3. En este último, pulsa F9 y escribe:
detener();
Este será nuestro contenido por defecto. Es decir, nada!
Ahora crea otro fotograma clave y colocar una imagen por ejemplo. Tenga en cuenta el tamaño de la ventana que utilizará. Agrega otro fotograma clave y escribe un texto en él. Ahora tenemos 3 fotogramas clave: 1. sin contenido, 2. imagen, 3. texto.
En cuanto al código, agregue esto a su archivo de clase:
/ * CAMBIAR CONTENIDO ********************************************** ************ / public function Content (c: int): void CONTENT.gotoAndStop (c);
Realmente sencillo. Solo diremos a qué fotograma clave queremos ir.
También necesitarás cambiar la minimizarWindow funciona a esto:
/ * MINIMIZAR VENTANA ********************************************** ************ / private function minimWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; CONTENT.visible =! CONTENT.visible; fade.start (); función fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
En el ejemplo anterior, agregue esto al código:
janela.Contenido (2); // va al fotograma clave de la imagen
Aquí está el código completo:
var janela: ventana = nueva ventana; var janela02: ventana = nueva ventana; janela.Título ("Cabo Verde"); janela.DropShadow ("66CC00"); janela.Size (350,240); janela.Contenido (2); // va al fotograma clave de la imagen janela.x = 20; janela.y = 20; janela02.Título ("¡Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250,200); janela02.Contenido (3); // va al texto fotograma clave janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Por lo tanto, hay una forma sencilla de crear una ventana que se puede arrastrar (como la que vemos en Windows). Si desea ir más lejos, puede cambiar el contenido de MovieClip, agregar texto, botones, imágenes, etc. Puede agregar barras de desplazamiento, contenido de llamadas a través de XML o lo que sea que se le ocurra. Las posibilidades son infinitas!
Aquí hay otro ejemplo impresionante:
Esto es eXOTRik, y espero que haya encontrado esto útil. Es mi primer tutorial, espero traerte más trucos de ninja. Ayaaaa!
