Section 1   Section 2    Section 3

Chapter 1: Using the"Flash News Scroller (FNS) " for live scrolling of banners.

Introduction.
This first section shows you how to use the"Flash News Scroller (FNS). It provides step by step instructions on how to manipulate external data such as sounds, images and SWF animations using the FNS Settings tool.

Step 1: Designing your banners using your own images & animations (optional).

We're going to create a scroller with four standard banners. The size of the banners will be 468px by 60px. Note: if you don't want to design your own banners you can skip this step and instead use the banners installed on our servers.

Put the banners you have made into a folder named "mybanners". Make sure the sizes of your banners will fit on your page - you need to rename them as shown below:

banner1.jpg
banner2.jpg
banner3.swf * Note: Assumes that your third banner will be a flash animated sequence
banner4.jpg

Note: FNS is designed to access images from different locations on the World Wide Web, so the folder "mybanners" can be placed anywhere you want on the web. For example: http://www.mydomain.com/mybanners.

Step 2: Understanding the use of the FNS settings editor.

Registered Users: The FNS service is 100% customizable. Registered customers are given a PHP/Java Script based web tool which is used to edit the contents & settings of their FNS banners such as scrolling direction, width, height, fonts and much more. This script can be downloaded or located at the "myaccount" zone - details of which are provided on registration.

Note: additional help is provided via the located to the left of each property as shown in the image below - just hover over them and the help information will pop up..

Site Visitors: We provide a limited demo version for our site visitors which can be found by clicking this link.

Step 3: Setting "General properties".

a. Select the "General Properties" tab:


This is the "General Properties" panel
(note the help links to the left of the properties):


b. Make sure "Vertical" scrolling direction is selected:


c. Move to "Scrolling speed" and set it to 30:


d. Set "Scroll Pause" to 3 seconds:

Note: If you set "Scroll Pause" to 0 seconds, banners will only stop when the mouse is over them.

e. Set "Width" to 486px and "Height" to 60px:


f. Select "Sound on click" (optional):

Note:Three different 96kbps encoded MP3 click sounds are provided.
You can design your own and set them for use (Advanced users only).

g. Skip to "Custom backgrounds" (optional):

Note: Custom backgrounds are not needed in this particular scroller because we are filling all message boxes with banners only. No background needed so we can use the default.

h. Set "News URLs open in" to "new":


That's all we need to set in this tab. We are going to skip the "Font properties" tab as no text isa reuired for this particular scroller and go directly to the "Borders and colors" tab.

Step 4: Setting "Borders and colors" properties.

a. Select the "Borders and colors " tab:


This is the "Borders and colors" panel:


b. Set "Border color" and "Background color" to your desired colors.
"Border color" is the border around the FNS banner.
"Background color" is the color behind all the messages.
if you want to use Custom backgrounds select "No" ..


c. Leave "Message border" set to 0px or 1px. Set "Line color" if you want to or just select the same color as the "Background color" or the "Border color".

That's all for setting your FNS banner scroller example. Now let's fill the message boxes with the banner locations.

Step 5: Understanding how FNS locates media.

Currently FNS only supports standard non-progressive jpg images and flash (swf) animations. Animated gifs and progressive jpg images are not supported by FNS - instead they must be converted to their flash (swf) equivalents. If you are unsure how to do this please contact us.

The Settings editor uses "Message" boxes to edit the text in your FNS banner :


You can edit your messages directly in the message box as shown above. If you have selected "Yes" by the Custom backgrounds in the General Properties section you can enter the hexadecimal color in the box provided. You must also set the link for the images and or flash media you saved earlier in your mybanners folder as discussed in Step 1.

FNS locates JPG images using the HTML <img> tag. All you need to know is the way this tag is constructed . The <img> tag is a very simple method used to locate and hence load media from different locations. We are now going to edit four message boxes so that we can load our four media files into the FNS. Each link must be placed in a different message box.

If you wish to test with our banners:
Enter this text in the Message 1 box:
<img src='http://www.vevs.com/flashnews/images/s5_sample1.jpg' width='468' height='60 vspace='1'>

Enter this text in the Message 2 box:
<img src='http://www.vevs.com/flashnews/images/s5_sample2.jpg' width='468' height='60' vspace='1>

Enter this text in the Message 3 box:
<img src='http://www.vevs.com/flashnews/images/s5_sample3.swf' width='468' height='60' vspace='1>

Enter this text in the Message 4 box:
<img src='http://www.vevs.com/flashnews/images/s5_sample4.jpg' width='468' height='60' vspace='1>

If you wish to tuse your own banners you need to change the "src=" values for example:
<img src="http://www.linktomydomain.com/mybanners/banner1.jpg' width='468' height='60' vspace='1>

If you have installed FNS on your server and and you have stored you banners in the same folder as the FNS code just write "src=banner1.jpg".

When you have finished your editing and setting the properties of FNS. Click the "Update" button. If you have followed every step in this example and you have chosen to view our banners you should see this:

That's all about this example. if you wish to know more about supported HTML tags and more advanced editing by adding rich text Click here to a look at Section 2

Last Update: March 30, 2005

Flash and Action Script are trademarks of Macromedia Inc.