Create en Jazzy XML Driven MP3-spiller
Del
Del
Del
Del

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

Actionscript 3.0 tillater Flash utviklere og designere til å gjøre alle slags ting i Flash med relativ letthet. Denne opplæringen vil lære deg hvordan du kan lage din egen Actionscript 3.0 MP3-spiller med lydspekteret, albumgrafikk, farge veksler og visning av sanginformasjon.

Trinn 1

Begynn med å skape en ny Actionscript 3.0 dokument. Sett Stage størrelsen til 600px x 600px og 30 FPS. Jeg har valgt # 333333 som min bakgrunnsfarge

Trinn 2

Gå til Fil >.; Import > Importer til bibliotek ... og importerer et bilde (jeg har endret en del av en iPod fra free4illustrator.com for dette eksemplet. Du bør bruke en .png format i stedet JPG-format for å dra nytte av åpenhet for objektet.). Etter å ha importert bildet, åpne Library (Ctrl + L) og dra .png til scenen.

Trinn 3

Velg bildet og konvertere den til et filmklipp symbol (F8 ). Name it "Ipod" eller et annet navn hvis du foretrekker det. Jeg har valgt øverst i venstre hjørne som registrering punkt.

Trinn 4

Dobbeltklikk på "Ipod" MovieClip symbol for å angi sin tidslinje. Pass på at du er inne på MovieClip og ikke "Scene 1".

Trinn 5

I Tidslinje bar, sette inn et nytt lag over "IpodBody" lag og gi den navnet «Knapper Layer ". Vi setter alle våre knappesymbolene i dette laget.

Trinn 6

Bruk rektangelverktøyet, # 00FF00 som fyllfarge og fargeløs som strøkfargen. Vi trenger ikke en strek her og faktisk kan fyllfargen være hvilken som helst farge du liker, vil det ikke bli vist på sluttresultatet. Tegn en figur over forrige ikonet, ligner på bildet nedenfor:

Trinn 7

Konverter formen som du nettopp har tegnet inn en knapp Symbol (F8) og gi den navnet "prev" som vist på bildet nedenfor:

Trinn 8

Gi "forrige" Button Symbol en forekomst navn. Jeg har kalt det "prevBtn" og skiftet Color Style til Alpha med 0%.

Trinn 9

Følgende trinn vil trenge samme Button symbol som "forrige" -knappen symbol. Kopiere "forrige" Button symbol og lim den inn på "Next" -ikonet på bitmap. Å kopiere dette symbolet, kan du gå til Properties Bar og klikk "Swap". En Swap Symbol vindu vil komme ut, og da må du klikke på "Duplicate Symbol" (sørg for at du velger den "forrige" -knappen symbol.). Name it "neste".

Trinn 10

Nå har vi et nytt symbol som ligner på "forrige" -knappen symbol, men heter "neste". Gi dette symbolet en forekomst navnet "nextBtn". The Color Style forblir alpha 0%

Trinn 11

Gjenta trinn 9 -. 10 ved å duplisere "forrige" -symbolet for å gjøre "play", "pause" og "Stopp" -knappen symboler. Tildele Forekomst navnene "playBtn", "pauseBtn" og "stopBtn" hhv.

Trinn 12

Sett inn et nytt lag over «Knapper Layer" og gi den navnet "Tekst". Anmeldelser
Step 13

