Bygg en Dynamic Flash Gallery med Slider Control

Build en Dynamic Flash Gallery med Slider Kontroll
Del
Del
Del
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil vi lage et galleri som viser alle bildefiler i en gitt katalog. En glidebryter brukes for enkelt å bla gjennom bildene.




Trinn 1

Sett opp en ny Flash AS3 dokument og en blank Actionscript-fil. Vi vil skape den største klassen først; name it "Galleri" og lagre den som "Gallery.as". Nedenfor er koden for å sette opp den første klassen:
pakken {public class Gallery {offentlig funksjon Gallery (): void {}}}

I Flash kan vi nå satt dette som base klassen ved å skrive inn navnet på input boksen under Publish innstillinger av dokumentet. Du kan prøve en "trace (" hello world ")" i Galleri funksjon for å teste om det fungerer.



Trinn 2

Før vi fortsetter med hovedklassen, er det best til å begynne med glidebryteren. Koden er ganske lett å forstå og kunne skinne litt lys på hvordan ting gjøres i AS3

Lag to nye movieclips:. En glidebryter og et håndtak for glidebryteren. Glidebryteren eller søkende trenger ikke å bli eksportert til Action så vi trenger bare å bruke noen funksjoner til håndtaket. Still klassen for håndtaket som "håndtak". Vi kan nå opprette en ny klasse som heter "Handle", og hvis lagret i samme katalog, vil Flash automatisk bruke denne klassen for håndtaket. Gi både en forekomst navn som "slider" og "theHandle".



Trinn 3

Følgende er hele koden for håndtak som jeg vil forklare i trinnene. Det bør lagres som "Handle.as" i samme katalog som FLA. På denne måten vil Flash utføre koden en gang en forekomst med et klassenavn "Handle" brukes
pakke {import flash.display.MovieClip.; import flash.events.MouseEvent; import flash.events.Event; public class Handle strekker MovieClip {public Var goToX: Number = x; private Var slider: MovieClip = MovieClip (forelder) .slider; private Var mousePos: Antall = 0; offentlig funksjon Håndtak (): void {buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); } Private funksjon moveHandle (_E: MouseEvent): void {mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); } Private funksjon stopHandle (_E: MouseEvent): void {stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle); } Private funksjon followHandle (_E: MouseEvent): void {var newPos: Number = stage.mouseX - mousePos; Var orgX: Number = x; if (newPos < slider.x) goToX = slider.x; else if (newPos > (slider.x + slider.width) - bredde) goToX = (slider.x + slider.width) - bredde; else goToX = newPos; x = goToX; if (goToX = orgX!) dispatchEvent (ny hendelse ("skyve", true)); }}}

I de første linjene skaper vi noen variabler å holde data vi kan bruke i hver funksjon i denne klassen. Glideren variable har en referanse til forekomsten heter "slider" på den overordnede. Vi trenger den til riktig beregne x stilling til hvilken håndtaket skal flyttes. I konstruktøren setter vi "buttonMode" til sann så en hånd markør dukker opp når svever over håndtaket. . I tillegg legger vi to eventlisteners å lytte etter mus hendelser
public class Handle strekker MovieClip {public Var goToX: Number = x; private Var slider: MovieClip = MovieClip (forelder) .slider; private Var mousePos: Antall = 0; offentlig funksjon Håndtak (): void {buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); }

Når en mus ned hendelse inntreffer, en ekstra lytteren er lagt til. Denne lytteren forblir aktiv så lenge som det friksjonsbevegelsen ikke blir stoppet, og kaller "followHandle" -funksjon. Det er fjernet igjen når museklikk er over
privat funksjon moveHandle (_E: MouseEvent):. Void {mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle);} private funksjon stopHandle (_E: MouseEvent): void {stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);}

