How to Create Player with PhotoShop - Part 2

[nina7683]

Part II. Create player with Moyea PlayerBox

1. Create new blank project
When Moyea PlayerBox is first run, you will get the template window to create new blank project, or load template project. Choose New Blank Project to follow this guide.

2. Add Video
The video component enables the player to display image. Click the Video icon (the second icon) under Control Library and choose the style thumbnail. Drag to the edit box and resize it.



3. Add Play Button
There are many styles for Play Button. Here I would like to tell the one I used in the sample above. Click the Button icon (the third icon) under Control Library and click Play Button group. Choose the second style thumbnail in the first line of the Classic group, move the mouse to edit box by pressing the mouse, release the mouse when it is on the bottom-left corner of the player.

4. Add Play Trackbar as timeline
Click the Trackbar icon and the Play Trackbar group is automatically displayed.
I would like to choose the first style thumbnail in the third line of the Classic group. Drag to the edit box and the Top could be 21.

5. Add timestamp
Here two kinds of time are introduced, one is the current playing time of the video, the other is for the duration of the video. Both of them could be in format mm:ss or hh:mm:ss. To add current playing time, click on … icon under Control Library and choose a style from the Current Playback Time. I used the first style in second line of the Classic group. Drag and drop it beneath the play trackbar. To add duration, just find Duration under Current Playback Time and choose a style. I used the second one in Opaque group. Position it near the current playing time and go to the Advanced tab to check the box for Insert "/" before duration to separate the two kinds of time.



6. Add Mute Button
The mute button enables player to play sound or not. Click the Button icon under Control Library and find Mute Button. Select the fifth style in Translucent group, drag to the edit box, and change the size and position.



7. Add Volume Trackbar
With volume trackbar, visitors can control sound with lower or higher volume. Click on Volume Trackbar under Control Library. Here I chose the first style in the seventh line of Horizontal group, and dragged it beside the mute button.

Do you see what we get in the sample player? Not yet, the play button does not show the images as displayed in sample player. Here we shall get to the next part to change player skin.


Part III. Change player skin

1. To load the image we created just now, make sure the play button is select on edit box.

2. Click the Advanced tab and you get four options: Player Skin, Player Hot Skin, Pause Skin, Pause Hot Skin.



3. Click the browse button for Player Skin and you would face the Set Skin window.

4. Click the Button folder under Custom Skins, click the Add button on the bottom-right corner and load images created for button status.

5. After images are imported, click on the normal status of play skin and click the Apply button near the selected image. Click the close button on the top-right corner when the image displays as expected.

For other status, just select the browse button and select image from the Button folder under Custom Skins and click Apply button.
To get the player, click Publish button on toolbar and add the FLV you want it to play, set the output file folder and file name. The player in .swf extension will be ready in seconds

[gengye]

Thanks, it looks like this tool would be more efficient in some extents.

All the best,