Tegn en tekstboks som ligner på bildet som vises nedenfor i "Text" Layer. Sett "Dynamic Text" som teksttype, tildele Instance name "titleTxt", Arial font, skriftstørrelse satt til 12px og Fet, hvit farge (#ffffff) og justert til sentrum.

Trinn 14

Opprett en annen tekstboks rett under "titleTxt" tekstboksen. Sett denne nye tekstboksen som Dynamic Text, gir det en forekomst navnet "artistTxt", med Arial font, skriftstørrelse satt til 10px, hvit farge (#ffffff) og, igjen, justert til sentrum.

Trinn 15

Sett inn et nytt lag over "Text" lag og gi den navnet "Color Changer".

Trinn 16

Bruk rektangelverktøyet og sette # FF0000 som fyllfarge. Tegn en liten firkant av 14px X 14px på høyre hjørne av ipod skjermen og konvertere den til en knapp symbol (F8) med navnet "rød". Gi den en Instance navnet "redBtn".

Trinn 17

Gjenta trinn 16 og gjøre to firkanter. Fylle en firkant med # FFFF00, den navnet "gul" og tildele en forekomst navnet "yellowBtn". Fyll den andre plassen med # 66ccff, navn det "blå" med en forekomst navnet "blueBtn". Du kan sette denne til hvilken som helst farge du liker, det vil tillate brukeren å endre lydspekteret farge.

Trinn 18

Sett inn et nytt lag over "Color Changer" lag og gi den navnet "Action Layer"

Trinn 19 -. Begynn Script

Fra dette øyeblikket, vi skal spille med Actionscript 3.0. På den første Keyframe av "Action Layer" trykk F9. En handlingsplan vindu vil komme ut. Vi vil innspill skriptet inn i dette vinduet senere

Trinn 20 -. Innstilling Variabler

Først må vi fortelle Flash hva hva ipod Player inneholder og dens egenskaper. Det er flere variabler vi trenger. Når Flash har lastet helt, vi trenger det for å begynne å løpe. Den "Loaded" -funksjonen vil starte umiddelbart. Lasteren vil laste en XML-fil, er den banen som er oppgitt i "URLRequest" av "loader". Vi vil opprette "musiclist.xml" fil for denne iPod-spilleren senere
Var musicReq: URLRequest; Var thumbReq. URLRequest; Div musikk: Sound = new Sound (); Var sndC: SoundChannel; Var currentSnd: Sound = musikk; Var posisjoner: Number; Var currentIndex: Antall = 0; Var songPaused: Boolean; Var songStopped: Boolean; Var lineClr: uint; Var changeClr: Boolean; Var xml: XML; Var Songlist: XMLList; Var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, Loaded), loader.load (ny URLRequest ("musiclist.xml"));
Trinn 21 - Album Art Holder

Senere vil vi opprette albumbilder som vises på skjermen på iPod-spilleren. Følgende skript sier koordinatene til albumbilder, som vil bli holdt i et filmklipp symbol
Var thumbHd:. MovieClip = new MovieClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
Trinn 22 - Definer "Loaded" Function

Nå la oss definere "Loaded" -funksjonen. Vi vil at den går til XML og hente Song URL som skal spilles i spilleren. Når sangen er lastet, vil det spille umiddelbart og albumbildet for sangen vil laste samtidig. Når låten er ferdig, vil den begynne å spille neste sang
funksjon Loaded (e: Hendelses):. Void {xml = new XML (e.target.data); Songlist = xml.song; musicReq = new URLRequest (Songlist [0] .url); thumbReq = new URLRequest (Songlist [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);}
Trinn 23 - Definer "loadThumb" Function

Nå skal vi definere "loadThumb" -funksjonen. Når tommelen er lastet, vil den fortelle Flash for å starte "thumbLoaded" -funksjonen. Denne funksjonen vil legge til et filmklipp som inneholder albumbilder
funksjon loadThumb (): void {var thumbLoader: Loader = new Loader ();. thumbReq = new URLRequest (Songlist [currentIndex] .thumb); thumbLoader.load (thumbReq); thumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded);} funksjon thumbLoaded (e: Hendelses): void {var thumb: Bitmap = (Bitmap) (e.target.content); Var Holder: MovieClip = thumbHd; holder.addChild (tommelen);}
Trinn 24 - State "EventListener" av knapper

Her har jeg uttalt at knappene vi opprettet har sine respektive funksjoner. Å tillate brukere å klikke på knappen og utføre funksjonen, bruker vi "MouseEvent.CLICK". Alle funksjonene til 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);
Trinn 25 - Definer "prevSong" Function

"prevBtn" (Forrige-knappen) funksjon, definere "prevSong":
funksjon prevSong (e: Hendelses): void {if (currentIndex > 0) {currentIndex--; } Else {currentIndex = songList.length () - 1; } Var prevReq: URLRequest = new URLRequest (Songlist [currentIndex] .url); Var prevPlay: Sound = new Sound (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);}
Trinn 26 - Definer "nextSong" Function

"nextBtn" (Next) funksjon, definerer "nextSong":
funksjon nextSong ( e: Hendelses): 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);}
Trinn 27 - Definer "playSong" Function

"playBtn" (avspillingsknappen) funksjon, definerer "playSong":
funksjon playSong ( e: Hendelses): void {if (songPaused) {sndC = currentSnd.play (stilling); songPaused = false; } Else if (songStopped) {sndC = currentSnd.play (stilling); songStopped = false; } Else if (sndC!) {SndC = currentSnd.play (stilling); }}
Trinn 28 - Definer "pauseSong" Function

