Share
Met ActionScript 3.0 kunnen Flash-ontwikkelaars en -ontwerpers relatief eenvoudig allerlei dingen in Flash maken. In deze zelfstudie leer je hoe je je eigen ActionScript 3.0 MP3-speler kunt maken met geluidsspectrum, albumhoes, kleurwisselaar en weergave van liedjesinformatie.
Begin met het maken van een nieuw ActionScript 3.0-document. Stel de Stage-maat in op 600px x 600px en 30 FPS. Ik heb # 333333 gekozen als mijn achtergrondkleur.
Ga naar Bestand> Importeren> Importeren in bibliotheek ... en importeer een afbeelding (in dit voorbeeld heb ik een deel van een iPod van free4illustrator.com aangepast. Je moet in de .jpg-indeling een PNG-indeling gebruiken om te profiteren van de transparantie voor je voorwerp.). Nadat je de afbeelding hebt geïmporteerd, open je je bibliotheek (Ctrl + L) en sleep je de .png naar het werkgebied.
Selecteer de afbeelding en converteer deze naar een filmclipsymbool (F8). Noem het "Ipod" of een andere naam als je dat liever hebt. Ik heb de linkerbovenhoek gekozen als registratiepunt.
Dubbelklik op het "Ipod" filmclipsymbool om de tijdlijn in te voeren. Zorg ervoor dat je in de filmclip zit en niet in "Scene 1".
Voeg in de tijdlijn-balk een nieuwe laag in boven de laag "IpodBody" en noem deze "Knoppenlaag". We zullen al onze knopsymbolen in deze laag plaatsen.
Gebruik het gereedschap Rechthoek, # 00ff00 als vulkleur en kleurloos als lijnkleur. We hebben hier geen streek nodig en in feite kan de vulkleur elke gewenste kleur hebben, deze wordt niet weergegeven in het eindresultaat. Teken een vorm boven het vorige pictogram, vergelijkbaar met de afbeelding hieronder:
Converteer de vorm die u zojuist hebt getekend in een knopsymbool (F8) en noem deze "vorige" zoals weergegeven in de onderstaande afbeelding:
Geef het knopknooppictogram "vorige" een exemplaarnaam. Ik heb het "prevBtn" genoemd en veranderde de kleurstijl in Alpha met 0%.
De volgende stappen zullen hetzelfde Knoopsymbool nodig hebben als het "vorige" knopsymbool. Kopieer het "vorige" knopsymbool en plak het op het "volgende" pictogram op uw bitmap. Om dit symbool te dupliceren, gaat u naar de Eigenschappenbalk en klikt u op "Swap". Er verschijnt een venster Wisselsymbool, waarop u op het "Duplicaatsymbool" moet klikken (let op dat u het symbool "vorige" kiest). Noem het "volgende".
Nu hebben we een nieuw symbool dat vergelijkbaar is met het "vorige" knopsymbool, maar met de naam "volgende". Geef dit symbool een exemplaarnaam van "nextBtn". De kleurstijl blijft alpha 0%.
Herhaal Stap 9 - 10 door het "vorige" -symbool te dupliceren om knopsymbolen "spelen", "pauze" en "stop" te maken. Wijs instantiesaantekeningen toe van respectievelijk "playBtn", "pauseBtn" en "stopBtn".
Plaats een nieuwe laag boven "Knoppenlaag" en noem deze "Tekst".
Teken een tekstvak dat lijkt op de onderstaande afbeelding in de laag "Tekst". Stel "Dynamische tekst" in als het teksttype, wijs de naam van de instantie "titleTxt", Arial-lettertype, tekengrootte ingesteld op 12px en vet, witte kleur (#ffffff) en uitgelijnd op midden.
Maak een ander tekstvak net onder het tekstvak "titleTxt". Stel dit nieuwe tekstvak in als dynamische tekst, geef het een exemplaarnaam van "artistTxt", met Arial-lettertype, tekengrootte ingesteld op 10px, witte kleur (#ffffff) en opnieuw uitgelijnd op het midden.
Plaats een nieuwe laag boven de laag "Tekst" en noem deze "Kleurwisselaar".
Gebruik het gereedschap Rechthoek en stel # ff0000 in als vulkleur. Teken een vierkantje van 14px X 14px in de rechterbovenhoek van het ipod-scherm en converteer dit naar een knopsymbool (F8) met de naam "rood". Geef het een instantie naam van "redBtn".
Herhaal stap 16 en maak nog twee vierkanten. Vul een vierkant met # ffff00, noem het "geel" en wijs een exemplaarnaam van "yellowBtn" toe. Vul het andere vierkant met # 66ccff, noem het "blauw" met een instantie naam van "blueBtn". U kunt dit instellen op elke gewenste kleur, het stelt de gebruiker in staat de kleur van het geluidsspectrum te wijzigen.
Plaats een nieuwe laag boven de laag "Kleurwisselaar" en noem deze "ActionScript Layer".
Vanaf dit moment spelen we met ActionScript 3.0. Op het eerste sleutelframe van "Actionscript Layer" drukt u op F9. Er verschijnt een actievenster. We zullen later ons script in dit venster invoeren.
Eerst moeten we Flash laten weten wat de iPod-speler bevat en de eigenschappen ervan. Er zijn verschillende variabelen die we nodig hebben. Wanneer de Flash volledig is geladen, hebben we deze nodig om te kunnen starten. De functie "Loaded" wordt onmiddellijk gestart. De loader laadt een XML-bestand, waarvan het pad wordt vermeld in "URLRequest" van de "loader". We zullen later het bestand "musiclist.xml" voor deze iPod-speler maken.
Accentsconagua
var musicReq: URLRequest; var thumbReq: URLRequest; var music: Sound = new Sound (); var sndC: SoundChannel; var currentSnd: Sound = music; var positie: Number; var currentIndex: Number = 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 (nieuwe URLRequest ("musiclist.xml")); Later maken we albumhoezen die worden weergegeven op het scherm van de iPod-speler. In het volgende script worden de coördinaten van de albumhoes vermeld, die in een filmclipsymbool worden bewaard.
var thumbHd: MovieClip = new MovieClip (); thumbHd.x = 50; thumbHd.y = 70; addChild (thumbHd);
Laten we nu de functie "Geladen" definiëren. We willen dat het naar de XML gaat en de Song-URL ophaalt die in de Player wordt afgespeeld. Wanneer het nummer is geladen, wordt het meteen afgespeeld en wordt de albumhoes voor het nummer tegelijkertijd geladen. Wanneer het nummer klaar is met spelen, zal het het volgende nummer beginnen spelen.
functie Loaded (e: Event): void xml = nieuwe XML (e.target.data); songList = xml.song; musicReq = nieuwe URLRequest (songList [0] .url); thumbReq = nieuwe 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);
Nu zullen we de "loadThumb" -functie definiëren. Wanneer de duim is geladen, geeft dit Flash de opdracht om de functie "thumbLoaded" te starten. Met deze functie wordt een filmclip toegevoegd die de albumhoes bevat.
function loadThumb (): void var thumbLoader: Loader = new Loader (); thumbReq = nieuwe 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); var-houder: MovieClip = thumbHd; holder.addChild (duim);
Hier heb ik gezegd dat de knoppen die we hebben gemaakt hun respectievelijke functies hebben. Om gebruikers toe te staan op de knop te klikken en de functie uit te voeren, gebruiken we "MouseEvent.CLICK". Alle functies van de respectieve knoppen worden in de volgende paar stappen genoemd.
prevBtn.addEventListener (MouseEvent.CLICK, vorige versie); nextBtn.addEventListener (MouseEvent.CLICK, nextSong); playBtn.addEventListener (MouseEvent.CLICK, playSong); pauseBtn.addEventListener (MouseEvent.CLICK, pauseSong); stopBtn.addEventListener (MouseEvent.CLICK, stopSong);
"prevBtn" (Vorige knop) functie, definieer "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 (vorige); 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" (Volgende knop) functie, definieer "nextSong":
functie 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" (Afspeelknop) functie, definieer "playSong":
function playSong (e: Event): void if (songPaused) sndC = currentSnd.play (positie); songPaused = false; else if (songStopped) sndC = currentSnd.play (positie); songStopped = false; else if (! sndC) sndC = currentSnd.play (positie);
"pauseBtn" (Pauzeknop) functie, definieer "pauseSong":
function pauseSong (e: Event): void if (sndC) position = sndC.position; sndC.stop (); songPaused = true;
"stopBtn" (stopknop) functie, definieer "stopSong":
function stopSong (e: Event): void sndC.stop (); positie = 0; songStopped = true;
We hebben nu de spelbesturing gebouwd.
De knoppen die we in stappen 15-17 hebben gemaakt, zijn niet nutteloos. We moeten Flash nu vertellen wat hun rol binnen de speler is:
redBtn.addEventListener (MouseEvent.CLICK, changeRed); yellowBtn.addEventListener (MouseEvent.CLICK, changeGeel); blueBtn.addEventListener (MouseEvent.CLICK, changeBlue);
Elke gekleurde knop heeft zijn respectieve functie. "changeRed" stelt de lijn van het spectrum in op "0xFF0000" (rood). "changeyellow" zal dit op "0xFFFF00" zetten (geel) en "changeBlue" zal "0x66CCFF" (cyaan) instellen. We willen ook dat Flash weet dat wanneer we op Rode kleur klikken, het 100% dekking overneemt terwijl de anderen een dekking van 50% krijgen
Opmerking: in ActionScript 3.0, 100% = 1, 10% = 0,1 enzovoort.
Alle gekleurde knoppen hebben deze functie, dus we moeten de dekking van de knop in elke functie aangeven.
function changeRed (e: Event): void lineClr = 0xFF0000; changeClr = true; redBtn.alpha = 1; geelBtn.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; geelBtn.alpha = 0,5; blueBtn.alpha = 1;
Laten we nu de standaardkleur van de lijn instellen. Ik kies Rood als standaard, je kunt elke gewenste kleur gebruiken.
if (! changeClr) lineClr = 0xFF0000; redBtn.alpha = 1; geelBtn.alpha = 0,5; blueBtn.alpha = 0,5;
Het laatste deel van ons Actionscript; we willen dat Flash het spectrum van het nummer laat zien. "lineClr" in "lineStyle" is een variabele binnen de kleurenknop in stap 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;" Met 50 kan Flash de Float in de song vermenigvuldigen en 170 is de y-coördinaat van het spectrum.
var ba: ByteArray = new ByteArray (); addEventListener (Event.ENTER_FRAME, drawl); functie drawl (e: Event): 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);
Titel en artiest worden later in onze speler getoond. "
De massa Tijdperk pics / era.jpg songs / themass.mp3 Dr.No-thema - pics / drno.jpg songs / drno.mp3
Maak albumhoezen voor de liedjes. Aanbevolen grootte is 65 px x 65 px; het past mooi in het scherm.
Test uw film (Ctrl + Enter) om de uitkomst te controleren. Je hebt je eigen flash-iPod-speler! Je kunt het gebruiken als muziekspeler voor je website; bewerk de muzieklijst zoals je wilt. Het is aan jou. Ga je gang en experimenteer, als je coole resultaten hebt, deel deze dan met ons.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
