Share
Har du någonsin behövt ändra storlek på din inbäddade SWF baserat på användarens interaktion / ingång, som hur Newgrounds låter dig ändra storlek på vissa Flash-spel för att passa skärmen? Detta kan göras med JavaScript och den External klass i ActionScript. Men vad sägs om du inte vet JavaScript alls?
Tja, lycklig för dig där är den här lilla klassen där ute som heter BrowserCanvas vilket gör allt det fula arbetet för dig och i det här snabba tipset visar jag dig hur du använder den.
Först och främst behöver vi en kodredigerare. Jag kommer att använda FlashDevelop för denna handledning eftersom vi ska skriva båda Action och html och det här är en bra kodredaktör för båda. Det här är inte något obligatoriskt så du kan använda vilken programvara du vill. Om du vill använda den, men vet inte hur, kolla in den här nybörjarens guide till FlashDevelop.
Nästa behöver du BrowserCanvas klassen så gå hit och ladda ner den och läs en mer detaljerad översikt över det.
Du behöver också en bild som representerar innehållet (jag har använt Activetuts + -logotypen) och en bild som representerar storleken på hanteraren. Jag har inkluderat både i nedladdningskällan så att du borde bli bra.
Nu när vi är beredda, låt oss börja!
Notera: I de första sex stegen har jag förklarat hur förberedelserna görs och hur man gör gränssnittet utan att referera till själva BrowserCanvas klass. Om du inte vill följa dem kan du hoppa direkt till steg 7 och fortsätta använda det projekt jag har angett i hämtningspaketet. Du kan hitta den i källa mapp och under SWFResize - milstolpe mapp.
Öppna frånFlashdevelops och skapa ett nytt projekt genom att gå till Projekt> Nytt projekt? . Ge det ett namn och tryck på ok.
Kopiera också com mapp från den nedladdade filen till källkatalogen för ditt projekt.
Placera active.png och arrows.png bilder från den nedladdade paketet i en tillgångar mapp inuti bin katalog från ditt projekt.
Nästa öppna Main.as fil och placera de fyra markerade linjerna i den (resten har redan skapats automatiskt av FlashDevelop):
paket import flash.display.Sprite; importera flash.events.Event; public class Main utökar Sprite [Bädda in (source = '? /bin/assets/active.png')] public var logo: Klass; [Bädda in (source = '? /Bin/assets/arrows.png')] offentliga var pilar: Klass; allmän funktion Main (): void if (stage) init (); annars addEventListener (Event.ADDED_TO_STAGE, init); privatfunktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init);
Detta kommer att bädda in de två tillgångarna så att vi kan använda dem vid körning.
Just nu har scenen sina standardinställningar: den kommer att ha en vit bakgrundsfärg, en 24fps bildhastighet och en storlek på 800px med 600px - vilket är för stort för att vi ska visa denna effekt.
Lägg till den markerade raden precis före klassdeklarationen:
[SWF (bredd = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")] public class Main utökar Sprite
Vi vill också ställa in scenens skala läge och justering. För detta lägger vi till setStage () metod till vår klass och kalla den från insidan av i det() metod.
privat funktion setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize); privat funktion onStageResize (e: Event): void
Som du kan se har jag också lagt till en evenemangslyttare till scenen för Event.RESIZE händelse, tillsammans med den lämpliga hanteringsfunktionen onStageResize ().
Okej. Vi har nu etablerat vårt stadium och vi fortsätter med att lägga till lite innehåll.
Lägg först dessa två variabler i vår klass:
privat var _logo: Bitmapp; privat var _arrows: Sprite;
Lägg nu till createObjects () metod och kalla det från insidan av i det() metod:
privat funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); privat funktion createObjects (): void _logo = ny logotyp () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nya pilar () som bitmapp); addChild (_arrows);
Detta kommer att instansera våra objekt och lägger till dem i visningslistan.
Om du sammanställer koden nu ser du att dessa två överlappar varandra så låt oss placera dem.
Låt oss anse att vi skulle behöva vårt innehåll alltid förbli i mitten av scenen och ändra storlekshanteraren för att ligga i det nedre högra hörnet av scenen. Vi använder följande två metoder för att göra just det.
De positionLogo () kommer att centrera innehållet på scenen?
privat funktion positionLogo (): void _logo.x = stage.stageWidth * 0,5 - _logo.width * 0,5; _logo.y = stage.stageHeight * 0,5 - _logo.height * 0,5;
? och den positionArrows () kommer att ställa in resize handler till nedre högra hörnet av scenen:
privat funktion positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30;
Låt oss ringa dem inifrån i det() metod för att göra den faktiska positioneringen.
privat funktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows ();
Nu är det dags att ändra onStageResize () handler för att placera logotypen varje gång scenen ändras.
privat funktion onStageResize (e: Event): void positionLogo ();
Kompilera koden och kolla in resultatet. Ser bra ut, eller hur? :)
Det sista vi behöver göra för vårt användargränssnitt är att lägga till en del interaktivitet för den.
Lägg till dessa två Mouseevent lyssnare efter sista raden i createObjects () metod
_arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Lägg även till motsvarande hanteringsfunktioner:
privat funktion onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame); privat funktion 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); privat funktion onEnterFrame (e: Event): void
Som du kan se MOUSE_DOWN och den MOUSE_UP händelsehanterare används för resize handler och an ENTER_FRAME händelse lyssnare används för att köra koden för resize. Vi lägger till motsvarande kod i onEnterFrame () hanterare i de senare stegen.
Accentsconagua
BrowserCanvas KlassFram till nu har vi bara gjort grundläggande AS3 programmering utan att diskutera den faktiska tanken på denna handledning: ändra storlek på området som SWF tar upp på webbsidan. Dessa var inte nödvändiga steg men jag har gjort dem till att simulera ett förenklat verkligt scenario.
Till att börja med lägger vi först till en ny variabel som heter _duk av typen BrowserCanvas:
privat var _canvas: BrowserCanvas;
Notera: Om du inte använder en kodredigerare som automatiskt importerar de använda klasserna, glöm inte att göra det själv.
Efter att du skapat variabeln installerar du den i createObjects () metod.
privat funktion createObjects (): void _canvas = new BrowserCanvas (scen); _logo = ny logotyp () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nya pilar () som bitmapp); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Som du kan se BrowserCanvas klassen tar följande tre parametrar:
skede -- Detta är en referens till scenen. Detta kommer att användas för att säkerställa att rätt Flash-film är inriktadcontainerId -- Detta är en referens till div eller objektetiketten som håller filmen och som vi vill ändra storlek på. Det här är inte nödvändigt om du inte har flera instanser av samma SWF inbäddad på samma sidabrowserHacks -- en lista över hack som ska tillämpas Du behöver inte faktiskt passera det som standard för att tillämpa alla hackarNotera: Om du sammanställer koden nu borde du få följande fel:
Fel # 2067: ExternInterface är inte tillgänglig i den här behållaren. ExternalInterface kräver Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 och senare eller andra webbläsare som stöder NPRuntime.
Detta beror på att SWF inte är inbäddad i en HTML-behållare. Filmen kommer ändå att kompilera, men om du inte vill få det här felet kan du lägga till ett if-statement för att kontrollera om filmen är i rätt behållare. Detta kan enkelt göras genom att kontrollera ExternalInterface.available egendom innan instantiating the BrowserCanvas objekt.
om (ExternalInterface.available) _canvas = ny BrowserCanvas (scen);
Det sista som vi behöver göra i Flash är att lägga till den faktiska koden som ändrar storlek. Denna kod kommer att köras inifrån onEnterFrame () händelsehanterare:
privat funktion 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 och h variabler används för att beräkna lämplig scenbredd och höjd efter vilken vi ställer in bredden och höjden hos _duk motsva sig motsvarande bredd och höjd. Dessa två egenskaper måste anges som strängar.
Notera: Om-uttalandet finns för att kontrollera om _duk objektet har blivit instantierat eftersom om vi sammanställer koden och använder resize-hanteraren får vi ett fel. Det händer på grund av den olämpliga behållaren igen. Eftersom filmen spelas i fristående spelaren finns det ingen HTML-behållare så _duk objektet var inte instantierat (titta på föregående steg).
Kompilera projektet och gå vidare till nästa steg.
Nu när Flash-delen är klar måste vi arbeta lite i HTML, eftersom det finns några steg som behövs för att detta ska fungera korrekt.
Om du använder frånFlashdevelops Du borde ha en HTML-fil som heter index.html genereras automatiskt i bin katalog; om inte, skapa den Det ska se ut så här:
SWFResize
Det här är en vanlig HTML-fil med SWF-inbäddad med hjälp av SWFObject.
Notera: Om du inte har det Flashobject du kan få om härifrån och placera SWFObject.js filen i en mapp som heter js placerad i samma mapp som din index.html och SWF-filer.
Detta kommer också att fungera med grundläggande inbäddning med hjälp av och taggar.
Spara HTML-filen och öppna den. Använd dubbelpilaren för att ändra storlek på scenen.
När du lägger in SWF-filen med någon av metoderna måste du ha allow satt till alltid. Detta är absolut nödvändigt eftersom det gör det möjligt för SWF-filen att göra JavaScript samtal.
Om du vill att SWF-scenens färg ska vara synlig måste du ställa in wmode parameter till ogenomskinlig.
Det sista du kanske vill se efter är bredden och höjden av det inbäddade objektet. Du kanske vill ställa in dem till den ursprungliga storleken på SWF-scenen, men det är inte nödvändigt eftersom resize-formatet kommer att fungera på något sätt.
swfobject.embedSWF ("SWFResize.swf", "altContent", "400", "300", "9.0.0", "expressInstall.swf", flashvars, parametrar, attribut); Du har nog märkt att scenen ändras till vilken bredd och längd som helst. Det här är jättebra, men det kan vara fall när du inte vill att detta ska hända, eftersom det kan skruva upp layouten på din sida eller något värre.
För att åtgärda detta kommer klassen BrowserCanvas med fyra användbara egenskaper som hjälper dig att begränsa storleken på SWF.
minWidth -- bestämmer det minsta med vilket scenen kan haminHeight -- bestämmer den minsta höjd som scenen kan hamaximal bredd -- bestämmer den maximala bredd som scenen kan hamaximal höjd -- bestämmer den maximala höjden som scenen kan haFör att se hur detta fungerar lägger du till setMinMax () metod till AS-klassen som vi arbetat med.
privat funktion setMinMax (): void _canvas.minHeight = _canvas.minWidth = "300"; _canvas.maxHeight = "500"; _canvas.maxWidth = "800";
Och modifiera createObjects () metod som så:
privat funktion createObjects (): void if (ExternalInterface.available) _canvas = new BrowserCanvas (scen); setMinMax (); _logo = ny logotyp () som Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nya pilar () som bitmapp); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);
Vad som i grunden gör det begränsar storleken på SWF-filen till ett minimum av 300px av 300px och högst 800px av 500px.
För att se resultatet kompilera koden och ladda om HTML-filen. Nu ska du inte kunna ändra storlek på SWF utanför gränserna.
Jag hoppas att du hittar den här lilla klassen som användbar som jag gör. Observera att det kanske inte fungerar i alla webbläsare eftersom de alla har olika sätt att tolka JavaScript.
Gärna lämna en kommentar om några steg är oklara.
Notera: Jag har inte lagt till den fullständiga HTML-koden som du ser i demoen eftersom jag ville behålla det enkelt och det var utanför ramen för denna handledning. HTML-filen från demo ingår i nedladdningspaketet så att du kan kolla källkoden där.