Denne siste funksjonen flytter faktisk håndtaket rundt. De variable "newPos" butikker den nye stillingen som håndtaket bør flytte. Hvis, derimot, er lenger enn denne stilling helt til venstre eller høyre av skyveren, skal den stilling settes til den maksimalt mulige verdi. Hvis håndtaket blir flyttet, sende vi en ny tilpasset arrangement som heter "skyve", som vi senere kan bruke til å flytte rundt bildene
privat funksjon followHandle. (_E: MouseEvent): void {var newPos: Number = stage.mouseX - mousePos; Var orgX: Number = x; if (newPos < slider.x) goToX = slider.x; else if (newPos > (slider.x + slider.width) - bredde) goToX = (slider.x + slider.width) - bredde; else goToX = newPos; x = goToX; if (goToX = orgX!) dispatchEvent (ny hendelse ("skyve", true));}



Trinn 4

Hvis alt har gått bra til nå, bør du ha en fin funksjonell glidebryter som den nedenfor. Legg et dynamisk tekstfeltet under det som vil holde bildenummeret. Gi den en forekomst navn som "countTxt" så vi kan ta det opp senere i Actionscript. Fordi det er ingenting å vise enda jeg fylte den med teksten "Loading", som vil også vise mens manuset laster det første bildet.



Trinn 5

Neste vi vil opprette php backend script. Flash kan ikke lese innholdet i en lokal katalog, så vi trenger å sende informasjonen fra php til Flash. Vi vil bruke XML siden det er lett å utgang med php og enda enklere å lese igjen i AS3.

