Erstellen einen einfachen und attraktiven MP3-Player

Wir werden einen einfachen MP3-Player bauen, den Sie in jede Webseite einbetten können (z. B. die Startseite einer Band). In diesem Tutorial erfahren Sie, wie Sie Illustrator-Grafiken importieren, Tasten-Sprites mit Movieclips erstellen und die Klassen Timer und Sound verwenden. Auf geht's..

Fertig machen

Zuerst gehe ich einfach durch, was wir brauchen, um dieses Tutorial abzuschließen:

Ich habe den Caurina Tweener der Drittanbieter-Klasse verwendet, um Elemente auf dem Bildschirm zu tweeten. Dies ist nicht erforderlich, da Sie die Flash-eigene Tween-Klasse verwenden können, um denselben Job auszuführen. Wohlgemerkt, wenn Sie mit Caurina nicht vertraut sind, empfehle ich Ihnen, einen Blick darauf zu werfen. Tween Lite ist ein weiterer Tweener von Drittanbietern, von dem Sie vielleicht schon gehört haben. Es ist eine sehr mächtige Tween-Klasse, die Sie auch für dieses Projekt verwenden können, wenn Sie möchten. Sie finden Caurina Tweener im Quellcode.

• Der Quellcode enthält eine MP3-Datei, die wir brauchen werden: Tarzans mächtiger Schrei :). Sie können auch Ihre eigene MP3-Datei verwenden, wenn Sie möchten.
• Ebenfalls im Quellcode finden Sie das Verzeichnis "ai", das die Datei simplemp3player.ai enthält. Diese Datei enthält alle Grafiken für den Player.
• Zuletzt habe ich die Schriftart eingefügt, die wir brauchen. Es heißt 04b03 und ist eine Bitmap-Schriftart. Installieren Sie es und Sie können loslegen.

Schritt 1: Neue Datei erstellen

Zuerst müssen Sie ein neues Flash Actionscript 3.0-Dokument erstellen. Sie müssen keine Dokumenteigenschaften anpassen.

Gehen Sie unter Mac zu Flash > Einstellungen > AI-Dateiimporter oder unter Windows zu Bearbeiten > Einstellungen > AI-Dateiimporter. Stellen Sie sicher, dass Sie die folgenden Einstellungen haben:

Speichern Sie es und geben Sie ihm den Namen "SimpleMP3Player.fla". Kopieren Sie auch das Verzeichnis "caurina" und "tarzan.mp3" an dieselbe Stelle wie Ihre .fla-Datei.

Schritt 2: Illustrator-Datei importieren

Jetzt können wir die Illustrator-Datei importieren. Gehen Sie zu Datei > Importieren > In Bühne importieren. Suchen Sie "simplemp3player.ai" aus dem Quellpaket "ai", drücken Sie OK und Sie erhalten den Bildschirm wie unten gezeigt. Stellen Sie die Option "In Ebenen konvertieren" auf "Flash-Ebenen" ein, damit alle in der AI-Datei enthaltenen Ebenen direkt in Flash angezeigt werden. Mit den nächsten beiden Optionen, wie im Bild gezeigt, platzieren Sie alle Grafiken auf den gleichen Koordinaten wie in der AI-Datei und passen die Größe Ihres Flash-Dokuments genau an die Größe an, die wir benötigen.

Wenn Sie im Importdialog auf OK klicken, sollte Ihr Dokument wie oben abgebildet aussehen.

Schritt 3: Erstellen Sie die Taste Sprite

Wahrscheinlich haben Sie im letzten Bild die Tasten zum Abspielen und Anhalten bemerkt. Das wird unser Button-Sprite sein, das den Sound steuert. Alle Tasten sind in einer Gruppe zusammengefasst.

Wählen Sie nur die Tastengruppe aus und drücken Sie F8, um den Bildschirm "In Symbol konvertieren" zu erhalten. Geben Sie ihm den Namen "Tasten" und stellen Sie sicher, dass Sie MovieClip als Typ ausgewählt haben. Stellen Sie die Registrierung in die obere linke Ecke und klicken Sie auf OK. Wechseln Sie zum Eigenschaftenfenster und geben Sie dem Objekt den Instanznamen "Tasten". Das folgende Bild zeigt diese Schritte visuell:

Wir haben unsere Tasten in einem Movieclip, aber die Maske ist nicht enthalten. Wir brauchen noch einen Movieclip, um sie alle zusammenzubinden.

Wählen Sie die Tasten Movieclip und das Maskenobjekt. Drücken Sie erneut F8 und geben Sie ihm den Namen "buttonSprite". Denken Sie auch daran, ihm einen Instanznamen zu geben. Diesmal "bs" (ich weiß, was Sie denken, aber dies ist eine Abkürzung für ButtonSprite).

Schritt 4: Manuelle Maskierung

Jetzt ist unsere Taste Sprite fast bereit zu rocken. Alles, was wir tun müssen, ist es zu maskieren, so dass jeweils nur eine Taste angezeigt wird.

Doppelklicken Sie auf Ihren buttonSprite-Movieclip. Erstellen Sie eine neue Ebene über der aktiven Ebene und nennen Sie sie "Maske". Wählen Sie das Maskenobjekt aus und schneiden Sie es mit "Cmd + X" unter Mac oder "Strg + X" unter Windows aus. Wählen Sie die Maskenebene aus und fügen Sie sie mit "Cmd + V" unter Mac oder "Strg + V" unter Windows ein. Es spielt keine Rolle, wo sich Ihr Maskenobjekt befindet, da wir es als Nächstes an der richtigen Stelle ausrichten.

