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.
discuss this topic to forum
