www.swish-designs.co.uk

Site menu:

Home Tutorials | Shop | Downloads | My Blog | Swish Templates | Forum | Contact

SwishMax Tutorials And Resources
Where Imagination Is The Creation

 

Welcome To Swish-Designs.co.uk Have a Nice Friday

Swishmax 2 Mp3 Player Tutorial (advanced users)

---

In this tutorial you will learn how to create an interactive MP3 Player with scripted emulated graphic equalizer for your website, desktop or presentation using swishmax 2, all music will be loaded via a plain text file.

Example:

Step.1 (Important Please Read)

First open Swishmax 2 and set the movies properties, i have used the following. width = 362px x height = 129px. and the frame rate frame rate 25fps. with a white canvas.
the fonts used are called Atomic Clock Radio and Webdings click on the links to download from dafont.com and fontstock.net.

Step.2

Using the autoshape tool,select the rounded rectangle shape and drag out a rectangle with the dimensions of width = 337 and height of 103, give it a linear gradient colour fill with the following settings shown if fig.1 below.

Fig.1

the hex numbers for the colours i have used from left to right are as follows
#333333, #CCCCCC, #333333, #333333, #777777, #333333
using the fill transform tool from the tools panel, rotate the colour fill so it runs vertical and not horizontal through the shape, when done name it as main_bg, see fig.2 below.

Fig.2

at this stage right click on the image below and save as, using the import image button import the saved image into the movie and place it underneath the main_bg shape in the outline tree, see fig.2a below.

Shadow.jpg (right click & save as)
shadow.jpg

Fig.2a

your movie should now look like the image in fig.2b below.

Fig.2b

Step.3

Now we have created the base shape for our player lets create the screen graphics, using the Autor shape tool click and select the rounded rectangle shape and drag out a rectangle with the dimemsions of width = 274 and height = 48 the colour wants to be solid black #000000 name the shape top_black copy the shape and paste in place, change the fill colour to solid white #FFFFFF and rename to bottom_white place underneat the top_black shape in the outline panel and using the arrow key move down twice and move right twice. Your outline panel tree order should be as shown in fig.3 below.

Fig.3

your movie canvas should now look like the image shown in fig3a below.

Fig.3a

as you cans see the two shapes have created an indent look, now copy and paste in place the black_top shape and change the dimensions to width = 272 and height = 46 rename the shape to display_bg, give it a linear gradient colourfill and set using the settings shown in fig.3b below.

Fig.3b

the hex colours from left to right are as follows. #C0E7F8, #74D1FC. again using the colourfill transform tool rotate the gradient so it is vertical and not horizontal through the shape.
when you have moved the shape into place, you should have something looking like fig.3c below.

Fig.3c

Step.4

We need to create the indents for the buttons, so using the elipse tool whilst holding down the shift button drag out a smallish circle with the dimensions of width = 28 and heith = 28 with a linear colour fill the hex numbers of the fill from left to right are as follows #7B7C7E, #EFEFEF, name the shape indent and in the outline panel the order of the shape needs to be above the main_bg shape see fig.4 below.

Fig.4


the indent shape need placing roughly with the transform setting of _x = 83 and _y= 94 see fig.4a below.

Fig.4a
when you have done this, your movie should look something like the image in fig.4b below.

Fig.4b

copy the indent shape and paste in place place this below the first indent shape in the outline panel and set the settings for the sahpe ass seen in fig.4c below in the transform panel.

Fig.4c

Repeat the copy and paste another three times and set the following three settings for the indents in the transform panel as you have just done for the first two indents. the settings are as follows.

1st of 3 settings (so this is now your 3rd indent)

Fig.4d
2nd of 3 (so this is now your 4th indent)

Fig.4e

3rd of 3 (so this is now your 5th and final indent)

Fig.4f

the _x and _y settings may be slightly different on each machine depending on monitor size etc so if the indents dont look central just asjust them acordingly untill you have something looking like the image shown in fig4.g below.

Fig.4g

your outline panel tree order should looklike the one shown in fig.4h below.

Fig.4h

