 |
| How to build a basic image jukebox using WildPresenter |
|
| This tutorial applies to WildPresenter Pro 2+. |
|
| |
|
 |
|
| Introduction |
|
| This tutorial will show you how to make this basic image jukebox: |
|
|
|
| Top |
|
|
| Opening WildPresenter |
|
In order to make a Flash image jukebox you need some Flash images. For this jukebox we are going to use the images and encode a preview and full size version.
Open WildPresenter and at the start screen click "Create New Project." We will label this project, "Image_Jukebox". |
|
|
|
| Your WildPresenter program will now open. |
|
|
|
| Before we continue you should visualize your final project. For this jukebox my overall dimensions will be 700x500. Keeping that in mind I will choose to have the preview images be 84x56 and the full size image 402x268 (You can of course choose any size you wish - typically you should maintain the aspect ration - width/height - of your source.). This will fit in perfectly with any text I choose to add in later. |
| Top |
|
|
| Importing images |
|
There are several ways to import images into WildPresenter. You can use the import wizard, you can use the import menu, or you can simply use the Video, Audio, Image Converter button. For this tutorial we are going to use the Video, Audio, Image Converter button because it features a batch encoder that I am going to use to batch encode my images all at once.
We will begin by encoding the smaller, preview images.
Open the Video, Audio, Image Converter button |
|
|
|
|
|
| Open the batch converter by clicking View>Batch Processing. Drag in all the image files you wish to convert into the batch interface. |
|
|
|
Check the checkbox for "Add suffix to filename", type in "_small" in the field and click "Update filenames" so that text will be added to the output of each filename.
In the Vid/Aud tab make adjustments to your image dimensions and image quality.
Click the Vid/Aud tab to make adjustments. Adjust the dimensions to 84x56, adjust the image quality and set the framerate to 1. |
|
|
|
Next click the File tab and select Flash 3+ SWF
When you have set all your settings click the Process button in the batch encoding window. (Please note that you need to have your conversion settings set before the "Process" button will become active.)
The converted images will be saved in the same location as the source image files.
Repeat the same process for the larger image.
This time type "_large" in the "Add suffix to filename" field and click "Update names" so that text will be added to the output of each filename.
Set your settings in the Vid/Aud tab. For the larger images we'll use the 402x268 as the dimensions.
The small and larger images will be linked together later. |
| Top |
|
|
| Creating the jukebox |
|
Now that the project is set up, the next thing to do is set the dimensions of the jukebox. Earlier we decided the jukebox dimensions would be 700x500, however you can make it any size you want. We recommend making it no larger than 800x600. You can also change this as you go along if you find you haven't left yourself enough room or if you need to cut it down.
Enter the dimensions 700x500 in the Output tab of the Project Settings window. |
|
|
|
| Next create a background for the project. To change the stage background color right click the stage area, click Properties, then Fill. Click the Gradient tab and select a design. |
|
|
|
| Top |
|
|
| Creating jukebox text |
|
We now need to create any text that will be included in the jukebox.
Create the following 2 text effects:
WildPresenter
Image Jukebox
To create a text effect click the Insert Text Effect button. |
|
|
|
| Enter in the Text, Effect, Font and Fill. |
|
|
|
Click Save & Insert when completed.
Repeat until you have completed all the text effects.
Now use the text tool (Text>Insert Text) to create the following two lines:
Click Image To View
Wildform |
| Top |
|
|
| Inserting SWF's |
|
Now that the text effects have been created you can insert the preview-sized SWF images that we created earlier. There are many ways to import in WildPresenter. For this tutorial we will simply drag the image files onto the stage. In this way you can drag them all in at once. Once you drag the files onto the stage you will receive the following dialog box.
Since you want all the images on the same slide click No at the dialog box. |
|
|
|
Next drag one of the large sized images into the stage. This image will be used as a target (any time you load in a new image it must load into a target).
Once completed arrange jukebox to look like this: |
|
|
|
| Top |
|
|
| Adding mouse events |
|
We now want to link the preview-sized images to the full size image. The remaining full sized images will be targeted into the full size image we placed on the stage.
To add a mouse event open the select a preview sized image, open the Object Settings window and select the Mouse Events tab. Check the Add on click box and select the Load Flash SWF Movie button. Browse to your file and in the Target filed select 'transparent'. |
|
|
|
Repeat for the remaining images.
Adding a mouse over (Optional)
You can add a mouse over effect to the small preview sized images if you wish. For instance, you can have the exact same image but highlighted. This will create a contrast when the user selects a preview image. You can create the mouse over images using the batch-converting feature as previously used. (To create a highlighted image use the "Edit, crop, filters" window in the media importer and change brightness filter.)
To create a mouse over open the Object Settings window and select the Mouse Events tab. Check the Add mouse over box and click the browse button to locate your file. |
|
|
|
| To add a link to the 'Wildform' text select the Open HTML page and enter in the link URL into the URL field. |
|
|
|
| Top |
|
|
| Adding fade effects |
|
Now that your jukebox is completed and functional you may want to add some finishing touches. Adding a 'fade in' effect will help smooth in the transition when opening the jukebox.
First select an object by clicking on it on the stage or on the timeline. Then open the Object Settings window, select the Play tab, then check the Image Fade In box and choose 6 or any number that you wish. |
|
|
|
| Repeat for all the other objects you wish to add a fade to. |
| Top |
|
|
| Exporting your image jukebox |
|
You are now ready to export your final file.
You may export your final SWF by clicking the "Export" button in the Output Tab of the Project Settings window, or you may click the "Export File" icon in the toolbar. |
|
|
|
| To play your exported SWF, click the "Play Output" icon in the toolbar. |
|
|
Export HTML: If you wish to deploy your SWF in a web page, you may select "Export HTML", in the Project Settings window HTML tab which will produce an HTML file with the code you need to play your Flash SWF output in a web page. Simply copy that HTML into whatever page you wish.
When you wish to publish your image jukebox on the Internet or distribute it you will need the jukebox SWF file and you will also need the "Load_External_Files" folder where your videos are located.
Click here to download a template of the image jukebox. |
| Top |
|
|
| Conclusion |
|
| So that covers how to create a basic image jukebox using WildPresenter. With a little imagination you can do a lot of things with WildPresenter. It is also possible to create more complex jukeboxes with multiple videos and bitrates or jukeboxes for images and audio files as well. This tutorial provides a good way to get started. |
| Top |
