FLASH NEWS SCROLLER
by Vevs.com: Design & Development
official web site:
http://www.vevs.com/flashnews

Chapter 1   Chapter 2   Chapter 3

Chapter 2: Adding rich content in FNS.

Flash News Scroller has many features like adding custom background to each message, loading "Cascading Style Sheets" (CSS), embedding external flash animations and many more. FNS reads HTML formatted text and images from its configuration file (INF). In these examples we are going to learn how to add rich content in FNS with HTML tags. For more information on each HTML tag visit Macromedia Live Docs HERE.

Part1: Adding images and flash animations using the <img> tag.

You can embed images and flash animations in FNS using the <img> HTML tag. The engines supports non-progressive JPGs and SWF animations. For example, you want to load an image "image1.jpg" located in http://www.mydomain.com. Image size is 100px width and 50px height. To embed this image into FNS type in the Message1 box:

    <img src='http://www.mydomain.com/image1.jpg' width='100' height='50' vspace='0' hspace='0'>

To explain how the <img> tags works lets look at each of its properties. "src" means image source, a link to the image. "width" & "height" are numbers representing the scale of the image. "vspace" & "hspace" are numbers representing the vertical and horizontal space surrounding the image default values are "8".
Loading Flash animations SWF is the same as loading JPG images. Use the <img> tag and in the "src" properties enter the locations of your SWF. Please remember to set the frame rate of your flash animations near 30fps. Because FNS automatically speeds it up to 30fps(standard animation video frame rate) and you may experience frame loss.

Part 2: Using "Cascading Style Sheets" (CSS).

FNS has 100% customizable text properties. Now we are going to explain how FNS is loading external CSS files which holds your text styles. Before we begin make sure that you disable the default font. Default font overwrites all your CSS classes. Here are the steps to disable it.

Click the "Font properties" tab:


This is the "Font properties" panel:


Please make sure you disable default font. Select "FONT in messages":


A example CSS file is provided with FNS. The file is named "fns.css". You can set your custom CSS file with the CSS parameter in HTML. Here is an HTML example: When loading FNS you specify a NewsFile=mynewsfile.inf. Same for CSS=mycssfile.css separated with "&". Here is the full HTML example:

    <param name="movie" value="FNS.swf?NewsFile=News1.inf&CSS=mystyles.css">
The FNS engine searches for your CSS file if not found it loads its default CSS settings via "fns.css".
Now lets take a look at a simple CSS file and understand how to use the styles. Here are a sample CSS file contents:
    .myclass1 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color:#FF6600;
    }
"myclass1" is the name name of your first style. And here are its properties like font-family, font-size and color in RRGGBB hex. You can use your style with the <span> html tag or with the <p> tag. Here is an example after specifying your CSS file. In the "settings editor" (FNS wizard) enter the following line in message:
    <span class='myclass1'>my orange colored message</span>
If you have done everything right the result in FNS will be something like this:
    my orange colored message

There is an alternative way to use custom(colored & formatted) text in your messages using the <font> tag for more information read the supported html tags information in the link above. For more information about CSS. Click HERE visit this official site of CSS at "w3.org" and HERE for Macromedia's "Using style classes" support page for Flash.

Part 3: Customizing your sound.

FNS supports embedding of MP3 encoded sounds. These sounds are played when the user clicks on a message and the link is activated. To design your own sounds you will need sound editing software which converts your WAV files to MP3. Stereo and Mono MP3 sounds are supported and a wide range of bitrates. We recommend that you use a Fraunhofer IIS based encoding. Just replace the filename attached with FNS for example: "Sound1.mp3" and you will have your sound playing on every click.

That's all about this example. Click HERE to a look at Chapter 3 if you wish to know more about how to edit your INF (FNS settings file).

Last Update: March 31, 2005

Flash and Action Script are trademarks of Macromedia Inc.