Share
I denne veiledningen vil jeg forklare hvordan du får tilgang til og bruker skjermlisten mens du lager et XML-basert bildegalleri med ActionScript 3.0.
Ved å bruke XML, laster vi dynamisk inn og får informasjon om bildene, gir dem en tilfeldig senterposisjon, legger til en ramme, legger til trækfunksjonalitet, og til slutt bruker vi en tween for å håndtere zoomanimasjonen.
Åpne Flash og opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til 600x350 og legg til en grå radialgradient (#EEEEEE, #DDDDDD).
Vi skal legge til en forhåndslastende animasjon for å fortelle brukeren når innholdet lastes inn. I dette tilfellet brukte jeg Apple-inspirert forhåndsinnlasting som vi opprettet før. Siden vi bare bruker animasjonen, er det ikke nødvendig å importere klassen eller bruke en eksporteringsidentifikator.
Plasser forlasteren på scenen og senter den.
Vi skal legge inn en skrifttype, en super enkel oppgave når du legger til en TextField til scenen i Flash IDE, men litt annerledes ved hjelp av ActionScript.
Åpne Bibliotekspanelet og høyreklikk i elementområdet uten å velge en, en kontekstuell meny vil vises.
Klikk på "Ny skrift" for å åpne et dialogvindu, gi et navn til skriften din og velg den du vil bruke som vist i følgende bilde.
Dette vil opprette en klasse av skrifttypen du har valgt, vi vil instantiere dette i trinn 9.
La oss lage XML-filen.
Åpne din foretrukne XML- eller Tekstredigerer og skriv:
Når du er ferdig, lagre den som "images.xml" i XML-mappen din.
Koden vi skal bruke, vil bli skrevet i en enkelt klasse som skal brukes som dokumentklasse i FLA-filen.
Opprett en ny ActionScript-fil (fil> Ny)
Lagre det som "Main.as".
Vi begynner med:
pakke klasser
De pakke Søkeord lar deg organisere koden din i grupper som kan importeres av andre skript. Det anbefales å nevne dem med en liten bokstav og bruk sammenkoblinger for etterfølgende ord, for eksempel: galleryClasses.
Hvis du ikke vil gruppere filene dine i en pakke, eller du bare har en klasse, kan du bruke den rett fra kildemappen din, men ideen er å bli organisert.
importer flash.display.Sprite; importer flash.display.MovieClip; importer flash.net.URLLoader; importere flash.net.URLRequest; importer flash.display.Loader; importere flash.events.Event; importer flash.filters.BitmapFilter; importer flash.filters.DropShadowFilter; importer flash.text.TextFormat; importer flash.text.TextField; importer flash.text.AntiAliasType; importer flash.events.MouseEvent; importere fl.transitions.Tween; importere fl.transitions.easing.Strong; importere fl.transitions.TweenEvent;
Dette er klassene som vi trenger for å lage dette galleriet. Hvis du trenger hjelp til en bestemt klasse, vennligst bruk Flash Help (F1).
offentlig klasse Main utvider MovieClip
De strekker Søkeord definerer en klasse som er en underklasse av en annen klasse. Underklassen arver alle metodene, egenskapene og funksjonene, slik at vi kan bruke dem i vår klasse.
Vi skal bruke MovieClip-spesifikke metoder og egenskaper slik at vi utvider å bruke MovieClip Class.
var xml: XML; // XML-objektet som vil analysere XML-filen var bilder: Array = new Array (); // Dette arrayet lagrer bildene som er lastet var imagesLoaded: int = 0; // En teller, teller bildene lastet var imagesTitle: Array = new Array (); // Tittelegenskapene til XML-filen var tween: Tween; // Håndterer animasjonen var zoomet: Boolsk = false; // Kontrollerer om et bilde er zoomet, false som standard var canClick: Boolean = true; // Kontrollerer om brukeren kan klikke på et bilde for å zoome det, sant som standard var lastX: int; // Lagrer x-egenskapen til det siste bildet som ble klikket var lastY: int; // Lagrer y-egenskapen til det siste bildet som ble klikket var textformat: TextFormat = nytt TextFormat (); // En TextFormat Object var skjerm: Sprite = new Sprite (); // En svart skjerm for å fokusere på det aktive bildet var formatFont: Avenir = nytt Avenir (); // Dette er den innebygde fonten
Konstruktøren er en funksjon som kjører når et objekt opprettes fra en klasse. Denne koden er den første som skal utføres når du lager en forekomst av et objekt eller når du bruker dokumentklassen.
I denne funksjonen setter vi egenskapene til TextFormat-objektet som vi skal bruke til å vise en tittel eller en beskrivelse av hvert bilde. Opprett den svarte skjermen som vises når brukeren klikker på et bilde og ring funksjonen som laster den ønskede XML-filen.
offentlig funksjon Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Bruk samme størrelse som du brukte når du legger inn skrifttypen fra bibliotekets skjerm.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); LoadXML ( "xml / images.xml");
Denne funksjonen laster XML-filen som leveres av parameteren "fil". Vi legger også til en lytter til å håndtere når lasten er fullført.
privat funksjon loadXML (fil: String): void var urlLader: URLLoader = ny URLLoader (); var urlReq: URLRequest = ny URLRequest (fil); urlLoader.load (urlReq); urlLader.addEventListener (Event.COMPLETE, handleXML);
Her konverterer vi den lastede XML-filen til et gyldig XML-objekt ved hjelp av parameteren "data" til URLLoader. Da bruker vi en "for" -oppgave for å lage en Loader for hvert bilde i XML. Ytterligere informasjon finnes i kommentaren.
privat funksjon handleXML (e: Event): void xml = new XML (e.target.data); for (var jeg: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Når en laster har lastet et bilde fra XML, blir følgende kode utført:
privat funksjon lastet (e: Event): void imagesLoaded ++; // Legger til en til bildeneLadet variabel hvis (xml.children () .lengde () == imagesLoaded) // Når alle bilder er lastet ... removeChild (preloader); // Fjerner Preloader MovieClip preparationImages (); // Denne funksjonen forklares i neste trinn
Denne funksjonen vil legge til rammen, TextField for å vise tittelen eller beskrivelsen, den svarte bakgrunnen som brukes til det og et skyggefilter. La oss ta det i deler.
privat funksjon prepareImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Dette skaper en hvit ramme rundt bildet.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, images [i] .bredde + 40, bilder [i]. høyde + 80); frame.graphics.endFill ();
Rektangelet vil bli plassert under bildet som skal brukes som en ramme.
Dette skaper et svart rektangel i bunnen av bildet, der TextField vil være.
infoArea.graphics.beginFill (0x111111, 0.75); infoArea.graphics.drawRect (0, 0, bilder [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = bilder [i]. høyde - 60;
Følgende kode angir egenskapene TextField og legger til innholdet.
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Du må legge til dette for å bruke den innebygde fonten infoField.antiAliasType = AntiAliasType.ADVANCED; // Denne egenskapen vil vise teksten mer tydelig infoField.width = bilder [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // Innholdet, hentet fra XML og lagret i Array
Her setter vi ønsket skala på bildene. Siden alt kommer til å være inne i Container Sprite, trenger vi bare å endre størrelsen på den.
container.scaleX = 0.3; container.scaleY = 0.3;
Bildene vil ha en tilfeldig posisjon basert på Stage-området. Vi bruker Math for det.
container.x = scene.stageWidth / 4 + Math.floor (Math.random () * (scene.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (scene.stageHeight / 5));
Dette vil skape et skyggefilter.
var shadowFilter: BitmapFilter = ny DropShadowFilter (3, 90, 0x252525, 1, 2, 1, 15); // Avstand, vinkel, farge, alfa, uskarphet, styrke, kvalitet var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Bruk filteret
Tid til å legge til barna, ordren der vi legger til dem, er den rekkefølgen de vil ta i displaylisten, så vær sikker på å legge dem på denne måten.
infoArea.addChild (infoField); // Legger TextField til TextField Bakgrunns container.addChild (ramme); // legger rammen til containercontaineren.addChild (bilder [i]); // Legger til bildet øverst på rammen i containerinfoArea.visible = false; // Vi stiller bildeinformasjonen til usynlig som standard container.addChild (infoArea); // Legger til informasjonsområdet i toppen av alt
Selv om vi kunne legge til lytterne til hver Sprite før, skal jeg legge dem til nå at de er inne i containeren for å vise deg hvordan visningslisten fungerer.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Dette er bildet lastet av XML, dette er Loader-objektet container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Dette er Frame container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (container); // Til slutt legger vi beholderen til scenen
I det forrige trinnet la vi to lyttere til bilderammen. Disse funksjonene vil ta vare på dra.
Vi bruker "foreldre" beacuse vi ønsker å dra alle objekter, siden "målet" er Frame Sprite, foreldreobjektet er Containeren.
privat funksjon dragImage (e: MouseEvent): void e.target.parent.startDrag (); privat funksjon stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Denne funksjonen er ansvarlig for zooming inn og ut. Lytteren er i selve bildet, så klikker du på rammen, vil denne funksjonen ikke ringes.
Redaktørens merknad: Av en eller annen grunn, eller hvis () uttalelse i denne zoomHandler-funksjonen var å gjøre vår syntax-highlighter-krasj. Som det ikke vil vise på siden, har jeg gjort funksjonen tilgjengelig for nedlasting. Beklager for ulempe, Ian.
Noen handlinger må utføres når Tweens er ferdig, det er disse handlingene.
privat funksjon zoomInFinished (e: TweenEvent): void zoomed = true; // Endre variablene i henhold til hendelsen canClick = true; tween.obj.getChildAt (2) .visible = true; // Setter informasjon området til synlig privat funksjon zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (skjerm); // Fjerner den svarte skjermen tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Legger til dravelytteren tilbake til Frame Sprite
Gå tilbake til FLA og legg til Hoved som dokumentklasse i egenskapspanelet. Hvis du lagrer klassen din i en pakke, må du legge til navnet på pakken, noe som helst: yourpackage.Main
Test filen din og se galleriet ditt!
Som alltid, prøv forskjellige ting i koden din for å lage galleriet akkurat som du vil.
Jeg håper du likte denne tut, takk for å lese!
Accentsconagua