In
order to make a Flash video jukebox you need
some Flash videos. For this jukebox we are going
to use a source video and encode it at 2 different
bitrates: 56k and 300k. We typically advise customers
to post their video using at least 2 bitrates
and we suggest using 56k for people on dial up
modems and 300k for the broadband viewers, though
many people opt for broadband only media and/or
set their broadband videos to a higher bitrate
such as 500k.
The video we're going to use is the King Kong
movie trailer.
Open Wildform Flair and at the start screen click "Create
New Project." We will label this project, "King
Kong".
Your
Wildform Flair program will now open.
Open
the Slide tab of the Settings Window and set the slide navigation to "None".
There
are several ways to import video into Wildform Flair.
You can use the import wizard, you can use the
import menu, or you can use the Video,
Audio, Image Converter under the Tools menu. This is what we will do.
The
Import Video/Audio/ Images window will appear.
Once
you have selected the video file you want to
encode, you may bring it into Wildform Flair by
clicking on the Browse button to the right of
the Input box in the File tab.
Select the file you wish to encode from your
hard drive and click open. You will now see the
name of your selected file located in the Input
box in the file menu.
Next I will select the 300K Broadband video (Flash
8 SWF) preset. This will automatically create
a Flash 8 video (the best quality) at the 300k
bitrate I want. I encode the larger video (the
300K video) first, because I will later match
the 56K project dimensions to the 300K project
dimensions.
Because
the video I'm using is in the widescreen format
(the aspect ratio is wider than the standard
TV aspect ratio) I'm going to adjust the aspect
ratio to match the source video.
I will also want to make sure the video framerate
of my output is a factor of the source video
framerate. A factor of Number A is a number that
can be divided into Number A without leaving
any remainder – so the factors of the source
24 fps framerate are 1, 2, 4, 6, 8, 12, and 24.
Click the Vid/Aud tab to make necessary adjustments.
If
you are unsure what settings to use, it's
a good idea to start off with the presets that
come with Wildform Flair and adjust your settings
from there.
We
can also add a player to our project. Wildform Flair
has a very useful player feature that enables
you to output your Wildform Flair Flash SWF with
a player automatically.
To include a player click the Player tab in the Import Video/Audio/Images Window.
Check
the "Export player while encoding" box.
Select a player from the menu. We are going to
select the player "Minimal2 A".
View skin: By clicking on this button, you can
preview the player skin you have selected. In
the preview mode the controls of the player will
blink and may appear slightly distorted. This
is normal. Once the player is created, the controls
will appear correctly.
You
may want to add a preloader to the 300k video
for better viewing.
To add a preloader to the video select click the Player tab in the Import Video/Audio/Images Window.
The
purpose of using preloaders is to ensure smooth
playback of larger Flash files for users on slower
connections. In this way, users on slower speed
connections (e.g., dial up modems) can view larger
Flash files without buffering or the Flash stopping
and starting. This is for web streaming purposes
only. Preloaders will not work on Flash files
played locally from a hard drive or CD. As a
general rule we recommend using the Adaptive
preloader with a 1.1 buffer factor.
Return to the File tab and click the Encode & Insert
button.
Open
the Object tab of the Settings window, select the Appearance
tab and in the Transform Options section view
the object dimensions.
Note:
Since the video dimensions of this 300k video
are 326x215 we will want to change the dimensions
of our project, in the Project Toobar
to that size. I will also want to keep the background
transparent since I am going to use this video
in a larger project (the jukebox itself).
Export your project.
To export your project click File>Export File
Play
your exported file to view your project in a
player.
Repeat the same process for a 56k version of
the video. Export the 56k version using the same
project dimensions as the 300k video. By centering
the 56k video in the project and using a transparent
background you can later load the 56k video (which
is smaller) into the same area where you load
the 300k video.
Now
that I have my project set up, the next thing
I'm going to do is set the dimensions of
my jukebox. I know that the larger video is 326x215.
Allowing space for my logo, menus, and the video,
I decide to make the jukebox 520x372, 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.
I enter the 520x372 in the Project Toolbar.
Next
I'm going to create a background. To change
the stage background color right click the stage
area, click Properties, then Fill. Click the
Gradient tab and select a design.
We
now need to create text boxes for various controls,
messages and logos.
I'm going to use the text animation tool
because it exports separate files so it is very
easy to use to create roll-over text components,
but I could also use Wildform Flair's text
tool.
Create 'King Kong Trailer 56k', 'King Kong Trailer
300k', 'Wildform', 'Reload', 'Video Requires
Flash 8 Player', and 'Select Video to Start'.
We're going to use white as the Fill color
for the following: 'King Kong Trailer 56k', 'King
Kong Trailer 300k', 'Reload', and 'Video Requires
Flash 8 Player'. We will also create 'King Kong
Trailer 56k' and ‘King Kong Trailer 300k' effects
with the exact same formatting but with a red
Fill color to use for the mouseovers (so when
you mouse-over that text it will change color
from white to red).
We will use the plain effect on all except 'Select
Video to Start', for that you may choose any
effect you wish. The plain text effect is really
no text effect.
Under the Tools menu 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.
Mouse-overs
I
will now add mouse-overs to King Kong Trailer
56k and King Kong Trailer 300k. To add the mouse-overs
I use the "Mouse Events" tab of the
Object tab in the Settings window.
Click on your red King Kong Trailer 56k text;
note the name of the file in the timeline.
Once
you have noted the timeline name, delete the
red King Kong Trailer 56k text on the stage.
Click on a .swf to activate it. I start with
the white King Kong Trailer 56k file. Next I
open the Mouse Events tab of the Object tab in the Settings
window.
To
create the mouse-over effects check the "Add
mouse over" box and open the Source Files
subfolder within the King Kong project. In the
Source Files folder select the text effect that
we just deleted from the stage (the red version).
After generating a preview you should be able
to see that if you place your mouse over the
white King Kong Trailer 56k text, it turns into
the red King Kong Trailer 56k text. This is just
a nice way to show viewers when they have activated
a clickable area of your jukebox. You could also
create this jukebox without mouse-overs.
You
need an object to load the videos into, so we
will now insert a transparent object where the
videos will play.
Right click in the timeline and select Insert
Transparent Object.
Once
completed arrange jukebox to look like this:
Note: Do
not scale (change the dimensions of) the transparent
object. If you scale the
transparent object, any SWF you load into the
object will scale in the same way.
Wildform Flair
will automatically assign each object its own
layer and will name the layer automatically as
well. To
insert an extra space before each of these .swf's
(I want to start all the .swf's on frame 2 so
my "reload" will work properly when
it goes to frame 1). Select a layer, then right
click on the selected layer and select the "Insert
Frames" option.
Insert
1 blank frame.
This
shifts the selected frame over one frame. Repeat
for remaining timeline layers.
Next,
I will add the on-click mouse actions to King
Kong Trailer 56k and King Kong Trailer 300k.
To add the on-click mouse actions I again use
the "Mouse Events" tab of the Object
tab of the Settings window.
To make the text link to the video, check the "Add
on click" checkbox and select the "Load
Flash SWF Movie" radio button. I then browse
to the folder where I have the "KingKong56k.swf" file
and select it. I specify the transparent SWF
as the target. (The "target" is where
the SWF will be placed when it is loaded.)
Now
when you click on the "King Kong Trailer
56k" text it will load the King Kong 56k
trailer into the transparent sprite.
Repeat this step for King Kong Trailer 300k.
Note: The videos are automatically placed in
the Load_Extrenal_Files folder of your Wildform Flair
project. All files loaded into your project are
automatically placed in this folder. You will
need this folder (and the videos in it) when
you post your jukebox on the Internet or distribute
it.
I will now add a link to the "Video Requires
Flash 8 Player" .swf. I will embed a link
to the Adobe Flash Player download page.
Finally
I will also add a "Jump to frame 0" action.
This will restart the jukebox when clicked.
Now
that your jukebox is completed and functional
you may want to add some finishing touches. For
the King Kong Trailer 56k, King Kong Trailer
300k, Wildform logo, Video Requires Flash 8 Player,
and Reload text effects we are going to add a
fade in. This 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, select the Play tab, then check
the Image Fade In box and choose 6.
Repeat
for all the other objects you wish to add a fade
to.
We also want the Select Video to Start effect
to fade out after it plays.
Open the Object tab, select the Play
tab, then check the Image Fade Out box and choose
6.
I
am now ready to export my final file. 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 "HTML",
in the Export tab in the Settings window. Select export HTML,
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 video 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.
So
that covers how to create a basic video and audio
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.
