Share
Heb je ooit je ingesloten SWF moeten verkleinen op basis van de gebruikersinteractie / invoer, zoals hoe Newgrounds je toestaat om bepaalde Flash-games aan te passen aan het scherm? Dit kan gedaan worden met JavaScript en de ExternalInterface klasse in ActionScript. Maar wat als je het niet weet JavaScript helemaal niet?
Nou, gelukkig voor jou is er een kleine klas die er is BrowserCanvas wat al het lelijke werk voor je doet en in deze snelle tip zal ik je laten zien hoe je het moet gebruiken.
Allereerst hebben we een code-editor nodig. Ik zal FlashDevelop gebruiken voor deze tutorial omdat we beide zullen schrijven ActionScript en HTML en dit is een goede code-editor voor beide. Dit is niet iets verplicht, dus je kunt elke software gebruiken die je leuk vindt. Als je het wilt gebruiken, maar niet weet hoe, kijk dan in deze beginnershandleiding voor FlashDevelop.
Vervolgens hebt u de BrowserCanvas klas dus ga hierheen en download het en lees een meer gedetailleerd overzicht ervan.
Je hebt ook een afbeelding nodig die de inhoud weergeeft (ik heb het Activetuts + -logo gebruikt) en een afbeelding die de handlanger voor formaat wijzigen vertegenwoordigt. Ik heb beide in de downloadbron opgenomen, dus het komt goed.
Nu we voorbereid zijn, beginnen we!
Notitie: In de eerste zes stappen heb ik uitgelegd hoe de voorbereidingen zijn getroffen en hoe je de gebruikersinterface kunt maken zonder naar het werkelijke te verwijzen BrowserCanvas klasse. Als u deze niet wilt volgen, kunt u direct naar stap 7 gaan en doorgaan met het gebruik van het project dat ik in het downloadpakket heb verstrekt. Je kunt het vinden in de bron map en onder de SWFResize - mijlpaal map.
Open FlashDevelop en maak een nieuw project door naar Project> Nieuw project? . Geef het een naam en druk op OK.
Kopieer ook de com map van het gedownloade bestand naar de brondirectory van uw project.
Plaats de active.png en arrows.png afbeeldingen van het gedownloade pakket in een middelen map in de bak map uit uw project.
Open vervolgens de Main.as bestand en plaats de vier gemarkeerde regels erin (de rest is al automatisch gemaakt door FlashDevelop):
pakket import flash.display.Sprite; import flash.events.Event; public class Main breidt Sprite uit [Embed (source = '? /bin/assets/active.png')] public var logo: Class; [Embed (source = '? /Bin/assets/arrows.png')] public var arrows: Class; public function Main (): void if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); private function init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Hiermee worden de twee items ingesloten, zodat we ze tijdens runtime kunnen gebruiken.
Op dit moment heeft de fase zijn standaardinstellingen: het heeft een witte achtergrondkleur, een framesnelheid van 24fps en een grootte van 800px bij 600px - wat te groot is om ons dit effect te laten zien.
Voeg de gemarkeerde regel toe net voor de klasseverklaring:
[SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")] public class Main breidt Sprite uit
We zullen ook de schaalmodus en uitlijning van de stage willen instellen. Hiervoor zullen we het toevoegen setStage () methode voor onze klas en noem het vanuit de binnenkant in het() methode.
private function setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); private function onStageResize (e: Event): void
Zoals je kunt zien, heb ik ook een gebeurtenislistener toegevoegd aan de fase voor de Event.RESIZE evenement, samen met de bijbehorende handlerfunctie onStageResize ().
Oke. We hebben nu onze fase ingesteld en we gaan door met het toevoegen van wat inhoud.
Voeg eerst deze twee variabelen toe aan onze klas:
privé var _logo: Bitmap; privé var _arrows: Sprite;
Voeg nu de createObjects () methode en roep het vanuit de binnenkant in het() methode:
private function init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); private function createObjects (): void _logo = new logo () als bitmap; addChild (_logo); _arrows = nieuwe Sprite (); _arrows.buttonMode = true; _arrows.addChild (nieuwe pijlen () als bitmap); addChild (_arrows);
Dit zal onze objecten instantiëren en ze toevoegen aan de displaylijst.
Als u de code nu compileert, ziet u dat deze twee elkaar overlappen, dus laten we ze positioneren.
Laten we er rekening mee houden dat we onze inhoud altijd in het midden van het podium moeten houden en dat de handlanger van formaat moet zijn in de rechterbenedenhoek van het werkgebied. We zullen de volgende twee methoden gebruiken om precies dat te doen.
De positionLogo () zal de inhoud op het podium centreren?
persoonlijke functie positionLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0.5 - _logo.height * 0.5;
? en de positionArrows () zal de handelaar voor het wijzigen van de grootte instellen op de rechteronderhoek van het werkgebied:
persoonlijke functie positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
Laten we ze tenslotte vanuit de binnenkant noemen in het() methode om de daadwerkelijke positionering te doen.
private function init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
Ook is het nu tijd om de onStageResize () handler om het logo te positioneren telkens wanneer het formaat van het werkvlak wordt gewijzigd.
private function onStageResize (e: Event): void positionLogo ();
Compileer de code en bekijk het resultaat. Ziet er goed uit, is het niet? :)
Het laatste wat we moeten doen om onze gebruikersinterface compleet te maken, is door er wat interactiviteit aan toe te voegen.
Voeg deze twee toe MouseEvent luisteraars na de laatste regel in de createObjects () methode
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Voeg ook hun bijbehorende handler-functies toe:
private function onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); private function 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); private function onEnterFrame (e: Event): void
Zoals je kunt zien MOUSE_DOWN en de MOUSE_UP gebeurtenishandlers worden gebruikt voor de handlanger van formaat wijzigen en een ENTER_FRAME gebeurtenislistener wordt gebruikt om de code uit te voeren voor het wijzigen van de grootte. We zullen de bijbehorende code toevoegen in de onEnterFrame () handler in de latere stappen.
Accentsconagua
BrowserCanvas KlasseTot nu toe hebben we alleen basis-AS3-programmering gedaan zonder het eigenlijke idee van deze tutorial te bespreken: het formaat van het gebied dat de SWF opneemt in de webpagina wijzigen. Dit waren geen noodzakelijke stappen, maar ik heb ze gemaakt om een vereenvoudigd echt scenario te simuleren.
Om te beginnen voegen we eerst een nieuwe variabele toe genaamd _canvas van het type BrowserCanvas:
private var _canvas: BrowserCanvas;
Notitie: Als u geen code-editor gebruikt die automatisch de gebruikte klassen importeert, vergeet dan niet om het zelf te doen.
Nadat u de variabele hebt gemaakt, plaatst u deze in de createObjects () methode.
private function createObjects (): void _canvas = new BrowserCanvas (stage); _logo = nieuw logo () als bitmap; addChild (_logo); _arrows = nieuwe Sprite (); _arrows.buttonMode = true; _arrows.addChild (nieuwe pijlen () als bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Zoals je kunt zien BrowserCanvas klasse neemt de volgende drie parameters:
stadium -- dit is een verwijzing naar het podium. Dit wordt gebruikt om ervoor te zorgen dat de juiste Flash-film wordt getargetcontainerId -- dit is een verwijzing naar de div- of objecttag die de film bevat en waarvan we de grootte willen wijzigen. Dit is niet echt nodig, tenzij u meerdere exemplaren van dezelfde SWF op dezelfde pagina hebt ingeslotenbrowserHacks -- een lijst met hacks die moet worden toegepast. U hoeft dit niet echt door te geven omdat het standaard alle hacks toepastNotitie: Als u de code nu compileert, krijgt u de volgende foutmelding:
Fout # 2067: de externe interface is niet beschikbaar in deze container. ExternalInterface vereist Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 en hoger, of andere browsers die NPRuntime ondersteunen.
Dit komt omdat de SWF nog niet is ingebed in een HTML-container. De film compileert sowieso met succes, maar als u deze fout niet wilt ontvangen, kunt u een if-statement toevoegen om te controleren of de film zich in de juiste container bevindt. Dit kan eenvoudig worden gedaan door de ExternalInterface.available eigendom voordat de BrowserCanvas voorwerp.
if (ExternalInterface.available) _canvas = new BrowserCanvas (stage);
Het laatste wat we in Flash moeten doen is de code toevoegen die de grootte verandert. Deze code wordt uitgevoerd vanuit de binnenkant van de onEnterFrame () event handler:
private function onEnterFrame (e: Event): 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 ();
De w en h variabelen worden gebruikt om de juiste fasebreedte en -hoogte te berekenen waarna we de eigenschappen width en height van de _canvas bezwaar tegen de overeenkomstige breedte en hoogte. Deze twee eigenschappen moeten worden ingesteld als strings.
Notitie: De if-verklaring is er om te controleren of de _canvas object is geïnstantieerd omdat als we de code compileren en de handlanger van formaat gebruiken, we een foutmelding zullen ontvangen. Dat gebeurt weer door de ongeschikte container. Omdat de film in de stand-alone speler wordt afgespeeld, is er geen HTML-container, dus de _canvas object was niet geïnstantieerd (bekijk de vorige stap).
Compileer het project en ga verder met de volgende stap.
Nu het Flash-gedeelte klaar is, moeten we een beetje in HTML werken, omdat er enkele stappen moeten worden genomen om dit goed te laten werken.
Als je gebruikt FlashDevelop je zou een HTML-bestand moeten hebben met de naam index.html automatisch gegenereerd in de bak directory; zo niet, maak het dan. Het zou er zo uit moeten zien:
SWFResize
Dit is een eenvoudig HTML-bestand met de SWF ingesloten met SWFObject.
Notitie: Als je het niet hebt SWFObject je kunt hier vandaan komen en het plaatsen swfobject.js bestand in een map genaamd js geplaatst in dezelfde map als jouw index.html en SWF-bestanden.
Dit werkt ook met basisinbedding met behulp van de en labels.
Sla het HTML-bestand op en open het. Gebruik de dubbele-pijl-handler om het formaat van het werkvlak aan te passen.
Bij het insluiten van het SWF-bestand met behulp van een van beide methoden moet u de allowScriptAccess ingesteld op altijd. Dit is strikt noodzakelijk omdat het het SWF-bestand kan maken JavaScript calls.
Ook als u wilt dat de kleur van de SWF-fase zichtbaar is, moet u de wmode parameter naar ondoorzichtig.
Het laatste waar u misschien op wilt letten, zijn de instellingen voor breedte en hoogte van het ingesloten object. U wilt ze misschien instellen op de originele grootte van de SWF-fase, maar dit is niet nodig, aangezien de grootte van de grootte in beide gevallen kan worden gebruikt.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, params, attributen); U hebt waarschijnlijk gemerkt dat het formaat van het werkvlak op elke breedte en hoogte is. Dit is geweldig, maar er kunnen gevallen zijn waarin je niet wilt dat dit gebeurt, omdat het de lay-out van je pagina kan beschadigen of erger.
Om dit op te lossen, heeft de klasse BrowserCanvas vier nuttige eigenschappen die u helpen de grootte van de SWF te beperken.
minWidth -- bepaalt het minimum dat de stage kan hebbenminHeight -- bepaalt de minimale hoogte die het podium kan hebbenMaximale wijdte -- bepaalt de maximale breedte die de stage kan hebbenmaximale hoogte -- bepaalt de maximale hoogte die het podium kan hebbenOm te zien hoe dit werkt, voegt u de setMinMax () methode voor de AS-klasse waaraan we hebben gewerkt.
private function setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
En wijzig de createObjects () methode zoals zo:
private function createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (stage); setMinMax (); _logo = nieuw logo () als bitmap; addChild (_logo); _arrows = nieuwe Sprite (); _arrows.buttonMode = true; _arrows.addChild (nieuwe pijlen () als bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Wat dit in feite doet, beperkt de grootte van het SWF-bestand tot een minimum 300px door 300px en een maximum van 800px door 500px.
Om het resultaat te zien, compileer de code en laad het HTML-bestand opnieuw. Nu zou het niet mogelijk moeten zijn om de grootte van het SWF buiten de grenzen te wijzigen.
Ik hoop dat je deze kleine klas zo nuttig vindt als ik. Merk op dat het misschien niet in alle browsers werkt, omdat ze allemaal verschillende manieren hebben om JavaScript te interpreteren.
Laat gerust een reactie achter als enkele stappen onduidelijk zijn.
Notitie: Ik heb de volledige HTML-code die u in de demo ziet niet toegevoegd omdat ik het eenvoudig wilde houden en dit buiten het bestek van deze zelfstudie viel. Het HTML-bestand van de demo is opgenomen in het downloadpakket, zodat u de broncode daar kunt controleren.