"pauseBtn" (Pause-knappen) funksjon, definerer "pauseSong":
funksjon pauseSong (e: Hendelses): void {if (sndC ) {stilling = sndC.position; sndC.stop (); songPaused = true; }}
Trinn 29 - Definer "stopSong" Function

"stopBtn" (Stopp knappen) funksjon, definerer "stopSong":
funksjon stopSong (e: Hendelses): void {sndC.stop (); stilling = 0; songStopped = true;}

Vi har nå bygget spillerkontrollene

Trinn 30 - State "EventListener" av fargede knappene

Knappene vi opprettet i trinn 15-17 er ikke ubrukelig. . Vi har nå til å fortelle Flash hva deres rolle er i spiller:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeYellow); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Trinn 31 - Definer farget knapp FunctionsS

Hver farget knapp har sin respektive funksjon. "changeRed" vil sette linjen av spekteret til "0xff0000" (rød). "changeYellow" vil sette den til "0xFFFF00" (gul) og "changeBlue" vil sette "0x66CCFF" (cyan). Vi ønsker også Flash å vite at når vi klikker på Rød farge, vil det arve 100% dekkevne, mens andre vil bli gitt 50% opacity

Merk: I Actionscript 3.0, 100% = 1, 10% = 0,1 . og så videre

Alle fargede knappene vil ha denne funksjonen, slik at vi må oppgi tettheten av-knappen i hver funksjon
funksjon changeRed (e: Hendelses):. void {lineClr = 0xff0000; changeClr = true; redBtn.alpha = 1; yellowBtn.alpha = 0,5; blueBtn.alpha = 0,5;} funksjon changeYellow (e: Hendelses): void {lineClr = 0xFFFF00; changeClr = true; redBtn.alpha = 0,5; yellowBtn.alpha = 1; blueBtn.alpha = 0,5;} funksjon changeBlue (e: Hendelses): void {lineClr = 0x66CCFF; changeClr = true; redBtn.alpha = 0,5; yellowBtn.alpha = 0,5; blueBtn.alpha = 1;}
Trinn 32 - Sett Standard farge av Spectrum

La oss nå sette standard fargen på linjen. Jeg velger Red som standard, du kan bruke hvilken som helst farge du liker
if (changeClr!) {LineClr = 0xff0000.; redBtn.alpha = 1; yellowBtn.alpha = 0,5; blueBtn.alpha = 0,5;}
Trinn 33 - Tegn Spectrum

Den siste delen av vår Actionscript; vi ønsker Flash for å trekke ut spekteret av sangen. "lineClr" i "linestyle" er en variabel i farge knappen i trinn 31. "for (var i: uint = 30; i < 280; i ++)" uttalte start x koordinat av linjen og slutten koordinere av linjen .

I "var num: Number = ba.readFloat () * 50 + 170;" 50 tillater Flash for å multiplisere Float i sangen og 170 er y koordinat av spekteret
Var ba: ByteArray = new ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); funksjon drawl. (e: Hendelses) : void {graphics.clear (); graphics.lineStyle (1, lineClr, 0,5); graphics.moveTo (30, 150); SoundMixer.computeSpectrum (ba); for (var i: uint = 30; i < 280; i ++) {var num: Number = ba.readFloat () * 50 + 170; graphics.lineTo (i, num); }}
Trinn 34 - Lag XML

Tittel og artist vil bli vist i vår spiller senere. "< tommel >" og "< url >" går det albumbildet og sangen. XML kan lages enkelt (du kan bruke Notepad til å skrive inn følgende kode og Lagre som XML-fil). Du må lagre det som "musiclist.xml" som det er hvordan vi har henvist til den i Action av spilleren
. ≪ musiclist > < song > < title > The Mass < /title > < artist > Era < /artist > < tommel > pics /era.jpg < /tommel > < url > sanger /themass.mp3 < /url > < /sang > < song > < title > Dr.No tema < /title > < artist > - ≪ /artist > < tommel > pics /drno.jpg < /tommel > < url > sanger /drno.mp3 < /url > < /sang > < /musiclist >
Trinn 35 - Lag Album Art

Lag albumbilder for sanger. Anbefalt størrelse er 65px x 65px; det vil passe fint i skjermen.

Konklusjon

Test din film (Ctrl + Enter) for å sjekke resultatet. Du vil ha din egen flash iPod Player Du kan bruke den som musikkspiller for ditt nettsted; redigere musikklisten som du ønsker. Det er opp til deg. Gå videre og eksperiment, hvis du har noen kule resultater sørg for å dele dem med oss.

Jeg håper du likte denne opplæringen, takk for lesing!