Share
ActionScript 3.0 permite dezvoltatorilor și designerilor Flash să facă tot felul de lucruri în Flash cu ușurință. Acest tutorial vă va învăța cum să vă creați propriul player MP3 ActionScript 3.0 cu spectru de sunet, album de artă, schimbător de culori și informații despre melodii.
Începeți prin crearea unui nou document ActionScript 3.0. Setați dimensiunea Stage la 600px x 600px și 30 FPS. Am ales # 333333 ca culoarea mea de fundal.
Accesați fișierul> Import> Import la bibliotecă ... și importați o imagine (am modificat o parte a unui iPod de la free4illustrator.com pentru acest exemplu.) Ar trebui să utilizați un format .png în loc de format .jpg pentru a profita de transparența pentru dvs. obiect.). După ce ați importat imaginea, deschideți Biblioteca (Ctrl + L) și trageți .png în scenă.
Selectați imaginea și convertiți-o într-un simbol Movie Clip (F8). Denumiți-o "Ipod" sau alt nume, dacă preferați. Am ales colțul din stânga sus ca punct de înregistrare.
Faceți dublu clic pe simbolul "Ipod" movieclip pentru a introduce linia temporală. Asigurați-vă că sunteți în interiorul filmului și nu "Scena 1".
În bara Cronologie, inserați un strat nou deasupra stratului "IpodBody" și numiți-l "Buttons Layer". Vom pune toate simbolurile butonului în acest strat.
Utilizați instrumentul dreptunghi, # 00ff00 ca culoare de umplere și incolor ca culoarea stroke. Nu avem nevoie de un accident vascular cerebral aici și, de fapt, culoarea de umplere poate fi orice culoare doriți, nu va fi afișată în rezultatul final. Desenați o formă deasupra pictogramei anterioare, similară imaginii de mai jos:
Convertiți forma pe care tocmai ați atras-o într-un simbol Button (F8) și numiți-o "prev" așa cum se arată în imaginea de mai jos:
Dați simbolului butonului "prev" un nume de instanță. Am numit-o "prevBtn" și am schimbat stilul de culoare la Alpha cu 0%.
Următorii pași necesită același simbol Buton ca și simbolul butonului "prev". Copiați simbolul butonului "prev" și inserați-l pe pictograma "Următorul" de pe bitmap. Pentru a duplica acest simbol, mergeți la Properties Bar și faceți clic pe "Swap". Va apărea o fereastră de simbol Swap, la care punct trebuie să faceți clic pe "Simbol duplicat" (asigurați-vă că alegeți simbolul butonului "prev"). Denumiți-l "următorul".
Acum avem un simbol nou care este similar cu simbolul butonului "prev", dar numit "următor". Dați acestui simbol un nume de instanță pentru "nextBtn". Stilul de culoare rămâne alfa 0%.
Repetați pașii 9 - 10 duplicând simbolul "prev" pentru a face simbolurile "play", "pauză" și "stop". Atribuiți numele instanțelor "playBtn", "pauseBtn" și, respectiv, "stopBtn".
Inserați un nou strat deasupra butonului "Buttons Layer" și denumiți-l "Text".
Desenați o casetă de text similară cu imaginea de mai jos din stratul "Text". Setați textul dinamic ca text, atribuiți numele instanței "titleTxt", fontul fontului Arial, dimensiunea fontului setată la 12px și boldul, culoarea albă (#ffffff) și aliniate la centru.
Creați o altă casetă de text chiar sub caseta de text "titleTxt". Setați această casetă de text nouă ca Text dinamic, dați-i un nume de instanță pentru "artistTxt", cu font Arial, dimensiune font setată la 10px, culoare albă (#ffffff) și, din nou, aliniată la centru.
Inserați un strat nou deasupra stratului "Text" și numiți-l "Color Changer".
Utilizați Instrumentul dreptunghi și setați # ff0000 ca culoare de umplere. Desenați un mic pătrat de 14px X 14px în colțul din dreapta sus al ecranului ipod și convertiți-l la un simbol Buton (F8) cu numele de "roșu". Dați-i un nume de instanță a "redBtn".
Repetați pasul 16 și faceți încă două pătrate. Completați un pătrat cu # ffff00, denumiți-l "galben" și atribuiți un nume de instanță "yellowBtn". Umpleți celălalt pătrat cu # 66ccff, numește-l "albastru" cu numele instanței "blueBtn". Puteți seta această funcție la orice culoare doriți, va permite utilizatorului să schimbe culoarea spectrului de sunet.
Inserați un strat nou deasupra stratului "Color Changer" și denumiți-l "ActionScript Layer".
Din acest moment, vom juca cu ActionScript 3.0. În primul keyframe din "Actionscript Layer" apăsați F9. Va apărea o fereastră de acțiune. Vom introduce scenariul nostru în această fereastră mai târziu.
În primul rând, trebuie să le spunem Flash ceea ce conțin iPod-ul Player și proprietățile sale. Există mai multe variabile de care avem nevoie. Când Flash-ul a fost încărcat complet, avem nevoie de el pentru a începe să ruleze. Funcția "încărcat" va începe imediat. Încărcătorul va încărca un fișier XML, calea acestuia fiind specificat în "URLRequest" al "încărcătorului". Vom crea fișierul "musiclist.xml" pentru acest Player iPod mai târziu.
Accentsconagua
var musicReq: URLRequest; var thumbReq: URLRequest; var muzică: sunet = nou Sound (); var sndC: SoundChannel; var currentSnd: Sunet = muzică; var poziție: număr; var currentIndex: Number = 0; var songPaused: Boolean; var songStopped: Boolean; var lineClr: uint; var changeClr: Boolean; var xml: XML; var songList: XMLList; var încărcător: URLLoader = nou URLLoader (); loader.addEventListener (Event.COMPLETE, Loaded); loader.load (noua adresă URLRequest ("musiclist.xml")); Mai târziu, vom crea albumul care apare pe ecranul playerului iPod. Următorul script afișează coordonatele artei albumului, care va fi ținută într-un simbol Movie Clip.
var thumbHd: MovieClip = nouClipClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
Acum, să definim funcția "Încărcată". Vrem să mergem la XML și să preluăm adresa URL a melodiei care va fi redată în Player. Când cântecul este încărcat, acesta va juca imediat și arta albumului pentru cântec se va încărca simultan. Când melodia a terminat de redat, va începe să cânte următoarea melodie.
funcția Încărcată (e: Eveniment): void xml = nou XML (e.target.data); songList = xml.song; musicReq = noua adresă URLRequest (songList [0] .url); thumbReq = noua adresă URLRequest (songList [0] .thumb); music.load (musicReq); sndC = music.play (); titleTxt.text = melodieList [0] .title; artistTxt.text = songList [0] .artist; loadThumb (); sndC.addEventListener (eveniment.SOUND_COMPLETE, nextSong);
Acum vom defini funcția "loadThumb". Atunci când degetul mare este încărcat, va spune Flash pentru a porni funcția "thumbLoaded". Această funcție va adăuga un clip video care conține albumul de artă.
funcția loadThumb (): void var thumbLoader: Loader = încărcător nou (); thumbReq = noua adresă URLRequest (songList [currentIndex] .thumb); thumbLoader.load (thumbReq); thumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded); funcția thumbLoaded (e: Eveniment): void var thumb: Bitmap = (Bitmap) (e.target.content); var suport: MovieClip = thumbHd; holder.addChild (degetul mare);
Aici am afirmat că butoanele pe care le-am creat au funcțiile lor respective. Pentru a permite utilizatorilor să facă clic pe buton și să execute funcția, folosim "MouseEvent.CLICK". Toate funcțiile respectivelor butoane vor fi menționate în următorii pași.
prevBtn.addEventListener (MouseEvent.CLICK, prevSong); nextBtn.addEventListener (MouseEvent.CLICK, nextSong); playBtn.addEventListener (MouseEvent.CLICK, playSong); pauseBtn.addEventListener (MouseEvent.CLICK, pauzăSong); stopBtn.addEventListener (MouseEvent.CLICK, stopSong);
Funcția "prevBtn" (butonul Anterioară) definește "prevSong":
funcția prevSong (e: Eveniment): void if (currentIndex> 0) currentIndex--; altceva currentIndex = songList.length () - 1; var prevReq: URLRequest = noua adresă URLRequest (songList [currentIndex] .url); var prevPlay: Sunet = sunet nou (prevReq); sndC.stop (); titleTxt.text = cântecList [actualIndex] .title; artistTxt.text = songList [actualIndex] .artist; sndC = prevPlay.play (); actualSnd = prevPlay; songPaused = false; loadThumb (); sndC.addEventListener (eveniment.SOUND_COMPLETE, nextSong);
funcția "nextBtn" (butonul Următor), definiți "nextSong":
funcția nextSong (e: Eveniment): 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);
funcția "playBtn" (butonul Redare), definiți "playSong":
funcția playSong (e: Eveniment): void if (songPaused) sndC = currentSnd.play (poziție); songPaused = false; altceva dacă (Songstopped) sndC = currentSnd.play (position); songStopped = false; altfel dacă (! sndC) sndC = currentSnd.play (poziție);
"pauseBtn" (butonul Pauză), definiți "pauseSong":
funcția pauzăSong (e: Eveniment): void if (sndC) position = sndC.position; sndC.stop (); songPaused = true;
funcția "stopBtn" (butonul Stop), definiți "stopSong":
funcția stopSong (e: Eveniment): void sndC.stop (); pozitie = 0; songStopped = true;
Am construit acum controalele playerului.
Butoanele pe care le-am creat în pașii 15-17 nu sunt inutile. Acum trebuie să-i spunem lui Flash ce rol are în cadrul acestuia:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeYellow); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Fiecare buton colorat are funcția respectivă. "changeRed" va seta linia spectrului la "0xFF0000" (roșu). "changeYellow" îl va seta la "0xFFFF00" (galben) și "changeBlue" va seta "0x66CCFF" (Cyan). De asemenea, dorim ca Flash să știe că atunci când faceți clic pe culoarea roșie, acesta va moșteni 100% opacitate, în timp ce celorlalți li se va da o opacitate de 50%
Notă: în ActionScript 3.0, 100% = 1, 10% = 0,1 și așa mai departe.
Toate butoanele colorate vor avea această funcție, deci trebuie să specificăm opacitatea butonului în fiecare funcție.
schimbarea funcțieiRed (e: Eveniment): void lineClr = 0xFF0000; changeClr = true; redBtn.alpha = 1; galbenBtn.alpha = 0,5; blueBtn.alpha = 0,5; funcția changeYellow (e: Event): void lineClr = 0xFFFF00; changeClr = true; redBtn.alpha = 0.5; galbenBtn.a = 1; blueBtn.alpha = 0,5; schimbarea funcțieiBlue (e: Event): void lineClr = 0x66CCFF; changeClr = true; redBtn.alpha = 0.5; galbenBtn.alpha = 0,5; blueBtn.alpha = 1;
Acum, să setăm culoarea implicită a liniei. Eu aleg roșu ca implicit, puteți utiliza orice culoare doriți.
dacă (! changeClr) lineClr = 0xFF0000; redBtn.alpha = 1; galbenBtn.alpha = 0,5; blueBtn.alpha = 0,5;
Ultima parte a Actiunilor noastre; vrem ca Flash să deseneze spectrul melodiei. "lineClr" în "lineStyle" este o variabilă în butonul de culoare de la pasul 31. "pentru (var i: uint = 30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.
În "var num: Number = ba.readFloat () * 50 + 170;" 50 permite Flashului să înmulțească Floatul în cântec și 170 este coordonata y a spectrului.
var ba: ByteArray = nou ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); funcția drawl (e: Eveniment): void graphic.clear (); graphics.lineStyle (1, lineClr, 0.5); graphics.moveTo (30, 150); SoundMixer.computeSpectrum (ba); pentru (var i: uint = 30; i<280; i++) var num:Number = ba.readFloat()*50 + 170; graphics.lineTo(i, num);
Titlul și Artistul vor fi afișate mai târziu în playerul nostru. "
Masa Eră poze / era.jpg cântece / themass.mp3 Dr.No temă - poze / drno.jpg cântece / drno.mp3
Creați un album de artă pentru melodii. Dimensiunea recomandată este 65px x 65px; se va potrivi frumos pe ecran.
Testați-vă filmul (Ctrl + Enter) pentru a verifica rezultatul. Veți avea propriul player iPod Player! Puteți să-l utilizați ca player de muzică pentru site-ul dvs. web; editați lista de muzică așa cum doriți. Depinde de tine. Continuați și experimentați, dacă aveți rezultate reale, asigurați-vă că le împărtășiți cu noi.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