Öffnen Sie bei noch ausgewählter Maske das Ausrichtungsfenster (Fenster > Ausrichten) und stellen Sie sicher, dass die Schaltfläche "Zum Stufen" gedrückt ist. Drücken Sie nun die Schaltflächen "Obere Kante ausrichten" und "Linke Kante ausrichten". Ihr Maskenobjekt sollte sich nun an der richtigen Position in der oberen linken Ecke Ihres Movieclips befinden.

Sie müssen nur noch die Schaltflächen maskieren. Klicken Sie mit der rechten Maustaste über die Maskenebene und wählen Sie Maske.

Sie können den Effekt sofort sehen; Es ist nur eine Taste sichtbar.

Schritt 5: Beginnen Sie mit dem Erstellen des Displays

Vergessen wir die Tasten für eine Weile und konzentrieren uns auf das Display des MP3-Players. Ich zeige Ihnen, wie Sie dieses Displayelement manuell erstellen. Es könnte natürlich mit AS3 gemacht werden, aber diesmal machen wir es manuell.

Wählen Sie zuerst das Maskenelement aus der Maskenebene aus. Konvertieren Sie es in einen Movieclip und geben Sie ihm den Namen "displayMask". Verwenden Sie diesen Namen auch als Instanznamen. Die Maske für das Display ist fertig, also verstecken Sie die Ebene. Erstellen Sie als Nächstes eine Ebene zwischen der Tastenebene und der Maskenebene. Nennen Sie es "Text". Wählen Sie das Textwerkzeug aus der Werkzeugpalette aus und verwenden Sie die im Bild unten gezeigten Optionen:

Schritt 6: Hinzufügen der Textfeldern zum Display

Wir benötigen Textfelder, um unsere Informationen anzuzeigen (Künstler, Songname, Ladeprozentsatz und Songlänge). Wir erstellen manuell Textfelder für die Bühne.

Zeichnen Sie zuerst Textfieds auf die Textebene, wie in der Abbildung unten gezeigt. Konvertieren Sie alle drei Textfelder in einen einzigen Movieclip namens "playerTexts". Erstellen Sie ein weiteres Textfeld und nennen Sie es "Preloader". Sie müssen dies nicht in einen Movieclip konvertieren.

Schritt 7: Vervollständigen Sie das Display

Alles, was wir tun müssen, ist, unser neues Loader-Textfeld und den PlayerTexts-Movieclip in einen Movieclip aufzunehmen, damit wir Texte nach Belieben steuern können.

Wählen Sie das Loader-Textfeld und den playerTexts-Movieclip aus und drücken Sie F8. Geben Sie ihm einen Namen und einen Instanznamen von "display". Nachdem wir unsere Anzeigehierarchie abgeschlossen haben, sollte sie folgendermaßen aussehen:

Um ein Datenbeispiel in songInfo-textfield zu schreiben, müssen wir die folgende Codezeile schreiben:

1

	display.playerTexts.songInfo.text = 'This is where we put the artist and song name';

Jetzt haben wir alle grafischen Elemente bereit, die wir für den MP3-Player benötigen. Als nächstes springen wir tief in den Code ein, also tauche mit mir!

Schritt 8: Dokumentklassendatei erstellen

Damit der Code funktioniert, müssen wir die Dokumentklasse erstellen. Der Dokumentklassencode wird zuerst ausgeführt, wenn SWF-Dateien abgespielt werden. Sie müssen Ihren Code nicht mehr in die Timeline schreiben und Ihre Klasse kann in Zukunft einfacher in eine andere .fla-Datei importiert werden, wenn dies erforderlich ist.

Gehen Sie zu Datei > Neu. Wählen Sie im folgenden Fenster "Actionscript-Datei" aus und klicken Sie auf OK. Speichern Sie die Datei im selben Ordner wie Ihre .fla-Datei und nennen Sie sie "SimpleMP3Player.as".

Weisen Sie nun Ihre neue AS-Datei als Dokumentklasse zu. Klicken Sie auf die Bühne und wechseln Sie zum Eigenschaftenfenster. Dort finden Sie das Feld "Klasse", in das Sie den von Ihnen erstellten Klassennamen eingeben müssen. Geben Sie "SimpleMP3Player" ein und klicken Sie auf die kleine Bleistiftschaltfläche. Wenn Sie den Klassennamen richtig geschrieben haben, sollte die Datei "SimpleMP3Player.as" aktiv werden. Andernfalls gibt Flash einen Fehler aus.

Schritt 9: Der Code

Code erweckt alles zum Leben. Hier ist das fertige ActionScript, ich werde es Block für Block erklären. Überprüfen Sie auch den Quellcode aus dem Quellpaket. Ich habe ihn von Anfang bis Ende kommentiert.

1

package

2

