Share
ActionScript 3.0 consente a sviluppatori e progettisti di Flash di realizzare ogni sorta di cose in Flash con relativa facilità. Questo tutorial ti insegnerà come creare il tuo lettore MP3 ActionScript 3.0 con spettro sonoro, copertine degli album, cambia colori e visualizzazione delle informazioni sul brano.
Inizia creando un nuovo documento ActionScript 3.0. Imposta la dimensione dello stage su 600px x 600px e 30 FPS. Ho scelto # 333333 come colore di sfondo.
Vai a File> Importa> Importa nella libreria ... e importa un'immagine (ho modificato parte di un iPod da free4illustrator.com per questo esempio. Dovresti usare un formato .png invece del formato .jpg per sfruttare la trasparenza per il tuo oggetto.). Dopo aver importato l'immagine, apri la tua libreria (Ctrl + L) e trascina il .png sullo stage.
Seleziona l'immagine e convertila in un simbolo di clip filmato (F8). Chiamalo "Ipod" o un altro nome se preferisci. Ho scelto l'angolo in alto a sinistra come punto di registrazione.
Fai doppio clic sul simbolo del MovieClip "Ipod" per inserire la sua timeline. Assicurati di essere all'interno del Movie Clip e non in "Scena 1".
Nella barra della Timeline, inserisci un Nuovo Livello sopra il livello "IpodBody" e chiamalo "Livello Pulsanti". Inseriremo tutti i simboli dei pulsanti in questo livello.
Utilizzare lo strumento Rettangolo, # 00ff00 come colore di riempimento e incolore come il colore del tratto. Non abbiamo bisogno di un tratto qui e infatti, il colore di riempimento può essere qualsiasi colore che ti piace, non sarà mostrato nel risultato finale. Disegna una forma sopra l'icona precedente, simile alla seguente:
Converti la forma che hai appena disegnato in un Button Symbol (F8) e chiamalo "prev" come mostrato nell'immagine qui sotto:
Assegna al simbolo del pulsante "prev" un nome di istanza. L'ho chiamato "prevBtn" e ho cambiato lo stile colore in alfa con lo 0%.
I seguenti passaggi necessiteranno dello stesso simbolo Button del simbolo del pulsante "prev". Copia il simbolo del pulsante "prev" e incollalo sull'icona "Avanti" sulla tua bitmap. Per duplicare questo simbolo, vai alla barra delle proprietà e fai clic su "Scambia". Apparirà una finestra simbolo di scambio, a quel punto sarà necessario fare clic su "Duplica simbolo" (assicurarsi di scegliere il simbolo del pulsante "prev"). Chiamalo "next".
Ora abbiamo un nuovo simbolo che è simile al simbolo del pulsante "prev", ma denominato "next". Assegna a questo simbolo il nome di istanza di "nextBtn". Lo stile colore rimane alfa 0%.
Ripeti i punti 9 - 10 duplicando il simbolo "prev" per rendere i simboli dei pulsanti "play", "pause" e "stop". Assegna rispettivamente i nomi di istanza di "playBtn", "pauseBtn" e "stopBtn".
Inserisci un nuovo livello sopra "Buttons Layer" e chiamalo "Testo".
Disegna una casella di testo simile all'immagine mostrata sotto nel livello "Testo". Impostare "Testo dinamico" come tipo di testo, assegnare il nome dell'istanza "titleTxt", il carattere del carattere Arial, la dimensione del carattere impostata su 12px e grassetto, il colore bianco (#ffffff) e allineato al centro.
Crea un'altra casella di testo appena sotto la casella di testo "titleTxt". Imposta questa nuova casella di testo come Testo dinamico, assegnagli il nome di un'istanza di "artistTxt", con il tipo di carattere Arial, la dimensione del carattere impostata su 10px, il colore bianco (#ffffff) e, di nuovo, allineato al centro.
Inserisci un nuovo livello sopra il livello "Testo" e chiamalo "Cambia colore".
Utilizzare lo strumento Rettangolo e impostare # ff0000 come colore di riempimento. Disegna un piccolo quadrato di 14px X 14px nell'angolo in alto a destra dello schermo iPod e convertilo in un simbolo Button (F8) con un nome di "rosso". Dagli un nome istanza di "redBtn".
Ripeti il passaggio 16 e crea altri due quadrati. Riempi un quadrato con # ffff00, chiamalo "giallo" e assegna un nome di istanza di "yellowBtn". Riempi l'altro quadrato con # 66ccff, chiamalo "blue" con un nome di istanza di "blueBtn". Puoi impostarlo su qualsiasi colore che ti piace, consentirà all'utente di cambiare il colore dello spettro sonoro.
Inserisci un nuovo livello sopra il livello "Color Changer" e chiamalo "ActionScript Layer".
Da questo momento in poi, giocheremo con ActionScript 3.0. Sul primo Keyframe di "Actionscript Layer" premi F9. Apparirà una finestra di azione. Inseriremo il nostro script in questa finestra più tardi.
Per prima cosa, dobbiamo dire a Flash cosa contiene l'iPod Player e le sue proprietà. Ci sono diverse variabili di cui abbiamo bisogno. Quando Flash è stato caricato completamente, è necessario che inizi a funzionare. La funzione "Loaded" inizierà immediatamente. Il caricatore caricherà un file XML, il cui percorso è indicato in "URLRequest" del "loader". Creeremo il file "musiclist.xml" per questo iPod Player in seguito.
Accentsconagua
var musicReq: URLRequest; var thumbReq: URLRequest; musica var: Sound = new Sound (); var sndC: SoundChannel; var currentSnd: Sound = music; var position: Number; var currentIndex: Number = 0; var songPaused: Boolean; var songStopped: Boolean; var lineClr: uint; var changeCl: Boolean; var xml: XML; var songList: XMLList; var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, Loaded); loader.load (new URLRequest ("musiclist.xml")); Successivamente, creeremo la copertina dell'album che verrà visualizzata sullo schermo di iPod Player. Il seguente script indica le coordinate della copertina dell'album, che sarà conservata in un simbolo di clip filmato.
var thumbHd: MovieClip = new MovieClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
Ora definiamo la funzione "Caricato". Vogliamo andare all'XML e recuperare l'URL della canzone da riprodurre nel lettore. Quando il brano è caricato, verrà riprodotto immediatamente e la copertina dell'album verrà caricata contemporaneamente. Quando la canzone ha finito di suonare, inizierà a suonare il brano successivo.
function Loaded (e: Event): 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);
Ora definiremo la funzione "loadThumb". Quando il pollice è caricato, dirà a Flash di avviare la funzione "thumbLoaded". Questa funzione aggiungerà un filmato contenente la copertina dell'album.
function loadThumb (): void var thumbLoader: Loader = new Loader (); thumbReq = new URLRequest (songList [currentIndex] .thumb); thumbLoader.load (thumbReq); thumbLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded); function thumbLoaded (e: Event): void var thumb: Bitmap = (Bitmap) (e.target.content); titolare var: MovieClip = thumbHd; holder.addChild (pollice);
Qui ho affermato che i pulsanti che abbiamo creato hanno le loro rispettive funzioni. Per consentire agli utenti di fare clic sul pulsante ed eseguire la funzione, utilizziamo "MouseEvent.CLICK". Tutte le funzioni dei rispettivi pulsanti saranno menzionate nei prossimi passaggi.
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);
Funzione "prevBtn" (pulsante precedente), definire "prevSong":
function prevSong (e: Event): 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);
funzione "nextBtn" (pulsante Avanti), definire "nextSong":
function 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" (funzione Play button), definire "playSong":
function playSong (e: Event): void if (songPaused) sndC = currentSnd.play (posizione); songPaused = false; else if (songStopped) sndC = currentSnd.play (posizione); songStopped = false; else if (! sndC) sndC = currentSnd.play (posizione);
"pauseBtn" (funzione Pause button), definire "pauseSong":
function pauseSong (e: Event): void if (sndC) position = sndC.position; sndC.stop (); songPaused = true;
funzione "stopBtn" (pulsante Stop), definire "stopSong":
function stopSong (e: Event): void sndC.stop (); posizione = 0; songStopped = true;
Ora abbiamo creato i controlli del giocatore.
I pulsanti creati nei passaggi 15-17 non sono inutili. Ora dobbiamo dire a Flash qual è il loro ruolo all'interno del Player:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeYellow); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Ogni pulsante colorato ha la sua rispettiva funzione. "changeRed" imposta la linea dello spettro su "0xFF0000" (rosso). "changeYellow" lo imposterà su "0xFFFF00" (giallo) e "changeBlue" imposterà "0x66CCFF" (ciano). Vogliamo anche che Flash sappia che quando clicchiamo su Colore rosso, erediterà il 100% di opacità, mentre agli altri verrà dato il 50% di opacità
Nota: in ActionScript 3.0, 100% = 1, 10% = 0,1 e così via.
Tutti i pulsanti colorati avranno questa funzione, quindi è necessario specificare l'opacità del pulsante in ciascuna funzione.
function changeRed (e: Event): void lineClr = 0xFF0000; changeClr = true; redBtn.alpha = 1; yellowBtn.alpha = 0.5; blueBtn.alpha = 0,5; function changeYellow (e: Event): void lineClr = 0xFFFF00; changeClr = true; redBtn.alpha = 0.5; yellowBtn.alpha = 1; blueBtn.alpha = 0,5; function changeBlue (e: Event): void lineClr = 0x66CCFF; changeClr = true; redBtn.alpha = 0.5; yellowBtn.alpha = 0.5; blueBtn.alpha = 1;
Ora impostiamo il colore predefinito della linea. Scelgo Rosso come predefinito, puoi usare qualsiasi colore tu voglia.
if (! changeClr) lineClr = 0xFF0000; redBtn.alpha = 1; yellowBtn.alpha = 0.5; blueBtn.alpha = 0,5;
L'ultima parte del nostro Actionscript; vogliamo che Flash elabori lo spettro della canzone. "lineClr" in "lineStyle" è una variabile all'interno del pulsante del colore nel passaggio 31. "for (var i: uint = 30; i<280; i++)" stated the starting x coordinate of the line and the end coordinate of the line.
In "var num: Number = ba.readFloat () * 50 + 170;" il 50 consente a Flash di moltiplicare il Float nella song e 170 è la coordinata y dello spettro.
var ba: ByteArray = new ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); function drawl (e: Event): void graphics.clear (); graphics.lineStyle (1, lineClr, 0.5); graphics.moveTo (30, 150); SoundMixer.computeSpectrum (BA); per (var i: uint = 30; i<280; i++) var num:Number = ba.readFloat()*50 + 170; graphics.lineTo(i, num);
Titolo e Artista saranno mostrati nel nostro giocatore più tardi. "
La massa Era pics / era.jpg canzoni / themass.mp3 Dr.No tema - pics / drno.jpg canzoni / drno.mp3
Crea album per le canzoni. La dimensione consigliata è 65 px x 65 px; si adatterà bene allo schermo.
Metti alla prova il tuo filmato (Ctrl + Invio) per verificare il risultato. Avrai il tuo lettore iPod flash! Puoi usarlo come lettore musicale per il tuo sito web; modifica l'elenco musicale come desideri. Tocca a voi. Vai avanti e sperimenta, se hai dei risultati fantastici, assicurati di condividerli con noi.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
