Flash Video Setup

Website template Flash video applications

Add-on details
Support information below is outdated. Flash video is no longer used in Allwebco templates. To update your website, use either the HTML5 video add-on, or add YouTube video.

Flash video setup
The Flash video player is included with some Allwebco templates. If your template includes a "flashvideo" folder you have this player. You will need convert your video files to .flv Flash video files to setup this player. If your template does not include a "flashvideo" folder, see instead Flash video add-on.

Why use Flash video?
Video embedded inside a Flash application can stream better and start faster then HTML video code. Flash video is also more compatible in more web browsers then standard HTML code. Flash video is used at websites like YouTube.

Files for the player
The files for this player are all included in the "flashvideo" folder. Extra player skins are included in the "extras" folder. The video pages will be named; "video-home.htm" and "video-1.htm" through "video-4.htm".

Video file types used
In the "flashvideo" folder you will see some .flv files. These are the converted video files that you will replace. You can convert any video type; avi, wmv, mov, mpg and most other types. You will need software to convert your files to .flv.

What size should I make my videos?
You should use 480 x 360 4:3 ratio videos, or 320 x 240 4:3 ratio videos, however, you can also use 640 x 480 videos. See "Width and height of the videos" below on this page. The Flash video player will fit any 4:3 ratio video. You can use other ratios, however, there may be black bars in the Flash video area or your video may distort to fit.

Video editing software
You can use "Windows Movie Maker" included with most versions of Windows. Check the Microsoft Movie Maker Website for details. Movie maker can edit .avi and .mpg movies, however, this is a limited version of the software and can not convert .flv files. See "Converting your videos to Flash videos" below.

The following software includes many more video editing options including .flv conversion for Flash video. You will not need a 3rd party converter with the following software.

• Corel VideoStudio
• Adobe Premiere Elements
• Adobe Premiere Pro

Converting your videos to Flash videos
The software shown above can convert any video to .flv files.

You must convert your video files to use the Flash player. The Flash video player uses .flv files for video. You can easily convert any movie type, like avi, wmv, mov, mpg, mp4 and others to .flv files. Here are some options.

• If you have Flash software you can convert your video files to .flv files in the software.
• You can use Corel VideoStudio or Adobe Premiere to convert your .avi, .mpg and other video types to .flv format to use in Flash video players.
• Recommended: After much testing we found the OGG Video Converter or Sothink Video Encoder for Adobe Flash to be the best video to .flv converter we tested. This converter allows for the selection of an exact video size and "bit rate quality" for the .flv file. It is easy to use and they offer a free trial download.
• For converting almost any video type to .flv easily you can try the ImTOO FLV Converter from ImTOO. We used this application to convert our sample .flv files used in the template. You can download the ImTOO trial versions using the links below. The free download will convert only half of your video file.
• You can try this search at Google for more info on .flv conversion.

Trial Software Downloads:

• OGG Video Converter
• Sothink Video Encoder for Adobe Flash (Trial download)
• ImTOO FLV Video Converter (Trial download)
• ImTOO Video Converter (Trial download)
• ImTOO MOV to FLV Converter (Trial download)

What size should I convert the videos?
You can convert at any 4:3 ratio option. In this order try to use; 480 x 360 or 320 x 240 or 640 x 480 videos. You may need to experiment to see what gives you the lowest file size and highest image quality. Also see "What size should I make my videos" above.


Setup video 1 in the template

1. Convert your video file as outlined above.
2. Place your converted .flv video file in the "flashvideo" folder.
3. Rename your ".flv" video file to "video-1.flv". Optionally, you can edit the "video-1.js" with your .flv file name. (See visual below for details.)
4. Open the "video-1.js" and edit the "Ftitle" movie title. (See visual below.)
5. Replace the "video-1.jpg" in the "flashvideo" folder with a thumbnail image of your video.
6. Open the "video-1.htm" and test that your video is working.

Editing the video .js files
In the "flashvideo" you will find files "video-1.js" through "video-4.js" and the "video-home.js". These files control the movie and include options you can change. See visual for details.



Video player skins
The default skin used in the video player will be named "skin-AV-black.jpg" and is located in the "flashvideo" folder. You can create your own 482 x 27 .jpg image to use in the player. Place your skin .jpg in the "flashvideo" folder. Edit the skin name in the "video-?.js" file you are using. See visual above. Extra video skins can be found in the "extras" folder as well as Photoshop PSD skin files.

Autostart option
Edit the "video-?.js"file in the "flashvideo" folder. Set the "Fautostart" option to yes or no, all lowercase, to have the video start or not start when the "video?.htm" page loads.

Show the time option
Edit the "video-?.js" file in the "flashvideo" folder. Set the "Fshowtime" option to yes or no, all lowercase, to show the time layered over your video area.

Width and height of the videos
Only 2 size options are included with the template. 480 x 385, for 480 x 360 4:3 ratio videos, or 320 x 259 for 320 x 240 4:3 ratio videos. The height you set in the "video-?.js" is larger to fit the controls at the bottom.

To use 480 x 360 videos; edit the height and width in the "video-?.js" to 480 x 385. Set the .swf file variable in the "video-?.js" to use the "AVPlayer-dark.swf". Set the skin in the "video-?.js" to use the "skin-AV-black.jpg" or any 482 x 27 .jpg image.

To use 320 x 240 videos; edit the height and width in the "video-?.js" to 320 x 259. Set the .swf file variable in the "video-?.js" to use the "skin-AV320-black.jpg". Set the skin in the "video-?.js" to use the "skin-AV320-black.jpg" or any 320 x 19 .jpg image.

Adding another video with the 6 video option
Once you have setup the 4 videos in your template, you can add new videos. Here is how to setup video 5:

1. Make a copy of the "video-1.htm" and rename it "video-5.htm".
2. Edit the "video-5.htm". Find "src="flashvideo/video-1.js" and replace this with "src="flashvideo/video-5.js".
3. Make a copy of the "video-1.js" and name it "video-5.js". Inside this file edit "video-1.flv" to "video-5.flv".
4. Place your movie "video-5.flv" in the "flashvideo" folder.
5. Open the "video-5.htm". Your video should be working.
6. Make a copy of "video-1.jpg" and name it "video-5.jpg". Edit this with your new video thumbnail.
7. Edit the "video-home.htm". Copy the table code between the "START VIDEO 4" and "END VIDEO 4" notes. Paste it below itself. Edit your new table and replace "4" with "5" in four places.

Using Windows Movie Maker software
You can use "Windows Movie Maker" to get your videos ready to convert to .flv files. Here are some save options you can use when doing a "Save Movie File..." to get your movie ready for .flv conversion. You may need to experiment to see what conversion below works best for you.

480 Wide Videos:

1. High quality video (large) = 640 x 480
2. Video for local playback (1.5 Mbps) = 640 x 480
3. Video for local playback (2.1 Mbps) = 640 x 480
4. Video for LAN 1.0 or 768 Kbps = 640 x 480

320 Wide Videos:

1. High quality video (small) = 320 x 240
2. Video for broadband 512, 340 or 150 Kbps = 320 x 240