{

3

	import flash.display.MovieClip;

4

	import flash.events.Event;

5

	import flash.events.EventDispatcher;

6

	import flash.events.IOErrorEvent;

7

	import flash.events.MouseEvent;

8

	import flash.events.ProgressEvent;

9

	import flash.events.TimerEvent;

10

	import flash.media.Sound;

11

	import flash.media.SoundChannel;

12

	import flash.media.ID3Info;

13

	import flash.net.URLRequest;

14

	import flash.utils.Timer;

15

	import flash.text.TextField;

16

	import flash.text.TextFieldAutoSize;

17

	import caurina.transitions.Tweener;

18

19

	public class SimpleMP3Player extends MovieClip

20

	{

21

		// Create some variables that we need

22

		private var mp3File:Sound;

23

		private var mp3FilePosition:SoundChannel;

24

		private var id3Data:ID3Info;

25

		private var id3InfoAvailable = false;

26

27

		private var updateTime:Timer;

28

29

		private var playingSound:Boolean = false;

30

		private var soundPosition:Number;

31

		private var songReachedEnd:Boolean = false;

32

33

		private var buttonPos:Array = new Array('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252');

34

35

		public function SimpleMP3Player()

36

		{	

37

			display.playerTexts.x = -73;

38

			display.mask = displayMask;

39

40

			bs.buttons.buttonMode = bs.buttons.enabled = false;

41

			bs.buttons.y = buttonPos[3];

42

43

			loadMP3();

44

		}

45

46

		private function loadMP3():void

47

		{

48

			mp3File = new Sound();

49

			mp3File.addEventListener(ProgressEvent.PROGRESS, mp3FileLoading);

50

			mp3File.addEventListener(Event.COMPLETE, mp3FileLoaded);

51

			mp3File.addEventListener(IOErrorEvent.IO_ERROR, errorLoadingSound);

52

53

			mp3File.addEventListener(Event.ID3, getID3Data);

54

			mp3File.load(new URLRequest('tarzan.mp3'));

55

56

			Tweener.addTween(display.preloader, {x: 96, time:1});

57

		}

58

59

		private function mp3FileLoading(e:ProgressEvent):void

60

		{

61

			var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);

62

			display.preloader.text = 'LOADING...' + currentPercent + '%';

63

64

			if (currentPercent > 50 && id3InfoAvailable)

65

			{

66

				Tweener.addTween(display.preloader, {x: 200, time:1, onComplete:playMP3, onCompleteParams:[false, 0]});

67

				mp3File.removeEventListener(ProgressEvent.PROGRESS, mp3FileLoading);

68

			}

69

		}

70

71

		private function mp3FileLoaded(e:Event):void

72

		{

73

			mp3File.removeEventListener(Event.COMPLETE, mp3FileLoaded);

74

			mp3File.removeEventListener(ProgressEvent.PROGRESS, updateBufferField);

75

			Tweener.addTween(display.playerTexts.buffer, {x: 200, time:1});

76

		}

77

78

		private function errorLoadingSound(e:IOErrorEvent):void

79

		{

80

			trace('Error loading sound: ' + e);

81

		}

82

83

		private function getID3Data(e:Event):void

84

		{

85

			id3InfoAvailable = true;

86

			id3Data = mp3File.id3;

87

		}

88

89

		private function playMP3(useSp:Boolean, sp:Number):void

90

		{	

91

			if (useSp) mp3FilePosition = mp3File.play(sp);

92

			else mp3FilePosition = mp3File.play();

93

94

			playingSound = true;

95

			mp3FilePosition.addEventListener(Event.SOUND_COMPLETE, songFinished);

96

			mp3File.addEventListener(ProgressEvent.PROGRESS, updateBufferField);

97

98

			bs.buttons.buttonMode = bs.buttons.enabled = true;

99

			bs.buttons.y = buttonPos[0];

100

101

			bs.buttons.addEventListener(MouseEvent.MOUSE_OVER, mouseOverBs);

102

			bs.buttons.addEventListener(MouseEvent.MOUSE_OUT, mouseOutBs);

103

			bs.buttons.addEventListener(MouseEvent.CLICK, mouseClickBs);

104

105

			updateTime = new Timer(100);

106

107

			updateTime.addEventListener(TimerEvent.TIMER, getMP3Time);

108

			updateTime.start();

109

110

			var si:String = id3Data.artist + ' - ' + id3Data.songName;

111

			si = si.toUpperCase();

112

			display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT;

113

			display.playerTexts.songInfo.wordWrap = false;

114

			display.playerTexts.songInfo.text = si;

115

116

			Tweener.addTween(display.playerTexts, {x: 60, time:1});

117

		}

118

119

		private function updateBufferField(e:ProgressEvent):void

120

		{

121

			var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);

122

			display.playerTexts.buffer.text = currentPercent + '%';

123

		}

124

125

		private function getMP3Time(e:TimerEvent):void

126

		{

127

			var totalMinutes = Math.floor(mp3File.length / 1000 / 60);

128

  			var totalSeconds = Math.floor(mp3File.length / 1000) % 60;

129

			var currentMinutes = Math.floor(mp3FilePosition.position / 1000 / 60);

130

  			var currentSeconds = Math.floor(mp3FilePosition.position / 1000) % 60;

131

132

			if (totalSeconds < 10) totalSeconds = '0' + totalSeconds;

133

			if (currentSeconds < 10) currentSeconds = '0' + currentSeconds;

134

135

			display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;

136

		}

137

138

		private function songFinished(e:Event):void

139

		{

140

			mp3FilePosition.removeEventListener(Event.SOUND_COMPLETE, songFinished);

141

			updateTime.removeEventListener(TimerEvent.TIMER, getMP3Time);

142

143

			bs.buttons.y = buttonPos[3];

144

			mp3FilePosition.stop();

145

146

			playingSound = false;

147

			songReachedEnd = true;

148

149

			soundPosition = 0;

150

			display.playerTexts.times.text = 'PLAY AGAIN?';

151

		}

