Create en Shuffle Gallery i Flash Bruke XML og Actionscript 3.0
en
Del
en
Share
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil jeg forklare hvordan du får tilgang til og bruke Displayliste samtidig skape et XML-basert bildegalleriet med Actionscript 3.0.
Trinn 1: Oversikt
Ved hjelp av XML vi vil dynamisk belastning og få informasjon om bildene, gi dem et tilfeldig midtstilling, legge til en ramme, legge dra funksjonalitet, og til slutt , vil vi bruke en tween å håndtere zoom animasjon
Trinn 2:.. La oss komme i gang
Åpne Flash og opprette en ny Flash-fil (Actionscript 3)
satt scenen størrelsen til 600x350 og legge en grå radial gradient (#EEEEEE, #DDDDDD)
Trinn 3:. Legge til en preloader
Vi kommer til å legge en forbelastning animasjon for å fortelle brukeren når innholdet lastes. I dette tilfellet brukte jeg Apple inspirert preloader at vi laget før. Siden vi kommer til å bruke bare animasjon, det er ikke nødvendig å importere klassen eller bruke en Export Identifier
Sett preloader på scenen og sentrere det
Trinn 4:.. Inkludering en Font
Vi kommer til å legge ned en skrift, en super enkel oppgave når du legger til en Textfield til Stage i Flash IDE, men litt annerledes ved bruk av Actionscript.
Åpne Bibliotek Panel og høyreklikk i elementer området uten å velge en, en kontekstuell meny vises.
Klikk på "Ny Skrift" for å åpne et vindu, gi et navn til skrift og velg den du ønsker å bruke ., som vist i følgende bilde
Dette vil skape en klasse på skriften du har valgt, vil vi bruke denne i trinn 9.
Trinn 5: XML
La oss lage XML-filen
Åpne din foretrukne XML eller tekst editor og skrive:.?
< xml version = "1.0" encoding = "UTF-8" > < bilder >? < image src = "images /image.jpg" title = "Dette er bilde 1" /> < image src = "images /bilde2.jpg" title = "Dette er bilde 2" /> < image src = "images /image3.jpg" title = "Dette er bilde 3" /> < image src = "images /image4.jpg" title = "Dette er bilde 4" /> < image src = "images /image5.jpg" title = "Dette er bilde 5" /> < /bilder >
Når du er ferdig, lagre den som "images.xml" i xml-mappen.
Trinn 6:. Action
Koden som vi bruker vil bli skrevet i et enkelt klasse som skal brukes som dokumentklassen er i FLA filen
Opprett en ny Action File (Fil > Ny)
Lagre som "Main.as"
Trinn 7: Pakke
Vi begynner med:
. pakke klasser {
pakke Hvis du ikke ønsker å gruppere filer i en pakke, eller har du bare én klasse, kan du bruke den rett fra kilden mappen, men ideen er å være organisert Dette er klasser som vi trenger for å gjøre dette galleriet. Hvis du trenger hjelp med en bestemt klasse kan du bruke Flash Hjelp (F1) strekker Vi kommer til å bruke MovieClip spesifikke metoder og egenskaper, slik at vi forlenge bruker MovieClip Class. Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse. Denne koden er den første som skal utføres når du gjør en forekomst av et objekt eller når du bruker dokument Class. I denne funksjonen vil vi sette egenskapene til tekstformat objektet som vi skal bruke til å vise en tittel eller en beskrivelse av hvert bilde. Lag den svarte skjermen som vises når brukeren klikker på et bilde og kaller funksjonen som laster den ønskede XML fil Denne funksjonen laster XML-filen leveres av "fil" parameter. Vi legger også til en lytter til å håndtere når lasten er fullført Her kan vi konvertere lastet XML-filen til en gyldig XML objekt med parameter "data" av URLLoader. Deretter bruker vi en "for" statement å skape et Loader for hvert bilde i XML. Ytterligere informasjon finnes i kommentarene Når en Loader har lastet et bilde fra XML, følgende kode kjøres: Denne funksjonen vil legge rammen, Textfield å vise tittelen eller beskrivelsen, svart bakgrunn brukt for det og en Shadow Filter. La oss ta det i deler Dette skaper en hvit ramme rundt bildet rektangelet vil bli plassert under bildet som skal brukes som en ramme Dette skaper et svart rektangel i den nederste delen av bildet, der Textfield vil være Følgende kode setter tekstfeltet egenskaper og legger innholdet Her kan vi stille inn ønsket skala fra bildene. Siden alt skal være inne i Container Sprite, vi trenger bare å endre størrelsen Bildene vil ha en tilfeldig posisjon basert på midten av Stage området. Vi bruker Math for at Dette vil skape en Shadow Filter På tide å legge Barna, i hvilken rekkefølge legger vi dem er rekkefølgen de vil ta i Visnings List, så sørg for å legge dem . på denne måten Selv om vi kunne legge til Lyttere til hver Sprite før, kommer jeg til å legge dem nå som de er inne i Container vise du hvordan Vise liste fungerer I forrige trinn vi lagt til to lyttere til ramme av bildene. Disse funksjonene vil ta vare på drag. Vi bruker "foreldre" fordi vi ønsker å dra alle objekter, siden "target" er den Frame Sprite, det overordnede objektet er Container. Denne funksjonen er ansvarlig for å zoome inn og ut. Dens Listener er i selve bildet, så klikke på Frame vil ikke kalle denne funksjonen Red.anm. Noen tiltak må gjennomføres når Tweens er ferdige, disse er de handlinger Gå tilbake til FLA og legge Hoved Test filen din og se dine galleriet arbeider Som alltid prøve forskjellige ting i koden for å gjøre galleriet akkurat som du vil. Jeg håper du likte denne tut, takk for lesing!
søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, er det anbefalt å navngi dem starter med en liten bokstav og bruke intercaps for etterfølgende ord for eksempel: galleryClasses
.
Trinn 8:. Må Classes
import flash.display.Sprite, importere flash.display.MovieClip, importere flash.net.URLLoader, importere flash.net.URLRequest, importere flash.display.Loader; import flash.events.Event, import flash.filters.BitmapFilter, import flash.filters.DropShadowFilter, import flash.text.TextFormat, import flash.text.TextField, import flash.text.AntiAliasType, import flash.events.MouseEvent; import fl.transitions.Tween, import fl.transitions.easing.Strong, import fl.transitions.TweenEvent;
Trinn 9:. Utvide Class
public class Hoved strekker MovieClip {
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår.
< h2> Trinn 10: Variabler
Var xml: XML; //XML Object som vil analysere XML Filevar bilder: Array = new Array (); //Dette array vil lagre bildene loadedvar imagesLoaded: int = 0; //En teller, teller bildene loadedvar imagesTitle: Array = new Array (); //Tittelen egenskapene til XML Filevar tween: Tween; //Håndterer animationvar zoomet: Boolean = false; //Sjekker om et bilde er zoomet, falsk ved defaultvar canClick: Boolean = true; //Sjekker om brukeren kan klikke et bilde for å zoome det, sant av defaultvar lastX: int; //Lagrer x tilhører det siste bildet som var clickedvar lasty: int; //Lagrer y tilhører det siste bildet som var clickedvar tekstformat: tekstformat = new tekstformat (); //En tekstformat Objectvar skjermen: Sprite = new Sprite (); //En svart skjerm å fokusere på den aktive picturevar formatFont: Avenir = new Avenir (); //Dette er den innebygde skrift
Trinn 11: Constructor
offentlig funksjon main (). Void {textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; //Bruk samme størrelse som du brukte ved inne skriften fra Biblioteket screen.graphics.beginFill (0x111111, 0,75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); LoadXML ("xml /images.xml");}
Trinn 12: XML Loader Funksjon
privat funksjon LoadXML (file: String): void {var URLLoader: URLLoader = new URLLoader ();. Var urlReq: URLRequest = new URLRequest (fil); urlLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);}
Trinn 13: Parse XML
privat funksjon handleXML (e: Hendelses):. Void {xml = new XML (e.target.data); for (var i.: int = 0; i < xml.children () lengde (); i ++) {var loader: Loader = new Loader (); loader.load (ny URLRequest (String (xml.children () [i] @ src)).); images.push (loader); //Legger til Laste til bilder Array å få tilgang til dem utenfor denne funksjonen imagesTitle.push (xml.children () [i] @ title.); //Legger tittelen attributt innhold til array til å bruke den utenfor denne funksjonen loader.contentLoaderInfo.addEventListener (Event.COMPLETE, lastet); //En lytter til funksjonen som vil bli utført når et bilde er lastet}}
Trinn 14: Images Lastet
privat funksjon lastet (e: Hendelses): void {imagesLoaded ++; //Legger man til imagesLoaded variable if (xml.children () length () == imagesLoaded.) //Når alle bildene er lastet ... {removeChild (preloader); //Fjerner Preloader MovieClip prepareImages (); //Denne funksjonen er forklart i neste trinn}}
Trinn 15: Forbered Images
privat funksjons prepareImages (): void {for (var i: int = 0; i < images.length; i ++) //Disse handlingene vil bli brukt på alle bildene som er lastet så vi bruker. en "for" og "bilder" array til å gjøre det {var container: Sprite = new Sprite (); //En container som vil lagre bildet, ramme, Textfield, Textfield bakgrunn og skygge Var ramme: Sprite = new Sprite (); //The Frame Sprite Var infoArea: Sprite = new Sprite (); //Den Textfield bakgrunnen Var infoField: Textfield = new Textfield (); //Den Textfield
Trinn 16: bilderamme
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20. , bilder [i] .width + 40, bilder [i] .height + 80), frame.graphics.endFill ();.
< h2> Trinn 17: Informasjon Bakgrunn
infoArea.graphics.beginFill (0x111111, 0,75); infoArea.graphics.. drawRect (0, 0, bilder [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = bilder [i] .height - 60;
Trinn 18: Bildeinformasjon
infoField.defaultTextFormat = tekstformat;. infoField.embedFonts = true; //Du må legge til denne for å bruke den innebygde fontinfoField.antiAliasType = AntiAliasType.ADVANCED; //Denne eiendommen vil vise teksten mer clearlyinfoField.width = bilder [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; //Innholdet, hentet fra XML og lagret i Array
Trinn 19: Endring av størrelsen på de Images
container.scaleX = 0,3; container.scaleY = 0,3;
Trinn 20:. Posisjon
container.x = stage.stageWidth /4 + Math.floor (Math.random () * (stage.stageWidth /4));. Container.y = stage.stageHeight /5 + Math. etasje (Math.random () * (stage.stageHeight /5));
Trinn 21:. Shadow Filter
Var shadowFilter: BitmapFilter = new DropShadowFilter (3 , 90, 0x252525, 1, 2, 2, 1, 15); //Avstand, vinkel, farge, alpha, uskarphet, styrke, qualityvar filterArray: Array = [shadowFilter]; container.filters = filterArray; //Påfør filter
Trinn 22: Legge til Stage
infoArea.addChild (infoField); //Legger til Textfield til Textfield Backgroundcontainer.addChild (ramme); //Legger rammen til Containercontainer.addChild (bilder [i]); //Legger bildet på toppen av rammen i ContainerinfoArea.visible = false; //Vi setter bildeinformasjon til usynlig ved defaultcontainer.addChild (infoArea); //Legger informasjonsfeltet i toppen av alt
Trinn 23: Lyttere
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler.); //Dette er bildet lastet av XML, er dette Loader objectcontainer.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); //Dette er Framecontainer.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); //FrameaddChild (container); //Slutt, legger vi den Container til scenen
Trinn 24: Dra Funksjoner
Privat funksjon dragImage (e: MouseEvent): void {e.target.parent.startDrag ();} private funksjon stopDragImage (e: MouseEvent): void {e.target.parent.stopDrag ();}
Trinn 25: Zoom
For noen grunn, else if ()
uttalelse innen denne zoomHandler funksjon var å lage vår syntax highlighter krasj. Som det vil ikke vises på siden, har jeg gjort funksjonen tilgjengelig for nedlasting. Beklager for eventuelle ulemper, Ian
Trinn 26:.. Motion Finish
privat funksjon zoomInFinished (e: TweenEvent): void {zoomet = true; //Endre variablene i henhold til hendelsen canClick = true; tween.obj.getChildAt (2) .visible = true; //Setter Informasjon området for synlig} private funksjon zoomOutFinished (e: TweenEvent): void {zoomet = false; removeChild (skjerm); //Fjerner den svarte skjermen tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); //Legger dra lytteren tilbake til Frame Sprite}
Trinn 27: Dokument Class
som dokumentklassen er i Properties Panel. Hvis du lagrer din klasse i en pakke du må legge inn navnet på pakken også, noe sånt som: yourpackage.Main
Konklusjon