When embedding video to your site, do you want to create a custom player with the images you prefer? Do you think you shall run Flash with ActionScript? With this guide, you can imagine what your player should be like and create one with ease.
Here is the guide for you to create a player like above using Adobe Photoshop and Moyea PlayerBox. This guide contains three parts:
Part I. Create image with Adobe Photoshop
Part II. Create player with Moyea PlayerBox
Part I. Create image with Adobe Photoshop
1. Create new clipboard.
Choose File > New to create new clipboard, and set the image size to 80 x 30 pixels. I would like to set the foreground color to gray. Thus, click the upper color selection box in the toolbox and choose the preferred color.
2. Added text to image.
Choose the Text icon, i.e. the 8th icon on the right of the toolbox, and draw the position of the text. By default, Horizontal Type Tool is selected.
3. Enter characters.
Enter the word "Play", choose it and select the font style, size in the option bar under the menu bar. Here I choose Matura MT Script Capitals as font family, and 18 pt as font size.
4. Draw symbol.
Right click on the 9th icon on the right of the toolbox, and choose Polygon Tool. Enter 3 for Sides in the option bar and draw on the clipboard, as a triangle will be needed here.
5. Add effects.
You may notice three layers in the Layers palette. If the Layers palette does not show, just choose Window > Layers. Choose the background layer and check if the f icon for layer style is active. If yes, choose Blending Options and face the Layer Style window.
Choose Sunset Sky (the first one in the third line) as Style, and tick the checkbox for Bevel and Emboss, Gradient Overlay.
Well, the normal status of the play button is done. Save as .jpg file and remember to choose Baseline as under Format Options.
To create the hot status of the play button, just change the Sunset Sky to Chiseled Sky (the six one in the second line) and save as another file in jpg format.
To create the pause skin, change the characters to "Pause" according to step 3. In step 4, right click on the 9th icon on the right of the toolbox, and choose Rectangle Tool. Two parallel rectangles shall be added to show the pause symbol.
Use the same effects for normal and hot status of the pause skin like the play skin. 4 images shall be created to show different status.
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
Learn More About Moyea PlayerBox
Free Trial
Size: 17.5MB
Version: 2.0
Supported OS:
Windows 2000/XP/Vista