nearly done of the graphical side of things we are just going to add a few cut outs to imitate speakers, so as you dis for the indent dor the blue display, using the rectangle tool create a small rectangle a black one and a white one the wihite one obviously goes underneath the black on to make an indented look create 2 sets of 3 and place either side of the buttons see fig.4i below.

NOTE: i have grouped my shapes into a movie clip and named it speakers, this makes them easier to move into place.

Fig.4i

goup all the shapes and movie clips that you have together as a movie clip and name graphics, you outline panel should now look like the image shown in fig.4j below.

Fig.4j

Step.5

Lets create the buttons for the media player, so using the elipse tool and whilst holding down the shift key drag out a circle with the following dimensions, width = 25 height = 25 give it a linear gradiant colour fill with the following hex colours from left to right. #FEFEFE, #DDDDDD and name it out_state see fig.5 below.

Fig.5

now using the webding font create a static text box and enter the number 9 as the text, this should give you the 9 symbol. place this over the center of the out_state shape and name it symbol, group the 2 objects together as a button and name btn_prev, now on the buttons properties check has seperate over state and has seperate down state.
now select over state within the button tree, and on the shape change the linear gradient to the following hex colours from left to right. #CCFFFF, #7ED3FB and do the same to the down state shape. see fig.5a below.

Fig.5a

ok now you have created your first button which when tested should look act like the one shown in fig.5b below.

Fig.5b

working from the left place the btn_prev over the first indent shape, your movie should look like the image shown in fig.5c below.

Fig.5c

create 4 more buttons using the same process as you have just used to create btn_prev.
Create btn_play use webding font and the number 4 to create the play symbol.
Create btn_pause use webding font and the semi colon button for the pause symbol.
Create btn_stop use webding font and the letter g for the stop symbol.
Finaly create btn_next and use the number 9 then right click on the symbol transform and flip horizontal to get the forward symbol.
once you have create all of the buttons and moved them into place your movie should look like the image shown in fig.5d below.

Fig.5d

Step.6

Lets add some code to our buttons, so they function corectly when the rest of the player code is entered later.
Son on btn_prev copy and paste the script in to the sript properties window.

On btn_play copy and paste the script in to the sript properties window.


On btn_pause copy and paste the script in to the sript properties window.


On btn_stop copy and paste the script in to the sript properties window.


On btn_next copy and paste the script in to the sript properties window.


ok thats the buttons and their scripting covered just to check everything is in order at this stage, you outline panel should look like the image shown in fig.6 below.

Fig.6

Step.7

Ok now the graphics and buttons are completed lets now turn our attention to the display, so create a dynamic text box using the text tool and name it times var name of time font style Atomic Clock Radio font colour #000000 font size 20 type in the text box 00:00 place to the top left hand corner of the display. see fig.7 below.

Fig.7

now create another dynamic text box using the text tool font style Atomic Clock Radio font colour #000000 and font size 11 name it song_names var name of song_name make it three quarters the width of the display window and place it at the bottom, add the text MP3 player tutorial. see fig.7a below.

Fig.7a

Create another dynamic text box with same font style, colour and size, this time name it songtotals and var name songtotal and add the text 00:00 place it into the bottom right of the display, see fig.7b below.

Fig.7b

using the line tool you can draw a little dividing line above the songtotals and song_names text boxes the width of the display window make it black in colour the add a custom transparency of 20% , group the 3 text boxes and the line shape together as a movie clip and name display.
see fig.7c below.

Fig.7c

Step.8

lets create a volume slider for the music player.
Using the rectangle tool drag out a rectangle with dimensions of width = 86.8 and height = 7.05 black outline and no colour fill leave it empty.
name it scrollbar, group the shape as a movie clip and name it Controller, using the rectangle tool and whilst holding down the shift key drag out a square with the dimensions of width = 7.4 and height = 7.4 name the shape v and give a solid colour fill of #244858. place the v shape at the right side of the Controller movie clip, your outline panel should look like the image in fig.7d.

Fig.7d

and when you have moved the v shape into place your movie should look like the image in fig.7e below.

Fig.7e

now group together the v shape and the Controller movie clip together as a movieclip and name it Volume.
ok lets add some code to the v shape and the Volume movie clip to make it slide and work when we add the rest of the code later.
add the following code to the v shape.

