SoundPlayer Skinning

SoundPlayer Skinning Tutorial

Step1

To skin the soundplayer, start by creating your graphics in an application such as Macromedia Fireworks or Adobe Photoshop.

Here is an example that we came up with...

Note that when creating your graphics, you need to create separate graphic elements for each of the button states. For example, in the picture above, we have 2 different layers for each button. One for normal state and another one for the active state (rollOver and play).

Step 2
Export your graphics as a separate .png file for each moving part. Here is what we exported for the skin above:

	Static part of the skin.
	Previous Button
	Play Button
	Play Button - Active State
	Pause Button
	Pause Button - Active State
	Stop Button
	Next Button
	Slider Dragbar

Warning: Internet Explorer does not display PNG files correctly. The grey areas around the graphics above are really transparent.
You must export the files as PNG to preserve transparency and quality.

Note: Always leave one transparent pixel around your images, because of the flash bitmap shift bug!

Step 3

Go to Flash and place the soundPlayer component on the stage.

Double click on sp_gfx movie clip in the library (you will find it under the soundPlayer->rearrange this! folder of the library)

Everything that this movie clip contains can be edited, moved or erased. The only things that you need to keep for the component to function properly are the instance names of the movie clips.

Step 4
Create a new layer below the other layers, name it "background" and import (File->Import->Import To Stage...) your background (static) image into this layer. Then move the buttons and sliders to be approximately where they should be.

Since we have created this skin without the pan slider, we can remove it from the component by simply deleting its movie clip.

Step 5
Double click on the set of buttons, and then double click again on an individual button (for example, the play button). The timeline should look like this:

We are now editing the play button.

Click in the appropriate keyframe in the "gfx" layer, delete the existing graphics and import your own image to the stage for that specific state. For example, import the play button "up state" image into frame 1 (up) and "on state" into frame 12. The _up state is necessary in all cases. In this example, we added the Play Button graphics from the graphics above for the _up state and Play state (the active State graphics for the _on state). Since we don't need the _over state for this skin, we simply deleted the "over" functionality by removing frames 6 to 11 from the timeline.

Click on the bounding box from the 'bounding' layer and use the Free Transform Tool to resize it to the desired dimensions. The bounding box defines the active area of the button.

Repeat Step 5 for each button, then align and rearrange the buttons as you wish. This is our result:

Step 6

Double click on the time slider from the sp_gfx movie clip, then on slider movie clip and edit its graphics and timeline in a similar way to the one that you did for the buttons. There are two states for the slider movie clip: _up is the normal position and _drag which will appear when the slider is dragged.

Go back to the time_slider movie clip and take a look at the layers. We deleted the track_gfx layer because we already have track graphics as a part of the background.

Resize the track movie clip so that it will cover your track graphics. This movie clip is also used as a position reference for the slider depending of each song duration. Therefore, when the user clicks on it, the slider will jump to that part of the song.

Repeat Step 6 for volume slider and pan slider.

Note: The slider track of the time slider is also used to show the preloading status. You can set its color while preloading in the component properties panel in the Flash authoring environment. If you have a problem, such as the dragbar not going to the end of the track etc. just tweak the size of the track movie clip. It is transparent anyway.

Step 7

Go back to the sp_gfx movie clip and position and resize the text fields songname_txt (inside sn_mc movieclip) and time_txt. Change their default fonts to any font you wish. Be sure to include the font outlines for every character that you need. To do that, select the songname_txt field then click on the "Character" button. In the Properties panel, select "Specify Ranges" and choose any range of characters that you need. In most cases, that will be Basic Latin only. Select the time_txt textfield and do the same, but instead of Basic Latin choose numerals only and Include These Characters: - and :

That's it! Skinning is now completed! If you've created a cool skin, you may like to showcase it in the Flashloaded forum :)

Updating Skinned components to version 1.5.0

Here is what you need to do in order to keep your old skin while upgrading the component to the new version:

1. Open A new empty Flash document and drag the new version of the component onto the stage from the components panel (this newly created .fla will end up being the v1.5.0 component with your old custom skin).

2. Open the .fla file containing your skinned component and press CTRL+L to open the library panel.

3. Switch back to the new Document, right-click on the soundPlayer component that is on the stage and choose Edit.

4. Lcate the movieclip named sp_gfx in the library of the skinned .fla file and drag it to the stage. Choose 'Replace existing items' when asked.

5. Delete the second instance (one that you just created by dragging) from the stage. You will notice that the un-skinned instance of the sp_gfx has changed its appearance.

6. Double-click on the remaining sp_gfx instance and select the songname_txt textfield.

7. Hit the F8 key and create a movieclip named sp_display with a top-left registration point.

8. Give a name to the newly created instance that is on the stage(with the songname_txt textfield inside it). Call it sn_mc.

Now you can save your new fla file and use it whenever you need it.

Skinning the Playlist

To change appearance of the song names in the playlist, edit the playlist_button movieclip from the skin this! folder in the library.

If masking the playlist, you can change appereance of the arrow buttons by editing the playlist_arrow_btn movieclip from the same library folder.

To add additional graphic elements as the background of the playlist or around it, simply create them on the layer below the layer where the playlist component is. The visible size of the playlist will be the same as the grey box that is on the stage when the mask option in components panel is set to "true".

When skinning any part of the component just remember to keep the names of the movieclip instances and textfields intact.