Følgende er php backend-kode, lagre den som "backend.php". Koden looper gjennom katalogen "img" og skriver en linje av XML for hver fil i det. Før du skriver må vi filtrere ut "." og ".." kataloger. Som katalogen inneholder kun bilder er det ingen ytterligere sjekker nødvendig
. ≪ xml > <? Php $ od = opendir ('img'); while ($ filename = readdir ($ od)) if ($ filename = &! »."; &! $ filename = "..") echo "< img >" . $ filnavn. "< /img > \\ n"; ? > < /xml >

Dette vil utgang for eksempel:
< xml > < img > file1.jpg < /img > < img > file2.jpg < /img > < img > file3.jpg < /img > < /xml >



Trinn 6

Før vi legger dette inn i Flash, la oss lage en klasse for å holde bildene våre individuelt. På samme måte har vi opprettet håndtaket klassen kan vi nå lage en Img klasse. Start med å lage en MovieClip om den størrelsen du vil at bildene skal vises. Gi den en margin på noen få piksler og spare litt plass på bunnen for beskrivelse teksten. Legg et dynamisk tekstfelt for beskrivelse og gi den en forekomst navnet "descr". Sørg for å sette registreringspunktet for MovieClip til sentrum slik at vi lett kan skalere det senere. Eksportere den for Action under klassenavnet "Img". Nå sletter forekomsten fra scenen som vi kaller det direkte fra biblioteket.



Trinn 7

Neste vi vil laste den informasjonen de php filen returnerer til vår Flash prosjekt ved hjelp av Actionscript. Åpne opp Gallery klassen igjen. Følgende kode legger to funksjonalitet til vårt prosjekt. First off, skaper det "imagesClip", en tom MovieClip hvor vi vil lagre selve bildene senere. Ved hjelp av "addChild" her legger MovieClip til scenen. Noe lagt til imagesClip senere vil også vises på scenen. Å faktisk laste xml data, skaper vi en "URLLoader". Denne klassen kan hente resultatene og kjøre en funksjon når resultatene er i
pakke {import flash.display.MovieClip.; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class Gallery strekker MovieClip {private Var backend: String = 'http: //localhost/.../backend.php'; private Var xmlLoader: URLLoader = new URLLoader; private Var xdata: XML; offentlige Var bilder: Array = new Array (); offentlig Var imagesClip: MovieClip = new MovieClip; offentlig funksjon Gallery (): void {imagesClip.y = 180; addChild (imagesClip); xmlLoader.load ("?" nye URLRequest (backend + + ny Date () valueof ()).); xmlLoader.addEventListener (Event.COMPLETE, loadImages); } Private funksjon loadImages (_E: Arrangement): void {xdata = new XML (_e.target.data); Var i: Antall = 0; for hver (var img: XML i xdata.img) {bilder [i] = new Img (); i ++; imagesClip.addChild (bilder [i]); }}}}

Her bruker vi belastningen funksjon av URLLoader klassen. For å forhindre caching av resultatene kan vi legge til en enkel dato til slutten av url. De eventlistener sjekker når URLLoader er ferdig og deretter kjører loadImages funksjon
xmlLoader.load (ny URLRequest (backend + + ny Date () valueof ()) "?"..), XmlLoader.addEventListener (Event.COMPLETE, loadImages);

Denne neste funksjon looper gjennom alle < img > forekomster i xml. For hver av disse skaper det en ny forekomst av Img klassen. Neste vi legge det til imagesClip (dette er bare for testing som senere vi bare vil de aktive bilder som skal vises)
private funksjons loadImages. (_E: Hendelses): void {xdata = new XML (_e.target. data); Var i: Antall = 0; for hver (var img: XML i xdata.img) {bilder [i] = new Img (); i ++; imagesClip.addChild (bilder [i]); }}



Trinn 8

For å gi våre img tilfeller mer funksjonalitet, opprette en Img klasse og lagre det som "Img.as". På en lignende måte til lasting av XML kan vi laste bildet selv og vise den inne i Img MovieClip. Laste bør ikke forekomme i konstruktøren eller alle bildene ville prøve å laste på samme tid; vi vil opprette en egen funksjon for å gjøre dette
public class Img strekker MovieClip {public Div id:. Antall; private Var src: String; private Var imageLoader: Loader = new Loader (); private Var hoved: Galleri; private Var orgWidth: Antall = 0; private Var orgHeight: Antall = 0;

I konstruktøren, setter vi en referanse til hovedgalleri klassen slik at vi senere kan tilgangs elementer på scenen eller offentlige variabler og funksjoner av hovedklassen. Strengen "last" vil inneholde banen til bildet som php returnert, vil vi lagre det i en variabel, slik at vi får tilgang til den senere
offentlig funksjon Img. (Last: String, m: Galleri): void {orgWidth = bredde; orgHeight = høyde; Hoved = m; src = last; }

"loadImage" -funksjonen laster bildet og når du er ferdig kjører "displayImage" -funksjonen
offentlig funksjon loadImage (): void {imageLoader.load (ny URLRequest ("img /" + src));. imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, displayImage); }

displayImage funksjonen sjekker bildene matrisen vi laget og laster neste bilde. Det setter glatting å true på Loader (som standard er glatting satt til false på dynamisk lastet bilder). Når du begynner å skalere eller rotere et bilde er det viktig å sette glatting slik at bildet forblir kvaliteten. Som registreringspunktet for Img MovieClip er i sentrum vi trenger for å beregne x og y stilling hvor du vil plassere selve bildet. I mitt eksempel har jeg brukt en katalog av bilder med samme bredde og høyde. Hvis bredden og høyden på loaded bildet er variable er dette stedet for å endre størrelsen på fly. Like før du legger det som et barn vi satt beskrivelsen teksten til "src", som har navnet på bildet
privat funksjon displayImage (_E: Hendelses):. Void {if (main.images [id + 1]! = null & &! main.images [id + 1] .parent) main.images [id + 1] .loadImage (); Bitmap (imageLoader.content) .smoothing = true; imageLoader.x = main.spaceBetween /2 - (orgWidth /2); imageLoader.y = main.spaceBetween /2 - (orgHeight /2); descr.text = src; addChild (imageLoader); }}



Trinn 9

Etter de endringene vi har gjort i Img klassen vi trenger å oppdatere måten forekomstene kalles i loadImages funksjon av Gallery klassen. Vi trenger nå å passere to argumenter når du ringer nye Img ().

Den første er banen navnet på bildet som må lastes, får vi dette fra xml. Den andre er en referanse til hovedgalleri klasse; vi kan bruke "dette" som peker til den klassen vi for tiden arbeider i. I stedet for å legge til bilder med addChild til imagesClip container vil vi lage en ny funksjon "goto". Denne funksjonen vil fungere ut hvilke bilder som skal plasseres på skjermen. Argumentet vi må passere er id-nummer på bildet, det samme antallet som indeksen nøkkelen i bildene array. Når bildene er lastet for første gang, vil vi sette fokus på det første bildet, hvorav id-nummer er null
private funksjons loadImages. (_E: Arrangement): void {xdata = new XML (_E. target.data); Var i: Antall = 0; for hver (var img: XML i xdata.img) {bilder [i] = new Img (img, dette); bilder [i] .x = 200 * i; bilder [i] .id = i; i ++; } Goto (0);}