and add the following code to the Volume movie clip.

and finaly add the following code to the Controller movie clip.

Step.9

Now wlets work on doing the play display which will enable you to skip through a song track.
create the same outline and the same square butthis time caal the square shape skipper and the rectangle shape line group both shapes as a movie clip and name it barcontrol
on the skipper shape add the following code.


and on the barcontrol movie clip add the following code.


your outline panel tree should now look like the image in fig.9 below

Fig.9

and you player should now look like fig.9a below.

Fig.9a

Step.10

now for simulating the graphic equalizer, i have used a random method using swishscript, so lets go ahead and start to build it.

using the rectangle tool creat a rectangle shape width = 6.65 and height = 95.7 give it a solid colour fill of #444444 and group it as a movie clip and name it bar1. duplicate this another 9 times, so you have ten in total change the names to bar1 to bar10 place at the sade of one another with a small equal gap in between each bar. see fig.10 below.

Fig.10

create another rectangle shape with the dimensions of width = 72 and height = 25.5 place it at the top of the bars and name the shape to stoped see fig.10a below.

Fig.10a

using the rectangle tool create a small rectangle with the dimensions of width = 6.05 and height = 1.05 you want to dupliate this shape to create a shape looking like the image shown in fig.10b below.

Fig.10b

when you look at the image it is the same width and height of the bars, it needs to be because you are going to group all the shapes you have just made in to a shape and name it mas know copy and paste in place the mask shape and add a custom tint to the copied shape of 30% group all the objects together as a movie clip and name it graphic_eq you outline panel for the graphic_eq should look like fig.10c below.

Fig.10c

and you layout should look like the one shown in fig.10d below.

Fig.10d

using the rectangle tool again create a shpe with the following dimensions outside of the graphic_eq movie clip. width = 72 and height = 25.5 place this just above the stoped line on your canvas group together the shape and the graphic_eq movie clip as a movie clip and name it eq.

your outline panel should now look like the image shown in fig.10e below.

Fig.10e


on the graphic_eq movie clip add the following code.

the above script will give the bars random movement all of the time to simulate a graphic equalizer although it will never give a true reading. see fig.10f below for an example.

Fig.10f

dont forget to make sure that you check the box use bottom object as mask on the eq movie clip and also on the graphic_eq movie clip this is important. otherwise it will look like the image shown in fig.10g below.

Fig.10g

move the eq into place and your movie should now look like the image shown in fig.10h below.

fig.10h

you can add some little icons at the side of the skip bar and the volume bar using the webdings font and static text the speaker icon is UPPERCASE X i create the skip icon using the rectangle tool long rectangle with a square at the end and duplicated it flipping it horizontal and then vertical. see fig.10i below for a blown up image of the icon.

Fig.10i

Step.11

Now group every object together as a movie clip and name it as player add the following script to the player movie clip.


and then directly underneath that code at the following code

now create a project folder and name it player tutorial export the html and swf into that folder, inside the folder create another folder called mp3s place your music files inside that folder.

lets say you have 2 mp3s inside the mp3s folder called 1.mp3 and 2.mp3
open notepad or your favourite text editor and add the following text to it.

and save as config.txt

thats it your done now go and test, if you have done everything corectly it should work like the example at the start of the tutorial.

Buy this source file for £4.00

More information:

Link Exchange

Loweonline.co.uk | Hotels Reservations | Free Bingo | www.deviantart.com | Full tilt rakeback | Swishzone.com

---

Advertisments

Advertise Here Contact Me

---

Credit Counseling - Credit Card Consolidation - click fraud protection - United Specialties-->

---

---

---

FaceBook Group

---

Random Tutorial:

Random Vector:

Random Quote:

Site Statistics:

TOTAL: 24905146
UNIQUE: 15775057
TODAY: 12794

Recomend Site:

Recommend to a friend

Make A Donation:

If anything on this website has been of help or assistance to you, please show your appreciation by leaving a small donation, Thanks.

Bookmark Me

Copyright © 2007- www.swish-designs.co.uk.