152

153

		/*

154

		*	allButtons.bs event methods begin

155

		*/

156

157

		private function mouseOverBs(e:MouseEvent):void

158

		{

159

			if (playingSound) bs.buttons.y = buttonPos[5];

160

			else bs.buttons.y = buttonPos[1];

161

162

			if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1];

163

		}

164

165

		private function mouseOutBs(e:MouseEvent):void

166

		{	

167

			if (playingSound) bs.buttons.y = buttonPos[0];

168

			else bs.buttons.y = buttonPos[4];

169

170

			if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3];

171

		}

172

173

		private function mouseClickBs(e:MouseEvent):void

174

		{

175

			if (playingSound)

176

			{

177

				bs.buttons.y = buttonPos[4];

178

				soundPosition = mp3FilePosition.position;

179

				updateTime.stop();

180

				mp3FilePosition.stop();

181

				playingSound = false;

182

				display.playerTexts.times.text = 'PAUSE';

183

			}

184

			else if (!playingSound)

185

			{

186

				bs.buttons.y = buttonPos[2];

187

				playMP3(true, soundPosition);

188

				playingSound = true;

189

190

			}

191

			else if (songReachedEnd)

192

			{

193

				songReachedEnd = false;

194

				playMP3(false, 0);

195

			}

196

		}

197

	}

198

}

Schritt 10: Grundlegender Paketcode

1

2

	package

3

	{

4

5

		// Place where all the class imports goes

6

7

		public class SimpleMP3Player extends MovieClip

8

		{

9

			public function SimpleMP3Player()

10

			{	

11

12

			}

13

		}

14

	}

Unser Startpunkt sieht wie im obigen Beispiel aus. Denken Sie daran, dass der Klassenname mit dem Dateinamen Ihrer Dokumentklassendatei übereinstimmen sollte. Alles in der öffentlichen Funktion SimpleMP3Player wird direkt ausgeführt, nachdem Flash unsere Klasse geladen hat.

Schritt 11: Erforderliche Klassen importieren

Importieren wir all Klassen, die unser MP3-Player benötigt, um ordnungsgemäß zu funktionieren.

1

2

	package

