Build en Dynamic Video Player med Actionscript 3: Del 2 av 3
4
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Det er videre til del to av vår Custom AS3 Video Player! I forrige kapittel ble vi kjent med start filen, lagt noen interaktivitet til knappene og (viktigst) fikk video spilles.
I denne andre delen skal vi sette opp xml for all den videoer innstillinger. Vi vil endre hvordan vår spiller laster videoer og få preloaders jobber for alle våre miniatyrbilder. Vi vil være i stand til å legge til, endre og endre våre videoer på fly med XML. La oss komme i gang
Trinn 1: Opprett Thumbnails
Vi trenger å få et miniatyrbilde av alle videoene vi jobber med
Merk:.. Hvis du har fulgt de første par skritt i forrige tutorial bør du allerede har dette trinnet gjort Hvordan jeg pleier å gjøre dette på er å åpne video jeg jobber med i en spiller som VLC Player eller Wimpy Player og trykk på Kommando-Kontroll-Skift-3 Nå får beskjæringsverktøyet og beskjære bildet til nøyaktig piksel på alle fire sider. Nå trenger vi å endre størrelsen på vårt bilde til noen bestemte størrelser. Vi trenger en 145x60 px bildet for vår videominiatyrbilde. Hvis dette kommer til å være en av dine kjennetegnet video så vi trenger også en 82x82 px bilde for våre mange element miniatyrbilder, og hvis du ønsker å bruke en av disse bildene for noen av kategoriminiatyrbilder, da blir du nødt til å gjøre en 50x50 px bilde. Hvis du har et annet bilde du ønsker å representere en bestemt kategori så bare beskjære det til 50x50 størrelse og lagre den i riktig mappe. Nå lagre alle 82x82 px bilder til "output /flv /tommel /"-mappen omtalt. Lagre alle 145x60 px bilder til "output /flv /thumbs /video" -mappen. Og alle 82x82 px bilder til "output /flv /thumbs /populære" -mappen. Sørg for at du tildeler dem logiske navn du vil huske Nå bør du ha alle bildene satt opp og klar til å bli brakt inn i flash med xml Nå som vi har alle våre videominiatyr satt opp og klar til å gå, åpne din favoritt teksteditor (Dreamweaver i mitt tilfelle) og opprette en ny XML-fil. Først lagre filen i "output" -mappen som playlist.xml. Merk: Hvis du har fulgt de første par skritt i forrige tutorial bør du allerede har dette trinnet gjort Dette er den delen hvor du skal plassere alle videoene i bestemte områder. så vær oppmerksom. Første typen: Nå Vi legger hele resten av koden mellom disse to kodene. La oss lage tre gallerier. Nå legger dette: "GALLERI 1» vil bli vist i den første kategorien galleriet knappen ovenfor vår spilleliste på høyre sidebar så det det navnet du ønsker. Den neste GALLERY vil være navnet på den andre kategorien galleriet knappen og så videre. Merk: Dette er den eneste hardkodet del av denne spilleren. Jeg har bare satt det opp for 3 galleri faner, slik at du ikke kan legge noe mer slik det er i dag satt opp :( Nå trenger vi å skape noen kategorier. Her kan du ha så mange du vil i noen av de tre gallerier. For å gjøre dette må du legge til en "kategori" tag mellom noen av de tre gallerier. Så hvis du hadde et galleri med tittelen Sports, kan du opprette kategorier innenfor det sports galleriet for fotball, baseball, basketball, fotball, etc. Din kode skal nå se omtrent slik ut La oss se på hva vi har lagt til "KATEGORI" tag. Vi først ga den et navn. Det første eksemplet var «Kategori 1.1". Dette vil vises på den første kategorien i det første galleriet. Neste vi lagt desc = "VariousVideos", dette er en kort beskrivelse om bestemt kategori. Endelig har vi lagt vår tommel = "/thumbs /kategori flv /jdsmith-freak-alley.jpg". Dette kaller den .jpg bildet vi lagret i kategorien thumbnail mappen. Hvis du ønsker å bruke en annen en da bruke det. Jeg bare brukt tommelen vi allerede har Nå vil vi legge til videosignaler for de kategoriene. For å gjøre dette, legg til litt kode til en av de "kategori" tags. Her er et eksempel: La oss se på hva vi nettopp gjorde. Først må vi "element" tags. Disse holder hver av de spesifikke videoer og sin informasjon. Innenfor disse "element" tags vi har "< Filbane >" som peker til den spesifikke video beliggenhet. Da har vi "< file_width >" og "< file_height >" Disse setter filen bredde og høyde. Neste du har "< file_title >" som er navnet du ønsker å legge til denne videoen. Det vil bli vist på videominiatyrbilde under videoen i spilleren. Neste du har "< file_desc >" kode som igjen er en kort beskrivelse av den spesifikke video som skal vises under tittelen på videominiatyrknappen. Etter det har vi "< file_image >". Dette peker på miniatyrbildet av videoen. Da har vi "< featured_image >" tag som er mest sannsynlig den samme som miniatyr med mindre du ønsker å endre det å legge et banner eller noe. Til slutt har vi "< featured_or_not >" tag. Dette er enten satt til true av falsk. Hvis den er satt til true vil det bli innkalt til utvalgt boksen nedenfor spilleren i neste opplæringen. Vennligst bare åpne opp XML-fil jeg gitt og kopiere det til filen. Grunnen til dette er at det er mye kode, og du må sørge for at en av dine Galleries har nok kategorier for å fylle en scrollbar, og en av dine kategorier har nok Video elementer for å fylle en scrollbar. Vi vil være å gjøre rulle kort tid Bra, nå har vi vår xml fil satt opp og klar til å jobbe med. La oss hoppe tilbake til flash og åpne våre handlinger panel på første keyframe. Vi må sette opp noen variabler til hva vi har tenkt La oss nå faktisk legger i xml og bruke sporings uttalelse for å vise det. Legg denne koden til bunnen av vår Actionscript 3 lag tilbake i flash Hvis du nå teste filen du skal ha all den xml vi skrev i utgangspanelet. Bra, nå la oss bruke den. Merk: kommentere ut eller slette "trace (xml); linje etter testing Jeg synes det er irriterende når det dukker opp hver gang du tester, men gjøre hva du foretrekker Dette er variabler for våre galleri knapper og vår dynamisk tekst: Nå la oss legge til en lytter til vår xmlLoaded funksjon vi nettopp opprettet. Legg til denne linjen: Din kode for denne funksjonen skal nå se slik ut: La oss nå legge inn funksjonen for giveGalleryTitles lytteren La oss legge til noen flere variabler som peker til vårt hjem ikonknappen, vårt hjem ikon dynamisk tekst, sette vår currentGallery indeksen og skape en categoryThumbLoader å laste våre categoryThumbs La oss sette opp våre lyttere, buttonMode, og mouseChildren for vårt hjem ikonet. Denne knappen, når den klikkes, vil bringe brukeren fra alle nivå i høyre sidebar de kan være på til det øverste nivået i dagens galleriet de er i. Vi vil bruke dette i tredje opplæringen. Skriv inn følgende: Til slutt vil vi legge til en lytter til vår xmlLoaded funksjon under giveGalleryTitles lytteren makeGalleryItems (); Nå la oss lage funksjonen for denne lytteren Legg til en container til sidepanelet og plassere den 60 px ned slik at det er foret opp med bunnen av vår homeBtn. Inne i makeGalleryItems funksjonstype: Nå sidefeltet vil ha en usynlig beholder inni det at vi vil nå fylle, og navnet på hjem-knappen tekstboksen skal fylles i henhold til uansett galleriet vi er på OK, nå vil vi legge til en for uttalelse som vil sløyfe gjennom vår xml og fylle beholderen med noen miniatyrbilder. Legg denne koden til makeGalleryItems funksjon under alt annet: Wow, la oss gå over hva vi nettopp gjorde. Det bør kommenteres også, men her er en rask oppsummering: Først bruker vi en løkke utsagn for å få antall kategorier vi har i vår currentGallery (det er satt til 0 akkurat nå som er det første galleriet i vår xml Neste vi opprettet en ny forekomst av vår categoryItem MovieClip i vårt bibliotek. Så vi satt sitt navn og beskrivelse. Da vi satte den på sitt x plasseringen av 0. Vi satt sin y posisjon til høyden vår categoryItem og deretter multiplisert det med i. Vi setter buttonMode og MouseChildren for miniatyrbildet. Vi har lagt til et navn til elementet også bruke "i" variabel. Så vi har lagt våre lyttere for velt. Sette sitt første alpha til 0. Brukes Tweener klassen for å bringe sin alfa til en så det blekner videre. Så vi faktisk lagt categoryItem til scenen inne i contentHolder, og til slutt vi lagt en til "i" variabel. Hvis du tester nå vil du se dine categoryItems blir befolket på scenen i contentHolder. Også hvis du roll varene de skal ha velt og rollouts Vi trenger nå å legge til en if setning for å tilbake at "i" variabel når vi klikker et galleri knappen eller vårt hjem-knappen, ellers miniatyrbildene vil ikke starte på toppen igjen. Legg denne koden til vår make galleri elementer funksjon, over vår for uttalelse: Nå la oss gå tilbake til vår for uttalelse vi arbeider med. Vi må legge til noen kode for å få inn miniatyrene. Legg denne koden ovenfor "container_mc.addChild (categoryItem);" . linjen og under vår "Tweener.addTween ..." linje: Vi er ikke klar for testing ennå. Først la oss gå over hva vi har nettopp skrevet. Vi skapte en categoryThumbURL og knyttet det til navnet på vår kategori i vår xml. Så vi laget en ny Loader kalt categoryThumbLoader å laste tomlene. Neste vi lastet tommelen deretter plassert dem i deres x- og y-stillinger inne i categoryItem MovieClip. Så vi lagt det til scenen på categoryItem lag av 3. Grunnen til det er vi trenger å være under preloader som er der og ikke dekke det opp. Så vi satt en lytter som lytter for gjennomføring av de belastede miniatyr La oss nå legge funksjonen for "categoryThumbLoaded" Vi legge funksjonen under all vår kode. Det vil bli kvitt den categoryThumb sin preloader Her har vi laget en variabel vi vil bare bruke her for å målrette categoryItemPreloader_mc i categoryItem_mc blir eksportert fra vårt bibliotek. Hvis du tester nå vil du laster ned filen og preloaders bør raskt forsvinne. Hvis du tester på nettet de skulle bli litt lenger avhengig av din internett hastighet Her er hva vår endelige koden skal se ut for makeGalleryItems funksjon. Test din film nå, din kategori elementer skal ha miniatyr og preloader bør tween av når tommelen er lastet Vi trenger å sette opp et par lytterne for våre galleri knapper som vil avgjøre hvilken som er aktiv og hvilke som har velt og rollouts. Legg dette til toppen av koden under de andre lyttere: La oss nå legge inn funksjonen for addEventListenersForGalleryBtns lytteren. Legg inn denne koden under alt annet: Her har vi et par hvis uttalelser som skal kjøre når filen åpnes, og også når du klikker et galleri knappen og hjem-knappen. De ganske mye slå på og av spesiell knapp. Merk: Dette kunne vært gjort med en bryter uttalelse som ville ha vært litt renere. Så gjør at hvis du ønsker Vi bør få galleriet knappene fungerer og fungerer litt bedre med denne koden: Nå la oss legge til funksjoner for å håndtere knapp 3 galleriets KLIKK hendelser Det vi gjør er å sjekke for å se hvilke currentGallery vi er på (og ikke på) og utføre sin funksjon. Vi har også en ny ting med Tweeners. Vi ringer en funksjon når tween er ferdig som faktisk fjerner galleriet fra beholderen MovieClip. Så nå må vi legge de 3 funksjonene nedenfor: Disse 3 funksjoner vil fjerne "galleryItems" fra beholderen. Vi ville ikke trenger dette trinnet hvis vi ikke tween vår container_mc alfa til 0 før vi ryddet det. Du skal nå kunne teste filen og klikk 3 galleri knapper for å veksle mellom dem Nå ønsker vi å legge til noen vars å gjøre vår tilpassede scrollbar. Det vi trenger å gjøre i de neste par skritt er å skape en scrollbar, sjekk for å se om beholderen høyden er høyere enn den scroller og hvis så knytte scrollbar til container_mc MovieClip. Høres enkelt, la oss få koding ... Først legge til noen variabler for korte navne formål Nå kan du legge noen lyttere og buttonMode /mouseChildren Legg til en lytter til makeGalleryItems funksjonen. Plassere lytteren utenfor for uttalelse, under den siste avsluttende brakett La oss legge til funksjonen for denne lytteren som går etter at vi har loopet gjennom for uttalelsen under all vår kode så langt Vi sjekket for å se om container_mc høyde er større enn sideScrollbarMasker høyde. Hvis så det gjør sideScrollbarThumb synlig, setter det er alfa til 0 og deretter tweens den på. Hvis det ikke er høy nok, vi lom den av og kjøre en liten funksjon som virker etter tween for å gjøre sideScrollbarThumb ikke synlig. Hvis du tester filmen og flytte fra ett galleri knappen til den andre rullefeltet bør sjekke for å se om det viser eller ikke. I så fall vil det lom på, og hvis ikke vil det lom seg. Kom igjen, gi det et forsøk Nå må vi sette noen variabler for side scrollbar å få det fungerer når det viser. Legg denne koden til bunnen av listen over variabler vi har tenkt
på Mac eller Print Screen
knappen på PC. Når du har gjort dette, åpne opp Photoshop og lage et nytt tomt dokument. Deretter forbi utklippstavle innholdet på lerretet. Kommando-v
på Mac Ctrl-v
på PC.
Trinn 2:..! XML Fun
< INNHOLD > < /INNHOLD >
< INNHOLD > < GALLERI name = "GALLERI 1" > < /GALLERI > < GALLERI name = "GALLERI 2" > < /GALLERI > < GALLERI name = "GALLERI 3" > < /GALLERI > < /INNHOLD >
Trinn 3: Kategorier
. < INNHOLD > < GALLERI name = "GALLERI 1" > < KATEGORI name = "Kategori 1.1 "desc =" Ulike Videos "tommel =" /thumbs /kategori flv /jdsmith-freak-alley.jpg "> < /KATEGORI > < KATEGORI name =" Kategori 1.2 "desc =" Ulike Videos "tommel =" flv /tommel /kategori /gh1test.jpg "> < /Kategori > < KATEGORI name =" Kategori 1.3 "desc =" Ulike Videos "tommel =" flv /thumbs /kategori /gh1test.jpg "> < /KATEGORI > < KATEGORI name = "Kategori 1.4" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < /GALLERI > < GALLERI name = "GALLERI 2" > < KATEGORI name = "Kategori 2.1" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < KATEGORI name = "Kategori 2.2" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < KATEGORI name = "Kategori 2.3" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < /GALLERI > < GALLERI name = "GALLERI 3" > < KATEGORI name = "Kategori 3.1" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < KATEGORI name = "Kategori 3.2" desc = "Ulike Videos" tommel = "flv /thumbs /kategori /gh1test.jpg" > < /KATEGORI > < /GALLERI > < /INNHOLD >
Trinn 4:. Legg Video Tags
< INNHOLD > < GALLERI name = "GALLERI 1" > < KATEGORI name = "Kategori 1.1" desc = "Ulike Videos" tommel = "/thumbs /kategori flv /jdsmith-freak-alley.jpg" > < SAK > < Filbane > flv /jdsmith-freak-alley.flv < /Filbane > < file_width > 496 < /file_width > < file_height > 279 < /file_height > < file_title > JDSmith Freak Alley < /file_title > < file_desc > Stop Motion Video < /file_desc > < file_image > flv /thumbs /video /jdsmith-freak-alley.jpg < /file_image > < featured_image > flv /thumbs /populære /jdsmith-freak-alley.jpg < /featured_image > < featured_or_not > ekte < /featured_or_not > < /SAK > < SAK > < Filbane > flv /bsu-basketball-open.f4v < /Filbane > < file_width > 500 < /file_width > < file_height > 281 < /file_height > < file_title > BSU Basketball < /file_title > < file_desc > Spill Opener < /file_desc > < file_image > flv /thumbs /video /bsu-basketball-open.jpg < /file_image > < featured_image > flv /thumbs /populære /bsu-basketball-open.jpg < /featured_image > < featured_or_not > ekte < /featured_or_not > < /SAK > < SAK > < Filbane > flv /bsu-fotball-open.flv < /Filbane > < file_width > 500 < /file_width > < file_height > 281 < /file_height > < file_title > BSU Football < /file_title > < file_desc > Spill Opener < /file_desc > < file_image > flv /thumbs /video /bsu-fotball-open.jpg < /file_image > < featured_image > flv /thumbs /populære /bsu-fotball-open.jpg < /featured_image > < featured_or_not > ekte < /featured_or_not > < /SAK > < /KATEGORI > < /GALLERI > < GALLERI name = "GALLERI 2" > < /GALLERI > < GALLERI name = "GALLERI 3" > < /GALLERI > < /INNHOLD >
Trinn 5:. Sett opp Variabler
Var container_mc:. MovieClip; //Oppretter et tomt MovieClip å holde våre elementer i riktig sidebar Var XMLPATH: String = "playlist.xml"; //Banen til xml filevar xml: XML; //Oppretter et nytt XML objectvar loader = new URLLoader (); //Oppretter et nytt lasteren å laste xml
Trinn 6: Legg i xml
loader.load (ny URLRequest (XMLPATH).); //Laste xmlloader.addEventListener (Event.COMPLETE, xmlLoaded); //Lytteren for når xml er loadedfunction xmlLoaded (hendelse: Hendelse): void {if ((event.target som URLLoader) = null!) //Hvis vår xml er ikke lik null deretter kjøre denne funksjonen {xml = new XML (loader.data); //Tilordne XML dumper data til xml variabel loader.removeEventListener (Event.COMPLETE, xmlLoaded); //Fjerne vår lytteren fra scenen nå at filen er lastet trace (xml); //Spore vår xml å sikre at det lagt riktig}}
Trinn 7.. : Legg til flere variabler
Var gallery1Btn = rightSidebar_mc.gallery1Btn_mc; //mål det første galleriet knappen over høyre sidebarvar gallery2Btn = rightSidebar_mc.gallery2Btn_mc; //rettet mot midten galleriet knappen over høyre sidebarvar gallery3Btn = rightSidebar_mc.gallery3Btn_mc; //mål riktig galleriet knappen over høyre sidebarvar gallery1BtnTxt = rightSidebar_mc.gallery1Btn_mc.galleryTitle1_txt; //mål det dynamiske tekst i første galleriet buttonvar gallery2BtnTxt = rightSidebar_mc. gallery2Btn_mc.galleryTitle2_txt; //rettet mot dynamisk tekst i andre galleriet buttonvar gallery3BtnTxt = rightSidebar_mc.gallery3Btn_mc.galleryTitle3_txt; //mål på dynamisk tekst i tredje galleriet knappen
Trinn 8: Galleri Button Titler
giveGalleryTitles ();
funksjonen xmlLoaded (hendelse: Hendelse): void {if ((event.target som URLLoader) = null ) {xml = new XML (loader.data); //Setter xml variabelen til xml data vi bare lagt i loader.removeEventListener (Event.COMPLETE, xmlLoaded); //Fjerne lytteren fordi vi ikke trenger det lenger giveGalleryTitles (); //Lytteren for en funksjon som vil se gjennom xml å komme og sette galleriet titler //trace (xml); . //Uncomment å se xml spores ut i utgangsvinduet}}
funksjons giveGalleryTitles ():. Void {gallery1BtnTxt.text = xml.GALLERY @ navn [0 ]; . //Vise navnet på galleriet fra xml i den første knappen galleriets dynamisk tekstfelt gallery2BtnTxt.text = xml.GALLERY @ navn [1]; gallery3BtnTxt.text = xml.GALLERY @ navn [2].; }
Trinn 9:. Legg Some More Variabler
Var homeBtn = rightSidebar_mc.displayBar_mc.homeBtn_mc; //Rettet på hjem-knappen i riktig sidebarvar homeBtnTxt = rightSidebar_mc.displayBar_mc.galleryTitle_txt; //Rettet mot hjemme knappens tekst i høyre sidebar til høyre for buttonvar currentGallery: Antall = 0; //Setter en variabel for å hol dagens galleri nummer - satt til 0 nowvar i: Antall = 0; //Variabel som brukes til å telle de kategoriene vi vil skape soonvar categoryThumbLoader: Loader; //Oppretter et nytt loader for kategorien varen MovieClip miniatyr
Trinn 10: Lyttere for Home Button
homeBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); homeBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); homeBtn.buttonMode = true; homeBtn.mouseChildren = false;
Trinn 11:.
Thumbnails
funksjons makeGalleryItems ():. void {}
Trinn 12: Legg en Container
container_mc = new MovieClip (); //Oppretter et nytt containercontainer_mc.x = 0; //Satt beholderne x positioncontainer_mc.y = 60; //Satt beholderne y positionsidebarBox.addChild (container_mc); //Legger beholderen til høyre sidebarhomeBtnTxt.text = xml.GALLERY @ navn [currentGallery].; //Satt tekstfeltet i høyre sidebar å vise hva dagens galleri vi er på
Trinn 13:. Legg en For Statement
for hver (var galleryNode: XML i xml.GALLERY [currentGallery] .CATEGORY) //skape en galleryNode variabel for hver av våre kategori koder i dagens galleri basert på xml {var categoryItem: categoryItem_mc = new categoryItem_mc (); //Oppretter et nytt categoryItem_mc fra biblioteket categoryItem.categoryItemTitle_txt.text = galleryNode @ navn.; //Satt tittelen tekstfeltet til hva xml sier categoryItem.categoryItemDesc_txt.text = galleryNode @ synkende.; //Setter sin beskrivelse tekstfeltet til hva xml sier categoryItem.x = 0; //Satt sin x posisjon categoryItem.y = categoryItem.height * i; //Satt sin y posisjon - hver gang det multipliseres med i variabelen som har en lagt til den hver gang gjennom categoryItem.buttonMode = true; categoryItem.mouseChildren = false; categoryItem.name = "" + i; //Gi elementet et bestemt navn, slik at vi kan bruke det senere for å laste inn videoer categoryItem.addEventListener (MouseEvent.MOUSE_OVER, btnOver); categoryItem.addEventListener (MouseEvent.MOUSE_OUT, btnOut); container_mc.alpha = 0; //Satt sin alfa til 0, slik at vi kan tween det på Tweener.addTween (container_mc, {alfa: 1, tid: 0,5, overgang: "easeOut"}); //Tween sin alfa til en container_mc.addChild (categoryItem); //Legger categoryItem til container_mc MovieClip i høyre sidebar i ++; //Legger en til jeg variabel hver gang vi sløyfe gjennom}
) vil vi endre det når vi klikker på en av Galleri knappene. Når det skjer, kroppen av dette for utsagn vil kjøre hver gang den treffer en KATEGORI tag.
Trinn 14:. Reset i
if (i > 0) //hvis variabel jeg er større enn 0, så ... {i = 0; //Gjør jeg variable 0}
Trinn 15: Håndter categoryItem Thumbnails
Var categoryThumbURL = galleryNode @ tommel; //Oppretter en variabel som vi vil bruke for å få den kategorien miniatyr i xmlcategoryThumbLoader = new Loader (); //Oppretter et nytt lasteren å holde thumbnailcategoryThumbLoader.load (ny URLRequest (categoryThumbURL)); //Laste thumbnailcategoryThumbLoader.x = 5; categoryThumbLoader.y = 4; categoryItem.addChildAt (categoryThumbLoader, 3); //Legger categoryThumbLoader til categoryItem på sitt tredje layercategoryThumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, categoryThumbLoaded); //Lytteren for når miniatyr er lastet
Trinn 16:.. CategoryThumbLoaded
funksjon categoryThumbLoaded (hendelse: Hendelse):. Void {categoryThumbLoader.contentLoaderInfo.removeEventListener (Event.COMPLETE, categoryThumbLoaded); //Fjerne loader komplett lytteren Var categoryPreloader = event.target.loader.parent.categoryItemPreloader_mc; //Målrette elementer preloader og lagre den i en variabel Tweener.addTween (categoryPreloader, {alfa: 0, tid: 1,5, overgang: "easeOut"}); //Bruke variabelen for å målrette preloader og tween sin alfa til 0, så det er borte}
Funksjons makeGalleryItems (): void {container_mc = new MovieClip (); container_mc.x = 0; container_mc.y = 60; sidebarBox.addChild (container_mc); homeBtnTxt.text = xml.GALLERY @ navn [currentGallery].; if (i > 0) {i = 0; } For hver (var galleryNode: XML i xml.GALLERY [currentGallery] .CATEGORY) {var categoryItem: categoryItem_mc = new categoryItem_mc (); categoryItem.categoryItemTitle_txt.text = galleryNode @ navn.; categoryItem.categoryItemDesc_txt.text = galleryNode @ synkende.; categoryItem.x = 0; categoryItem.y = categoryItem.height * i; categoryItem.buttonMode = true; categoryItem.mouseChildren = false; categoryItem.name = "" + i; categoryItem.addEventListener (MouseEvent.MOUSE_OVER, btnOver); categoryItem.addEventListener (MouseEvent.MOUSE_OUT, btnOut); container_mc.alpha = 0; Tweener.addTween (container_mc, {alfa: 1, tid: 0,5, overgang: "easeOut"}); . Var categoryThumbURL = galleryNode @ tommel; categoryThumbLoader = new Loader (); categoryThumbLoader.load (ny URLRequest (categoryThumbURL)); categoryThumbLoader.x = 5; categoryThumbLoader.y = 4; categoryItem.addChildAt (categoryThumbLoader, 3); categoryThumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, categoryThumbLoaded); container_mc.addChild (categoryItem); i ++; }}
Trinn 17:. Funksjonalitet for Gallery Knapper
addEventListenersForGalleryBtns ();
funksjons addEventListenersForGalleryBtns (): void {if (currentGallery == 0) //hvis vår nåværende galleri variabelen er satt til "0" og deretter kjøre kroppen under {gallery1Btn.removeEventListener (MouseEvent.MOUSE_OVER , btnOver); //Fjerne gallery1Btn lytteren for btnOver funksjon gallery1Btn.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); //Fjerner gallery1Btn lytteren for btnOut funksjon gallery1Btn.gotoAndStop ("aktiv"); //Gå til den aktive rammen etiketten i gallery1Btn MovieClip gallery2Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); //Legger gallery2Btn MovieClip lytteren for btnOver funksjon gallery2Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery2Btn.gotoAndStop ("ut"); gallery3Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery3Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery3Btn.gotoAndStop ("ut"); } If (currentGallery == 1) {gallery1Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery1Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery1Btn.gotoAndStop ("ut"); gallery2Btn.removeEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery2Btn.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery2Btn.gotoAndStop ("aktiv"); gallery3Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery3Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery3Btn.gotoAndStop ("ut"); } If (currentGallery == 2) {gallery1Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery1Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery1Btn.gotoAndStop ("ut"); gallery2Btn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery2Btn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery2Btn.gotoAndStop ("ut"); gallery3Btn.removeEventListener (MouseEvent.MOUSE_OVER, btnOver); gallery3Btn.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); gallery3Btn.gotoAndStop ("aktiv"); }}
Dette fungerer ikke om før vi legger lytterne for våre galleri knapper, men det er hva vi skal gjøre videre
Trinn 18:.. Lyttere, mouseChildren og buttonMode
gallery1Btn.addEventListener (MouseEvent.CLICK, galleryBtnClick0); //Legge en lytter for et klikk på gallery1Btn gallery2Btn.addEventListener (MouseEvent.CLICK, galleryBtnClick1); gallery3Btn.addEventListener (MouseEvent.CLICK, galleryBtnClick2); gallery1Btn.buttonMode = true; //Satt buttonMode å truegallery1Btn.mouseChildren = false; gallery2Btn.buttonMode = true; gallery2Btn.mouseChildren = false; gallery3Btn.buttonMode = true; gallery3Btn.buttonMode = false;
funksjon galleryBtnClick0 (event: MouseEvent):. void {if (currentGallery = 0!) //hvis den nåværende galleriet variabel er ikke lik 0 og deretter kjøre kroppen koden under {Tweener.addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery0}); //Lom container_mc til en alfa 0. på ferdig kjører removeGallery0 funksjon}} funksjon galleryBtnClick1 (event: MouseEvent): void {if (! CurrentGallery = 1) {Tweener.addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery1}); }} Funksjon galleryBtnClick2 (event: MouseEvent): void {if (currentGallery = 2!) {Tweener.addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery2}); }}
funksjon removeGallery0 (): void {currentGallery = 0; //Setter currentGallery funksjonen til 0 addEventListenersForGalleryBtns (); //Kjøre denne funksjonen sidebarBox.removeChild (container_mc); //Fjerne container_mc fra sidebarBox makeGalleryItems (); //Kjøre denne funksjonen} funksjonen removeGallery1 (): void {currentGallery = 1; addEventListenersForGalleryBtns (); sidebarBox.removeChild (container_mc); makeGalleryItems (); } Funksjon removeGallery2 (): void {currentGallery = 2; addEventListenersForGalleryBtns (); sidebarBox.removeChild (container_mc); makeGalleryItems (); }
Trinn 19: Scrollbar
Var sideScrollbarMasker:. MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarMask_mc; //Rettet mot den siden scrollbar masken Var sideScrollbarThumb: MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarThumb_mc; //Rettet mot den siden scrollber thumbvar sideScrollbarTrack: MovieClip = rightSidebar_mc.sideScrollbar_mc.sideScrollbarTrack_mc; //Mål siden scrollbar spor
sideScrollbarThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver.); sideScrollbarThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); sideScrollbarThumb.buttonMode = true; sideScrollbarThumb.mouseChildren = false;
Trinn 20: Kontrollere Container Høyde
checkContainerHeight (.); //Kjøre denne funksjonen
funksjon checkContainerHeight (): void {if (container_mc.height >. sideScrollbarMasker.height) //hvis beholderen holder categoryItem movieclips er høyere enn sideScrollbarMasker høyde da ... {sideScrollbarThumb.visible = true; //Gjøre tommelen scrubber synlig sideScrollbarThumb.alpha = 0; //Satt sin alfa til 0 Tweener.addTween (sideScrollbarThumb, {alfa: 1, tid: 0,5, overgang: "easeOut"}); //Tween det er alfa til en} else {Tweener.addTween (sideScrollbarThumb, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: hideSideScrollbarThumb}); annet tween sin alfa til 0 og deretter kjøre en funksjon for å gjøre det ikke synlig}} funksjon hideSideScrollbarThumb (): void {sideScrollbarThumb.visible = false; //Gjøre sideScrollbarThumb MovieClip ikke synlig}
Trinn 21:. Side Scrollbar Vars
Var yVerdi. Antall; //Variabel for å holde avstand fra vår mus til 0,0 stilling av scrubber tommelen Var yMin: Antall = 0; //Angi minimumshøyden vi ønsker scrubber å gå Tovar yMax: Number;