Step 10

For å bruke Goto funksjon vi trenger å erklære en variabel "imagesToShow" først. Dette vil sette antall bilder vi ønsker å laste samtidig på skjermen. For å bestemme retningen som brukeren er rulle, vi bare sjekke om bildet skal vi hadde en høyere eller lavere id-nummer enn det siste
privat funksjon goto (imgId: Number):. Void {var retning : Antall; if (orgImgId = imgId!) {if (imgId > orgImgId) retning = 1; andre retningen = -1;

Den neste "for loop" looper alle bilder som er nødvendig på skjermen. For eksempel: Hvis vi setter imagesToShow til 5, det vil sløyfe fra -2 til 2. Dette betyr at hvis vi passerer verdien av jeg til Img klassen kan vi bestemme hvor på skjermen skal det være plassert (-2 blir langt igjen , 0 center og to til høyre). Derfor kan vi skalere bildene større jo mer sentralt de er plassert.

Det er en ekstra sjekk inkludert så vi ikke aktiverer ikke-eksisterende bilder (den stopper ved den første og den siste). For hver av de aktive bildene vil vi kjøre "makeActive" -funksjonen, som vi skal lage senere
for (var i: Number = - Math.floor (imagesToShow /2); i < = Math.. etasje (imagesToShow /2); i ++) {if (imgId + i < images.length & & imgId + i > = 0) bilder [imgId + i] .makeActive (i, retning); }

Høyre etter å plassere bildene vi trenger på skjermen, vil vi sjekke hvilke som ikke skal være der lenger, og få dem av scenen. Ettersom alle bilder er lagt til imagesClip container, kan vi lett sløyfe gjennom alle barn som MovieClip. Hvis deres id ikke er innenfor de som skal være aktive, vi kjører "deaktiverer"
for (var j: Antall = 0; j < imagesClip.numChildren; j ++). {Var flis: Img = imagesClip.getChildAt ( j) som Img; if (tile.id < imgId - Math.floor (imagesToShow /2) || tile.id > imgId + Math.floor (imagesToShow /2)) tile.deActive (retning); }

Den neste linjen oppdaterer teksten i det dynamiske tekstfeltet vi opprettet tidligere. Siden IDer av bildene starte tellingen på 0 legger vi + 1 til imgId så det første bildet er faktisk nummer 1 etc. Vi kan få det totale antall bilder får tilgang lengden på bildene array.
CountTxt. text = imgId + 1 + "/" + images.length; }

Til slutt vil vi sette "orgImgId" så neste gang funksjonen er kjørt, den retningen som blir rullet kan bestemmes
orgImgId = imgId.; }



Step 11

Vi trenger nå de "makeActive" og "deaktiverer" funksjoner i Img klassen. Disse vil enten legge bildet til scenen, eller ta den av. For nå skal vi bare legge dem og plassere dem riktig. Senere vil vi også lom dem til riktig sted.

