How to create a webpage with scrolling movie frames
This is a simple movie scroller designed to be used to scroll movie frames on a web page. Use this script for when you want a movie preview showing a bit more of the content than a static frame but still using a small screenspace.
The script uses standard html and does not require any plug-ins. You are free to use the code on your own web pages as you seem fit.
The movie scroller requires at least two images to scroll and the images has to be of the same size. The movie scroller is intended to be used to create a nice looking preview for internet movie files. You can however really use it for any images as long as they are of the same size
Capturing movie frames as images
If you use Fast video indexer it is easy to extract images from a video file to use for the movie scroller. If you do not already have the program installed download it from: www.fastvideoindexer.com. Start Fast video indexer, add your movie file to it and click the next button to start movie frame extraction. The movie scroller script code is designed to be used for any picture so it has not been customized as a Fast video indexer template, you will need to manually move the images and enter filenames of the captured frames in the script as is explained below.
Adding the movie scroller using an Iframe
The simplest way to use the movie scroller is to place the movie_scroller.html page in an iframe with scrolling disabled. The code on your web page would look something like this.
Where width and height is the dimension of the images you want to use.
Next you need to edit the movie_scroller.html file. Fill out the following fields:
pos_x = 0; // upper left x pos of the scroller in pixels in the iframe
pos_y = 0; // upper left y pos of the scroller in pixels in the iframe
image_width = 320; // width of each video frame
image_height = 240; // height of each video frame
You will also need to add paths to the images you want in your slideshow to the image array in movie_scroller.html:
images = new Array("img/1.jpg", "img/2.jpg"); // video frame images
You can add as many images as you want. When you upload the web page and scripts to your server make sure to remember your images.
When you add the movie scroller to you page using the iframe tag you can use more than one instance of the scroller on a page.
Adding the movie scroller using javascript
You can also add the movie scroller to a web page using javascript directly. In the head tag of you web page make sure to include the movie_scroller.js file:
In the body of the page create an instance of the MovieScroller javascript class:
movie_scroller = new MovieScroller(pos_x, pos_y, image_width, image_height, images);
Where pos_x, pos_y is the upper left position of the visible scroller image and image_width and image_height is the size of images in the scroller and then visible size of the scroller. The images argument is an array containing paths to at least two images of the same size to be used in the scroller. Take a look in the movie_scroller.html for a complete example to copy and paste from.
If you use the javascript method to add the movie scroller directly to you page note that the scroller will appear at your pos_x, pos_y position and not at the line where your javascript code is. You will also get two empty image in a layer on top of the scroller to the left and to the right of the scroller. These images are used to hide the part of the images that are scrolling in and out. The empty images might be a problem if you have other elements around the scroller. You can add other layers to hide the empty pictures and you can change the empty picture to something matching your web page. The empty picture should be of the same size as the images you are using in the scroller. If you use the javascript way to add the scroller to your page you can only have one instance of the scroller on the page.
All in all the iframe is the easiest and recommended way to add the scroller but it does require one more small file on your server.
Get Movie scroller template for Fast video indexer
I have just added the movie scroller as a template for Fast video indexer. When you order Fast video indexer you can buy the Movie Scroller as an extra template in the program. Just add the Movie Scroller to the order, download and run the installer and it will be available in the template list on the options page in the program.
