Moyea PlayerBox is the choice creator for web-based FLV player. It supports easy drag and drop for component from the Control Library in the program. A component here indicates a small part of a web player that makes the control of player easy. Here is a through tutorial for you to play around Moyea PlayerBox. The tutorial contains 3 parts.

Part I. Design player

Simple template with changeable skin

New project with drag and drop

New Project with wizard

Part II. Preview player

Part III. Export player

Part I. Design player

Moyea PlayerBox enables fast creation of your web Flash video player with functions like saving and loading project file, using new template project. You can easily create custom skin with the component advanced properties. The program also supports drag and drop to select and position the components from the Control Library. Here I demonstrate three ways to design the player.

Simple template with changeable skin

Step 1. Get new template project or load existing project.
When you first launch the program, you will face a window with options: New Blank Project and New Template Project. Double click on a template project to load the template with all preset component on the edit box. If you want to load a different template project, Choose File > New Project from the menu bar (shortcut on keyboard: Ctrl + N), and you will face the pop-up window.


If you downloaded sample project files from the Skins page, you may choose File > Open Project from the menu bar (shortcut on keyboard: Ctrl + O)

Step 2. Customize component skin.
Moyea PlayerBox includes some sample images for you to easily change the skin. You may skip this step if you find that the loaded project file is the exact player you want.
Select a component on the edit box with changeable skin. There are advanced properties for most components.

Components like Play Button, Mute Button, Onscreen Play Button, Previous Video Button, Current Playback Time, Duration, and so on support changeable skin.

Go to the Advanced tab in Properties window and Click the browse button to change skin. You will face the Set Skin window with default skin sample and custom skin folder for you to customize skin gallery.
If you want to use the sample skin, just click on Default Skins, choose a style and click the Apply button that shows up beside the image.
If you want to add custom image, click on Custom Skins or the subfolder like Play Button, click the Add button on the bottom right corner and browse image from local machine. After the image is loaded, click on the image under skin gallery and click the Apply button.Please note that only images in .jpg and .bmp format are supported for skin changes. If you want the image to be translucent, click the Basic Properties tab, and change the value of Aphla to 50, 40 as you like by entering the number or clicking the up and down arrow icons.

New project with drag and drop

A control bar here indicates the area with multiple components that can control the video playback.
Step 1. Click New Blank Template when you initially run the program. The default is a white player with 480x400 as width and height. You can change the size by entering the width and height in the Properties window.

Choose control bar background for the components. It will make other components like a united group to control the playback of Flash video. If you don't want to show the control bar background, just skip this step. Click the Control bar background icon under the Control Library on the right of the main interface, drag a component from the Classic Background, Opaque Background, Translucent Background, Transparent Background or Shape option, and position it in the edit box.

To change the size, click on the component and move the mouse to the component edge, and drag according to the directions when the mouse symbol turns to up and down, left and right arrows for resizing.



Step 3. Drag Video component and Play Button component to the edit box. These two components are recommended because you can set the video screen and enable visitors to click the play button before video starts to play. If you add Play Button component without Video component, the video will display with the same size as the player when previewing. If you add Video component without play button, the video will play automatically.

Drag other components you want to display on player. Generally speaking, only one type of a component could be added to the edit box. However, you can add Label, Image, Hyper Link components as many as you like.

New Project with wizard

With this method, you can just choose a player style, and select components on the wizard, and the player will be automatically positioned.
Step 1. Click Create with Wizard on the first launch template window or after you choose File > New from the menu. The will pop up for you to select player style you want to create and choose components for the player.
Step 2. Choose a player style from the pop-up Quick Create Player Guide window. The player model will display on the preview panel. It is just for your references about the component position. The exact feel and look of the player will depend on your selection in the next steps.
Step 3. Click the browse button for the component you want to add, and you will face the Select Control window with different styles. Select a style and click OK. You can preview the effect on the preview panel on the left.
To delete the added style, just click the delete button beside the browse button.
Step 4. Click the Next button for more component selection.
Step 5. Click the Finish Button to get player with components on the edit panel on the main interface.
Note: The Video and Play Button must be assigned to present video. When a player style you choose includes a component that you did not choose, there will be no component on the related position.

Part II. Preview player

To preview player settings with actual control in real-time, just click the Preview button on Toolbar, or press Ctrl + Enter on keyboard, and the Preview window will pop up with the player size.


This is the Preview window for the player after changing skins for template project. About changing the skins, please refer to Simple template with changeable skin in Part I.

The preview window includes preset Flash videos that are bundled with the program. To change the video, choose Tool > Preferences > Preview from menu bar, and browse FLV video as the preview video. You can also change the thumbnail image for playlist as you will add Flash video for your player.

If you add hyperlink with caption, a new page with the URL you add will open when you click in the text on Preview window. Generally speaking, the components you see in the Preview window are what you get in output. However,

the Preloader component will not display on Preview window but will display on output when you upload video to your site.

Part III. Export player

Moyea PlayerBox enables 3 kinds of export methods:
Direct output with complete FLV player
Output with web FLV player theme
Output with FLV player and Flash video connected via Publish wizard

Direct output with FLV player, which could be used on web page by simple HTML code.
Your Flash video could be displayed on player if you have knowledge about XML or follow our instruction about making FLV player to player Flash video. You may see the sample output at our Demo page.

Output with web FLV player theme, which could be used again by Moyea PlayerBox Publish wizard to connect player with Flash videos.
The player theme could be used by Moyea Flash-related products by copying the SWF file to the Control folder of the installation folder. When the player theme is imported to Flash Video MX Pro, Flash Video MX Std, DVD to Flash Converter, FLV Editor Ultimate, FLV Editor Lite or Moyea FLV Player, only the supported components in these products will be displayed.

Output with FLV player and Flash video connected via Publish wizard.

Step 1. Click the Publish button on Toolbar, and the components on the current edit box will be applied and the publishing wizard will pop up. You can also run the publishing wizard from the desktop icon and choose select player skin that you export with the second method mentioned above. The player skins from Moyea Flash Video MX Std or Pro and FLV Editor Lite or Ultimate are also supported.

Step 2. Add FLV video.
You can add FLV video from folder on your machine or intranet, and add direct FLV URL with HTTP and RTMP protocol.

If you add a player skin without playlist, you can only add one Flash video. If you add a player skin with playlist, you can add as many FLV videos as you like.

Step 3. Set output folder for player and related images with specified file name. Within a few seconds, you can get .html, .swf, .mmpl, .jpg ready for uploading.

You may see the sample output with videos at our Demo page.