makeActive funksjonen sjekker først om det er lagt til imagesClip allerede. Hvis det ikke er noen overordnede funnet, legger den seg til å imagesClip container. Foreldrene er så imagesClip. Neste vi setter synlig eiendom til sann. Når deaktivering, setter vi den til false, så det er bare normalt vi ønsker vår bilde for å vise igjen når det er gjort aktiv
offentlig funksjon makeActive. (Posisjoner: Antall, retning: Number): void {if (forelder == null) { main.imagesClip.addChild (denne); } Synlig = true;

Det er en sjanse for at selve bildet har ennå ikke lastet. For å sjekke dette, sjekker jeg om mengden av barn er mindre enn 3. Dette antallet kan avhenge av mengden av figurer eller andre movieclips i din Img. Hvis du føler deg usikker på denne metoden, ville et tryggere alternativ være å erklære en boolsk i starten og sett den til stede i displayImage funksjon
if (numChildren < 3). LoadImage ();

Det er ingen dybde i AS3, men når vi begynner å skalere og rotere bildene våre må vi sørge for at bildet i midten er på toppen av de andre. Fordi vi passerte den posisjon som et argument i GoTo funksjon kan vi nå bruke den til å sette indeksen av bildet i imagesClip. Indeksen for et barn kan være i forhold til en dybde, men det vil ikke være noen problemer når du endrer det siden de andre movieclips vil flytte en indeks opp eller ned. Dette trinnet er ikke nødvendig hvis du ikke har tenkt å overlappe Images parent.setChildIndex (dette, (parent.numChildren-1) - Math.abs (stilling));.

Til slutt bestemmer vi posisjonen bildet. "Ekstra" variable brukes her for å finne ut av hvor mye det aktuelle bildet er borte fra sentrum. "DefaultWidth" og "spaceBetween" er offentlige variabler satt i hovedgalleri klassen slik at vi kan få tilgang til dem fra hvor som helst. Siden alle bildene i katalogen min har samme bredde, satt jeg defaultWidth på 195 og spaceBetween til 20. Å faktisk flytte bildet til den nye posisjonen vi setter x eiendom til nylig funnet x-verdien
Var ekstra. Antall = Math.round (stilling * (main.defaultWidth + main.spaceBetween)); Var newX: Number = Math.round ((main.stageWidth /2)) + ekstra; x = newX;}



Step 12

Den deaktiverer funksjonen er ganske rett frem, endrer den synligheten til false. Retningen er allerede satt som et argument siden vi trenger den senere å vite i hvilken retning de skal sende bildet når du tar den av scenen
offentlig funksjon deactive (retning: Number):. Void {synlig = false; }



Step 13

Nå de første bildene skal vises på scenen. Det er bare én funksjonalitet fortsatt savnet. Glideren er ikke koblet til GoTo funksjon enda. Men siden vi allerede sende en egendefinert hendelse når håndtaket er dratt, er det ikke veldig vanskelig å koble de to.

Legg til følgende linje til galleriet konstruktøren funksjon. Dette eventlistener vil kjøre lysbildefunksjonen hver gang "skyve" hendelse kalles av håndtaket
theHandle.addEventListener ("skyve", slide);.

Alt vi trenger lysbildefunksjonen å gjøre er å beregne hvilket bilde skal vises i sentrum avhengig av hvor håndtaket er. I funksjonen "slider" og "theHandle" er eksempel navnene vi satt tidligere på movieclips på scenen. For å finne ut hvilket bilde for å gå til vi først finne ut hvor stor prosentandel av håndtaket posisjon over glidebryteren lengde. Deretter multiplisere at ved summen av bildene bringer oss til det riktige bildet id
privat funksjon lysbilde (_E: Hendelses): void {var prosent. Antall = (theHandle.goToX - slider.x) /(slider.width - theHandle.width); Var imgId: Number = Math.round (prosent * (images.length - 1)); Goto (imgId);}



Step 14

Hvis du har klart å følge dette langt og holdt styr på hvilke klasser for å importere og hvilke variabler å erklære (eller fulgt kildefilene) du skal nå ha en fungerende eksempel.



Step 15

