Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial is voor het eerst gepubliceerd in juli 2009.
Een vloeiende weblay-out gebruikt 100% breedte (en hoogte) van de browser en drijft alle opgesloten elementen naar bepaalde posities. Dit is in tegenstelling tot de lay-breedlay-out waarbij de inhoud blijft staan, ongeacht de grootte van de browser.
Deze techniek is populair in HTML / CSS-websites, maar deze tut zal je laten zien hoe je een vergelijkbaar vloeiend lay-outeffect in Flash kunt creëren. Elk element verplaatst zich gemakkelijk met animatie wanneer de grootte van de browser wordt gewijzigd.
Tijdens de volgende stappen maken we ActionScript 3-klassen die onze flashwebsite vloeiend maken. Al onze display-symbolen behouden hun uitlijning wanneer de grootte van de Flash wordt gewijzigd.
De ActionScript-klassen die in deze zelfstudie zijn gemaakt, kunnen eenvoudig in verschillende projecten opnieuw worden gebruikt.
Zoals in de onderstaande afbeelding wordt getoond, worden alle elementen die zwevend zijn volgens de grootte van de browser, 'vloeiende objecten' genoemd.
Elk vloeistofobject bevat uitlijningsparameters. De parameters slaan de x, y, x-offset, y-offsetwaarde van het object op om aan te geven hoe het wordt uitgelijnd.
Door x en y toe te wijzen aan 0 wordt het vloeibare object uitgelijnd met de linkerbovenhoek. Door x en y toe te wijzen aan 1 wordt het vloeibare object uitgelijnd met de rechteronderhoek. Daarom geeft het toewijzen van x- en y-waarden tussen 0 en 1 het object een percentage van de breedte en hoogte van de browser.
De offset X en Y verschuiven de positie van de vloeistofvoorwerpen terwijl ze uitgelijnd zijn. Compenseren is handig bij het plaatsen van een voorwerp waarvan het uitlijnpunt niet in het midden ligt. De offset is ook handig voor het maken van marges op de uitlijning.
Maak een map met de naam "FluidLayout" in de werkmap. In deze map worden alle klassen opgeslagen die betrekking hebben op de vloeistoflay-outklassen.
Het is een goede gewoonte om de ActionScript-klassenbestanden in mappen op categorie te plaatsen. In dit geval worden bijvoorbeeld vloeistoflay-outklassen in de map "FluidLayout" geplaatst.
Houd er rekening mee dat alle directorynamen, bestandsnamen en codes hoofdlettergevoelig zijn.
Open een nieuw ActionScript-bestand met de naam "FluidObject.as". Sla dit ActionScript-bestand op in de map "FluidLayout".
De klasse FluidObject bewaart de uitlijningsparameters van de symbolen en herpositioneert de symbolen wanneer de grootte van de browser wordt gewijzigd.
Laten we beginnen met het coderen van FluidObject.as nu.
package FluidLayout / * Importklassen hier toevoegen * / public class FluidObject / * Hier worden instantievariabelen gedeclareerd * / / * Constructor van de klasse * / openbare functie FluidObject (doel: DisplayObject, paramObj: Object) / * Functie die herpositioneert het bewaakte object * / beschermde functie herpositionering (): void / * Functie die wordt aangeroepen wanneer de RESIZE-gebeurtenis wordt geactiveerd * / beschermde functie onStageResize (e): void
Voeg de volgende code toe waar je ziet: / * Importklassen hier toevoegen * /
/ * klasse nodig bij het wijzigen van de grootte van het evenement * / import flash.events.Event; / * klassen die nodig zijn voor MovieClip en DisplayObject * / flash.display importeren. *;
Er zijn drie instantievariabelen voor deze klasse:
Er is ook een setter voor "_param" om het wijzigen van de uitlijnparameters mogelijk te maken. Voeg de volgende code toe waar je ziet: / * Hier worden instantievariabelen gedeclareerd * /
/ * uitlijningsparameters * / beschermd var _param: Object; / * doelobject dat moet worden bewaakt * / beschermd var _target: DisplayObject; / * stadiuminstantie van het flashdocument * / protected var _stage: Stage; / * Setter voor de aligneringsparam * / public function set param (waarde: Object): void _param = value; this.reposition ();
De constructor initialiseert het doelbewakingssymbool en slaat de gegeven uitlijningsparameters op.
/ * Constructor van de klasse * / openbare functie FluidObject (doel: DisplayObject, paramObj: Object) / * De instantievariabelen * / _target = target toewijzen; _param = paramObj; _stage = target.stage; / * event handler toevoegen voor stage resize * / _stage.addEventListener (Event.RESIZE, onStageResize); / * verplaats het object opnieuw met de uitlijningsinstelling toegepast * / this.reposition ();
De herpositioneringsfunctie is verantwoordelijk voor het berekenen van de nieuwe x / y-positie van het bewaakte vloeistofobject.
/ * Functie die het bewaakte object herpositioneert * / beschermde functie herpositionering (): void / * verkrijg de huidige breedte en hoogte van het flashdocument * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * update de x- en y-waarde van het bewaakte object * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY;
De functie onStageResize is een gebeurtenishandler die wordt aangeroepen wanneer de grootte van de browser wordt gewijzigd.
/ * Functie die wordt aangeroepen wanneer de RESIZE-gebeurtenis wordt geactiveerd * / beschermde functie onStageResize (e): ongeldig / * verplaats het doel * / this.reposition ();
De voltooide klasse FluidObject is in deze stap voltooid.
package FluidLayout / * class nodig bij resize Event * / import flash.events.Event; / * klassen die nodig zijn voor MovieClip en DisplayObject * / flash.display importeren. *; public class FluidObject / * uitlijningsparameters * / beschermd var _param: Object; / * doelobject dat moet worden bewaakt * / beschermd var _target: DisplayObject; / * stadiuminstantie van het flashdocument * / protected var _stage: Stage; / * Setter voor de aligneringsparam * / public function set param (waarde: Object): void _param = value; this.reposition (); / * Constructor van de klasse * / openbare functie FluidObject (doel: DisplayObject, paramObj: Object) / * Wijs de instantievariabelen * / _target = target toe; _param = paramObj; _stage = target.stage; / * event handler toevoegen voor stage resize * / _stage.addEventListener (Event.RESIZE, onStageResize); / * verplaats het object opnieuw met de uitlijningsinstelling toegepast * / this.reposition (); / * Functie die het gemonitorde object herpositioneert * / beschermde functie herpositionering (): void / * verkrijg de huidige breedte en hoogte van het flashdocument * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * update de x- en y-waarde van het bewaakte object * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY; / * Functie die wordt aangeroepen wanneer de RESIZE-gebeurtenis wordt geactiveerd * / beschermde functie onStageResize (e): ongeldig / * verplaats het doel * / this.reposition ();
Start een nieuw Flash-document met ondersteuning voor ActionScript 3.0 en noem het "website.fla". Stel vervolgens de documentklasse in als "Website".
Als een dialoogvenster verschijnt met het bericht: "Een definitie voor de documentklasse kon niet worden gevonden in het klassenpad, ..." klik gewoon op "OK" om deze te omzeilen. We gaan die klas maken na het tekenen van de grafische symbolen.
De achtergrondafbeelding is donker in deze zelfstudie (ik heb mijn eigen ruimteachtige afbeelding samengesteld met behulp van Photoshop). Daarom moet de achtergrondkleur van het flash-document op zwart worden ingesteld. Klik op Wijzigen> Document om het dialoogvenster Documenteigenschappen te openen en de achtergrondkleur te wijzigen.
Er zijn 5 flitssymbolen op het podium:
Laten we eerst de titel maken. Het doel van deze zelfstudie is om zwevende symbolen in de vloeiende lay-out te maken in plaats van mooie websitecomponenten te maken. De symbolen bevatten alleen een tekstveld dat alleen het doel aangeeft.
Voor het titelsymbool is er een semi-transparante achtergrond. Om in verschillende breedten van de browser te passen, moet de breedte van de achtergrond groot genoeg zijn.
Nadat u klaar bent met het tekenen van het symbool, klikt u op Wijzigen> Converteren naar symbool (F8). Klik op de knop "Geavanceerd" om gedetailleerde instellingen voor het symbool weer te geven.
Klik op "Exporteren voor ActionScript" om ActionScript toegang te geven tot dit symbool. Zoek vervolgens het veld "Klasse" in het dialoogvenster en stel de waarde in op "Titel" voor het titelsymbool. Dit betekent dat we een nieuwe klasse met de naam 'Titel' aan dit symbool hebben toegewezen. We kunnen dit symbool later in de ActionScript gebruiken.
Vergeet niet om uw symbool een naam te geven voor eenvoudige herkenning voordat u op OK klikt. Als er een dialoogvenster verschijnt met het bericht "Een definitie voor deze klasse kon niet worden gevonden in het klassenpad, ..." klik dan opnieuw op "OK" om het te omzeilen. Omdat we geen gedrag aan het symbool toevoegen, laten we Flash een lege klasse voor ons maken.
Verwijder de symboolinstantie "title" op het podium omdat deze later door ActionScript wordt gemaakt.
We zullen dezelfde methode gebruiken om "achtergrond", "menu", "middelste inhoud" en "voettekst" te tekenen. De klassenaam van deze symbolen is Achtergrond, Menu, Midden en footer overeenkomstig.
De achtergrondafbeelding kan worden gedownload van de bronbestanden. Andere symbolen zijn alleen tekstvelden.
Maak een ActionScript-bestand met de naam "Website.as"; dit klassenbestand moet worden opgeslagen in dezelfde map als het bestand website.fla.
Deze klasse moet ook dezelfde naam delen als die is ingesteld in de documentklasse (zie stap 12). De Documentklasse "Website" verwijst bijvoorbeeld naar "Website.as" in dezelfde map. Deze ActionScript-klasse wordt geladen direct nadat de flitser is geladen.
Dit is het skelet van de documentklasse:
pakket import flash.display. *; import FluidLayout. *; public class website breidt MovieClip uit public function Website ()
pakket import flash.display. *; import FluidLayout. *; public class website breidt MovieClip uit public function Website () / * Stel de schaalmodus in van het werkgebied * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Voeg de symbolen toe aan stage * / var bg = new Background (); addChild (bg); var title = new Title (); addChild (titel); var menu = nieuw Menu (); addChild (menu); var middle = new Middle (); addChild (midden); var footer = new Footer (); addChild (voettekst); / * Pas de uitlijning op de achtergrond toe * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (bg, bgParam); / * Pas de uitlijning toe op de titel * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam); / * Pas de uitlijning toe op het menu * / var menuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 nieuwe FluidObject (menu, menuParam); / * Pas de uitlijning toe op de inhoud * / var middleParam = x: 0.5, y: 0.5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 new FluidObject (middle, middleParam); / * Pas de uitlijning op de voettekst toe * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 nieuwe FluidObject (footer, footerParam);
Open website.fla in Flash en controleer nogmaals voordat je de film sms't.
Het is niet nodig om de symbolen op het podium te plaatsen, omdat de Website.as symboolinstanties uit de bibliotheek zal maken door hun klassenamen te gebruiken. De koppelingsklasse-namen van de symbolen moeten correct zijn opdat het script ze kan gebruiken. De klassenaam van de koppeling kan worden gecontroleerd in het bibliotheekpaneel.
Klik op Besturing> Tekstfilm of Ctrl (Cmd) + Enter om de flash-website te testen.
Probeer het formaat van het venster te veranderen en controleer of alle objecten zich opnieuw positioneren naar de juiste uitlijning.
Elk FluidObject moet nu specifieke waarden voor x, y, offsetX en offsetY hebben. Een nieuwe klasse wordt in de komende stappen gemaakt om de toekomstige code te vereenvoudigen bij het toevoegen van nieuwe vloeistofobjecten.
Open een nieuw ActionScript-bestand met de naam "SimpleFluidObject.as". Bewaar dit bestand in de "FluidLayout" -directory omdat dit deel uitmaakt van het FluidLayout-pakket.
Dit bestand breidt de klasse FluidObject uit zodat het eenvoudige uitlijning biedt door namen als TOP, MIDDLE, BOTTOM_RIGHT te gebruiken in plaats van de x, y-eigenschappen op te geven.
Hier is het skelet van de klas:
pakket FluidLayout import flash.events.Event; import flash.display. *; public class SimpleFluidObject breidt FluidObject uit openbare functie SimpleFluidObject (doel: DisplayObject, paramObj: Object)
pakket FluidLayout import flash.events.Event; import flash.display. *; public class SimpleFluidObject breidt FluidObject uit openbare functie SimpleFluidObject (doel: DisplayObject, paramObj: Object) / * Laat ouderklasse weten om de constructor * / super (doel, paramObj) te initiëren; / * wijst uitlijning en margewaarde toe door de constructorparameters * / var alignment = paramObj.alignment; var margin = paramObj.margin; / * Stel de uitlijning en margewaarde in indien nodig * / if (uitlijning == undefined) alignment = "MIDDEN"; if (margin == undefined) margin = 0; / * converteer de uitlijning (bijv. "TOP", "BOTTOM_RIGHT") naar x, y, offsetX en offsetY * / var params = new Object (); switch (uitlijning) case "TOP_LEFT": params = x: 0, y: 0, offsetX: margin, offsetY: margin; breken; case "TOP": params = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; breken; case "TOP_RIGHT": params = x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin; breken; case "LEFT": params = x: 0, y: .5, offsetX: margin, offsetY: -target.height / 2; breken; hoofdletter "MIDDEN": params = x: .5, y: .5, offsetX: -target.width / 2 - margin / 2, offsetY: -target.height / 2 - margin / 2; breken; case "RIGHT": params = x: 1, y: .5, offsetX: -target.width - margin, offsetY: -target.height / 2; breken; case "BOTTOM_LEFT": params = x: 0, y: 1, offsetX: margin, offsetY: -target.height - margin; breken; case "BOTTOM": params = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height - margin; breken; case "BOTTOM_RIGHT": params = x: 1, y: 1, offsetX: -target.width - margin, offsetY: -target.height - margin; breken; _param = params; / * verplaats het vloeibare object naar de juiste positie * / this.reposition ();
Raadpleeg het bestand Website.as en probeer de nieuwe uitlijningsmethode te gebruiken om de vloeistofobjecten uit te lijnen.
De oude methode om afstemming op titel toe te passen:
/ * Pas de uitlijning toe op de titel * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 new FluidObject (title, titleParam);
De nieuwe methode om afstemming op titel toe te passen:
var titleParam = alignment: "TOP_LEFT", margin: 0 nieuw SimpleFluidObject (title, titleParam);
Beschikbare uitlijningen:
De uitlijning van de vloeistof werkt nu op de "Testfilm" in Flash IDE, maar er is er een sleutel punt om dit in de browser te laten werken.
Open website.fla. Ga naar Bestand> Instellingen publiceren en zorg dat HTML is ingeschakeld. Klik op het tabblad HTML en wijzig de dimensie in "Percentage". Zorg ervoor dat het percentage op zowel breedte als hoogte is ingesteld op 100.
Klik op "Publiceren" om de website te publiceren als "website.swf" en "website.html" bestanden.
Open nu het bestand "website.html" met uw favoriete teksteditor en voeg de volgende code in de koptekst toe. De code direct na de toevoegen tag zou een goede keuze zijn.
Deze CSS-stijlen elimineren het gat tussen de linkerbovenkant van de HTML en het SWF-bestand.
Een versoepelingseffect kan worden toegepast wanneer de grootte van de browser wordt gewijzigd, zodat de objecten naar de juiste positie worden verplaatst met een uitdoofeffect.
Open "FluidObject.as". Voeg de volgende regels toe na "import flash.display. *;". Deze regels zullen de tweening-animatieklasse importeren om de code de mogelijkheid te geven de objecten te verlichten.
/ * klassen benodigd voor Easing Animation * / import fl.transitions.Tween; import fl.transitions.easing. *;
Zoek vervolgens de volgende regels in het bestand "FluidObject.as". Ze bevinden zich binnen de functie "herpositionering".
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Vervang ze door de volgende code:
/ * stel de duur van de easing-animatie in (seconden) * / var-duur = 0,5; / * declareer de nieuwe X / Y-waarde * / var newX = _target.x; var newY = _target.y; / * bereken de nieuwe X-waarde op basis van de fase Breedte * / if (_param.x! = undefined) newX = (stageW * _param.x) + _param.offsetX; / * bereken de nieuwe Y-waarde op basis van de fase Hoogte * / if (_param.y! = undefined) newY = (stageH * _param.y) + _param.offsetY; / * Vertel de flitser om het doelobject te tweenen naar de nieuwe X / Y-positie * / nieuwe Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); nieuwe Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Test de film, de objecten zullen versoepelen wanneer de grootte van de browser wordt gewijzigd
We hebben zojuist twee klassen gemaakt die verantwoordelijk zijn voor de zwevende vloeistofobjecten. We hebben ook een voorbeeld gemaakt om verschillende objecten op het podium uit te lijnen door de klassen te gebruiken. Dit voorbeeld is slechts een voorbeeldcase; je kunt je verbeeldingskracht gebruiken om met de alignments te spelen. Een symbool kan bijvoorbeeld interactief zijn en de uitlijning kan van boven naar beneden veranderen wanneer de gebruiker erop klikt.
De bestandsstructuur moet hetzelfde zijn als hieronder nadat u deze zelfstudie hebt voltooid. In het bijzonder moeten FluidObject.as en SimpleFluidObject.as in de map "FluidLayout" staan om te kunnen werken.
Geniet van de vloeibare lay-out!
Accentsconagua