Share
ActionScript 3.0 tillater Flash-utviklere og designere å gjøre alle slags ting i Flash relativt enkelt. Denne opplæringen vil lære deg hvordan du lager din egen ActionScript 3.0 MP3-spiller med lydspekter, albumkunst, fargeskifter og sanginformasjonsdisplay.
Begynn med å opprette et nytt ActionScript 3.0-dokument. Still scenestørrelsen til 600px x 600px og 30 FPS. Jeg har valgt # 333333 som bakgrunnsfargen min.
Gå til Arkiv> Importer> Importer til bibliotek ... og importer et bilde (jeg har endret en del av en iPod fra free4illustrator.com for dette eksempelet. Du bør bruke et .png-format i stedet for .jpg-format for å utnytte gjennomsiktigheten for din gjenstand.). Etter å ha importert bildet, åpne biblioteket ditt (Ctrl + L) og dra .png til scenen.
Velg bildet og konverter det til et filmklippsymbol (F8). Gi det navnet "Ipod" eller et annet navn hvis du foretrekker det. Jeg har valgt øverste venstre hjørne som registreringspunkt.
Dobbeltklikk på "Ipod" movieclip-symbol for å skrive inn tidslinjen. Pass på at du er inne i movieclip og ikke "Scene 1".
I baren Tidslinje, sett inn et nytt lag over "IpodBody" -laget, og merk det "Knappelag". Vi legger alle våre knappsymboler i dette laget.
Bruk Rectangle Tool, # 00ff00 som fyllfarge og fargeløs som slagfargen. Vi trenger ikke et slag her, og faktisk kan fyllfarge være hvilken som helst farge du vil, det vil ikke bli vist i sluttresultatet. Tegn en form over det forrige ikonet, som ligner på bildet nedenfor:
Konverter formen som du nettopp har trukket inn i et knappesymbol (F8) og betegne "prev" som vist på bildet nedenfor:
Gi "prev" -knappsymbolet et instansnavn. Jeg har kalt den "prevBtn" og endret Color Style to Alpha med 0%.
Følgende trinn vil trenge det samme knappesymbolet som "prev" -knappsymbolet. Kopier "prev" -knappsymbolet og lim det inn på "Neste" -ikonet på bitmappen din. For å duplisere dette symbolet, gå til Egenskapslinje og klikk på "Bytt". Et swap-symbolvindu vil dukke opp, på hvilket tidspunkt må du klikke på "Kopier symbol" (pass på at du velger "prev" -knappssymbolet.). Gi det navnet "neste".
Nå har vi et nytt symbol som ligner på "prev" -symbolet, men heter "neste". Gi dette symbolet et instansnavn for "nextBtn". Fargestilen forblir alfa 0%.
Gjenta trinn 9 - 10 ved å duplisere "prev" -symbolet for å lage "play", "pause" og "stop" -symbolene. Tilordne instansnavnene til henholdsvis "playBtn", "pauseBtn" og "stopBtn".
Sett inn et nytt lag over "Buttons Layer" og navnet "Text".
Tegn en tekstboks som ligner på bildet som er vist nedenfor i "Text" -laget. Angi "Dynamic Text" som teksttype, tilordne instansnavnet "titleTxt", Arial font face, Skriftstørrelse satt til 12px og fet, hvit farge (#ffffff) og justert til sentrum.
Opprett en annen tekstboks rett under tekstboksen "titleTxt". Angi denne nye tekstboksen som dynamisk tekst, gi den et instansnavn på "artistTxt", med Arial-skriftfarge, skriftstørrelse satt til 10px, hvit farge (#ffffff) og igjen, justert til sentrum.
Sett inn et nytt lag over "Text" -laget, og merk det "Color Changer".
Bruk Rectangle Tool og sett # ff0000 som fyllfarge. Tegn et lite firkant på 14px X 14px i øverste høyre hjørne av iPod-skjermen, og konverter det til et knappesymbol (F8) med navnet "rødt". Gi det et instansnavn for "redBtn".
Gjenta trinn 16 og lag 2 flere firkanter. Fyll ett felt med # ffff00, betegne det "gul" og tilordne et instansnavn for "yellowBtn". Fyll den andre firkanten med # 66ccff, betegne den "blå" med et instansnavn på "blueBtn". Du kan angi dette til hvilken som helst farge du vil, det vil tillate brukeren å endre lydspektrumfarge.
Sett inn et nytt lag over "Color Changer" -laget, og kaller det "ActionScript Layer".
Fra dette øyeblikket skal vi spille med ActionScript 3.0. På den første Keyframe av "Actionscript Layer" trykk F9. Et handlingsvindu vil dukke opp. Vi legger inn skriptet vårt i dette vinduet senere.
Først må vi fortelle Flash hva hva ipod-spilleren inneholder og dets egenskaper. Det er flere variabler vi trenger. Når Flash har lastet helt, trenger vi det til å begynne å kjøre. Funksjonen "Lastet" starter umiddelbart. Lasteren laster en XML-fil, hvis sti er oppgitt i "URLRequest" av "Loader". Vi lager senere "musiclist.xml" -filen for denne iPod-spilleren.
Accentsconagua
var musicReq: URLRequest; var thumbReq: URLRequest; Var musikk: Lyd = Ny lyd (); var sndC: SoundChannel; var nåværendeSnd: Lyd = musikk; var posisjon: tall; var currentIndex: Number = 0; var sangPaused: boolsk; var sangStoppet: boolsk; var lineClr: uint; var changeClr: boolsk; var xml: XML; var sangliste: XMLList; var loader: URLLoader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, Loaded); loader.load (ny URLRequest ("musiclist.xml")); Senere lager vi albumkunst som vises på skjermen til iPod-spilleren. Følgende skript angir koordinatene til albumkunst, som vil bli holdt i et filmklippsymbol.
var thumbHd: MovieClip = ny MovieClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
La oss nå definere funksjonen "Lastet". Vi vil at det skal gå til XML og hente sangadressen som skal spilles av i spilleren. Når sangen er lastet, vil den spille umiddelbart, og albumkunst for sangen blir lastet samtidig. Når sangen er ferdig med å spille, begynner den å spille neste sang.
funksjon Loaded (e: Event): void xml = new XML (e.target.data); sangliste = xml.song; musicReq = ny URLRequest (sangliste [0] .url); thumbReq = ny URLRequest (sangliste [0] .thumb); music.load (musicReq); sndC = music.play (); titleTxt.text = songList [0] .title; artistTxt.text = songList [0] .artist; loadThumb (); sndC.addEventListener (Event.SOUND_COMPLETE, nextSong);
Nå skal vi definere funksjonen "loadThumb". Når tommelen er lastet, vil den fortelle Flash for å starte funksjonen "thumbLoaded". Denne funksjonen vil legge til en filmklipp som inneholder albumkunst.
funksjon loadThumb (): void var thumbLoader: Loader = new Loader (); thumbReq = ny URLRequest (sangliste [currentIndex] .thumb); thumbLoader.load (thumbReq); thumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded); funksjon thumbLoaded (e: Event): void var thumb: Bitmap = (Bitmap) (e.target.content); var holder: MovieClip = thumbHd; holder.addChild (tommel);
Her har jeg uttalt at knappene vi opprettet har sine respektive funksjoner. For å tillate brukere å klikke på knappen og utføre funksjonen, bruker vi "MouseEvent.CLICK". Alle funksjonene til de respektive knappene vil bli nevnt i de neste trinnene.
prevBtn.addEventListener (MouseEvent.CLICK, prevSong); nextBtn.addEventListener (MouseEvent.CLICK, nextSong); playBtn.addEventListener (MouseEvent.CLICK, playSong); pauseBtn.addEventListener (MouseEvent.CLICK, pauseSong); stopBtn.addEventListener (MouseEvent.CLICK, stopSong);
"prevBtn" (Forrige knapp) -funksjon, definer "prevSong":
funksjon prevSong (e: Event): void if (currentIndex> 0) currentIndex--; else currentIndex = songList.length () - 1; var prevReq: URLRequest = ny URLRequest (sangliste [currentIndex] .url); var prevPlay: Lyd = nytt lyd (prevReq); sndC.stop (); titleTxt.text = songList [currentIndex] .title; artistTxt.text = songList [currentIndex] .artist; sndC = prevPlay.play (); currentSnd = prevPlay; songPaused = false; loadThumb (); sndC.addEventListener (Event.SOUND_COMPLETE, nextSong);
"nextBtn" (Next button) -funksjonen, definer "nextSong":
funksjon nextSong (e: Event): void if (currentIndex < (songList.length() - 1)) currentIndex++; else currentIndex = 0; var nextReq:URLRequest = new URLRequest(songList[currentIndex].url); var nextPlay:Sound = new Sound(nextReq); sndC.stop(); titleTxt.text = songList[currentIndex].title; artistTxt.text = songList[currentIndex].artist; sndC = nextPlay.play(); currentSnd = nextPlay; songPaused = false; loadThumb(); sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
"playBtn" (Play button) -funksjonen, definer "playSong":
funksjon playSong (e: Event): void if (songPaused) sndC = currentSnd.play (posisjon); songPaused = false; annet hvis (songStopped) sndC = currentSnd.play (posisjon); songStopped = false; ellers hvis (! sndC) sndC = currentSnd.play (posisjon);
"pauseBtn" (Pause-knapp) -funksjon, definer "pauseSong":
funksjon pauseSong (e: Event): void if (sndC) posisjon = sndC.position; sndC.stop (); songPaused = true;
"stopBtn" (Stoppknapp) -funksjonen, definer "stopSong":
funksjon stopSong (e: Event): void sndC.stop (); posisjon = 0; songStopped = true;
Vi har nå bygget spillerkontrollene.
Knappene vi opprettet i trinnene 15-17 er ikke ubrukelige. Vi må nå fortelle Flash hva deres rolle er innenfor spilleren:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeYellow); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Hver farget knapp har sin respektive funksjon. "changeRed" vil sette spekterets linje til "0xFF0000" (Rød). "changeYellow" vil sette den til "0xFFFF00" (gul) og "changeBlue" vil angi "0x66CCFF" (Cyan). Vi vil også ha Flash for å vite at når vi klikker på rød farge, vil den arve 100% opacity mens de andre får 50% opacity
Merk: I ActionScript 3.0, 100% = 1, 10% = 0,1 og så videre.
Alle fargede knapper vil ha denne funksjonen, så vi må oppgi knappene på knappen i hver funksjon.
funksjonsendringRed (e: Event): void lineClr = 0xFF0000; changeClr = true; redBtn.alpha = 1; yellowBtn.alpha = 0.5; blueBtn.alpha = 0.5; funksjonsendringYellow (e: Event): void lineClr = 0xFFFF00; changeClr = true; redBtn.alpha = 0.5; yellowBtn.alpha = 1; blueBtn.alpha = 0.5; funksjonsendringBlue (e: Event): void lineClr = 0x66CCFF; changeClr = true; redBtn.alpha = 0.5; yellowBtn.alpha = 0.5; blueBtn.alpha = 1;
La oss nå angi standardfarge på linjen. Jeg velger rød som standard, du kan bruke hvilken farge du liker.
hvis (! changeClr) lineClr = 0xFF0000; redBtn.alpha = 1; yellowBtn.alpha = 0.5; blueBtn.alpha = 0.5;
Den siste delen av Actionscript; vi vil at Flash skal tegne spekteret av sangen. "lineClr" i "lineStyle" er en variabel innenfor fargeknappen i trinn 31. "for (var i: uint = 30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.
I "var num: Nummer = ba.readFloat () * 50 + 170;" 50 tillater Flash å multiplisere Float i sangen og 170 er y-koordinatet til spekteret.
var ba: ByteArray = ny ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); funksjonstrykk (e: Event): void graphics.clear (); graphics.lineStyle (1, lineClr, 0.5); graphics.moveTo (30, 150); SoundMixer.computeSpectrum (ba); for (var jeg: uint = 30; jeg<280; i++) var num:Number = ba.readFloat()*50 + 170; graphics.lineTo(i, num);
Tittel og artist vil bli vist i vår spiller senere. "
Massen Era pics / era.jpg sanger / themass.mp3 Dr.No tema - pics / drno.jpg sanger / drno.mp3
Lag albumkunst for sangene. Anbefalt størrelse er 65px x 65px; det passer fint inn på skjermen.
Test filmen din (Ctrl + Enter) for å sjekke utfallet. Du vil ha din egen flash iPod-spiller! Du kan bruke den som musikkspiller for nettstedet ditt; rediger musikklisten som du ønsker. Det er opp til deg. Gå videre og eksperiment, hvis du har noen kule resultater, vær sikker på å dele dem med oss.
Jeg håper du likte denne opplæringen, takk for å lese!
