Share
¿Alguna vez ha necesitado cambiar el tamaño de su SWF integrado en función de la interacción / entrada del usuario, por ejemplo, cómo Newgrounds le permite cambiar el tamaño de ciertos juegos Flash para que se ajusten a la pantalla? Esto se puede hacer usando JavaScript y el Interfaz externa clase en ActionScript. Pero que tal si no sabes JavaScript en absoluto?
Bueno, por suerte para ti, hay una pequeña clase por ahí llamada NavegadorCanvas que hace todo el trabajo feo para ti y en este rápido consejo te mostraré cómo usarlo.
En primer lugar necesitamos un editor de código. Usaré FlashDevelop para este tutorial porque escribiremos ambos ActionScript y HTML y este es un buen editor de código para ambos. Esto no es algo obligatorio, por lo que puede utilizar cualquier software que desee. Si desea usarlo, pero no sabe cómo hacerlo, consulte esta guía para principiantes de FlashDevelop.
A continuación necesitas el NavegadorCanvas clase, así que vaya aquí y descárguelo y lea una descripción más detallada de la misma.
También necesitarás una imagen que representará el contenido (he usado el logotipo de Activetuts +) y una imagen que representa el controlador de cambio de tamaño. He incluido ambos en la fuente de descarga, por lo que debería estar bien.
Ahora que estamos preparados comencemos!
Nota: En los primeros seis pasos he explicado cómo se hacen los preparativos y cómo hacer la interfaz de usuario sin hacer referencia a la realidad NavegadorCanvas clase. Si no desea seguirlos, puede pasar directamente al Paso 7 y continuar usando el proyecto que he proporcionado en el paquete de descarga. Puedes encontrarlo en el fuente carpeta y bajo la SWFResize - hito carpeta.
Abierto FlashDesarrollar y crea un nuevo proyecto yendo a Proyecto> Nuevo Proyecto? . Dale un nombre y presiona DE ACUERDO.
También copia el com Carpeta desde el archivo descargado al directorio fuente de su proyecto.
Colocar el active.png y arrows.png imágenes del paquete descargado en una bienes carpeta dentro de la compartimiento directorio de tu proyecto.
Luego abre el Main.as Archivo y coloque las cuatro líneas resaltadas en él (el resto ya habrá sido creado automáticamente por FlashDevelop):
paquete import flash.display.Sprite; import flash.events.Event; public class Main extiende Sprite [Embed (source = '? /bin/assets/active.png')] public var logo: Class; [Incrustar (fuente = '? /Bin/assets/arrows.png')] public var arrows: Class; función pública Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Esto integrará los dos activos para que podamos usarlos en tiempo de ejecución.
En este momento, el escenario tiene su configuración predeterminada: tendrá un color de fondo blanco, una velocidad de fotogramas de 24 fps y un tamaño de 800 px por 600 px, que es demasiado grande como para demostrar este efecto..
Agregue la línea resaltada justo antes de la declaración de clase:
[SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")] public class Main extiende Sprite
También queremos establecer el modo de escala y alineación del escenario. Para esto añadiremos el setStage () Método a nuestra clase y lo llamamos desde dentro de la en eso() método.
función privada setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); función privada onStageResize (e: Event): void
Como puede ver, también he agregado un detector de eventos al escenario para el Evento. evento, junto con su función de controlador adecuado onStageResize ().
Bueno. Ahora tenemos nuestro escenario configurado y continuaremos agregando contenido.
Primero agregue estas dos variables a nuestra clase:
var_logo privado: Bitmap; Var varadas privadas: Sprite;
Ahora agregue el createObjects () Método y llamarlo desde dentro de la en eso() método:
función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); private function createObjects (): void _logo = new logo () como Bitmap; addChild (_logo); _arradas = nuevo Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuevas flechas () como Bitmap); addChild (_arrows);
Esto creará una instancia de nuestros objetos y los agregará a la lista de visualización..
Si compila el código ahora verá que estos dos se superponen, así que vamos a colocarlos.
Consideremos que necesitaríamos que nuestro contenido permanezca siempre en el centro del escenario y que el controlador de cambio de tamaño esté en la esquina inferior derecha del escenario. Usaremos los siguientes dos métodos para hacer precisamente eso..
los positionLogo () Centra el contenido en el escenario.?
función privada positionLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0.5 - _logo.height * 0.5;
? y el positionArrows () establecerá el controlador de cambio de tamaño en la esquina inferior derecha del escenario:
función privada positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
Por último, llamémoslos desde dentro del en eso() método para hacer el posicionamiento real.
función privada init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
Además, ahora es el momento de modificar el onStageResize () controlador para colocar el logotipo cada vez que se cambia el tamaño del escenario.
función privada onStageResize (e: Event): void positionLogo ();
Compila el código y revisa el resultado. Se ve bien, ¿no? :)
Lo último que debemos hacer para que nuestra UI esté completa es agregarle algo de interactividad..
Agrega estos dos MouseEvent oyentes después de la última línea en el createObjects () método
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
También agregue sus funciones de controlador correspondientes:
función privada onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); función privada onMouseUp (e: MouseEvent): void _arrows.stopDrag (); _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30; removeEventListener (Event.ENTER_FRAME, onEnterFrame); función privada onEnterFrame (e: Event): void
Como puedes ver el RATÓN HACIA ABAJO y el MOUSE_UP los controladores de eventos se utilizan para el controlador de cambio de tamaño y una ENTER_FRAME El detector de eventos se utiliza para ejecutar el código para el cambio de tamaño. Añadiremos el código correspondiente en el onEnterFrame () manejador en los pasos posteriores.
Accentsconagua
NavegadorCanvas ClaseHasta ahora solo hemos hecho la programación básica de AS3 sin discutir la idea real de este tutorial: cambiar el tamaño del área que el SWF ocupa en la página web. Estos no fueron pasos necesarios, pero los he hecho para simular un escenario real simplificado..
Para empezar primero agregaremos una nueva variable llamada _lona de tipo BrowserCanvas:
privado var _canvas: BrowserCanvas;
Nota: Si no está utilizando un editor de código que importa automáticamente las clases utilizadas, no olvide hacerlo usted mismo..
Después de crear la variable instanciarla en el createObjects () método.
función privada createObjects (): void _canvas = new BrowserCanvas (stage); _logo = nuevo logo () como Bitmap; addChild (_logo); _arradas = nuevo Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuevas flechas () como Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Como puedes ver el NavegadorCanvas La clase toma los siguientes tres parámetros:
escenario -- Esta es una referencia al escenario. Esto se utilizará para garantizar que la película Flash correcta está dirigidacontainerId -- esta es una referencia a la etiqueta div u object que contiene la película y que queremos redimensionar. Esto no es realmente necesario a menos que tenga varias instancias del mismo SWF incrustadas en la misma páginabrowserHacks -- una lista de hacks para ser aplicados. En realidad, no es necesario que pase esto, ya que se aplican de forma predeterminada todos los hacksNota: Si compilas el código ahora, obtendrás el siguiente error:
Error # 2067: El ExternalInterface no está disponible en este contenedor. ExternalInterface requiere Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 y superior, u otros navegadores compatibles con NPRuntime.
Esto se debe a que el SWF aún no está incrustado en un contenedor HTML. La película se compilará con éxito de todos modos, pero si no desea obtener este error, puede agregar una sentencia if para comprobar si la película está en el contenedor correcto. Esto se puede hacer fácilmente revisando el ExternalInterface.available propiedad antes de instanciar la NavegadorCanvas objeto.
if (ExternalInterface.available) _canvas = new BrowserCanvas (stage);
Lo último que debemos hacer en Flash es agregar el código real que hace el cambio de tamaño. Este código se ejecutará desde el interior del onEnterFrame () controlador de eventos:
función privada onEnterFrame (e: Evento): void if (_canvas) var w: Number = _arrows.x + _arrows.width + 30; var h: Number = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString ();
los w y h Las variables se utilizan para calcular el ancho y el alto de la etapa apropiados, después de lo cual establecemos las propiedades de ancho y alto del _lona Objeto a la anchura y altura correspondientes. Estas dos propiedades deben establecerse como cadenas.
Nota: La sentencia if está ahí para verificar si el _lona El objeto se ha creado porque, si compilamos el código y usamos el controlador de cambio de tamaño, recibiremos un error. Eso está sucediendo debido al contenedor inadecuado de nuevo. Debido a que la película se reproduce en el reproductor independiente, no hay un contenedor HTML, por lo que _lona el objeto no fue instanciado (mira el paso anterior).
Compila el proyecto y avanza al siguiente paso.
Ahora que la parte de Flash está lista, debemos trabajar un poco en HTML, ya que hay algunos pasos necesarios para que esto funcione correctamente..
Si estas usando FlashDesarrollar usted debe tener un archivo HTML llamado index.html generado automáticamente en el compartimiento directorio; Si no, créelo. Debe tener un aspecto como este:
SWFResize
Este es un archivo HTML plano con el SWF incrustado usando SWFObject.
Nota: Si no tienes SWFObject Usted puede obtener si desde aquí y colocar el SWFObject.js archivo en una carpeta llamada js colocada en la misma carpeta que su index.html y archivos SWF.
Esto también funcionará con la incrustación básica utilizando el y etiquetas.
Guarde el archivo HTML y ábralo. Utilice el controlador de doble flecha para cambiar el tamaño de la etapa.
Al incrustar el archivo SWF utilizando cualquiera de los dos métodos, debe tener el allowScriptAccess ajustado a siempre. Esto es estrictamente necesario ya que permite que el archivo SWF haga JavaScript llamadas.
Además, si desea que el color de la etapa SWF sea visible, debe configurar el wmode parámetro a opaco.
Lo último que querrá cuidar es la configuración de ancho y alto del objeto incrustado. Es posible que desee establecerlos en el tamaño original de la etapa SWF, pero esto no es necesario ya que el cambio de tamaño funcionará de cualquier manera.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, params, atributos); Probablemente has notado que el escenario cambia de tamaño a cualquier ancho y altura. Esto es increíble, pero puede haber casos en los que no desees que esto suceda, ya que podría dañar el diseño de tu página o algo peor..
Para solucionar esto, la clase BrowserCanvas viene con cuatro propiedades útiles que le ayudan a limitar el tamaño del SWF.
minwidth -- Determina lo mínimo con que puede tener el escenario.minHeight -- Determina la altura mínima que puede tener el escenario.anchura máxima -- Determina el ancho máximo que puede tener el escenario.Altura máxima -- Determina la altura máxima que puede tener el escenario.Para ver cómo funciona esto agregue el setMinMax () Método a la clase AS en la que trabajamos.
función privada setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
Y modificar el createObjects () método como tal:
función privada createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (stage); setMinMax (); _logo = nuevo logo () como Bitmap; addChild (_logo); _arradas = nuevo Sprite (); _arrows.buttonMode = true; _arrows.addChild (nuevas flechas () como Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Básicamente, lo que esto hace es restringir el tamaño del archivo SWF a un mínimo de 300px por 300px y un máximo de 800px por 500px.
Para ver el resultado, compile el código y vuelva a cargar el archivo HTML. Ahora no debería poder cambiar el tamaño del SWF fuera de los límites.
Espero que encuentres esta pequeña clase tan útil como yo. Tenga en cuenta que es posible que no funcione en todos los navegadores, ya que todos tienen diferentes formas de interpretar JavaScript.
Siéntase libre de dejar un comentario si algunos pasos no están claros.
Nota: No he agregado el código HTML completo que ves en la demostración porque quería que fuera sencillo y estaba fuera del alcance de este tutorial. El archivo HTML de la demostración se incluye en el paquete de descarga para que pueda consultar el código fuente allí..
