 |
| How to build a basic image jukebox using Wildform Flair |
|
| |
|
 |
|
| Introduction |
|
| This tutorial will show you how to make this basic image jukebox: |
|
|
|
| Top |
|
|
| Opening Wildform Flair |
|
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 Wildform Flair and at the start screen click "Create New Project." We will label this project, "Image_Jukebox". |
|
|
|
| Your Wildform Flair 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 Wildform Flair. You can use the import wizard located in the shortcuts tab of the settings window, you can use the File -> Import File menu, or you can use the Video, Audio, Image Importer under the Tools menu. For this tutorial we are going to use the Video, Audio, Image Converter Importer 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 File tab select a SWF present.
Then go to the Vid/Aud tab and 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. |
|
|
|
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 Project Toolbar. |
|
|
|
| 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:
Wildform Flair
Image Jukebox
To create a text effect go to the Tools menu and select Create Text Effect. 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 Wildform Flair. 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 tab in the 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 and to add a link to the "Wildform" text, go to the Wizaards menu and select Links & Mouse Overs. Follow the instructions in the wisard. |
|
|
|
| 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 tab in the 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 select Export File under the File menu. To play your exported SWF, click the "Play Output" icon in the Standard toolbar. |
|
|
|
Export HTML: If you wish to deploy your SWF in a web page, you may select "Export HTML", in the Export tab in the Settings window. The 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 Wildform Flair. With a little imagination you can do a lot of things with Wildform Flair. 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 |
