Step 1
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Step 1 as PDF for free.
More details
- Words: 2,026
- Pages: 19
Step 1 Begin by creating a new ActionScript 3.0 document. Set the Stage size to 600px x 600px and 30 FPS. I've chosen #333333 as my background color.
Step 2 Go to File > Import > Import to Library... and import an image (I've modified part of an iPod from free4illustrator.com for this example. You should use a .png format instead .jpg format to take advantage of the transparency for your object.). After having imported the image, open your Library ( Ctrl + L ) and drag the .png to the stage.
Step 3 Select the image and convert it to a Movie Clip symbol(F8). Name it "Ipod" or another name if you prefer. I've chosen the top left corner as registration point.
Step 4 Double-click "Ipod" movieclip symbol to enter its timeline. Be sure you're inside the movieclip and not "Scene 1".
Step 5 In the Timeline bar, insert a New Layer above the "IpodBody" layer and name it "Buttons Layer". We'll put all our button symbols in this layer.
Step 6 Use the Rectangle Tool, #00ff00 as the fill color and colorless as the stroke color. We don't need a stroke here and in fact, the fill color can be any color you like, it won't be shown in the end result. Draw a shape above the previous icon, similar to the picture below:
Step 7 Convert the shape which you've just drawn into a Button Symbol(F8) and name it "prev" as shown in the picture below:
Step 8 Give the "prev" Button Symbol an Instance Name. I've named it "prevBtn" and changed the Color Style to Alpha with 0%.
Step 9 The following steps will need the same Button symbol as the "prev" button symbol. Copy the "prev" Button symbol and paste it onto the "Next" icon on your bitmap. To duplicate this symbol, go to Properties Bar and click "Swap". A Swap Symbol window will pop out, at which point you need to click the "Duplicate Symbol" (be sure that you are choosing the "prev" button symbol.). Name it "next".
Step 10 Now we have a new symbol which is similar to the "prev" button symbol, but named "next". Give this symbol an Instance name of "nextBtn". The Color Style remains alpha 0%.
Step 11 Repeat Step 9 - 10 by duplicating "prev" symbol to make "play", "pause" and "stop" button symbols. Assign Instance names of "playBtn", "pauseBtn" and "stopBtn" respectively.
Step 12 Insert a new layer above "Buttons Layer" and name it "Text".
Step 13 Draw a text box similar to the picture shown below in the "Text" Layer. Set "Dynamic Text" as the Text Type, assign the Instance name "titleTxt", Arial font face, Font size set to 12px and Bold, white color(#ffffff) and aligned to center.
Step 14 Create another text box just below the "titleTxt" text box. Set this new text box as Dynamic Text, give it an Instance name of "artistTxt", with Arial font face, Font size set to 10px, white color(#ffffff) and, again, aligned to center.
Step 15 Insert a new layer above the "Text" layer and name it "Color Changer".
Step 16 Use the Rectangle Tool and set #ff0000 as the fill color. Draw a small square of 14px X 14px on the right top corner of the ipod screen and convert it to a Button symbol( F8) with a name of "red". Give it a Instance name of "redBtn".
Step 17
Repeat Step 16 and make two more squares. Fill one square with #ffff00, name it "yellow" and assign an Instance name of "yellowBtn". Fill the other square with #66ccff, name it "blue" with an Instance name of "blueBtn". You can set this to any color you like, it will allow the user to change the sound spectrum color.
Step 18 Insert a new layer above the "Color Changer" layer and name it "ActionScript Layer".
Step 19 - Begin the Script From this moment on, we will be playing with ActionScript 3.0. On the first Keyframe of "Actionscript Layer" press F9. An Action window will pop out. We'll input our script into this window later.
Step 20 - Setting Variables First, we need to tell Flash what what the ipod Player contains and its properties. There are several variables we need. When the Flash has loaded completely, we need it to start running. The "Loaded" function will start immediately. The loader will load an XML file, the path of which is stated in "URLRequest" of the "loader". We'll create the "musiclist.xml" file for this iPod Player later. view plaincopy to clipboardprint? 1. var musicReq: URLRequest; 2. var thumbReq: URLRequest;
3. var music:Sound = new Sound(); 4. var sndC:SoundChannel; 5. var currentSnd:Sound = music; 6. var position:Number; 7. var currentIndex:Number = 0; 8. var songPaused:Boolean; 9. var songStopped:Boolean; 10. var lineClr:uint; 11. var changeClr:Boolean; 12. var xml:XML; 13. var songList:XMLList;
14. var loader:URLLoader = new URLLoader(); 15. loader.addEventListener(Event.COMPLETE, Loaded); 16. 17. loader.load(new URLRequest("musiclist.xml"));
Step 21 - Album Art Holder Later, we'll create album art which displays on the screen of the iPod Player. The following script states the coordinates of the album art, which will be held in a Movie Clip Symbol. view plaincopy to clipboardprint? 1. var thumbHd:MovieClip = new MovieClip(); 2. thumbHd.x = 50; 3. thumbHd.y = 70; 4. addChild(thumbHd);
Step 22 - Define the "Loaded" Function Now let's define the "Loaded" function. We want it go to the XML and retrieve the Song URL to be played in the Player. When the song is loaded, it will play immediately and the album art for the song will load simultaneously. When the song has finished playing, it will start to play next song. view plaincopy to clipboardprint? 1. function Loaded(e:Event):void{ 2.
xml = new XML(e.target.data);
3.
songList = xml.song;
4.
musicReq = new URLRequest(songList[0].url);
5.
thumbReq = new URLRequest(songList[0].thumb);
6.
music.load(musicReq);
7.
sndC = music.play();
8.
titleTxt.text = songList[0].title;
9.
artistTxt.text = songList[0].artist;
10.
loadThumb();
11.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
12. }
Step 23 - Define the "loadThumb" Function Now we'll define the "loadThumb" function. When the thumb is loaded, it will tell Flash to start the "thumbLoaded" function. This function will add a Movie Clip containing the album art. view plaincopy to clipboardprint? 1. function loadThumb():void{
2.
var thumbLoader:Loader = new Loader();
3.
thumbReq = new URLRequest(songList[currentIndex].thumb);
4.
thumbLoader.load(thumbReq);
5.
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thum bLoaded);
6. } 7.
8. function thumbLoaded(e:Event):void { 9.
var thumb:Bitmap = (Bitmap)(e.target.content);
10.
var holder:MovieClip = thumbHd;
11.
holder.addChild(thumb);
12. }
Step 24 - State "EventListener" of Buttons Here I've stated that the Buttons we created have their respective functions. To allow users to click on the button and execute the function, we use "MouseEvent.CLICK". All the functions of respective buttons will be mentioned in the next few steps. 1. prevBtn.addEventListener(MouseEvent.CLICK, prevSong); 2. nextBtn.addEventListener(MouseEvent.CLICK, nextSong); 3. playBtn.addEventListener(MouseEvent.CLICK, playSong); 4. pauseBtn.addEventListener(MouseEvent.CLICK, pauseSong); 5. stopBtn.addEventListener(MouseEvent.CLICK, stopSong);
Step 25 - Define the "prevSong" Function "prevBtn" (Previous button) function, define "prevSong": view plaincopy to clipboardprint? 1. function prevSong(e:Event):void{ 2.
if(currentIndex > 0){
3.
currentIndex--;
4.
}
5.
else{ currentIndex = songList.length() - 1;
6.
7.
}
8. 9.
var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
10.
var prevPlay:Sound = new Sound(prevReq);
11.
sndC.stop();
12.
titleTxt.text = songList[currentIndex].title;
13.
artistTxt.text = songList[currentIndex].artist;
14.
sndC = prevPlay.play();
15.
currentSnd = prevPlay;
16.
songPaused = false;
17.
loadThumb();
18.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
19. }
Step 26 - Define the "nextSong" Function "nextBtn" (Next button) function, define "nextSong":
view plaincopy to clipboardprint? 1. function nextSong(e:Event):void { 2.
if(currentIndex < (songList.length() - 1)){ currentIndex++;
3.
4.
}
5.
else { currentIndex = 0;
6.
7.
}
8. 9.
var nextReq:URLRequest = new URLRequest(songList[currentIndex].url);
10.
var nextPlay:Sound = new Sound(nextReq);
11.
sndC.stop();
12.
titleTxt.text = songList[currentIndex].title;
13.
artistTxt.text = songList[currentIndex].artist;
14.
sndC = nextPlay.play();
15.
currentSnd = nextPlay;
16.
songPaused = false;
17.
loadThumb();
18.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
19. }
Step 27 - Define the "playSong" Function "playBtn" (Play button) function, define "playSong": view plaincopy to clipboardprint? 1. function playSong(e:Event):void{ 2.
if(songPaused){
3.
sndC = currentSnd.play(position);
4.
songPaused = false;
5.
}
6.
else if(songStopped){
7.
sndC = currentSnd.play(position);
8.
songStopped = false;
9.
}
10.
else if(!sndC){ sndC = currentSnd.play(position);
11.
12.
}
13. }
Step 28 - Define the "pauseSong" Function "pauseBtn" (Pause button) function, define "pauseSong":
view plaincopy to clipboardprint? 1. function pauseSong(e:Event):void{ 2.
if(sndC){
3.
position = sndC.position;
4.
sndC.stop();
5.
songPaused = true;
6.
}
7. }
Step 29 - Define the "stopSong" Function "stopBtn" (Stop button) function, define "stopSong": view plaincopy to clipboardprint? 1. function stopSong(e:Event):void{ 2.
sndC.stop();
3.
position = 0;
4.
songStopped = true;
5. } We have now built the player controls.
Step 30 - State "EventListener" of Colored Buttons The buttons we created in steps 15-17 are not useless. We now have to tell Flash what their role is within the Player: 1. redBtn.addEventListener(MouseEvent.CLICK, changeRed); 2. yellowBtn.addEventListener(MouseEvent.CLICK, changeYellow); 3. blueBtn.addEventListener(MouseEvent.CLICK, changeBlue);
Step 31 - Define Colored Button FunctionsS Each colored button has its respective function. "changeRed" will set the line of the spectrum to "0xFF0000" (Red). "changeYellow" will set it to "0xFFFF00" (Yellow) and "changeBlue" will set "0x66CCFF" (Cyan). We also want Flash to know that when we click on Red color, it will inherit 100% opacity while the others will be given 50% opacity Note: In ActionScript 3.0, 100% = 1, 10% = 0.1 and so on. All colored buttons will have this function, so we must state the opacity of the button in each function. view plaincopy to clipboardprint? 1. function changeRed(e:Event):void{ 2.
lineClr = 0xFF0000;
3.
changeClr = true;
4.
redBtn.alpha = 1;
5.
yellowBtn.alpha = 0.5;
6.
blueBtn.alpha = 0.5;
7. } 8. 9. function changeYellow(e:Event):void{ 10.
lineClr = 0xFFFF00;
11.
changeClr = true;
12.
redBtn.alpha = 0.5;
13.
yellowBtn.alpha = 1;
14.
blueBtn.alpha = 0.5;
15. } 16. 17. function changeBlue(e:Event):void{ 18.
lineClr = 0x66CCFF;
19.
changeClr = true;
20.
redBtn.alpha = 0.5;
21.
yellowBtn.alpha = 0.5;
22.
blueBtn.alpha = 1;
23. }
Step 32 - Set Default Color of the Spectrum Now let's set the default color of the line. I choose Red as default, you can use whichever color you like. view plaincopy to clipboardprint? 1. if(!changeClr){ 2.
lineClr = 0xFF0000;
3.
redBtn.alpha = 1;
4.
yellowBtn.alpha = 0.5;
5.
blueBtn.alpha = 0.5;
6. }
Step 33 - Draw the Spectrum The last part of our Actionscript; we want Flash to draw out the spectrum of the song. "lineClr" in "lineStyle" is a variable within the colour button in step 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;" the 50 allows Flash to multiply the Float in the song and 170 is the y coordinate of the spectrum. view plaincopy to clipboardprint? 1. var ba:ByteArray = new ByteArray(); 2. addEventListener(Event.ENTER_FRAME, drawl); 3. function drawl(e:Event):void
4. {
5.
graphics.clear();
6.
graphics.lineStyle(1, lineClr, 0.5);
7.
graphics.moveTo(30, 150);
8.
SoundMixer.computeSpectrum(ba);
9.
for(var i:uint=30; i<280; i++)
10.
{
11.
var num:Number = ba.readFloat()*50 + 170;
12.
graphics.lineTo(i, num);
13.
}
14. }
Step 34 - Create the XML Title and Artist will be shown in our player later. "" and "" are the paths of the album art and the song. XML can be created easily (you can use Notepad to type the following code and Save as .XML file). You must save it as "musiclist.xml" as that's how we've referred to it within the Actionscript of the Player. 1. <musiclist>
2. 3.
<song>
4.
The Mass
5.
<artist>Era
6.
pics/era.jpg
7.
songs/themass.mp3
8.
9.
<song>
10.
Dr.No theme
11.
<artist> -
12.
pics/drno.jpg
13.
songs/drno.mp3
14.
15. 16.
Step 35 - Create Album Art Create album art for the songs. Recommended size is 65px x 65px; it will fit nicely in the screen.
Conclusion Test your movie (Ctrl + Enter) to check the outcome. You will have your own flash iPod Player! You can use it as music player for your website; edit the music list as you wish. It's up to you. Go ahead and experiment, if you have any cool results be sure to share them with us. I hope you liked this tutorial, thanks for reading!
Step 2 Go to File > Import > Import to Library... and import an image (I've modified part of an iPod from free4illustrator.com for this example. You should use a .png format instead .jpg format to take advantage of the transparency for your object.). After having imported the image, open your Library ( Ctrl + L ) and drag the .png to the stage.
Step 3 Select the image and convert it to a Movie Clip symbol(F8). Name it "Ipod" or another name if you prefer. I've chosen the top left corner as registration point.
Step 4 Double-click "Ipod" movieclip symbol to enter its timeline. Be sure you're inside the movieclip and not "Scene 1".
Step 5 In the Timeline bar, insert a New Layer above the "IpodBody" layer and name it "Buttons Layer". We'll put all our button symbols in this layer.
Step 6 Use the Rectangle Tool, #00ff00 as the fill color and colorless as the stroke color. We don't need a stroke here and in fact, the fill color can be any color you like, it won't be shown in the end result. Draw a shape above the previous icon, similar to the picture below:
Step 7 Convert the shape which you've just drawn into a Button Symbol(F8) and name it "prev" as shown in the picture below:
Step 8 Give the "prev" Button Symbol an Instance Name. I've named it "prevBtn" and changed the Color Style to Alpha with 0%.
Step 9 The following steps will need the same Button symbol as the "prev" button symbol. Copy the "prev" Button symbol and paste it onto the "Next" icon on your bitmap. To duplicate this symbol, go to Properties Bar and click "Swap". A Swap Symbol window will pop out, at which point you need to click the "Duplicate Symbol" (be sure that you are choosing the "prev" button symbol.). Name it "next".
Step 10 Now we have a new symbol which is similar to the "prev" button symbol, but named "next". Give this symbol an Instance name of "nextBtn". The Color Style remains alpha 0%.
Step 11 Repeat Step 9 - 10 by duplicating "prev" symbol to make "play", "pause" and "stop" button symbols. Assign Instance names of "playBtn", "pauseBtn" and "stopBtn" respectively.
Step 12 Insert a new layer above "Buttons Layer" and name it "Text".
Step 13 Draw a text box similar to the picture shown below in the "Text" Layer. Set "Dynamic Text" as the Text Type, assign the Instance name "titleTxt", Arial font face, Font size set to 12px and Bold, white color(#ffffff) and aligned to center.
Step 14 Create another text box just below the "titleTxt" text box. Set this new text box as Dynamic Text, give it an Instance name of "artistTxt", with Arial font face, Font size set to 10px, white color(#ffffff) and, again, aligned to center.
Step 15 Insert a new layer above the "Text" layer and name it "Color Changer".
Step 16 Use the Rectangle Tool and set #ff0000 as the fill color. Draw a small square of 14px X 14px on the right top corner of the ipod screen and convert it to a Button symbol( F8) with a name of "red". Give it a Instance name of "redBtn".
Step 17
Repeat Step 16 and make two more squares. Fill one square with #ffff00, name it "yellow" and assign an Instance name of "yellowBtn". Fill the other square with #66ccff, name it "blue" with an Instance name of "blueBtn". You can set this to any color you like, it will allow the user to change the sound spectrum color.
Step 18 Insert a new layer above the "Color Changer" layer and name it "ActionScript Layer".
Step 19 - Begin the Script From this moment on, we will be playing with ActionScript 3.0. On the first Keyframe of "Actionscript Layer" press F9. An Action window will pop out. We'll input our script into this window later.
Step 20 - Setting Variables First, we need to tell Flash what what the ipod Player contains and its properties. There are several variables we need. When the Flash has loaded completely, we need it to start running. The "Loaded" function will start immediately. The loader will load an XML file, the path of which is stated in "URLRequest" of the "loader". We'll create the "musiclist.xml" file for this iPod Player later. view plaincopy to clipboardprint? 1. var musicReq: URLRequest; 2. var thumbReq: URLRequest;
3. var music:Sound = new Sound(); 4. var sndC:SoundChannel; 5. var currentSnd:Sound = music; 6. var position:Number; 7. var currentIndex:Number = 0; 8. var songPaused:Boolean; 9. var songStopped:Boolean; 10. var lineClr:uint; 11. var changeClr:Boolean; 12. var xml:XML; 13. var songList:XMLList;
14. var loader:URLLoader = new URLLoader(); 15. loader.addEventListener(Event.COMPLETE, Loaded); 16. 17. loader.load(new URLRequest("musiclist.xml"));
Step 21 - Album Art Holder Later, we'll create album art which displays on the screen of the iPod Player. The following script states the coordinates of the album art, which will be held in a Movie Clip Symbol. view plaincopy to clipboardprint? 1. var thumbHd:MovieClip = new MovieClip(); 2. thumbHd.x = 50; 3. thumbHd.y = 70; 4. addChild(thumbHd);
Step 22 - Define the "Loaded" Function Now let's define the "Loaded" function. We want it go to the XML and retrieve the Song URL to be played in the Player. When the song is loaded, it will play immediately and the album art for the song will load simultaneously. When the song has finished playing, it will start to play next song. view plaincopy to clipboardprint? 1. function Loaded(e:Event):void{ 2.
xml = new XML(e.target.data);
3.
songList = xml.song;
4.
musicReq = new URLRequest(songList[0].url);
5.
thumbReq = new URLRequest(songList[0].thumb);
6.
music.load(musicReq);
7.
sndC = music.play();
8.
titleTxt.text = songList[0].title;
9.
artistTxt.text = songList[0].artist;
10.
loadThumb();
11.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
12. }
Step 23 - Define the "loadThumb" Function Now we'll define the "loadThumb" function. When the thumb is loaded, it will tell Flash to start the "thumbLoaded" function. This function will add a Movie Clip containing the album art. view plaincopy to clipboardprint? 1. function loadThumb():void{
2.
var thumbLoader:Loader = new Loader();
3.
thumbReq = new URLRequest(songList[currentIndex].thumb);
4.
thumbLoader.load(thumbReq);
5.
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thum bLoaded);
6. } 7.
8. function thumbLoaded(e:Event):void { 9.
var thumb:Bitmap = (Bitmap)(e.target.content);
10.
var holder:MovieClip = thumbHd;
11.
holder.addChild(thumb);
12. }
Step 24 - State "EventListener" of Buttons Here I've stated that the Buttons we created have their respective functions. To allow users to click on the button and execute the function, we use "MouseEvent.CLICK". All the functions of respective buttons will be mentioned in the next few steps. 1. prevBtn.addEventListener(MouseEvent.CLICK, prevSong); 2. nextBtn.addEventListener(MouseEvent.CLICK, nextSong); 3. playBtn.addEventListener(MouseEvent.CLICK, playSong); 4. pauseBtn.addEventListener(MouseEvent.CLICK, pauseSong); 5. stopBtn.addEventListener(MouseEvent.CLICK, stopSong);
Step 25 - Define the "prevSong" Function "prevBtn" (Previous button) function, define "prevSong": view plaincopy to clipboardprint? 1. function prevSong(e:Event):void{ 2.
if(currentIndex > 0){
3.
currentIndex--;
4.
}
5.
else{ currentIndex = songList.length() - 1;
6.
7.
}
8. 9.
var prevReq:URLRequest = new URLRequest(songList[currentIndex].url);
10.
var prevPlay:Sound = new Sound(prevReq);
11.
sndC.stop();
12.
titleTxt.text = songList[currentIndex].title;
13.
artistTxt.text = songList[currentIndex].artist;
14.
sndC = prevPlay.play();
15.
currentSnd = prevPlay;
16.
songPaused = false;
17.
loadThumb();
18.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
19. }
Step 26 - Define the "nextSong" Function "nextBtn" (Next button) function, define "nextSong":
view plaincopy to clipboardprint? 1. function nextSong(e:Event):void { 2.
if(currentIndex < (songList.length() - 1)){ currentIndex++;
3.
4.
}
5.
else { currentIndex = 0;
6.
7.
}
8. 9.
var nextReq:URLRequest = new URLRequest(songList[currentIndex].url);
10.
var nextPlay:Sound = new Sound(nextReq);
11.
sndC.stop();
12.
titleTxt.text = songList[currentIndex].title;
13.
artistTxt.text = songList[currentIndex].artist;
14.
sndC = nextPlay.play();
15.
currentSnd = nextPlay;
16.
songPaused = false;
17.
loadThumb();
18.
sndC.addEventListener(Event.SOUND_COMPLETE, nextSong);
19. }
Step 27 - Define the "playSong" Function "playBtn" (Play button) function, define "playSong": view plaincopy to clipboardprint? 1. function playSong(e:Event):void{ 2.
if(songPaused){
3.
sndC = currentSnd.play(position);
4.
songPaused = false;
5.
}
6.
else if(songStopped){
7.
sndC = currentSnd.play(position);
8.
songStopped = false;
9.
}
10.
else if(!sndC){ sndC = currentSnd.play(position);
11.
12.
}
13. }
Step 28 - Define the "pauseSong" Function "pauseBtn" (Pause button) function, define "pauseSong":
view plaincopy to clipboardprint? 1. function pauseSong(e:Event):void{ 2.
if(sndC){
3.
position = sndC.position;
4.
sndC.stop();
5.
songPaused = true;
6.
}
7. }
Step 29 - Define the "stopSong" Function "stopBtn" (Stop button) function, define "stopSong": view plaincopy to clipboardprint? 1. function stopSong(e:Event):void{ 2.
sndC.stop();
3.
position = 0;
4.
songStopped = true;
5. } We have now built the player controls.
Step 30 - State "EventListener" of Colored Buttons The buttons we created in steps 15-17 are not useless. We now have to tell Flash what their role is within the Player: 1. redBtn.addEventListener(MouseEvent.CLICK, changeRed); 2. yellowBtn.addEventListener(MouseEvent.CLICK, changeYellow); 3. blueBtn.addEventListener(MouseEvent.CLICK, changeBlue);
Step 31 - Define Colored Button FunctionsS Each colored button has its respective function. "changeRed" will set the line of the spectrum to "0xFF0000" (Red). "changeYellow" will set it to "0xFFFF00" (Yellow) and "changeBlue" will set "0x66CCFF" (Cyan). We also want Flash to know that when we click on Red color, it will inherit 100% opacity while the others will be given 50% opacity Note: In ActionScript 3.0, 100% = 1, 10% = 0.1 and so on. All colored buttons will have this function, so we must state the opacity of the button in each function. view plaincopy to clipboardprint? 1. function changeRed(e:Event):void{ 2.
lineClr = 0xFF0000;
3.
changeClr = true;
4.
redBtn.alpha = 1;
5.
yellowBtn.alpha = 0.5;
6.
blueBtn.alpha = 0.5;
7. } 8. 9. function changeYellow(e:Event):void{ 10.
lineClr = 0xFFFF00;
11.
changeClr = true;
12.
redBtn.alpha = 0.5;
13.
yellowBtn.alpha = 1;
14.
blueBtn.alpha = 0.5;
15. } 16. 17. function changeBlue(e:Event):void{ 18.
lineClr = 0x66CCFF;
19.
changeClr = true;
20.
redBtn.alpha = 0.5;
21.
yellowBtn.alpha = 0.5;
22.
blueBtn.alpha = 1;
23. }
Step 32 - Set Default Color of the Spectrum Now let's set the default color of the line. I choose Red as default, you can use whichever color you like. view plaincopy to clipboardprint? 1. if(!changeClr){ 2.
lineClr = 0xFF0000;
3.
redBtn.alpha = 1;
4.
yellowBtn.alpha = 0.5;
5.
blueBtn.alpha = 0.5;
6. }
Step 33 - Draw the Spectrum The last part of our Actionscript; we want Flash to draw out the spectrum of the song. "lineClr" in "lineStyle" is a variable within the colour button in step 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;" the 50 allows Flash to multiply the Float in the song and 170 is the y coordinate of the spectrum. view plaincopy to clipboardprint? 1. var ba:ByteArray = new ByteArray(); 2. addEventListener(Event.ENTER_FRAME, drawl); 3. function drawl(e:Event):void
4. {
5.
graphics.clear();
6.
graphics.lineStyle(1, lineClr, 0.5);
7.
graphics.moveTo(30, 150);
8.
SoundMixer.computeSpectrum(ba);
9.
for(var i:uint=30; i<280; i++)
10.
{
11.
var num:Number = ba.readFloat()*50 + 170;
12.
graphics.lineTo(i, num);
13.
}
14. }
Step 34 - Create the XML Title and Artist will be shown in our player later. "
2. 3.
<song>
4.
5.
<artist>Era
6.
7.
8.
9.
<song>
10.
11.
<artist> -
12.
13.
14.
15. 16.
Step 35 - Create Album Art Create album art for the songs. Recommended size is 65px x 65px; it will fit nicely in the screen.
Conclusion Test your movie (Ctrl + Enter) to check the outcome. You will have your own flash iPod Player! You can use it as music player for your website; edit the music list as you wish. It's up to you. Go ahead and experiment, if you have any cool results be sure to share them with us. I hope you liked this tutorial, thanks for reading!