For å fullføre denne opplæringen vil vi legge tweening til bildene ved hjelp TweenLite, en gratis og lett tweening motor. Standard tweening klassene som tilbys av Adobe ikke utfører godt når det er mye å gå på. Når jeg prøver de ut at de brukes til å krasje eller fryse mye, mens jeg har ennå til å oppdage slike problemer med TweenLite. Syntaksen TweenLite er veldig enkelt. Jeg skal demonstrere dette ved å sammenligne den med en normal Flash tween; tweening et objekt fra sine nåværende x 100 og endre alfa til 0:
ny Tween (objekt, "x", Linear.easeOut, object.x, 100, 2, true); ny Tween (objekt, "alpha ', Linear.easeOut, object.alpha, 0, 2, true);

Nå her er den TweenLite alternativ syntaks:
TweenLite.to (objekt, 2, {x: 100, alpha: 0, lettelser: Linear .easeOut});



Step 16

La oss lage en ny funksjon der vi kan plassere alle de tweening handlinger. . Name it "flyTo" og plassere den i Img klassen
privat funksjon flyTo (newX: Antall, removeAfter: Boolean, skala: Number = 1): void {var tweeningOptions: Object = new Object; tweeningOptions.x = newX; if (removeAfter) {tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0,3; tweeningOptions.visible = false; } Else {tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = skala; tweeningOptions.rotation = (Math.random () * 20) - 10; } TweenLite.to (dette, 0,4, tweeningOptions);}

Det er 3 argumenter som trengs for denne funksjonen: x-verdien vi tidligere om det skal tas ut etter tween og skalaen beregnet,. Den "removedAfter" parameter vil bli brukt i den deaktiverer funksjonen, slik at synligheten av bildet kan settes til false når den er kommet til slutten av scenen. Skaleringsparameter brukes kun for sentrum bildet; vi vil vise den litt større enn resten.

La oss sjekke ut tweening alternativer for når bildet blir fjernet fra scenen. Først velger vi en lettere alternativ, i dette tilfellet "Linear.easeIn" som gir normal, lineær bevegelse. Dernest, fade vi alfa verdien til null slik at bildet fades bort. Deretter skalere det bare en liten prosentandel av sin bredde og høyde slik at det blir mindre ettersom den når enden. . Til slutt, når tween er ferdig, setter vi synligheten til false
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0,3; tweeningOptions.visible = false;

Når et bilde er aktiv, de tweening alternativene er forskjellige. Vi setter lettelser til "Back.easeOut" slik at bildene ser ut til å fly litt for langt og deretter sprette tilbake; en veldig subtil effekt. Neste vi endre alfa tilbake til en og skalere bildet til skalaverdi vi sendes til funksjonen. Til slutt satte vi en tilfeldig rotasjon på -10 til 10 grader. Hvis din beskrivelse teksten ikke lastes etter denne handlingen du må sørge for at skriften er innebygd
tweeningOptions.ease = Back.easeOut;. TweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = skala; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);



Step 17

Nå må vi oppdatere makeActive og deaktiverer funksjoner slik at de gjør bruk av den nye flyTo funksjon.

I makeActive funksjonen vi må legge til en x-verdi på bildet slik at det kan tweened fra det opprinnelige verdi. Den defaultWidth må settes i hovedgalleri klassen og inneholder bredden av scenen
offentlig funksjon makeActive (posisjoner: Antall, retning: Number):. Void {deaktivere = false; if (forelder == null) {x = (retning == 1 main.stageWidth + main.defaultWidth * 2: -? main.defaultWidth * 2); alpha = 0; main.imagesClip.addChild (denne); } Synlig = true; if (numChildren < 3) loadImage (); parent.setChildIndex (dette, (parent.numChildren-1) - Math.abs (stilling)); Var ekstra: Number = Math.round (stilling * (main.defaultWidth + main.spaceBetween)); Var newX: Number = (Math.round ((main.stageWidth /2) /* - (main.defaultWidth /2) * /) + ekstra); flyTo (newX, falsk, (posisjon == 0 1,2: 1)?);}

I deaktiverer funksjonen alt vi trenger å legge til er en moveTo verdi som inneholder x-verdien der bildet skal tween. Hvis vi finner dette til utenfor scenebredde, vil bildet forsvinner like utenfor scenen
offentlig funksjon deactive (retning: Number):. Void {if (! Deaktivering) {aktiv = false; (! retning = 1 main.stageWidth + main.defaultWidth * 2?: parent.x - main.defaultWidth * 2): var moveTo Number =; flyTo (moveTo, true); deaktivering = true; }}



Step 18

Etter oppdatering alt, har vi nå et funksjonelt galleri. For å se movieclips forsvinner fra scenen sjekke ut den fullstendige versjonen.



Konklusjon

Den endelige versjonen er fortsatt lav på funksjonalitet. De lastet bilder alle må være av samme størrelse og ikke har en større forhåndsvisning. Du kan legge til en nedskalering funksjon og et alternativ for å vise en større forhåndsvisning av bildet når klikket. Videre et alternativ til å bla til venstre eller høyre med knapper eller med et tastatur hendelse kan legges til.

Når du forstår konseptet med å bruke klasser for å skille og strukturere koden din det vil hjelpe i utvikling og gjøre ting enklere i det lange løp. Jeg håper du likte å følge med! Anmeldelser



Previous:
Next Page: