Share
We gaan een eenvoudige mp3-speler bouwen die je kunt insluiten op elke webpagina (bijvoorbeeld de startpagina van een band). Door deze tut te volgen, leert u hoe u Illustrator-afbeeldingen kunt importeren, hoe u knopsprites met filmclips kunt bouwen en hoe u de klassen Timer en Geluid kunt gebruiken. Daar gaan we…
Eerst zal ik gewoon doornemen wat we nodig hebben om deze tutorial te voltooien:
Ik heb Caurina Tweener van derden gebruikt om elementen op het scherm te tweenen. Dit is niet vereist omdat u de eigen tween-klasse van Flash kunt gebruiken om dezelfde taak uit te voeren. Let op, als je niet bekend bent met Caurina, raad ik je aan om een kijkje te nemen. Tween Lite is een andere tussentijdse tweener van derden waarvan je misschien hebt gehoord. Het is een zeer krachtige tween-klasse die je ook voor dit project zou kunnen gebruiken als je dat wilde. Je vindt Caurina Tweener in de broncode.
Eerst moet u een nieuw Flash Actionscript 3.0-document maken. U hoeft geen documenteigenschappen aan te passen.
Ga naar Flash> Voorkeuren> Importeren van AI-bestanden op Mac of Bewerken> Voorkeuren> Importeren van AI-bestanden in Windows. Zorg ervoor dat je de volgende instellingen hebt:
Sla het op en geef het de naam "SimpleMP3Player.fla". Kopieer ook de directory "caurina" en "tarzan.mp3" naar dezelfde plaats als uw .fla-bestand.
Nu zijn we klaar om het Illustrator-bestand te importeren. Ga naar Bestand> Importeren> Importeren naar werkgebied. Zoek "simplemp3player.ai" uit de map "ai" van het bronpakket, druk op OK en u krijgt het scherm zoals hieronder getoond. Zet de lagen "Flash-lagen converteren naar lagen", zodat alle lagen in het ai-bestand rechtstreeks naar Flash worden verplaatst. De volgende twee opties, zoals weergegeven in de afbeelding, plaatsen alle illustraties op dezelfde coördinaten als in ai-bestand en passen het formaat van het Flash-document exact aan de grootte aan die we nodig hebben.
Wanneer u op OK klikt in het importdialoogvenster, moet uw document er uitzien zoals de afbeelding hierboven.
U hebt waarschijnlijk de knoppen Afspelen en Pauzeren in de laatste afbeelding opgemerkt. Dat wordt onze knopsprite die het geluid regelt. Alle knoppen zijn gegroepeerd in één groep.
Selecteer alleen de knoppengroep en druk op F8 om het scherm "Converteren naar symbool" te krijgen. Geef het de naam "knoppen" en zorg ervoor dat je MovieClip hebt geselecteerd als het type. Stel de registratie in de linkerbovenhoek in en klik op OK. Schakel over naar het venster Eigenschappen en geef het object de naam "knoppen". De onderstaande afbeelding illustreert deze stappen visueel:
We hebben onze knoppen in één filmclip, maar het masker is niet inbegrepen. We hebben nog een filmclip nodig om ze allemaal samen te binden.
Selecteer de knoppen filmclip en het maskerobject. Druk opnieuw op F8 en geef het nu een naam "buttonSprite". Vergeet ook niet om het een instantienaam te geven. Deze keer "bs" (ik weet wat je denkt, maar dit is een afkorting van ButtonSprite).
Nu is onze knopsprite bijna klaar om te rocken. Het enige wat we moeten doen is het zo maskeren dat het slechts één knop tegelijk toont.
Dubbelklik op uw buttonSprite-filmclip. Maak een nieuwe laag boven de actieve laag en noem deze "masker". Selecteer het maskerobject en knip het uit met "Cmd + X" op Mac of "Ctrl + X" op Windows. Selecteer de maskerlaag en plak met "Cmd + V" op Mac of "Ctrl + V" op Windows. Het maakt niet uit waar je maskerobject zich bevindt, omdat we het daarna op de juiste plaats uitlijnen.
Open, terwijl je masker nog steeds is geselecteerd, het paneel Uitlijnen (Venster> Uitlijnen) en controleer of de knop "Naar fase" is ingedrukt. Druk nu op de knoppen "De bovenrand uitlijnen" en "De linkerrand uitlijnen" en uw maskerobject moet nu in de juiste positie staan, de linkerbovenhoek van uw filmclip.
Het enige dat u hoeft te doen, is de knoppen maskeren. Klik met de rechtermuisknop boven de maskeerlaag en kies Masker.
U kunt het effect onmiddellijk zien; er is slechts één knop zichtbaar.
Laten we de knoppen enige tijd vergeten en scherpstellen op het display van de MP3-speler. Ik zal je laten zien hoe je dit weergave-element handmatig kunt bouwen. Natuurlijk kan het met AS3 worden gedaan, maar laten we het deze keer handmatig doen.
Selecteer eerst het maskerelement uit de maskerlaag. Converteer het naar een filmclip en geef het de naam "displayMask". Gebruik deze naam ook als de instantienaam. Het masker voor weergave is klaar, dus verberg de laag. Maak vervolgens een laag tussen de knoppenlaag en de maskerlaag. Noem het "tekst". Selecteer het gereedschap Tekst in het palet Gereedschappen en gebruik de opties in de onderstaande afbeelding:
We hebben tekstvelden nodig om onze informatie te tonen (artiest, naam van het nummer, laadpercentage en lengte van het nummer). We zullen tekstvelden handmatig in het werkgebied maken.
Teken eerst tekstfieds op de tekstlaag zoals weergegeven in de afbeelding hieronder. Converteer alle drie de tekstvelden naar een enkele filmclip met de naam "playerTexts". Maak nog een tekstveld en noem het "preloader". U hoeft dit niet om te zetten naar een filmclip.
Alles wat we moeten doen, is ons nieuwe lader-tekstveld en playerTexts-filmclip in één filmclip opnemen, zodat we teksten kunnen beheren wanneer en wanneer we dat willen.
Selecteer het lader-tekstveld en playerTexts-filmclip en druk op F8. Geef het een naam en een instantienaam van "display". Nu we onze weergavehiërarchie hebben voltooid, ziet het er als volgt uit:
Om een data-voorbeeld te schrijven naar songInfo-textfield moeten we de volgende regel code schrijven:
display.playerTexts.songInfo.text = 'Hier plaatsen we de naam van de artiest en de song';
Dus nu hebben we elk grafisch element klaar dat we nodig hebben voor de MP3-speler. Vervolgens duiken we diep in de code, dus duik met me mee!
Om de code te laten werken, moeten we de documentklasse maken. Documentklassecode wordt als eerste uitgevoerd wanneer .swf-bestanden worden afgespeeld. U hoeft uw code niet meer naar de tijdlijn te schrijven en uw klasse is in de toekomst gemakkelijker te importeren naar een ander .fla-bestand als dat nodig is.
Ga naar Bestand> Nieuw. Selecteer "Actionscript-bestand" in het geopende venster en klik op OK. Sla het bestand op in dezelfde map als uw .fla-bestand en noem het "SimpleMP3Player.as".
Wijs nu uw nieuwe AS-bestand toe als documentklasse. Klik op het werkgebied en ga naar het paneel Eigenschappen. Daar vindt u het veld "Klasse" waar u de klassenaam moet invoeren die u hebt gemaakt. Voer "SimpleMP3Player" in en klik op de kleine potloodknop. Als u de klassenaam correct hebt gespeld, moet het bestand "SimpleMP3Player.as" actief worden. Anders gooit Flash een foutmelding.
Code brengt alles tot leven. Dit is het voltooide ActionScript. Ik zal het blok voor blok uitleggen. Controleer ook de broncode van het bronpakket, ik heb het van begin tot eind becommentarieerd.
Accentsconagua
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; import caurina.transitions.Tweener; public class SimpleMP3Player breidt MovieClip uit // Maak enkele variabelen die we nodig hebben private var mp3File: Sound; private var mp3FilePosition: SoundChannel; privé var id3Data: ID3Info; privé var id3InfoAvailable = false; private var updateTime: Timer; private var playingSound: Boolean = false; private var soundPosition: Number; private var songReachedEnd: Boolean = false; private var buttonPos: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252'); openbare functie SimpleMP3Player () display.playerTexts.x = -73; display.mask = displayMask; bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3]; loadMP3 (); private function loadMP3 (): void mp3File = new Sound (); mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data); mp3File.load (nieuwe URLRequest ('tarzan.mp3')); Tweener.addTween (display.preloader, x: 96, time: 1); persoonlijke functie mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; if (currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading); privéfunctie mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1); private function errorLoadingSound (e: IOErrorEvent): void trace ('Fout bij laden van geluid:' + e); private function getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3; private function playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else mp3FilePosition = mp3File.play (); playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField); bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0]; bs.buttons.addEventListener (MouseEvent.MOUSE_OVER, mouseOverBs); bs.buttons.addEventListener (MouseEvent.MOUSE_OUT, mouseOutBs); bs.buttons.addEventListener (MouseEvent.CLICK, mouseClickBs); updateTime = nieuwe Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start (); var si: String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, x: 60, time: 1); persoonlijke functie updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%'; private function getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; var currentMinutes = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePosition.position / 1000)% 60; if (totalSeconds < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds; private function songFinished(e:Event):void mp3FilePosition.removeEventListener(Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener(TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos[3]; mp3FilePosition.stop(); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'PLAY AGAIN?'; /* * allButtons.bs event methods begin */ private function mouseOverBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[5]; else bs.buttons.y = buttonPos[1]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1]; private function mouseOutBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[0]; else bs.buttons.y = buttonPos[4]; if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3]; private function mouseClickBs(e:MouseEvent):void if (playingSound) bs.buttons.y = buttonPos[4]; soundPosition = mp3FilePosition.position; updateTime.stop(); mp3FilePosition.stop(); playingSound = false; display.playerTexts.times.text = 'PAUSE'; else if (!playingSound) bs.buttons.y = buttonPos[2]; playMP3(true, soundPosition); playingSound = true; else if (songReachedEnd) songReachedEnd = false; playMP3(false, 0); package // Place waar alle klassen geïmporteerd worden openbare klasse SimpleMP3Player breidt MovieClip uit openbare functie SimpleMP3Player ()
Ons startpunt lijkt op het bovenstaande voorbeeld. Vergeet niet dat de klassenaam hetzelfde moet zijn als de bestandsnaam van uw documentklasse. Alles in de openbare functie SimpleMP3Player wordt uitgevoerd direct nadat Flash onze klasse heeft geladen.
Laten we alle klassen importeren die onze MP3-speler nodig heeft om goed te werken.
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; import flash.events.IOErrorEvent; import flash.events.MouseEvent; import flash.events.ProgressEvent; import flash.events.TimerEvent; import flash.media.Sound; import flash.media.SoundChannel; import flash.media.ID3Info; import flash.net.URLRequest; import flash.utils.Timer; import flash.text.TextField; import flash.text.TextFieldAutoSize; import caurina.transitions.Tweener;
Alles zou vrij eenvoudig moeten zijn. In de laatste regel importeren we Caurina Tweener. Zorg ervoor dat de caurina-directory zich op dezelfde locatie bevindt als uw .fla-bestand.
Alle variabelen zijn privé. Alleen de klasse SimpleMP3Player kan deze gebruiken.
private var mp3File: Geluid; private var mp3FilePosition: SoundChannel;
Het mp3File-geluidsobject slaat ons Tarzan.mp3-geluid op. mp3FilePosition is een SoundChannel-object. We hebben het nodig om ons de huidige positie van de mp3File in milliseconden te vertellen. Met dit object kunnen we ook het mp3-bestand stoppen.
privé var id3Data: ID3Info; privé var id3InfoAvailable = false;
Het id3Data-object bewaart mp3-geluiden id3-informatie. Bijvoorbeeld de naam van het nummer en de naam van de artiest. id3InfoAvailable vertelt onze preloader dat id3-info beschikbaar is, zodat de code mp3File kan spelen.
private var updateTime: Timer;
updateTime is ons timerobject dat het weergavetijden-tekstveld bijwerkt. U vindt hier meer informatie over de klasse Timer. Ik zal dit later doornemen.
private var playingSound: Boolean = false; private var soundPosition: Number; private var songReachedEnd: Boolean = false;
playingSound is gewoon een booleaanse variabele die ons vertelt of mp3File momenteel wordt afgespeeld. soundPosition slaat een numerieke waarde op wanneer gebruikers op de knop Pauzeren drukken, zodat we muziek kunnen blijven afspelen vanuit de gepauzeerde positie wanneer de gebruiker op de knop Afspelen klikt. songReachedEnd geeft aan dat het nummer is afgelopen.
/ * * buttonPos [0] = playUp * knop Pos [1] = playOver * knop Pos [2] = playDown * knop Pos [3] = playDis * knop Pos [4] = pauseUp * knop Pos [5] = pauseOver * knop Pos [6] = pauseDown * buttonPos [7] = pauseDis * / private var-knopPos: Array = new Array ('0', '-36', '-72', '-108', '-144', '-180', '- 216 ',' -252 '); Finalyl, last but not least, onze array-variabele die de knoppen filmclip y-coördinaten bevat. Bijvoorbeeld:
bs.buttons.y = buttonsPos [4];
De pauzeknop wordt vervolgens weergegeven op het scherm. Als u 0 binnen de [haakjes] gebruikt, ziet u de knop Afspelen.
Het is tijd om te zien wat onze code het eerst doet wanneer deze is geladen. Laten we de eerste functie in onze code behandelen; de SimpleMP3Player-functie.
openbare functie SimpleMP3Player () display.mask = displayMask; display.playerTexts.x = -73;
de SimpleMP3Player-functie is een constructorfunctie, dus deze moet openbaar zijn. Als u de naam privé wijzigt, krijgt u een foutmelding. De standaardstatus van functies is openbaar, dus u hoeft niet noodzakelijk 'openbaar' te schrijven vóór de functie.
Maskeren met code is erg gemakkelijk en ongecompliceerd. Op regel 3 zie je code voor de maskering. We wijzen de "displayMask" -clip gewoon toe aan de maskereigenschap van de "display" -filmclip. Dat is het.
Tweede eigenschap display.playerTexts.x verplaatst de filmclip "playerTexts" langs de horizontale as. We verplaatsen het gewoon uit het zicht om te coördineren -73. Mask verbergt filmclip "playerTexts".
bs.buttons.buttonMode = bs.buttons.enabled = false; bs.buttons.y = buttonPos [3];
"buttons" is een filmclip en standaard blijft de cursor als een basispijl wanneer de muis eroverheen beweegt. Als u de eigenschap "buttonMode" instelt op true, verandert de cursor in een hand wanneer de muis over de cursor zweeft. In het begin willen we die cursor als een pijl zodat buttonMode op false staat. Op dezelfde regel stellen we de eigenschap "enabled" in op false. Dat betekent dat de filmclip "knoppen" niet kan worden aangeklikt. In regel 2 stellen we de filmclippositie "knoppen" in op de uitgeschakelde afspeelknop.
De eerste regel kan verwarrend zijn, maar als ik het zo schrijf ...
bs.buttons.buttonMode = false; bs.buttons.enabled = false;
... je kunt het waarschijnlijk beter zien. Ik spaart ruimte door het op één regel te schrijven.
Alles wat we nu doen is onze "loadMP3" -methode aanroepen.
loadMP3 ();
Deze methode is onze belangrijkste methode. Wat het doet is het mp3-bestand laden, de benodigde EventListeners declareren en de preloader verschuiven om weer te geven.
mp3File = nieuw Geluid ();
Deze regel maakt een nieuw Sound-object. We hebben toegang tot alle Sound class-methoden en -eigenschappen via mp3File.
mp3File.addEventListener (ProgressEvent.PROGRESS, mp3FileLoading); mp3File.addEventListener (Event.COMPLETE, mp3FileLoaded); mp3File.addEventListener (IOErrorEvent.IO_ERROR, errorLoadingSound); mp3File.addEventListener (Event.ID3, getID3Data);
De eerste regel verklaart de PROGRESS-gebeurtenis en elke keer dat de gebeurtenis wordt aangeroepen, wordt de methode mp3FileLoading aangeroepen. Deze luisteraar heeft een paar eigenschappen die we nodig hebben. De eerste is bytesTotal die de volledige grootte van het mp3-bestand in bytes houdt. Ten tweede is bytesLoaded dat de momenteel geladen bytes bevat. Met deze twee eigenschappen kunnen we het percentage tellen dat het bestand heeft geladen en het voor de gebruiker weergeven.
De tweede regel roept op wanneer het volledige mp3-bestand is geladen. Het roept de methode mp3FileLoaded aan.
De derde regel is voor foutafhandeling. Als bijvoorbeeld en mp3-bestand niet wordt gevonden, roept dit evenement aan. Het roept errorLoadingSound-methode op.
In regel 5 wordt de gebeurtenis opgeroepen als id3-gegevens beschikbaar zijn. Het roept de getID3Data-methode op.
mp3File.load (nieuwe URLRequest ('tarzan.mp3')); "load" -methode laadt ons Tarzan mp3-bestand. Tussen haken verklaren we een nieuwe URLReaquest en daarbinnen is het pad naar ons mp3-bestand. Ons pad is relatief en tarzan.mp3 moet zich op dezelfde locatie bevinden als de FLA- en AS-bestanden. Deze regel is hetzelfde als hieronder. Gebruik degene die u verkiest.
var req: URLRequest = nieuwe URLRequest ('tarzan.mp3'); mp3File.load (req); Dit is de eerste keer dat we Caurina gebruiken, dus ik zal snel laten zien hoe het werkt.
Tweener.addTween (target, properties);
Dit is de basiscode. Doel is waar u de naam schrijft van het doelobject dat u wilt tweenen. In eigenschappen definieert u wat u met het doel wilt doen. U kunt bijvoorbeeld de x- en y-coördinaten, transparantie, schaal of rotatie wijzigen.
Tweener.addTween (display.preloader, x: 96, time: 1);
Ons doel is het tekstveld "preloader" in de filmclip "display". Eigenschap "x" verplaatst het en de eigenschap "tijd" geeft de tijd aan die de tween nodig heeft. De tijd wordt gemeten in seconden. Als u milliseconden wilt gebruiken, gebruikt u de notatie ".5".
privéfunctie mp3FileLoading (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.preloader.text = 'LOADING ...' + currentPercent + '%'; if (currentPercent> 50 && id3InfoAvailable) Tweener.addTween (display.preloader, x: 200, time: 1, onComplete: playMP3, onCompleteParams: [false, 0]); mp3File.removeEventListener (ProgressEvent.PROGRESS, mp3FileLoading);
Zoals ik eerder al zei, toont de "mp3FileLoading" -methode een procentuele waarde van hoeveel het mp3-bestand is geladen. Het begint ook het nummer wanneer het percentage hoger wordt dan 50%.
currentPercent is voor het tellen van de procentuele waarde. We sluiten het af met de "Math.round" -methode. Regel 4 schrijft de procentuele waarde naar ons tekstveld, zodat de gebruiker kan zien wat er gebeurt met laden.
Binnen de "als" -instructie controleren we of het percentage boven de 50 ligt en de "id3InfoAvailable" -variabele waar is. Als beide true retourneren, voert de instructie "if" alles binnen de haakjes uit.
Wanneer de if-instructie waar is, tweenen we het tekstveld "preloader" weg. Wanneer de tween voltooid is, roept Caurina de "playMP3" -methode aan en geeft er twee eigenschappen aan door. We zien de "playMP3" -methode in de volgende stap.
De PROGRESS-gebeurtenis is niet langer nodig, dus we verwijderen deze op regel 9.
privéfunctie mp3FileLoaded (e: Event): void mp3File.removeEventListener (Event.COMPLETE, mp3FileLoaded); mp3ile.removeEventListener (ProgressEvent.PROGRESS, updateBufferField); Tweener.addTween (display.playerTexts.buffer, x: 200, time: 1);
Deze methode wordt aangeroepen wanneer de hele song is geladen. Eerst verwijderen we onnodige EventListeners. In regel 5 tweenen we het tekstveld "buffer" aan de rechterkant.
private function errorLoadingSound (e: IOErrorEvent): void trace ('Fout bij laden van geluid:' + e); Deze foutafhandeling is heel eenvoudig. Het traceert alleen fouten als er fouten optreden.
private function getID3Data (e: Event): void id3InfoAvailable = true; id3Data = mp3File.id3;
We stellen "id3InfoAvailable" in op true in regel 3. De "mp3FileLoading" -methode controleert deze variabele elke keer en start het geluid alleen als het waar is. Op deze manier zorgen we ervoor dat id3-info beschikbaar is, zodat de gebruiker echte informatie op het display ziet.
In regel 4 wijzen we mp3File id3 metadata toe aan het ID3Info-object met de naam id3Data die we in stap 12 hebben gemaakt.
Deze methode is de meest vitale methode in onze speler. Laten we naar het eerste blok kijken.
private function playMP3 (useSp: Boolean, sp: Number): void if (useSp) mp3FilePosition = mp3File.play (sp); else mp3FilePosition = mp3File.play ();
De "playMP3" -methode vereist twee eigenschappen. "useSp" geeft "gebruik geluidspositie" aan en "sp" is "geluidspositie".
In regel 3 testen we of "useSp" waar is. Als dat het geval is, speelt de code onze song af vanaf het gewenste punt. Dit punt wordt doorgegeven in de eigenschap "sp". Als deze fout is, beginnen we het nummer vanaf het begin af te spelen. Dit alles heeft te maken met de knop Pauzeren.
playingSound = true; mp3FilePosition.addEventListener (Event.SOUND_COMPLETE, songFinished); mp3File.addEventListener (ProgressEvent.PROGRESS, updateBufferField);
Lijn 1 zet de speelsound op true. Nu kunnen we controleren of het geluid speelt en doen wat ooit nodig is.
Nieuwe EventListener in regel 2 wordt geactiveerd telkens wanneer het nummer wordt afgespeeld. De "songFinished" -methode wordt uitgevoerd. Merk op dat we EventListener aan object mp3FilePosition toevoegen.
De tweede nieuwe EventListener in regel 3 voegt dezelfde "PROGRESS" -gebeurtenis toe aan mp3File als aan het begin van de code. Deze luisteraar vuurt gewoon een andere methode op. De "updateBuffer" -methode is voor het bijwerken van het tekstveld "buffer".
bs.buttons.buttonMode = bs.buttons.enabled = true; bs.buttons.y = buttonPos [0];
De eerste regel die je al vertrouwd zult vinden. Ons mp3-bestand wordt afgespeeld, zodat we de knoppen kunnen bijwerken om de juiste status te tonen, eigenschappen "buttonMode" en "enabled" in te schakelen.
We gebruiken "Timer" om de huidige geluidspositie in seconden weer te geven. Met "Timer" kunt u methoden in tijdreeksen uitvoeren.
updateTime = nieuwe Timer (100); updateTime.addEventListener (TimerEvent.TIMER, getMP3Time); updateTime.start ();
Hier maakt de eerste regel een nieuw "Timer" -object met een interval van 100 milliseconden. Je vraagt je misschien af waarom we de huidige tijd elke 100 millisecs willen bijwerken ... 1 seconde is te traag voor onze speler en zelfs 0,5 seconden is te traag. Ik wil dat het de tijd heel soepel updatet. Meer over Timer-klasse.
We hebben ook een EventListener nodig om elke 100 milliseconden iets te doen. "TIMER" -gebeurtenis voert de "getMP3Time" -methode uit die ik in de volgende stap zal doorlopen.
Lijn 4 start onze "Timer".
var si: String = id3Data.artist + '-' + id3Data.songName; si = si.toUpperCase (); display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT; display.playerTexts.songInfo.wordWrap = false; display.playerTexts.songInfo.text = si; Tweener.addTween (display.playerTexts, x: 60, time: 1);
In het laatste blok tonen we de id3-metadata aan de gebruiker. De artiestennaam en de naam van het nummer worden in de eerste regel naar een nieuwe variabele gepusht. Dit komt omdat ik de hele reeks in de volgende regel wil kapitaliseren. We gebruiken het bitmap-lettertype, dus ik denk dat het er alleen maar beter uitziet in hoofdletters.
In regel 3 zorgen we ervoor dat het tekstveld "songInfo" lang genoeg is om de "si" -reeks te tonen. Regel 4 is om de woordomloop in het tekstveld te vermijden en in regel 5 kennen we eenvoudig de "si" -reeks toe aan het tekstveld "songInfo".
De laatste regel schuift de filmclip "playerTexts" naar "display".
Het is beleefd om de gebruiker te laten zien hoeveel de mp3-bestandsgegevens zijn geladen. We hebben onze preloader, maar ik dacht dat we ook een bufferveld nodig hadden omdat ons nummer begint te spelen nadat 50% is geladen. Deze methode gaat verder waar de "mp3FileLoading" -methode was gebleven.
persoonlijke functie updateBufferField (e: ProgressEvent): void var currentPercent: Number = Math.round (e.bytesLoaded / e.bytesTotal * 100); display.playerTexts.buffer.text = currentPercent + '%';
Er is hier niets speciaals, slechts een privéfunctie met twee actielijnen. Eenvoudig percentage tellen en toewijzen aan het tekstveld "buffer".
Ik laat deze methode in één keer zien, want dit is gewoon wiskunde en echt basiscodering. Laten we het toch maar doornemen.
private function getMP3Time (e: TimerEvent): void var totalMinutes = Math.floor (mp3File.length / 1000/60); var totalSeconds = Math.floor (mp3File.length / 1000)% 60; var currentMinutes = Math.floor (mp3FilePosition.position / 1000/60); var currentSeconds = Math.floor (mp3FilePosition.position / 1000)% 60; if (totalSeconds < 10) totalSeconds = '0' + totalSeconds; if (currentSeconds < 10) currentSeconds = '0' + currentSeconds; display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;
In de eerste 4 regels tellen we de tijden die we nodig hebben. Dit is een beetje lastig omdat alle terugkerende waarden in milliseconden zijn. We sluiten ook minuten en seconden af.
Regel 8 en 9 zijn voor het toevoegen van een extra nul vóór seconden als die waarden onder de 10 liggen (dit is alleen tweaken en niet vereist). Voor mij lijkt het "tijd" tekstveld dan een beetje schoner.
De laatste regel toont de hele tijd aan de gebruiker.
Laten we doorgaan met de basiscode.
privéfunctie songFinished (e: Event): void mp3FilePosition.removeEventListener (Event.SOUND_COMPLETE, songFinished); updateTime.removeEventListener (TimerEvent.TIMER, getMP3Time); bs.buttons.y = buttonPos [3]; mp3FilePosition.stop (); playingSound = false; songReachedEnd = true; soundPosition = 0; display.playerTexts.times.text = 'WEER OPNIEUW?';
De 'songFinished'-evenementmethode wordt elke keer gelanceerd wanneer het nummer wordt afgespeeld.
In de eerste twee regels verwijderen we onnodige EventListeners. Vervolgens tonen we de uitgeschakelde afspeelknop voor de gebruiker en stoppen we het mp3-bestand. Stoppen is niet verplicht, maar we doen het voor het geval dat.
"playingSound" is ingesteld op false en "songReachedEnd" op true. In de ext-stap zie je waarom we de variabele "songReachedEnd" nodig hebben.
"soundPosition" is overal in onze klasse toegankelijk, dus moet het op dit punt op 0 worden gezet. Nu zorgen we ervoor dat als de gebruiker het liedje opnieuw wil spelen, het vanaf het begin begint.
De laatste regel stelt het tekstveld "times" in om "PLAY AGAIN?" tekst. Onze gebruikers zijn de koningen, daarom moeten we alle mogelijke informatie aan hen geven.
private function mouseOverBs (e: MouseEvent): void if (playingSound) bs.buttons.y = buttonPos [5]; else bs.buttons.y = buttonPos [1]; if (songReachedEnd &&! playingSound) bs.buttons.y = buttonPos [1];
Hier wordt de methode "mouseOverBs" geactiveerd telkens wanneer de muis de filmclip "bs" overschrijdt.
Eerst controleren deze event-methoden of "playingSound" waar is en of de filmclip "buttons" zich in de "pauze-over" -status bevindt. Anders wordt de status "play-over" weergegeven. Onze laatste regel controleert of het geluid is afgespeeld en of de gebruiker de song opnieuw wil spelen.
private function mouseOutBs (e: MouseEvent): void if (playingSound) bs.buttons.y = buttonPos [0]; else bs.buttons.y = buttonPos [4]
