Share
I denne opplæringen lærer du hvordan du lager en enkel Image Rotator fra bunnen av med Flash, XML og ActionScript 3.0.
Denne bildrotatoren er opprettet nesten helt uten kode alene.
Under de første trinnene vil vi sette opp Fla-filegenskapene og legge inn noen fonter for å gjøre bildedataene bedre. Vi legger også til en forhåndsinnlasting for å indikere automatisk overføring av bildene.
Åpne Flash og opprett en ny Flash-fil (ActionScript 3.0).
Still scenestørrelsen til 600 x 300 px og rammens hastighet til 24 fps.
For å gi et bedre utseende til søknaden vår, vil vi gjøre bruk av innebygde fonter.
Åpne bibliotekspanelet (Cmd + L) og høyreklikk i elementområdet for å hente en kontekstmeny.
Å velge Ny skrift og velg en skrifttype du liker. Husk å velge den faktiske størrelsen du skal bruke i filmen.
Jeg brukte Helvetica Bold for bildetittel, og FFF Harmony for beskrivelsen.
En forhåndslaster MovieClip vil bli brukt som indikasjon på fremgang, dette vil fortelle brukeren at bildene spilles automatisk.
I dette eksemplet brukte jeg Apple Inspired Preloader vi opprettet før her på ActiveTuts +. Vi bruker bare animasjonen, så det er ikke nødvendig å kopiere koden. Vår kode vil gå videre til neste bilde hver gang forprogrammerings animasjonen løser seg.
Det ville ikke være en Image Rotator uten bilder, så velg dem fra din personlige samling eller last ned noen for testing.
Dette er bildene fra demoen, hentet fra Flickr, alle med en Creative Commons License.
Gress 01 av 100kr
dyp innvirkning på planetfargen av spettacolopuro
Yosemite: fallfarger ved tibchris
Bilder har blitt endret til 600x300 px for å passe filmstørrelsen.
En XML-fil lastes av programmet; Denne filen inneholder all informasjon om bildene, for eksempel tittel, URL for bildet og beskrivelse.
Åpne din favorittredaktør og skriv:
Opprett et nytt ActionScript-dokument og lagre det som ImageRotator.as.
Dette er de obligatoriske klassene. For en mer detaljert beskrivelse om hver klasse, vennligst se Flash Hjelp (Trykk F1 i Flash).
pakke import fl.transitions.Tween; importere fl.transitions.easing.Strong; importere fl.transitions.TweenEvent; importer flash.display.Sprite; importer flash.net.URLLoader; importere flash.net.URLRequest; importer flash.display.Loader; importer flash.text.TextField; importer flash.text.TextFormat; importere flash.text.TextFieldAutoSize; importer flash.text.AntiAliasType; importere flash.utils.Timer; importer flash.events.TimerEvent; importere flash.events.Event; importer flash.events.MouseEvent;
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 vil gjøre at dokumentklassen vår forlender Sprite, siden det ikke trenger en tidslinje.
offentlig klasse ImageRotator utvider Sprite
Dette er variablene vi skal bruke; hver er forklart i kommentarene.
privat var xml: XML; // Lagre xml-filinformasjonen privat var urlLader: URLLoader; // Laster url av xml-filen private var imagesVector: Vector.= Ny Vector. (); // Lagrer bildene lastet i Loader-objektet private var imagesCounter: int = 0; privat varighet: Tween; privat var lastTarget: *; // Gets det siste klikkte bildet, i manuell overgangsmodus privat var tweening = false; private var infoTeller: int = 0; // Endrer xml info for å vise private var infoPanel: Sprite = new Sprite (); private var titleField: TextField = new TextField (); privat var beskrivelse: TextField = nytt TextField (); private var titleFormat: TextFormat = ny TextFormat (); private var descriptionTF: TextFormat = ny TextFormat (); privat var timer: Timer; privat var preloader: Preloader = ny Preloader (); // Preloader i biblioteket private var lagt til: boolsk; // Kontrollerer om forladeren er i fase privat var titleFont: Helvetica = new Helvetica (); // Instantiate Embedded fonts private var bitmapFont: Harmony = new Harmony ();
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 kjører ved hjelp av dokumentklassen. I dette tilfellet vil det bli den første koden kjøres når vår SWF starter.
De innledende parametrene har standardverdier; Dette vil la oss bruke klassen som en dokumentklasse og som en forekomst.
Parametrene er nettadressen til XML-filen og tiden som Timer-objektet venter for å gjøre en overgang mellom bilder; dette nummeret må være høyere enn varigheten av Tween-overgangen (ett sekund som standard).
offentlig funksjon ImageRotator (xmlPath: String = "images.xml", intervall: int = 2000): void
Denne koden går inn i konstruktøren. Den starter Timer, angir standard tekstformat for tekstfeltene og kaller loadXML-funksjonen.
Timer = Ny 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);
Denne funksjonen bruker URLLoader-objektet til å laste XML-filen som er spesifisert i konstruktørens parameter. ParseXML-funksjonen (i neste trinn) er satt til å utføres når lasten er fullført.
privat funksjon loadXML (fil: String): void urlLoader = ny URLLoader (ny URLRequest (fil)); urlLader.addEventListener (Event.COMPLETE, parseXML);
XML-dataene er tilordnet xml-objektet, og en funksjon for å laste bildene kalles.
privat funksjon parseXML (e: Event): void xml = new XML (e.target.data); loadImages ();
En for setning brukes til å få antall bilder i xml, laste bildene med et Loader-objekt og lagre denne Loader i et Vector-objekt, som tidligere ble definert. Når belastningen på et bilde er fullført, blir sortImages-funksjonen utført.
private funksjon loadImages (): void for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(xml.children()[i].@src)); imagesVector.push(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);
Denne funksjonen legger bildene til scenen og sorterer dem; Når alle bildene er lastet, kaller det funksjonene som lager informasjonspanelet og muselyttene.
privat funksjon sortImages (e: Event): void imagesCounter ++; for (var jeg: int = imagesVector.length - 1; i> = 0; i--) // gå bakover ... addChild (imagesVector [i]); // ... slik at bildene i starten av XML ender opp foran hvis (imagesCounter == imagesVector.length) // Hvis alle bilder er lastet createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
Vi bruker en til uttalelse for å sette muselyttene til hvert bilde. Dette er en veldig enkel form for kontroll; Når brukeren klikker på et bilde, blir funksjonen changeImage handler kalt.
private funksjon addActions (): void for (var i: int = 0; i < imagesVector.length; i++)//Gets the number of images //Sets the listener, changeImage function will be executed when an image is clicked imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
Denne koden vil bli kjørt når brukeren klikker et bilde. Les kommentarene i koden for detaljer.
privat funksjon changeImage (e: MouseEvent): void timer.stop (); // Stopp timeren hvis (lagt til) // Sjekk om forladeren er i fase, hvis sant, fjerner den, hvis den allerede er fjernet, skjer ingenting removeChild (preloader); lagt til = false; hvis (! tweening) // Hvis en overgang ikke er i gang lastTarget = e.target; // Få det klikkede bildet tween = ny Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Start en overgang tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // Bildet vil endre dens dybde når overgangen er gjort tweening = true; // Angir en overgang pågår infoCounter ++; // Endrer barnet som skal lastes fra xml hvis (infoCounter> = xml.children (). Lengde ()) // Hvis infoCounter er gitter enn det totale antall bilder infoCounter = 0; // Tilbakestill titleField.text = xml.children () [infoCounter]. @ tittelen; // Bruk endringer i tekstfelt description.text = xml.children () [infoCounter]. @ beskrivelse; ellers titleField.text = xml.children () [infoCounter]. @ tittelen; // Bruk endringer i tekstfelt description.text = xml.children () [infoCounter]. @ beskrivelse;
Overgangen mellom bilder er basert på alfa-tween, så du vil se neste bilde når overgangen er ferdig. Men hvis du klikker på det, vil du klikke på det samme bildet som før, selv om det ikke er synlig. Dette vil fikse det.
privat funksjon changeDepth (e: TweenEvent): void // Når alfa er 0 setChildIndex (lastTarget, 0); // flytte bildet slik at det ligger bak de andre lastTarget.alpha = 1; // Gjenopprett synligheten tweening = false; // Marker tweenen som fullført
Dette vil skape et semi-gjennomsiktig panel, med tekst generert fra XML-tittel og beskrivelse tagger.
privat funksjon createInfoPanel (): void // Tegn et svart rektangel med 50% alpha 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]. @ tittelen; titleField.x = 5; titleField.y = 5; // Plasser og sett verdien av beskrivelsesfeltet description.text = xml.children () [infoCounter]. @ beskrivelse; description.x = 7; description.y = 22; infoPanel.y = 250; // Plasser dette panelet i bunnen // Legg til barn infoPanel.addChild (titleField); infoPanel.addChild (beskrivelse); addChild (tavlen);
Denne koden håndterer den automatiske overgangen; det utløses av Timer-objektets TIMER-hendelse.
privat funksjon autoChange (e: TimerEvent): void infoCounter ++; // Endrer barnet som skal lastes fra xml lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Barn (). Lengde ()"] [/ xml]; // Gets det siste bildet som ble tweened tween = new Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml], "alpha", Strong .easeOut, 1,0,1, true); // Oppretter en alfanumerisk / * De samme handlingene i den manuelle overgangen, endrer info etc. * / tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); tweening = true; hvis (infoCounter> = xml.children (). lengde ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ tittelen; description.text = xml.children () [infoCounter]. @ beskrivelse; ellers titleField.text = xml.children () [infoCounter]. @ tittelen; description.text = xml.children () [infoCounter]. @ beskrivelse;
Denne delen av skriptet legger til og plasserer forhåndsinnlasteren.
privat funksjon addPreloader (): void added = 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);
Dette fullfører ImageRotator klasse.
Det er to måter å bruke denne klassen på. Du kan bruke den i koden som en forekomst eller som dokumentklassen med standardparametrene vi satte tidligere.
Hvis du velger å instantiere denne klassen og bruke den i koden din, er dette et eksempel på hvordan du bruker det:
Accentsconagua
importere ImageRotator; var ir: ImageRotator = ny ImageRotator ("images.xml", 1100); addChild (ir); På denne måten kan du angi xml-filen som skal lastes og intervallet for overgangen uten at du må redigere klassekoden.
Ellers, se neste trinn.
I .fla-filen, gå til Egenskaper panelet og skriv ImageRotator i klassefeltet. Husk at dette vil bruke standardparametrene.
Dette er bare et eksempel på en rotasjonsbilde, og en god måte å begynne å lage ditt eget kjempebra bildegalleri.
Takk for at du leste!