3

	{

4

		import flash.display.MovieClip;

5

		import flash.events.Event;

6

		import flash.events.EventDispatcher;

7

		import flash.events.IOErrorEvent;

8

		import flash.events.MouseEvent;

9

		import flash.events.ProgressEvent;

10

		import flash.events.TimerEvent;

11

		import flash.media.Sound;

12

		import flash.media.SoundChannel;

13

		import flash.media.ID3Info;

14

		import flash.net.URLRequest;

15

		import flash.utils.Timer;

16

		import flash.text.TextField;

17

		import flash.text.TextFieldAutoSize;

18

		import caurina.transitions.Tweener;

Alles sollte ganz einfach sein. In der letzten Zeile importieren wir Caurina Tweener. Stellen Sie sicher, dass sich das Caurina-Verzeichnis am selben Speicherort wie Ihre .fla-Datei befindet.

Schritt 12: Variablen deklarieren

Alle Variablen sind privat. Nur die SimpleMP3Player-Klasse kann sie verwenden.

1

2

	private var mp3File:Sound;

3

	private var mp3FilePosition:SoundChannel;

Das mp3File-Soundobjekt speichert unseren Tarzan.mp3-Sound. mp3FilePosition ist ein SoundChannel-Objekt. Wir brauchen es, um uns die aktuelle Position der mp3-Datei in Millisekunden mitzuteilen. Mit diesem Objekt können wir auch die MP3-Datei stoppen.

1

2

	private var id3Data:ID3Info;

3

	private var id3InfoAvailable = false;

Das id3Data-Objekt speichert MP3-Sound-ID3-Informationen. Zum Beispiel den Songnamen und den Namen des Künstlers. id3InfoAvailable teilt unserem Preloader mit, dass id3-Informationen verfügbar sind, damit der Code die Wiedergabe von mp3File starten kann.

1

2

	private var updateTime:Timer;

updateTime ist unser Timer-Objekt, das das Anzeigezeit-Textfeld aktualisiert. Weitere Informationen zur Timer-Klasse finden Sie hier. Ich werde das später durchgehen.

1

2

	private var playingSound:Boolean = false;

3

	private var soundPosition:Number;

4

	private var songReachedEnd:Boolean = false;

playSound ist einfach eine boolesche Variable, die uns sagt, ob mp3File gerade abgespielt wird. soundPosition speichert einen numerischen Wert, wenn Benutzer die Pause-Taste drücken, damit wir weiterhin Musik aus der angehaltenen Position abspielen können, wenn der Benutzer auf die Play-Taste klickt. songReachedEnd zeigt an, dass das Lied beendet wurde.

1

2

	/*

3

	*	buttonPos[0] = playUp

4

	*	buttonPos[1] = playOver

5

	*	buttonPos[2] = playDown

6

	*	buttonPos[3] = playDis

7

	*	buttonPos[4] = pauseUp

8

	*	buttonPos[5] = pauseOver

9

	*	buttonPos[6] = pauseDown

10

	*	buttonPos[7] = pauseDis

11

	*/

12

13

	private var buttonPos:Array = new Array('0', '-36', '-72', '-108', '-144', '-180', '-216', '-252');

Zu guter Letzt unsere Array-Variable, die die Schaltflächen Movieclip und Koordinaten enthält. Beispielsweise:

1

2

	bs.buttons.y = buttonsPos[4];

Die Pause-Taste wird dann auf dem Bildschirm angezeigt. Wenn Sie in den [Klammern] 0 verwenden, wird die Wiedergabetaste angezeigt.

Schritt 13: Maskieren mit Code

Es ist Zeit zu sehen, was unser Code zuerst tut, wenn er geladen wird. Lassen Sie uns die erste Funktion in unserem Code behandeln. die SimpleMP3Player-Funktion.

1

2

	public function SimpleMP3Player()

3

	{	

4

		display.mask = displayMask;

5

		display.playerTexts.x = -73;

Die SimpleMP3Player-Funktion ist eine Konstruktorfunktion und muss daher öffentlich sein. Das Umbenennen in privat führt zu einem Fehler. Der Standardstatus der Funktionen ist public, sodass Sie vor der Funktion nicht unbedingt "public" schreiben müssen.

Das Maskieren mit Code ist sehr einfach und unkompliziert. In Zeile 3 sehen Sie Code für die Maskierung. Wir weisen einfach den Movieclip "displayMask" der Maskeneigenschaft des Movieclips "display" zu. Das ist es.

Die zweite Eigenschaft display.playerTexts.x verschiebt den Movieclip "playerTexts" entlang der horizontalen Achse. Wir bewegen es einfach außer Sichtweite, um -73 zu koordinieren. Die Maske verbirgt den Movieclip "playerTexts".

Schritt 14: Methoden, Tastenmodi und BS

1

2

	bs.buttons.buttonMode = bs.buttons.enabled = false;

3

	bs.buttons.y = buttonPos[3];

"Tasten" ist ein Movieclip. Wenn Sie mit der Maus darüber fahren, bleibt der Cursor standardmäßig ein einfacher Pfeil. Wenn Sie die Eigenschaft "buttonMode" auf "true" setzen, verwandelt sich der Cursor in eine Hand, wenn Sie mit der Maus darüber fahren. Am Anfang wollen wir diesen Cursor als Pfeil, also wird buttonMode auf false gesetzt. In derselben Zeile setzen wir die Eigenschaft "enabled" auf false. Das bedeutet, dass der Movieclip "Tasten" nicht anklickbar ist. In Zeile 2 setzen wir die Movieclip-Position "Tasten" auf deaktivierte Wiedergabetaste.

Die erste Zeile kann verwirrend sein, aber wenn ich es so schreibe...

1

2

	bs.buttons.buttonMode = false;

3

	bs.buttons.enabled = false;

... Sie können es wahrscheinlich deutlicher sehen. Ich spare Platz, indem ich es in eine Zeile schreibe.

Jetzt rufen wir nur noch unsere "loadMP3"-Methode auf.

1

2

	loadMP3();

Schritt 15: loadMP3-Methode

Diese Methode ist unsere Hauptmethode. Laden Sie dazu die MP3-Datei, deklarieren Sie die erforderlichen EventListener und schieben Sie den Preloader zum Display.

1

2

	mp3File = new Sound();

Diese Zeile erstellt ein neues Sound-Objekt. Wir können über mp3File auf alle Methoden und Eigenschaften der Soundklasse zugreifen.

1

2

	mp3File.addEventListener(ProgressEvent.PROGRESS, mp3FileLoading);

3

	mp3File.addEventListener(Event.COMPLETE, mp3FileLoaded);

4

	mp3File.addEventListener(IOErrorEvent.IO_ERROR, errorLoadingSound);

5

6

	mp3File.addEventListener(Event.ID3, getID3Data);

Die erste Zeile deklariert das PROGRESS-Ereignis und ruft jedes Mal, wenn das Ereignis aufgerufen wird, die mp3FileLoading-Methode auf. Dieser Listener hat einige Eigenschaften, die wir brauchen. Das erste ist bytesTotal, das die gesamte Größe der MP3-Datei in Bytes enthält. An zweiter Stelle steht bytesLoaded, das die aktuell geladenen Bytes enthält. Mit diesen beiden Eigenschaften können wir den Prozentsatz der geladenen Datei zählen und für den Benutzer anzeigen.

Die zweite Zeile wird aufgerufen, wenn die gesamte MP3-Datei geladen wurde. Es ruft die mp3FileLoaded-Methode auf.

Die dritte Zeile dient zur Fehlerbehandlung. Wenn beispielsweise eine mp3-Datei nicht gefunden wird, wird dieses Ereignis aufgerufen. Es ruft die errorLoadingSound-Methode auf.

In Zeile 5 wird das Ereignis aufgerufen, wenn id3-Daten verfügbar sind. Es ruft die Methode getID3Data auf.

1

2

	mp3File.load(new URLRequest('tarzan.mp3'));

Die "load"-Methode lädt unsere Tarzan-MP3-Datei. In Klammern deklarieren wir eine neue URLReaquest und darin befindet sich der Pfad zu unserer MP3-Datei. Unser Pfad ist relativ und tarzan.mp3 muss sich am selben Speicherort wie die Dateien .fla und .as befinden. Diese Zeile ist dieselbe wie unten. Verwenden Sie das, was Sie bevorzugen.

1

2

	var req:URLRequest = new URLRequest('tarzan.mp3');

3

	mp3File.load(req);

Dies ist das erste Mal, dass wir Caurina verwenden, daher werde ich schnell zeigen, wie es funktioniert.

1

2

	Tweener.addTween(target, {properties});

Dies ist der Basiscode. Ziel ist, wo Sie den Namen des Zielobjekts schreiben, das Sie tweenen möchten. In Eigenschaften definieren Sie, was Sie mit dem Ziel tun möchten. Sie können beispielsweise die x- und y-Koordinaten, die Transparenz, die Skalierung oder die Drehung ändern.

1

2

	Tweener.addTween(display.preloader, {x: 96, time:1});

Unser Ziel ist das Textfeld "Preloader" im Movieclip "Display". Die Eigenschaft "x" verschiebt es und die Eigenschaft "time" gibt die Zeit an, die das Tween benötigt. Die Zeit wird in Sekunden gemessen. Wenn Sie Millisekunden möchten, verwenden Sie die Notation ".5".

Schritt 16: mp3FileLoading-Ereignismethode

1

2

	private function mp3FileLoading(e:ProgressEvent):void

3

	{

4

		var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);

5

		display.preloader.text = 'LOADING...' + currentPercent + '%';

6

7

		if (currentPercent > 50 && id3InfoAvailable)

8

		{

9

			Tweener.addTween(display.preloader, {x: 200, time:1, onComplete:playMP3, onCompleteParams:[false, 0]});

10

			mp3File.removeEventListener(ProgressEvent.PROGRESS, mp3FileLoading);

11

		}

12

	}

Wie bereits erwähnt, zeigt die Methode "mp3FileLoading" einen prozentualen Wert dafür an, wie viel die mp3-Datei geladen wurde. Es startet auch das Lied, wenn der Prozentsatz höher als 50% steigt.

currentPercent dient zum Zählen des Prozentwerts. Wir runden es mit der "Math.round"-Methode ab. Zeile 4 schreibt den Prozentwert in unser Textfeld, damit der Benutzer sehen kann, was beim Laden passiert.

In der "if"-Anweisung prüfen wir, ob der Prozentsatz über 50 liegt und die Variable "id3InfoAvailable" wahr ist. Wenn beide true zurückgeben, führt die "if"-Anweisung alles in den Klammern aus.

Wenn die if-Anweisung wahr ist, wird das Textfeld "Preloader" entfernt. Wenn das Tween abgeschlossen ist, ruft Caurina die "playMP3"-Methode auf und übergibt ihr zwei Eigenschaften. Wir sehen die "playMP3"-Methode im nächsten Schritt.

Das PROGRESS-Ereignis wird nicht mehr benötigt, daher entfernen wir es in Zeile 9.

Schritt 17: mp3FileLoaded-Ereignismethode

1

2

	private function mp3FileLoaded(e:Event):void

3

	{

4

		mp3File.removeEventListener(Event.COMPLETE, mp3FileLoaded);

5

		mp3ile.removeEventListener(ProgressEvent.PROGRESS, updateBufferField);

6

		Tweener.addTween(display.playerTexts.buffer, {x: 200, time:1});

7

	}

Diese Methode wird aufgerufen, wenn das gesamte Lied geladen wird. Zuerst entfernen wir unnötige EventListener. In Zeile 5 wird das Textfeld "Puffer" rechts angezeigt.

Schritt 18: ErrorLoadingSound-Ereignismethode

1

2

	private function errorLoadingSound(e:IOErrorEvent):void

3

	{

4

		trace('Error loading sound: ' + e);

5

	}

Diese Fehlerbehandlung ist wirklich grundlegend. Fehler werden nur nachverfolgt, wenn Fehler auftreten.

Schritt 19: getID3Data-Ereignismethode

1

2

	private function getID3Data(e:Event):void

3

	{

4

		id3InfoAvailable = true;

5

		id3Data = mp3File.id3;

6

	}

Wir setzen "id3InfoAvailable" in Zeile 3 auf "true". Die "mp3FileLoading"-Methode überprüft diese Variable jedes Mal und startet den Sound nur, wenn sie wahr ist. Auf diese Weise stellen wir sicher, dass ID3-Informationen verfügbar sind, sodass der Benutzer echte Informationen auf dem Display sieht.

In Zeile 4 weisen wir dem ID3Info-Objekt id3Data, das wir in Schritt 12 erstellt haben, mp3File id3-Metadaten zu.

Schritt 20: playMP3-Methode

Diese Methode ist die wichtigere Methode in unserem Player. Schauen wir uns den ersten Block an.

1

2

	private function playMP3(useSp:Boolean, sp:Number):void

3

	{			

4

		if (useSp) mp3FilePosition = mp3File.play(sp);

5

		else mp3FilePosition = mp3File.play();

Die "playMP3" -Methode erfordert zwei Eigenschaften. "useSp" gibt "use sound position" an und "sp" ist "sound position".

In Zeile 3 testen wir, ob "useSp" wahr ist. In diesem Fall spielt der Code unser Lied ab dem gewünschten Punkt ab. Dieser Punkt wird in der Eigenschaft "sp" übergeben. Wenn false, spielen wir das Lied von Anfang an. All dies hängt mit der Wiedergabepause-Taste zusammen.

1

2

	playingSound = true;

3

	mp3FilePosition.addEventListener(Event.SOUND_COMPLETE, songFinished);

4

	mp3File.addEventListener(ProgressEvent.PROGRESS, updateBufferField);

Zeile 1 setzt den playSound auf true. Jetzt können wir überprüfen, ob der Ton abgespielt wird, und tun, was immer nötig ist.

Der neue EventListener in Zeile 2 wird jedes Mal gestartet, wenn der Song beendet ist. Die Methode "songFinished" wird ausgeführt. Beachten Sie, dass wir EventListener zum mp3FilePosition-Objekt hinzufügen.

Der zweite neue EventListener in Zeile 3 fügt mp3File das gleiche "PROGRESS" -Ereignis hinzu wie am Anfang des Codes. Dieser Listener startet nur eine andere Methode. Die Methode "updateBuffer" dient zum Aktualisieren des Textfelds "buffer".

1

2

	bs.buttons.buttonMode = bs.buttons.enabled = true;

3

	bs.buttons.y = buttonPos[0];

Die erste Zeile ist Ihnen bereits bekannt. Unsere MP3-Datei wird abgespielt, sodass wir die Schaltflächen aktualisieren können, um den entsprechenden Status anzuzeigen, die Eigenschaften "buttonMode" und "enabled" aktivieren.

Wir verwenden "Timer", um die aktuelle Klangposition in Sekunden anzuzeigen. Mit "Timer" können Sie Methoden in Zeitsequenzen ausführen.

1

2

	updateTime = new Timer(100);

3

4

	updateTime.addEventListener(TimerEvent.TIMER, getMP3Time);

5

	updateTime.start();

Hier erstellt die erste Zeile ein neues "Timer"-Objekt mit einem Intervall von 100 Millisekunden. Sie fragen sich vielleicht, warum wir die aktuelle Zeit alle 100 Millisekunden aktualisieren möchten. 1 Sekunde ist für unseren Player zu langsam und sogar 0.5 Sekunden sind zu langsam. Ich möchte, dass die Zeit wirklich reibungslos aktualisiert wird. Mehr auf Timer-Klasse.

Wir brauchen auch einen EventListener, um alle 100 Millisekunden etwas zu tun. Das Ereignis "TIMER" führt die Methode "getMP3Time" aus, die ich im nächsten Schritt durchlaufen werde.

Zeile 4 startet unseren "Timer".

1

2

	var si:String = id3Data.artist + ' - ' + id3Data.songName;

3

	si = si.toUpperCase();

4

	display.playerTexts.songInfo.autoSize = TextFieldAutoSize.LEFT;

5

	display.playerTexts.songInfo.wordWrap = false;

6

	display.playerTexts.songInfo.text = si;

7

8

	Tweener.addTween(display.playerTexts, {x: 60, time:1});

Im letzten Block zeigen wir dem Benutzer die ID3-Metadaten. Der Künstlername und der Songname werden in der ersten Zeile in eine neue Variable verschoben. Dies liegt daran, dass ich die gesamte Zeichenfolge in der nächsten Zeile groß schreiben möchte. Wir verwenden die Bitmap-Schriftart, daher denke ich, dass sie in Großbuchstaben besser aussieht.

In Zeile 3 stellen wir sicher, dass das Textfeld "songInfo" lang genug ist, um die Zeichenfolge "si" anzuzeigen. Zeile 4 soll verhindern, dass das Textfeld umbrochen wird, und in Zeile 5 weisen wir dem Textfeld "songInfo" einfach die Zeichenfolge "si" zu.

In der letzten Zeile wird der Movieclip "playerTexts" auf "display" verschoben.

Schritt 21: updateBufferField-Methode

Es ist höflich, dem Benutzer zu zeigen, wie viel die MP3-Dateidaten geladen sind. Wir haben unseren Preloader, aber ich dachte, wir brauchen auch ein Pufferfeld, da unser Song nach dem Laden von 50% abgespielt wird. Diese Methode wird dort fortgesetzt, wo die Methode "mp3FileLoading" aufgehört hat.

1

2

	private function updateBufferField(e:ProgressEvent):void

3

	{

4

		var currentPercent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);

5

		display.playerTexts.buffer.text = currentPercent + '%';

6

	}

Hier gibt es nichts Besonderes, nur eine private Veranstaltung mit zwei Aktionslinien. Grundlegende prozentuale Zählung und Zuordnung zum Textfeld "Puffer".

Schritt 22: getMP3Time-Ereignismethode

Ich zeige diese Methode auf einmal, weil dies nur MaThemetik und wirklich grundlegende Codierung ist. Lassen Sie es uns trotzdem durchgehen.

1

2

	private function getMP3Time(e:TimerEvent):void

3

	{

4

		var totalMinutes = Math.floor(mp3File.length / 1000 / 60);

5

		var totalSeconds = Math.floor(mp3File.length / 1000) % 60;

6

		var currentMinutes = Math.floor(mp3FilePosition.position / 1000 / 60);

7

		var currentSeconds = Math.floor(mp3FilePosition.position / 1000) % 60;

8

9

		if (totalSeconds < 10) totalSeconds = '0' + totalSeconds;

10

		if (currentSeconds < 10) currentSeconds = '0' + currentSeconds;

11

12

		display.playerTexts.times.text = currentMinutes + ':' + currentSeconds + '/' + totalMinutes + ':' + totalSeconds;

13

	}

In den ersten 4 Zeilen zählen wir die Zeiten, die wir brauchen. Dies ist etwas schwierig, da alle zurückgegebenen Werte in Millisekunden angegeben sind. Wir runden auch Minuten und Sekunden ab.

In den Zeilen 8 und 9 wird vor Sekunden eine zusätzliche Null hinzugefügt, wenn diese Werte unter 10 liegen (dies ist nur eine Optimierung und nicht erforderlich). Für mich sieht das Textfeld "Zeit" dann etwas sauberer aus.

Die letzte Zeile zeigt dem Benutzer die gesamte Zeit.

Schritt 23: songFinished-Ereignismethode

Fahren wir mit dem grundlegenden Code fort.

1

2

	private function songFinished(e:Event):void

3

	{

4

		mp3FilePosition.removeEventListener(Event.SOUND_COMPLETE, songFinished);

5

		updateTime.removeEventListener(TimerEvent.TIMER, getMP3Time);

6

7

		bs.buttons.y = buttonPos[3];

8

		mp3FilePosition.stop();

9

10

		playingSound = false;

11

		songReachedEnd = true;

12

13

		soundPosition = 0;

14

		display.playerTexts.times.text = 'PLAY AGAIN?';

15

	}

Die Ereignismethode "songFinished" wird jedes Mal gestartet, wenn der Song beendet ist.

In den ersten beiden Zeilen entfernen wir unnötige EventListener. Als nächstes zeigen wir dem Benutzer die deaktivierte Wiedergabetaste und stoppen die MP-Datei. Ein Anhalten ist nicht erforderlich, aber wir tun es nur für den Fall.

"playSound" ist auf false und "songReachedEnd" auf true gesetzt. Im ext-Schritt sehen Sie, warum wir die Variable "songReachedEnd" benötigen.

"soundPosition" ist von überall in unserer Klasse zugänglich, daher muss es an dieser Stelle auf 0 gesetzt werden. Jetzt stellen wir sicher, dass, wenn der Benutzer das Lied noch einmal spielen möchte, es von vorne beginnt.

In der letzten Zeile wird das Textfeld "Zeiten" so eingestellt, dass "WIEDER SPIELEN?" Text. Unsere Benutzer sind die Könige, deshalb müssen wir ihnen alle möglichen Informationen geben.

Schritt 24: Ereignismethoden mouseOverBs und mouseOutBs

1

2

	private function mouseOverBs(e:MouseEvent):void

3

	{

4

		if (playingSound) bs.buttons.y = buttonPos[5];

5

		else bs.buttons.y = buttonPos[1];

6

7

		if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[1];

8

	}

Hier wird die "mouseOverBs"-Methode jedes Mal ausgelöst, wenn die Maus über den "bs"-Filmclip fährt.

Zuerst überprüfen diese Ereignismethoden, ob "PlayingSound" wahr ist und ob sich der Movieclip "Buttons" im Status "Pause über" befindet. Andernfalls wird der Status "Überspielen" angezeigt. Unsere letzte Zeile prüft, ob der Sound beendet ist und wartet, ob der Benutzer den Song erneut abspielen möchte.

1

2

	private function mouseOutBs(e:MouseEvent):void

3

	{	

4

		if (playingSound) bs.buttons.y = buttonPos[0];

5

		else bs.buttons.y = buttonPos[4];

6

7

		if (songReachedEnd && !playingSound) bs.buttons.y = buttonPos[3];

8

	}

Diese andere Methode ist vorgesehen, wenn die Maus über dem Movieclip "bs" steht.

Dies ähnelt der vorherigen Methode.

Schritt 25: mouseClickBs-Ereignismethode

Diese Ereignismethode ist das Herzstück der Klickfunktion unseres "bs"-Filmclips.

1

2

	if (playingSound)

3

	{

4

		bs.buttons.y = buttonPos[4];

5

		soundPosition = mp3FilePosition.position;

6

		updateTime.stop();

7

		mp3FilePosition.stop();

8

		playingSound = false;

9

		display.playerTexts.times.text = 'PAUSE';

Wenn Sie auf die Schaltfläche klicken, wird zunächst überprüft, ob der Ton abgespielt wird. In diesem Fall wird der Movieclip "Buttons" verschoben, die aktuelle Soundposition gespeichert (von wo aus wir weiter spielen können, wenn wir möchten), unser "Timer" gestoppt, unser Lied gestoppt, "playSound" auf "false" gesetzt und das Textfeld "times" aktualisiert Text zu "PAUSE". Dieser Codeblock ist unsere Pause-Taste.

1

2

	else if (!playingSound)

3

	{

4

		bs.buttons.y = buttonPos[2];

5

		playMP3(true, soundPosition);

6

		playingSound = true;

7

8

	}

Dieser Codeblock startet unser Lied aus dem Pausenzustand. Es prüft, ob unser Song nicht abgespielt wird und startet den Song von der gespeicherten "soundPosition".

1

2

	else if (songReachedEnd)

3

	{

4

		songReachedEnd = false;

5

		playMP3(false, 0);

6

	}

Der letzte Block prüft, ob der Titel von vorne beginnt, wenn der Titel beendet ist und der Benutzer den Titel erneut abspielen möchte.

Schlussfolgerung

SimpleMP3Player ist jetzt fertig... (soweit es mich betrifft). Jetzt sind Sie an der Reihe, einige Funktionen hinzuzufügen. Vielleicht möchten Sie eine Stopp-Taste hinzufügen oder ihr Wiedergabelistenfunktionen mit XML geben. Machen Sie das Textfeld "songInfo" scrollbar, damit längere Daten vollständig angezeigt werden. Die Möglichkeiten sind endlos!

Vergessen Sie nicht, den Quellcode im Quellpaket zu überprüfen. Ich habe den Code von Anfang bis Ende kommentiert, damit Sie dieses Tut auch auf diese Weise lernen können. Danke fürs Lesen!