In
order to make a Flash video jukebox you need
some Flash videos. For this jukebox we are going
to use 2 different source videos and encode each
one for 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 two videos we’re going to use are two
different trailers for the Matrix.
So the first thing I do is open Flix Pro. I click
browse to find my source file. The output filename
will fill in automatically. Then I’ll select
the MX video 56k preset which will use the MX
video 2-pass VBR .swf encoding that results in
the best quality.
Key point: Use Flix Pro’s 2-pass
VBR MX video .swf output for the highest quality.
(Remember
that MX video will only play in the Flash 6 player
and higher, so you will want to make a note of
that in the jukebox. However, you can also use
this tutorial to create a jukebox for the Flash
3-7 video and the vector video.)
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
30 fps framerate are 1, 3, 5, 6, 10, 15, and
30.
Since
I don’t need any other special features
for this video (like the editing, cropping, or
filters features, or automated .swf functions
such as preloaders, etc.) I don’t need
to select any more settings if Flix Pro. You
may find that it is useful to add the de-interlacing
option (from the Edit, Crop and Filters window)
which removes interlaced video artifacts. If
I decide later that I would like to add a preloader
to the video – or another .swf function – I
can do that automatically in Linx.
I will repeat the same process for a 300k version
of the video and then I’ll encode both
56k and 300k versions of the second video. When
I encode the 300k video I will change the preset
framerates to 15 fps video and 15 fps .swf so
that my video framerate is a factor of my source
video framerate (15 fps divides evenly into the
30 fps source video framerate).
If you are unsure what settings to use, it’s
a good idea to start off with the presets that
come with Flix Pro and adjust your settings from
there.
Flix
Pro has two options for adding a player to a
video: you can do it while you’re encoding
the video, or you can add the player to the video
after you’ve encoded it. I’m going
to add the player to the video after encoding.
In this way I can later use the same source video
.swf file and change my player or post it without
a player without having to re-encode it. But
either method will work fine.
Because my videos have already been encoded,
I am going to open the Existing SWF tab of the
Players window in Flix Pro. I will browse to
the videos I have created and add a player to
them.
For
the purposes of this tutorial I am going to use
one of the “Minimal” Flix Pro Power
Players I have installed – but you can
use any of the players that come with Flix Pro.
In order to maintain a unified look and feel
to my jukebox I will use the same player for
all four videos.
Once I have added a player to each of my four
videos I am ready to move on.
Note on Linx Play Controls: Linx has play controls as well as volume
and mute controls which can be added to any .swf – but
we do not recommend using them for an audio or
video file in a jukebox. This is because the
play controls in Linx work differently than the
players that are output from Flix Pro. The play
controls in Linx affect the entire Linx project
you are creating. For instance, if you are pressing
the fast forward button it will fast forward
your entire Linx project – even past the
point where the video ends. The Flix Pro players
controls will only affect the video that the
play controls are associated with so they are
ideal for creating a video jukebox.
Adjust
the dimensions of your player videos using Linx
Next,
I need to quickly put my 56k player videos into
a larger .swf frame. This is because I am going
to load all the videos into the same “sprite” within
the jukebox. If the videos I am loading into
the same target “sprite” are not
the same size as the sprite they will scale to
fit the sprite and not play at their intended
dimensions (this is explained more below).
Key point: All the videos you use for
this jukebox must occupy a .swf file with the
same dimensions (height and width). So to make
smaller videos larger without stretching them
you place them into a larger frame using Linx.
Right now the 56k and 300k videos with players
are different sizes. So I am going to bring the
56k videos with players into Linx and re-export
them at the same size as the 300k videos with
players, centering the 56k videos and adding
blank space around the sides. (A video jukebox
can be made without having to do this, but this
particular jukebox is designed to be used with
videos that have the same dimensions.)
First
set your output .swf name and path
(The
following steps apply to starting any Linx project.)
I open Linx. Linx opens to the main window where
you import, layer, edit and preview the project
you are creating. One of the first things you
need to do when beginning a Linx project is to
choose an output name and path for the .swf you
are creating. If you have not entered one, you
will be prompted by Linx to create one.
You
can also enter this name and path in the Files
tab of the Movie Properties window. (The Movie
properties window allows you to set properties
for your entire project. The settings applied
in this window will apply to the entire .swf
file that you output from Linx.) To launch this
window, go to the "View" menu and open
the "Movie Properties" window.
I
am going to label my output file “Matrix_1_56k_player.swf”.
Save
a Linx .lnx settings file
Next,
I am going to save the settings file I am creating.
The settings file saves all the settings and
characteristics of your Linx project. You will
want to save this file often as you go along,
so you don't lose any of your work by mistake.
In the "File" menu, selecting "Save
Settings" will call up a dialog box in which
you can label the name of your .lnx file. I am
also going to call this file, “Matrix_1_56k_player.lnx”
Key point: Save your Linx .lnx settings
file often as you work so you don’t lose
any of your work.
Determine
the appropriate dimensions for the videos
Now
that I have my project set up, the next thing
I’m going to do is set the dimensions of
my resized video output. So first I will bring
in one of the 300k player videos I created. I
do this to determine the image size of the largest
video. This way I can match the smaller videos
to the larger videos. Bringing in one of the
300k videos with player (since they are both
the same size it doesn’t matter which one
I bring in) I can see in the SWF Properties window
that the image dimensions are 305x198.
This
way I know that I want my smaller 56k videos
to be placed in a .swf that is 305x198. Now that
I have the correct dimensions, I can remove the
300k video. I do this by right-clicking on the
video on the Linx timeline and selecting “Remove
SWF”.
Resize
the videos
Next,
I’ll import one of the 56k videos with
a player. I will import it using the main timeline
play mode which will allow the files to stream.
This is very important! Do not set the videos
to the sprite mode because then they will preload
completely.
Key point: Import videos using the Main Timeline
play mode. This will allow them to stream.
I
want to make the 56k and 300k videos the same
image dimensions so they will load into the same
target .swf in the same way. If the .swf files
are different dimensions they will scale to fit
the size of the target .swf that you load them
into. Since the 300k video is 305x198, I will
make sure 305x198 is displayed in the Dimensions
setting in the Movie Properties window.
I
will center the 56k videos with players in this
larger .swf by subtracting the width of the 56k
player videos (185) from the width of the 300k
player videos (305) and dividing by 2 (305-185
= 120/2 = 60). So I enter 60 in the “Translate
X” field in the SWF Properties window.
I do the same thing with the height (198-138
= 60/2 = 30). So I enter 30 in the “Translate
Y” field.
NOTE: If
your videos are long, you may want to turn off
the auto-preview function while you’re
making these changes so Linx won’t have
to generate a new preview every time you change
a value. You can turn auto-preview on and off
using the Preview menu or toggling the auto-preview
icon in the toolbar.
Once
I’ve repositioned my 56k videos I will
then export it. I will also make sure to export
it at the same framerate. If you’re not
sure what the framerate of your source is you
can view it at the top of the SWF Properties
window.
Key point: Make sure to maintain the
same .swf framerate as the source video so you
don’t change the speed at which the video
is played. You do this in the Files tab of the
Movie Properties window.
(If
your videos are encoded at a different .swf framerate
than your jukebox, the jukebox will play at the
speed of the video you load while the video is
playing. This may or may not be a problem depending
on whether you have other .swf files playing
while the video is playing, or if you have other
controls in the jukebox. But it is something
to keep in mind. In this example in Flix I have
encoded the 56k videos at 6fps video and 12fps
.swf and the 300k videos are encoded at 15fps
video and 15 fps .swf. So the 300k videos are
actually running a bit faster than the jukebox,
which is created at 12fps. Because there is nothing
else happening in the jukebox while the videos
play, this difference doesn’t matter. However,
there may be instances where you want all the
.swf framerates to match exactly.)
Now I’ll use my current Linx project as
a template and then just import the other 56k
player video in the main timeline mode and delete
the first one. Then I export the second 56k player
video resized to 305x198.
These resized player videos will be the videos
I load into the jukebox. Remember you don’t
need to resize the 300k player videos because
they are already the correct size. If they were
different sizes you would have to make them all
the same size.
I
want to create some text items for my jukebox – so
viewers will be able to select which video they
want to play. So I’m going to use Wildform’s
text animation software, Wild FX to generate
the text. You could also use any other .swf or
any supported image file, but the text created
by Wild FX uses Flash vectors, so the file size
is small, the text is scalable if you want to
resize anything, and the backgrounds are transparent
so they’re easy to place in Linx projects.
I open WILD FX and create several text files: “Matrix
Trailer 1 56k”, “Matrix Trailer 1
300k”, “Matrix Trailer 2 56k”,
and “Matrix Trailer 2 300k”. I’m
going to use a basic effect like “Plain” and
a basic font, in this case Arial Bold. I will
make the text in a font size that fits with the
project I am creating – so I don’t
want the text to be too small to read or too
large to fit neatly into the jukebox.
I am going to create the text using the exact
same specifications (font size, image dimensions,
etc.) in both white and red. The red version
will be used to make a mouse-over – so
when a viewer mouses over one of the text items
it will change color and they will know that
they have moused over it. And I’m going
to save these files in my jukebox directory to
make it easy to find them.
Key point: If you want to make mouse-overs
for your text elements, create two versions that
are identical except that they have two different
colors.
Before I start to lay everything out, I need
a couple of additional Wild FX text elements:
I need a .swf placeholder that will be the location
I load the video into. Since the largest player
video I have is 305x198, I will make this .swf
305x198. Since I’m using Matrix trailers,
I’ll use one of the Matrix effects in Wild
FX – these effects also loop continuously
which works well with the jukebox. (You can also
use any other .swf file or any supported image
file – and if they are not the right size
you can scale them in Linx.) I create a text
effect with the text “Select video to start”.
This way viewers know how to get the video to
start playing. I could also have the video start
automatically.
Key point: The jukebox requires a “target
.swf” that the videos will load into.
I am also going to create a small text .swf that
reads “Video requires Flash 6+ Player.” I
do this because I created MX video using Flix
which requires the end user to have the Flash
6 player or higher installed, so I want to make
that clear. And finally, I will create a text
.swf that reads “Reload” which I
will use as a control to allow viewers to reload
the jukebox.
I don’t add any links or actions to any
text I generate in Wild FX because I can do that
later in Linx.
I will first specify my output filename "Wildform_Linx_Jukebox.swf" and
my .lnx settings file name “Wildform_Linx_Jukebox.lnx” which
I will remember to save often. (See 3a above
for more information on starting a project in
Linx.)
Create
the jukebox frame
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 videos are all 305x198.
I also know that my widest text element “Matrix
Trailer 2 300k” is 141 pixels wide. Allowing
space for my logo, menus, and the video, I decide
to make the jukebox 500x372, but you can make
it any size you want. We recommend keeping it
smaller 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 500x372 in the Files tab of the Movie
Properties window.
Next
I’m going to create a background. I’d
like to create a small border, so I will create
two boxes – one inside the other. Since
the default background in Linx comes out as transparent
if I ever need to import it into Linx in the
future, I’m going to use an opaque background.
In the main timeline of Linx, I right click on
an empty space and select “Insert opaque
background”. This inserts a 100x100 opaque
box on the Linx timeline. I now label the layer
it’s on “red box 500x372”.
It’s important to always label your layers,
because it will help you keep your Linx project
well organized.
Now,
to adjust the opaque .swf I just inserted, I
click on the .swf in the Linx timeline to activate
it and then I open the SWF Properties window – this
is the window you use to apply settings to an
individual .swf in your Linx project. To open
the SWF Properties window I select View>SWF
Properties. In the appearance tab of the SWF
Properties window I see the 100x100 dimensions.
I change those to 500x372. (You can also use
a gif, jpeg or any other supported image file
for your background.)
Next I want to set a color for my background.
To do this I’ll use the color options in
the Appearance tab of the SWF Properties window.
As a general guideline in using these values,
if your .swf is white, you will need to enter
negative values in the RGB fields to change the
color. If your .swf is black, you will need to
enter positive values in the RGB fields to change
the color. The opaque .swf is black, so I’ll
enter positive values to get the background red.
I’d like a nice deep maroon color, so I
enter 60/0/0.
To
see the result of any changes you make in Linx
you have to generate a new preview. Because the
project is short I’m going to set the “auto-preview” mode.
This option automatically generates a preview
any time you make a change to your Linx project.
You can do this using the toolbar icon
or
the Preview menu.
You
may find that if you are working on a project
that has longer .swfs in it, or as the project
gets bigger, you don’t want to generate
a preview every time you make a change because
the time it takes can throw off your work flow.
In that case you can turn off the auto-preview
option and use the Preview>Refresh Preview
(Ctrl+R) menu item. This updates your project
without playing a preview.
Now I’m going to repeat that process with
a second opaque .swf that will become the main
background. I right-click on the layer I just
created (red box 500x372) and select “insert
layer”. This inserts a new layer above
the old layer.
Key point: Linx orders layers from top
to bottom, so the .swfs on a layer that appears
on top of another layer will appear over the
.swfs on the layer below.
I want this background to have a six
frame fade in. But the .swf is only 1 frame long.
So I place my mouse on the right edge of the
.swf in the Linx timeline and, holding the mousekey
down, I drag the edge 11 frames over so the .swf
now appears to occupy 12 frames on the timeline.
I
could also do the same thing in the play tab
of the SWF Properties window in the “keep
last frame for” field. I will also set
my fade in here. I select Image fade in and enter
6 frames. I will use this same method for every
.swf in the jukebox, so the entire jukebox will
fade in.
I
repeat the process of inserting an opaque .swf
on the new layer, naming the new layer and then
I activate that .swf by clicking on it and I
go to the Appearance tab of the .swf properties
window to resize it. Because I want a border
effect, I am going to make this .swf smaller
than the previous one, so I enter 488x360 in
the height and width values. This gives me a
6 point border around the entire frame. Now I
enter “6” in the translate X and
translate Y options to offset the new .swf by
six pixels to the right and down. To make the
box blue I enter 0/0/50 in the color options
field.
I then extend the .swf on the timeline and add
a fade in.
The background .swf’s are the only ones
that I will put on the first frame. Every other
.swf will start on the second frame or later.
This is so that when I later add a “reload” feature
that allows the viewer to reload the jukebox,
the reload action takes the jukebox back to frame
1 – before the other .swf’s are loaded.
So I leave an extra frame at the beginning. If
I had forgotten to do this, I can always select
the layers I want (one or more at a time) right-click
on them and then select the “insert frames” option.
Import
logos
Next
I’m going to import a couple of logos I
have previously created. This is a good way to
brand and identify my jukebox.
I select Import>Import file and import the
Wildform logo and then my Linx logo. Since I
have the automatic layer naming option on (View>Options),
when I import a file this way, Linx will automatically
fill in the layer name using the same name as
the .swf name. In general I like to keep different
elements of my project on different layers so
it is easy to move or replace them later without
affecting the rest of my project. But you can
put as many .swfs on the same layer as you want
one after the other.
Because these logo files (and the Wild FX text
files) are small in file size and because I want
to add fades to them I will import them in the
Play independently in a sprite mode.
To position a logo, I select the preview scale
mode by clicking on the preview scale icon in
the toolbar.
The
preview scale mode allows me to move .swf files
in the preview pane. For instance, I can click
on the Linx logo .swf on the Linx timeline to
activate it. The preview scale markers appear
on the box and I then drag the box exactly where
I want it. In this case it’s in the upper
left of the blue box below the Wildform logo.
I
then use the Translate X and Translate Y settings
in the Appearance tab of the SWF Properties window
to fine tune the positioning of a .swf pixel
by pixel so it will left-align with the Wildform
logo above it.
Import
text elements
Next,
I’m going to import all the rest of my
text .swf’s. I will only import the “white” text
files because the “red” text files
I created are for mouse-over purposes and do
not need to be imported. Mouse-over .swfs are
automatically integrated into the file when I
add them and I don’t have to import them.
I’m going to use Linx’s multiple
file import capability to import all the text
files at once.
Key point: Linx allows you to import
multiple files simultaneously by selecting and
dragging them all into Linx at the same time.
Linx
will assign each one its own layer automatically
and will name the layer automatically as well.
Also, by using the default import mode, all of
these files will be set to the Sprite play mode.
This is fine for a few reasons: 1) the files
are very small, so streaming is not an issue
and the sprite mode is fine, 2) I want to add
mouse-overs to these .swfs and to add a mouse-over
the .swf has to be in the sprite play mode and
3) I want to add fades to these .swf’s
and adding a fade to a .swf in a sprite does
not affect file size whereas adding a fade to
a .swf set to the main timeline play mode may
affect file size. (Note: The default import play
mode can be changed in the Options window – View>Options.)
To
insert an extra space before each of these .swf’s
(remember I want to start all the .swf’s
on frame 2 so my “reload” will work
properly when it goes to frame 1) I will select
all these layers by selecting the top one and
holding down the <shift> key while I select
the bottom one. Then I can right click on the
selected layers and select the “insert
frames” option.
This
shifts all the selected frames over one frame.
Next I will want to extend all these .swf files
so I can add a 6 frame fade-in. (You don’t
have to do this, but fades can be nice and this
illustrates how it’s done.) To do this
I will repeat the steps for adding fades in 5a.
When you generate (or auto-generate) a new preview,
you will see all your elements positioned in
the top left corner. So the next thing you’ll
need to do is to start positioning the text elements
where you want them in the jukebox. Remember
that you can adjust and change this positioning
at any time, so you can change your mind.
The first .swf I’m going to position is
the “select video to start” .swf.
This is going to be the .swf sprite that I load
my video into. When you load an external .swf
into your Linx project (like the videos we will
use) you need to specify a target sprite into
which you will load the file. Otherwise it will
replace the entire movie that you load it into – which
would mean that your whole jukebox would be replaced.
So now I want to position this “Select
bandwidth” .swf in a good location. Again,
using the preview scale mode I position it where
I want, and use the translate x/y values to fine
tune the positioning.
Now
I will repeat this process with the other text
elements. While you can drag files approximately
where you want them using the “Preview
Scale Mode’, if you want the elements to
be perfectly centered or if you want them to
align with one another, you will probably have
to use the translate x/y values in the SWF Properties
window. This is particularly important for the
video selection buttons I’ve created, because
I want them all to be left aligned to one another.
When I’m done, the project will now look
like this:
Note
how I left aligned the “Matrix Trailer” options.
Then I centered the “Video requires Flash
6+” at the bottom and put the “Reload” button
in the lower right. With all of these I quickly
dragged them to the area I wanted them using
the Preview>Scale mode and then fine-tuned
the position using the Translate x/y settings
in the Appearance tab of the SWF properties window.
Adding
mouse-events, mouse-overs and links
Next,
I will add the on-click mouse actions and the
rollovers to each of these .swfs. To add the
on-click mouse actions and rollovers I use the “Mouse
Events” tab of the SWF Properties window.
To start, I click on a .swf in the timeline to
activate it. I start with the Matrix Trailer
1 56k file. Next I open the Mouse Events tab
of the SWF Properties window.
To get it to load the video I check the “Add
on click” checkbox and select the “Load
SWF Movie” radio button. I then browse
to the folder where I have the “Matrix_trailer_1_56k.swf” file
and select that. The “Target” for
this video is the “select_video_to_start” sprite
which I can select from the drop down menu.
To add the red mouse-over I then check the “Add
mouse over” box. I browse to the folder
where I have the Matrix_Trailer_1_56k_red.swf
file and select that.
After
generating a preview you should be able to see
that if you click on the “Matrix Trailer
1 56k” text it will load the Matrix 1 56k
trailer into the “select video to start” sprite.
You should also see that if you place your mouse
over the white Matrix Trailer 1 56k text, it
will turn into the red Matrix Trailer 1 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
mouseovers.
I will repeat this step for the Matrix Trailer
1 300k, Matrix Trailer 2 56k, and Matrix Trailer
2 300k .swf’s.
I will then add a link to the “Video requires
Flash 6+ Player” .swf. I will embed a link
to the Macromedia Flash Player download page.
Finally
I will also add the red mouse-over to the “reload” .swf
as well and a “jump to frame 0” action.
What
if I need to adjust the size of my jukebox dimensions?
If
you have completed your jukebox and you realize
that you need to make it larger or smaller don’t
panic. You can. You can resize your jukebox and
move all the layers that you have by selecting
multiple layers and offsetting them.
To select multiple layers follow the instructions
in 5c. You can insert frames, delete frames and
shift the positioning of every .swf on a layer
using the right-click options.
I
am now ready to export my final file. Linx offers
a number of additional export options that can
assist you in the deployment and distribution
of your Linx encoded SWF files.
You may export your final SWF by clicking the "Export
SWF" button in the File Tab of the Movie
Properties Window, or you may click the "Export
SWF" 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", which will
produce an HTML file with the code to embed
the SWF in a web page. Simply copy that HTML
into whatever page you wish.
Export E-mail: If you
want to send your output SWF file in an email,
select this box. Linx will automatically
output a text file that can be cut and pasted
into an html e-mail editor, such as Outlook
Express. The text file will be named according
to the following format: swfoutputfilename_email.txt.
Linx will also output both Windows and Macintosh
projector files. These can be very useful for
deploying your Linx output on CD and for other
methods of offline distribution. Projector files
contain the SWF output and player together, so
you can be certain that the viewer does not need
any additional players to view the files. When
you create a projector which loads external files,
such as the video files loaded by the jukebox,
you must remember to include the external files
with the projector.
Export Win Projector: Selecting
this box will cause Linx to export your SWF
as a Flash projector file for Windows (an
.exe file).
Export Mac Projector: Selecting
this box will cause Linx to export your SWF
as a Flash projector file for the Mac (an
.hqx file). The .hqx file created by Linx
must be expanded on a Mac user's computer
prior to playing.
So
that basically covers how to create a basic video
and audio jukebox using Linx, Flix and Wild FX.
With a little imagination you can do a lot of
things with Linx. It is also possible to create
more complex jukeboxes with multiple videos and
bitrates, but this tutorial provides is a good
way to get started.
Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
