Share
In deze tutorial leer je hoe je versleepbare vensters kunt maken met behulp van Flash en AS3. Ik behandel de basisbeginselen van slepen en neerzetten, vensterbegrenzingen, het toevoegen van inhoud en het minimaliseren van het venster.
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Okey, laten we gaan! Maak een nieuw document door op CTRL + N te drukken en te selecteren Flash-bestand (ActionScript 3). Stel de stage in op 600x400 px en de achtergrondkleur op #EEE. Stel de klasse in in het venster Eigenschappen ramen en sla je bestand op als windows.fla.
Selecteer het gereedschap Rechthoek (R) en teken een rechthoek met 280x90 px. Selecteer uw vorm, ga naar het palet Kleur (Venster> Kleur) en maak een verloop van #FFF tot #CCC.
Druk op F voor het gereedschap Verloop, selecteer je verloop, draai het 90 graden (houd de Shift-knop ingedrukt terwijl je draait) en inkort het zodat het de rechthoek aanpast.
Selecteer alle vormen, druk op F8 om te converteren naar symbool, noem het windowArea en stel het registratiepunt links bovenaan in.
Selecteer het symbool en stel in het venster Eigenschappen de naam van het exemplaar in windowArea.
Gebruik voor de rand het Glow-filter, met een vervaging van 2px, sterkte 500%, kleur # 666666. Ik heb een gloed gebruikt, want als je een lijn gebruikt, wordt het formaat van de lijn aangepast wanneer je het formaat van het venster wijzigt.
Selecteer opnieuw het gereedschap Rechthoek (R) en teken een rechthoek met een afmeting van 280x22 px en een slag van 1 px met de kleur # 666. Maak hier nog een rechthoek bovenop, maar stel deze keer in de rechthoekhoek de hoekradius rechthoek in op 5.
Verwijder nu de benodigde hoeken zoals op de afbeelding hieronder.
Schilder vervolgens je vorm, selecteer deze, ga naar het palet Kleur (Venster> Kleur) en maak een verloop van # 999 naar # 333. Roteer het verloop 90 graden, zoals bij de vorige stap.
Selecteer de vorm, druk op F8. Naam: windowBar; Type: Knop; Registratie: linksboven.
Selecteer het symbool en stel in het venster Eigenschappen de naam van het exemplaar in windowBar.
Dubbelklik op de vorm, maken keyframes voor de Over en naar beneden staten. Verander nu de kleuren voor elk.
Ik heb gekozen:
Maak een ronde rechthoek met 14x11 px, 5px radius en wijzig deze zodat het er ongeveer zo uitziet.
Het minteken dat u maakt door een rechthoek van 5 x 2 px te maken met de kleur # 999. Stel de naam van het exemplaar in minimizeBtn.
Ik gebruikte dezelfde kleuren uit de windowBar, maar de UP-status met een 40% alpha voor het verloop.
Schik alle vormen in de vorm van een venster, druk op F8 en maak een MovieClip met de naam venster en registratie: linksboven.
Klik in de bibliotheek met de rechtermuisknop op het venster en ga naar Eigenschappen. Stel de klasse in op venster. Op deze manier wordt het venster toegewezen aan de klas die we later zullen maken.
Selecteer het symbool en in de Eigenschappen venster stel de instantienaam in venster. Klik in de filters op Voeg filter toe (de omcirkelde knop in de afbeelding hieronder), en voeg een Slagschaduw toe met de kleur # 333 zoals hieronder:
Dubbelklik op het symbool om het te bewerken. Selecteer alles (CTRL + A), rechter muisklik> Verspreiden naar lagen.
Plaats in een nieuwe laag de tekst voor de titel van het venster met Arial, 11pt, kleur #CCC, letter-spacing: 1. Stel het in op Dynamische tekst en noem het WindowTitle.
Nu het ontwerp is voltooid, beginnen we met het coderen van onze scène. Het eerste dat we zullen doen is ons ActionScript-bestand maken.
Druk op Ctrl + N of ga naar Bestand> Nieuw en selecteer ActionScript-bestand. Sla het op in dezelfde map en met dezelfde naam (windows.as) van uw FLA-bestand.
Laten we nu ons pakket maken en de nodige klassen importeren:
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.ContextMenuEvent; import flash.geom.Rectangle; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import fl.transitions.Tween; import fl.transitions.easing. *; import fl.transitions.TweenEvent; public class window breidt MovieClip uit
Nu moet u functies toewijzen aan onze knoppen. Je hebt een functie nodig om het te slepen windowBar, een andere om het slepen te stoppen, een om het venster naar boven te halen wanneer u erop klikt, en een ander om het te minimaliseren.
Voeg deze evenementluisteraars toe aan de openbare functie Venster () in onze code:
public class window breidt MovieClip uit // variabelen public var title: String; public function Window () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // windows function 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, minimal Windows);
Het publiek var titel wordt gebruikt voor de titel van het venster. We zullen dit later gebruiken.
Sinds de WindowTitle is een dynamische tekst we schakelen zijn muisfuncties uit, zodat deze het slepende gedeelte van de muis niet zullen beïnvloeden windowBar.
Dit is waar we beginnen met plezier maken! Kopieer de volgende code na de openbare functie Venster ():
/ * START SLEEP ****************************************** ************ / 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 boundsRect: Rectangle; // window's draggable boundaries if (windowArea.visible) boundsRect = new Rectangle (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else boundsRect = new Rectangle (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // trace (boundsRect); this.startDrag (false, boundsRect); // breng venster naar voren stage.addChild (this);
Het eerste wat we hier doen is variabelen maken op de breedtes en hoogtes van het venster en de windowBar.
Vervolgens de grenzen van het venster. We zullen twee grenzen creëren: één wanneer het venster normaal is (als windowArea zichtbaar is) en één wanneer het wordt geminimaliseerd. U doet dit door een rechthoek te maken met de grootte van het werkgebied. De rechthoek ondersteunt vier attributen (x, y, breedte, hoogte). Het begint in de hoek van het scherm (x: 0; y: 0) en strekt zich uit naar de andere hoek van het scherm. Omdat de grenzen zijn gerelateerd aan de registratiepunt van het venster, moeten we de breedte en hoogte van het venster (of de windowBarvoor het geval het venster geminimaliseerd wordt).
Nadat de grenzen zijn ingesteld, stellen we het venster in om te slepen. We zullen slepen deze, de klasse Window. Met andere woorden, het hele venster.
this.startDrag (false, boundsRect);
De startDrag functie ondersteunt twee attributen: lockCenter en bounds. Als je geen grenzen wilt, schrijf dan gewoon dit:
this.startDrag (false);
Als we meerdere vensters hebben, moeten we het huidige venster naar de bovenkant van het scherm brengen. We doen dit met de addChild door het opnieuw toe te voegen aan het podium:
// breng venster naar voren stage.addChild (this);
Deze is heel eenvoudig. We zullen de gebruiken stopDrag functie hier. Kopieer het volgende na de vorige naar uw code onWindowStartDrag functie:
/ * STOP SLEEP ****************************************** ************ / private function onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Nogmaals, heel eenvoudig. Wanneer we op het venster klikken, brengen we het naar voren met behulp van addChild.
/ * VENSTERKLIK *********************************************** ************ / private function onWindowClick (e: MouseEvent): void // breng venster naar voren stage.addChild (this);
Om het venster te minimaliseren / te tonen, schakelen we de zichtbaarheid van de windowArea zoals dit:
/ * VENSTER MINIMALISEREN ************************************** ************ / private function minimalWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Je kunt dit verbeteren door uit het raam te verdwijnen en het te verbergen, en omgekeerd:
/ * VENSTER MINIMALISEREN ************************************** ************ / private function minimalWindow (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 (); function fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
De Tween ondersteunt de volgende waarden:
Tween (object, "eigenschap", EasingType, begin, einde, duur, useSeconds);
Gebruik de LiveDocs voor uitgebreidere informatie.
In ons geval is wat we doen, als het windowArea is zichtbaar (wat betekent: niet geminimaliseerd), het zal de windowArea en wanneer de tween is voltooid (TweenEvent.MOTION_FINISH), zal het de verbergen windowArea. Andersom als het wordt geminimaliseerd.
We zullen de variabele gebruiken t om het te veranderen WindowTitle. De andere twee regels zijn alleen bedoeld om een probleem met de letterspatiëring op te lossen. Als u ze niet schrijft, stelt Flash de letterafstand opnieuw in op nul.
/ * SET VENSTER'S TITEL ***************************************** ************* / publieke functie Titel (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (fmt); // letter spacing issue title = t;
Deze functie zal later als volgt worden gebruikt:
Accentsconagua
YourWindowName.Title ("Naam van uw venster"); Deze functie krijgt twee kenmerken: de breedte en hoogte van het venster. Als geen van beide is gevuld, wordt deze ingesteld op de standaardgrootte (280 x1 px)
Wat we hier doen, is de breedte van de windowBar, de windowArea en de WindowTitle. Voor de hoogte veranderen we gewoon de windowAreais, laat de hoogte van het venster op de standaardgrootte, net als een normaal venster.
Bij het wijzigen van het formaat moeten we de positie van de knop Minimaliseren opnieuw instellen. Die gelijk is aan de breedte van het venster minus de breedte van de knop en 6 px.
/ * SET VENSTER MAAT ***************************************** ************* / public function Size (Width: int = 280, Height: int = 112): void // change width windowBar.width = Width; windowArea.width = Breedte; windowTitle.width = Breedte - 45; // verander het hoogte-venster van de inhoudArea.height = Height; // reset minimalBtn scale / position minimalBtn.x = Width - minimalBtn.width - 6;
Deze functie zal later als volgt worden gebruikt:
YourWindowName.Size (350.200);
Weet je nog dat we een Slagschaduw onder het raam plaatsten? Welnu, als u het venster op code plaatst, moet u ook de slagschaduw per code toevoegen.
Alle bovenstaande kenmerken kunnen per code worden ingesteld. Kopieer de functie en verander de waarden naar uw eigen smaak:
/ * SET FILTER: DROP SHADOW *************************************** *************** / publieke functie DropShadow (color: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- low; 2- medium; 3- hoge (max: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + kleur); this.filters = new Array (dropShadow); // filter aan het venster toevoegen Deze functie ontvangt een string met de hexadecimale code van de kleur. Als dit niet is ingevuld, is de standaardkleurwaarde # 333333.
De kwaliteit kan gaan van 1 tot 15, zijnde 1 2 3 - laag, gemiddeld en hoog. We hebben hier laag gebruikt.
De kleur moet worden geconverteerd van een Draad aan een int.
Na het definiëren van de attributen moeten we het filter toevoegen aan het venster zoals in de laatste regel. Dit zal een maken reeks van filters. Dat betekent dat je ook andere filters aan het venster kunt toevoegen.
this.filters = new Array (dropShadow);
Deze functie zal later als volgt worden gebruikt:
YourWindowName.DropShadow ( "FF0000"); // voegt een rode schaduw toe
Verander nu naar je Flash-bestand, maak een nieuwe laag aan, noem die as3 en druk op F9 voor de ActionScript (of ga naar Venster> Acties).
Een venster toevoegen is heel eenvoudig. Het enige wat u hoeft te doen is een variabele maken (laten we het noemen mijn raam), toewijzen aan de Venster klasse en voeg het venster toe aan fase:
var myWindow: window = nieuw venster; addChild (MyWindow);
Dit zal een venster produceren met de standaardwaarden.
U kunt verschillende kenmerken van het venster wijzigen:
Nogmaals, het eerste wat je moet doen is om de variabele te maken die is toegewezen door de klasse Window:
var myWindow: window = nieuw venster;
Dan kunt u beginnen met het veranderen van de attributen:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); // voegt een mooie limoenschaduw toe
myWindow.Size (350.200);
myWindow.x = 20; myWindow.y = 20;
addChild (MyWindow);
De code zal als volgt zijn:
var myWindow: window = nieuw venster; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); myWindow.Size (350.200); myWindow.x = 20; myWindow.y = 20; addChild (MyWindow); 
Hier is nog een voorbeeld met twee vensters toegevoegd door code en een standaard in de fase:
var janela: window = nieuw venster; var janela02: window = nieuw venster; janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350.200); janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250.200); janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); 
Als u de titel van het venster wilt weten, kunt u dit gebruiken:
trace (janela.title);
Goed gedaan om tot nu toe te volgen! U had nu een resultaat moeten bereiken dat lijkt op wat we in het begin hebben bekeken:
Als je nu merkt, kun je alle attributen van het venster veranderen, maar de inhoud blijft hetzelfde. Dus laten we de inhoud maken.
Open de MovieClip van het venster, maak een nieuwe laag voor de inhoud en ga naar Invoegen> Nieuw symbool (CTRL + F8). Kies MovieClip, noem het inhoud en druk op OK. Plaats het nu op X: 0, Y: 22.
Selecteer het nieuwe contentsymbool dat u zojuist hebt gemaakt en stel de naam van het exemplaar in INHOUD.
Dubbelklik op de inhoud, geef de bestaande laag een naam inhoud en maak een andere met de naam as3. In de laatste, druk op F9 en schrijf:
hou op();
Dit wordt onze standaardinhoud. Zin, niets!
Maak nu een andere keyframe en plaats bijvoorbeeld een afbeelding. Houd rekening met de grootte van het venster dat u gaat gebruiken. Voeg nog een keyframe toe en schrijf wat tekst erin. Nu hebben we 3 hoofdframes: 1. geen inhoud, 2. afbeelding, 3. tekst.
Voeg de code toe aan je lesgroepbestand:
/ * INHOUD WIJZIGEN ************************************** ************ / public function Content (c: int): void CONTENT.gotoAndStop (c);
Heel eenvoudig. We zeggen alleen welk keyframe we willen gebruiken.
U moet ook de minimizeWindow functie hieraan:
/ * VENSTER MINIMALISEREN ************************************** ************ / private function minimalWindow (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 (); function fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Voeg in het vorige voorbeeld dit toe aan de code:
janela.Content (2); // gaat naar het beeldhoofdframe
Hier is de volledige code:
var janela: window = nieuw venster; var janela02: window = nieuw venster; janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350.240); janela.Content (2); // gaat naar de afbeelding keyframe janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250.200); janela02.Content (3); // gaat naar het hoofdframe van de tekst janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Er is dus een eenvoudige manier om een dragbaar venster te maken (net zoals we dat in Windows zien). Als u verder wilt gaan, kunt u de inhoud van MovieClip wijzigen, tekst, knoppen, afbeeldingen, enzovoort toevoegen. U kunt schuifbalken toevoegen, inhoud via XML bellen of wat u maar kunt bedenken. De mogelijkheden zijn eindeloos!
Hier is nog een geweldig voorbeeld:
Dit is eXOTRik en ik hoop dat je dit nuttig hebt gevonden. Het is mijn eerste zelfstudie, we hopen je nog meer ninja-tricks te brengen. Ayaaaa!
