Create et bilde Rotator i Flash Bruke XML og Actionscript 3.0
en
Del
6
Share
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan å lage en enkel Bilde Rotator fra grunnen av ved hjelp av Flash, XML og Actionscript 3.0.
Trinn 1:. Kort oversikt
Dette bildet Rotator er skapt nesten helt ut av kode alene
I løpet av de første skrittene vi vil sette opp Fla filegenskaper og legge ned noen skrifter for å gjøre bildet informasjon se bedre. Vi legger også til en preloader å indikere den automatiske overgangen av bildene
Trinn 2:.. Sett opp
Åpne Flash og opprette en ny Flash-fil (Actionscript 3.0)
satt scenen størrelse 600 x 300 px og bildehastighet for å 24fps
Trinn 3:. Legge Fonts
For å gi et bedre utseende til vår søknad vil vi gjøre bruk av innebygde skrifter .
Åpne Bibliotek Panel (Cmd + L) og høyreklikk på elementer området for å få opp en kontekstmeny.
Velg New Font Hotell og velg en font du liker. . Husk å velge den faktiske størrelsen du skal bruke i filmen Jeg brukte Helvetica Bold for tittelen på bildet, og FFF Harmony for beskrivelsen En preloader MovieClip vil bli brukt som en indikasjon på fremgang, vil dette fortelle brukeren at bildene blir automatisk spille. I dette eksempelet jeg brukte Apple Inspirert Preloader vi laget før her på ActiveTuts +. Vi vil bare bruke animasjon, så det er ikke nødvendig å kopiere koden. Vår kode vil gå videre til neste bilde hver gang preloader animasjon sløyfer Det ville ikke være et bilde Rotator uten bilder, så velg dem fra personlige samling eller laste ned noen for testing. Dette er bildene fra demoen, hentet fra Flickr, alle med en Creative Commons License. Grass 01 av 100kr dyp innvirkning på planeten farge ved spettacolopuro Yosemite: høstfarger av tibchris Bilder har blitt endret for å 600x300 px å passe filmen størrelse En XML-fil vil bli lastet av programmet; denne filen vil inneholde all informasjon om bildene som tittel, URL til bildet, og beskrivelse Åpne din favoritt editor og skrive:.? Opprett en ny Actionscript dokument og lagre det som ImageRotator.as Dette er de nødvendige klassene. For en mer detaljert beskrivelse om hver klasse, kan du se Flash Help (Trykk F1 innen Flash) strekker Vi vil gjøre vårt dokument klasse forlenge Sprite, så det trenger ikke en tidslinje. Dette er de variablene vi vil bruke; hver er forklart i kommentarfeltet 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 kjører ved hjelp av Document Class. I dette tilfellet vil det være det første kode kjøres når våre SWF starter De innledende parametrene har standardverdier.; dette vil la oss bruke den klassen som et dokument klasse og Selge som et eksempel. Parametrene er nettadressen til XML-filen og tiden at Timer objektet vil vente med å gjøre en overgang mellom bilder; dette tallet må være høyere Denne koden går inne i konstruktøren. Det starter timeren, setter standard tekstformat for tekstfeltene og kaller LoadXML funksjon Denne funksjonen bruker den URLLoader objekt for å laste XML-filen som er angitt i konstruktør parameter. Den parseXML funksjon (i neste trinn) er satt til å utføre når lasten er fullført xml data er tildelt den xml objekt, og en funksjon for å laste bildene kalles En for påstanden brukes for å få antall bilder i xml, laste inn bilder med en ubøyelig objekt og lagre denne Loader i en Vector objekt , som ble definert tidligere. Når belastningen av et bilde er fullført, er sortImages funksjonen henrettet Denne funksjonen legger bildene til scenen og sorterer dem; Når alle bildene er lastet, kaller det de funksjonene som skaper informasjonspanelet og muse lyttere Vi bruker en for Denne koden skal kjøres når brukeren klikker et bilde. Les kommentarene i koden for detaljer Overgangen mellom bilder er basert på alpha tween, så vil du se det neste bildet når overgangen er ferdig. Men hvis du klikker på den, vil du være å klikke på samme bilde som før, selv om det ikke er synlig. Dette vil fikse det Dette vil skape en semi-transparent panel, med tekst generert fra XML tittel og beskrivelse koder Denne koden håndterer automatisk overgang; Det er utløst av Timer objektets TIMER event Denne del av manuset legger og plasserer preloader Dette fullfører ImageRotator Det er to måter å bruke denne klassen.. Du kan bruke den i koden som en forekomst eller som dokument klasse med standardparameterne vi valgt tidligere. Hvis du velger å bruke denne klassen og bruke det i koden din, er dette et eksempel på hvordan man bruke det: På denne måten kan du sette xml filen som skal lastes og intervallet av . overgang uten behov for å redigere klassekoden Ellers kan du se det neste trinnet I FLA fil, gå til Egenskaper Panel og skrive ImageRotator Dette er bare et eksempel på et bilde rotator, og en god måte å begynne å lage din egen fantastisk bildegalleriet. Takk for lesing! Anmeldelser
Trinn 4:. Preloader
Trinn 5:. Få Noen Images
Trinn 6:. Skriv XML
< xml version = "1.0" > <?; bilder > < image title = "Grass 01" src = "images /Grass.png" description = "Foto: 100kr på Flickr" /> < image title = "Deep Impact på Planet Color" src = "images /Water.png" description = "Foto: spettacolopuro på Flickr" /> < image title = "Yosemite: Fall Farger" src = "images /Yosemite.png" description = "Foto: tibchris på Flickr" /> < /bilder >
Trinn 7: Opprett dokument Class
Trinn 8:. Import Nødvendig Classes
pakke {import fl.transitions.Tween.; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent; import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.Event; import flash.events.MouseEvent;
Trinn 9: Start Klasse
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.
Offentlig klasse ImageRotator strekker Sprite {
Trinn 10: Erklærer Variabler
private Var xml: XML;. //Lagrer xml filen infoprivate Var URLLoader: URLLoader; //Laster url av xml fileprivate Var imagesVector. Vector < Loader > = New Vector. ≪ Loader > (); //Lagrer bildene lastet inn i Loader objectprivate Var imagesCounter: int = 0; privat Var tween: Tween; private Var lastTarget: *; //Blir det siste bildet klikket, i manuell overgang modeprivate Var tweening = false; privat Var infoCounter: int = 0; //Endrer xml info til displayprivate Var tavlen: Sprite = new Sprite (); privat Var titleField: Textfield = new Textfield (); privat Var beskrivelse: Textfield = new Textfield (); privat Var titleFormat: tekstformat = new tekstformat (); private Var descriptionTF: tekstformat = new tekstformat (); privat Var timer: Timer, private Var preloader: Preloader = new Preloader (); //Preloader i Libraryprivate Var tilføyde: boolsk; //Sjekker om preloader er i stageprivate Var titleFont: Helvetica = new Helvetica (); //Instantiate Embedded fontsprivate Var bitmapFont: Harmony = new Harmony ();
Trinn 11: Skriv Constructor Funksjon
enn varigheten av Tween overgang (ett sekund som standard)
offentlig funksjon ImageRotator. (XMLPATH: String = "images.xml", intervall: int = 2000): void {
Trinn 12: Skriv Constructor Kode
timer = new Timer (intervall);. TitleFormat.bold = true; titleFormat.font = titleFont.fontName; titleFormat.color = 0xFFFFFF; titleFormat.size = 14; descriptionTF.font = bitmapFont.fontName; descriptionTF.color = 0xEEEEEE; descriptionTF.size = 8; titleField.defaultTextFormat = titleFormat; titleField.autoSize = TextFieldAutoSize.LEFT; titleField.embedFonts = true; titleField.antiAliasType = AntiAliasType.ADVANCED; description.defaultTextFormat = descriptionTF; description.autoSize = TextFieldAutoSize.LEFT; description.embedFonts = true; LoadXML (XMLPATH);}
Trinn 13: Legg i XML File
privat funksjon LoadXML (file: String):. Void {URLLoader = new URLLoader (ny URLRequest (fil)); urlLoader.addEventListener (Event.COMPLETE, parseXML);}
Trinn 14:. Parse XML File
privat funksjon parseXML (e: Hendelses): void {xml = new XML (e.target.data); loadImages ();}
Trinn 15: Legg i Images
privat funksjons loadImages (): void {for. (Var i.: Int = 0; i < xml.children () lengde (); i ++) {var loader: Loader = new Loader (); loader.load (ny URLRequest (xml.children () [i] @ src).); imagesVector.push (loader); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, sortImages); }}
Trinn 16: Sortere Images
private funksjons sortImages (e: Hendelses):. void {imagesCounter ++; for (var i: int = imagesVector.length - 1; i > = 0; I--) //gå baklengs ... {addChild (imagesVector [i]); //...so at bilder på starten av XML havne på forsiden} if (imagesCounter == imagesVector.length) //Hvis alle bildene er lastet {createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoskift); timer.start (); addPreloader (); addActions (); }}
Trinn 17: Legg Muse Lyttere å Images
statement å sette muse lyttere til hvert bilde. Dette er en meget enkel form for kontroll; når brukeren klikker på et bilde, vil changeImage handler funksjonen kalles
privat funksjons addActions (): void {for (var i: int = 0; i < imagesVector.length; i ++) //Gets antall. bilder {//Setter lytteren, vil changeImage funksjon bli utført når et bilde blir klikket imagesVector [i] .addEventListener (MouseEvent.MOUSE_UP, changeImage); }}
Trinn 18: Manuell Transition
privat funksjon changeImage (e: MouseEvent): void {timer.stop ();. //Stoppe tidtakeren if (lagt til) //Sjekk om preloader er i fasen, hvis sant, fjerner den, hvis den allerede er fjernet, skjer det ingenting {removeChild (preloader); added = false; } If (tweening!) //Hvis en overgang ikke er i fremgang {lastTarget = e.target; //Få klikket bilde tween = new Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); //Start en overgang tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); //Bildet vil endre sin dybde når overgangen er gjort tweening = true; //Indikerer en overgang pågår infoCounter ++; //Endrer barnet som vil bli lastet fra xml if (infoCounter >. = Xml.children () length ()) //Hvis infoCounter er rivjern enn det totale antall bilder {infoCounter = 0; //Tilbake titleField.text = xml.children () [infoCounter]. @ Title; //Bruk endringer på tekstfelt description.text = xml.children () [infoCounter]. @ Beskrivelse; } Else {titleField.text = xml.children () [infoCounter]. @ Title; //Bruk endringer på tekstfelt description.text = xml.children () [infoCounter]. @ Beskrivelse; }}}
Trinn 19: Flytt på bildet for å Back
privat funksjon changeDepth (e: TweenEvent): void //Når alpha er 0 {setChildIndex (lastTarget, 0);. //flytte bildet slik at det er bak de andre lastTarget.alpha = 1; //Gjenopprette sin synlighet tweening = false; //Mark tween som komplett}
Trinn 20:. Lag Informasjonspanel
privat funksjon createInfoPanel (): void {//Tegn en svart firkant med 50% alfa infoPanel.graphics.beginFill (0x000000, 0,5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); //Plasser og sett verdien av tittelfeltet titleField.text = xml.children () [infoCounter]. @ Title; titleField.x = 5; titleField.y = 5; //Posisjon og sette verdien av beskrivelsesfeltet description.text = xml.children () [infoCounter]. @ Beskrivelse; description.x = 7; description.y = 22; infoPanel.y = 250; //Plasser dette panelet i bunnen //Legg barna infoPanel.addChild (titleField); infoPanel.addChild (beskrivelse); addChild (tavlen);}
Trinn 21: Handle Automatic Transition
privat funksjon autoskift (e: Timerevent):. void {infoCounter ++; //Endrer barn som vil bli lastet fra xml lastTarget = imagesVector - [/xml] [xml 1 = "" 2 = "infoCounter" language = "barn () length ().."]; //Blir det siste bildet som ble tweened tween = new Tween (imagesVector [xml 1 = "-" ".. Barn () length ()" 2 = "infoCounter" language =] [/xml], "alpha", Strong .easeOut, 1,0,1, true); //Oppretter en alfa tween /* De samme handlingene til den manuelle overgangen, endre info etc. * /tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); tweening = true; if (infoCounter > = xml.children () length ().) {infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ Title; description.text = xml.children () [infoCounter]. @ Beskrivelse; } Else {titleField.text = xml.children () [infoCounter]. @ Title; description.text = xml.children () [infoCounter]. @ Beskrivelse; }}
Trinn 22: Plasser Preloader MovieClip
privat funksjon addPreloader (). void {lagt = true; preloader.scaleX = 0,08; preloader.scaleY = 0,08; preloader.x = (600 - preloader.width /2) - 12; preloader.y = (300 - preloader.height /2) - 12; addChild (preloader);}}}
klasse
Trinn 23: Bruke Class
import ImageRotator; Var ir: ImageRotator = new ImageRotator ("images.xml", 1100), addChild (ir);
Trinn 24:. Bruk av dokument Class
i Class-feltet. Husk at dette vil bruke standardparameterne.
Konklusjon