Creative Flash Scroller

With Creative Flash Scroller you can scroll any kind of Flash Content: static text, dynamic text, pictures, animations, movies. It comes with multiple scroll behaviors: touch scroll, mouse gesture scroll, scrollbar scroll and even supports mouse wheel behavior. You can add smooth scrolling or motion blur effects and customize it to suit your design, from an easy to use interface.

Creative Flash Scroller Tutorial - How to build a dynamic news nugget

 This tutorial was created for AS3 ( Flash Action Script 3 )  

In this tutorial we will create a dynamic news nugget that reads content from an xml file. It's very useful when you want to display scrolling news content in a sidebar nugget. In order to create this you’ll need the Creative Flash Scroller AS3 - a Flash component that makes scrolling very easy. Here is how the result should look like:

Requirements

• Flash CS3 or CS4
• Creative Flash Scroller AS3 (you can download a free trial)
Sample XML file from here.

Installing The Creative Flash Scroller AS3 Component

After you download the component, unzip the content and double click on the .mxp file. This will install the component via the Adobe Extension Manager and make it available in the Components Panel in Flash. Here is a short Download and Install Creative Flash Scroller AS3, and a how to locate the Creative Flash Scroller AS3 components in the Flash working environment.

Setting up the stage

1. Placing the design elements

First, you need to create the design for the container where the news will be scrolled. I split mine into 3 parts. The top part, the background content and the bottom part. For the tutorial you can use the files from my design:

Top part

Content background

Bottom part

Also you need the white spacer between the news lines and the images for the buttons.

White separator

Button image

For the container title, you can use a custom font that you like, create the text with you image editor program, export as png file and import it in flash. Or just simply create your title in Flash with your font and then convert the text into a graphic symbol.

After you have placed the background images we need to place the buttons. Use the button image to create a movie clip called “button” . Make sure it has “Export for Action Script” enabled. Place an instance on the stage for the up navigation and call it “up_btn”. Add another instance for the down navigation and call it “down_btn”. Place the up button at this coordinates, X: 165.4 and Y: 618.3. Place the down navigation at this coordinates, X: 243.6 and Y: 598.6.

Buttons explained

Place your design files into one single layer called background. Create another layer for the scroll area and one layer for actions. Like in the picture below.

Layers explained

2. Creating the required elements

We need to create a movie clip called “articles_holder” that will load the xml content. Place it at this coordinates x: 5.0 and y: 75.0 with a W: 1.0 and H: 1.0. And name the instance with the same name. Just remember to place the movie clip on the scrolling layer, not on the background layer, like in the picture below:

Article holder explained

Insert a Scroll Area from the Component Panel (open with Ctrl + F7 or go to Window -> Components). From the Extend Components select Creative Scroll Area AS3. Also place it on the scrolling layer with this specifications, X: 5.0 ; Y: 70:0 with W:385.0 and H: 494.0 and name the instance “myScroll”. See the picture.

Scroll area content

Now we need to create the container for a single news feed. Insert some text into Flash; you can copy from lipsum.org some paragraphs. Convert the text to movie clip, name the movie clip “Article”, and set the W: 368.6 and H: 83.0. Check the button “Export for Action Script” and “Export in frame 1”. See the picture below:

Article symbol

So by now you should have in your library something like in the picture below.

Library

Inserting the Code

In the actions layer press F9 and paste this code:

var myXML : XML;
var numArticles : Number;
var timer : Timer;
var url_req : URLRequest = new URLRequest("my.xml");
var current : Number = 0;

var loader : URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.TEXT;
loader.addEventListener(Event.COMPLETE, completeHandler);
loader.load(url_req);

myScroll.useBuffer = true;

function completeHandler(e:Event) {
try {
myXML = new XML(e.target.data);
} catch (e) {
trace('could not parse the xml');
}
numArticles = myXML.child("article").length();
for(var i=0;i<numArticles;i++)
createArticle(myXML.article[i].text, myXML.article[i].url, i);

createAutoScroll();
num_holder.text = (current+1) + " - " + (current + 5);
up_btn.addEventListener(MouseEvent.CLICK, upClick);
down_btn.addEventListener(MouseEvent.CLICK, downClick);

}

// this function creates a new article instance on the stage
//and adds the white spacer at the bottom
function createArticle(t:String, u:String, i:Number) {
var article = new Article();
if(t.length > article.text_holder.length)
t = t.substr(0,article.text_holder.length -3) + "...";
article.text_holder.text = t;
article.y = 102 * i;
article.x = 0;
articles_holder.addChild(article);

// here is the part where we add the separator
if(i != numArticles - 1) {
var separator = new WhiteSep();
separator.x = 10;
separator.y = 100 * (i+1) + 2*i;
articles_holder.addChild(separator);
}
}

// this is the function for the auto scroll with a delay of 6 seconds

function createAutoScroll() {
timer = new Timer(6000);
timer.addEventListener(TimerEvent.TIMER, autoScroll);
timer.start();
}

function autoScroll(e:TimerEvent) {

if(current < numArticles - 5) {
myScroll.stepScroll("Down",102);
current ++;
num_holder.text = (current+1) + " - " + (current + 5);
} else {
myScroll.scrollTo("Vertical",0);
current = 0;
num_holder.text = (current+1) + " - " + (current + 5);
}
}

// function for the up buton

function upClick(e:MouseEvent) {
timer.stop();

if(current > 0) {
myScroll.stepScroll("Up", 102);
current --;
num_holder.text = (current+1) + " - " + (current + 5);
} else {
myScroll.scrollTo("Vertical",100,true);
current = numArticles - 5;
num_holder.text = (current+1) + " - " + (current + 5);
}
myScroll.addEventListener("onVScrollStop",startTimer);
}

// function for the down buton

function downClick(e:MouseEvent) {
timer.stop();

if(current < numArticles - 5) {
myScroll.stepScroll("Down",102);
current ++;
num_holder.text = (current+1) + " - " + (current + 5);
} else {
myScroll.scrollTo("Vertical",0);
current = 0;
num_holder.text = (current+1) + " - " + (current + 5);
}
myScroll.addEventListener("onVScrollStop",startTimer);
}

//function for the timer
function startTimer(e:Event) {
timer.reset();
timer.start();
myScroll.removeEventListener("onVScrollStop",startTimer);
}

Explaining the code

The idea behind the AS3 code is this: we use a timer with a delay of 6 seconds that scrolls the news feeds. The news feeds are read from the xml file, in our case the name for the xml file is “my.xml” that is placed into a variable called url_req.

• The function “completeHandler” is making the retrieval from the xml file, and in case of error it shows a message “could not parse the xml” and places the news into the movieclip “articles_holder”. Also we add the counter for the news. We have chosen a display of 5 news per page. And also we add EventListener for the navigation buttons.
• The function “createArticle” is making the news container with a height of 100 pixels. Then we add the white separator after the news container. And we repeat the process for the rest of the news.
• The function “createAutoScroll” contains the timer for the scroll, which is set to a 6 seconds delay.
• The function “autoScroll” is the scrolling function that makes one news to disappear from the top and a new one to appear at the bottom. And making sure we have 5 news feed to display.
• And then we have the functions for the up navigation and the bottom navigation. The up button is retrieving the previous feed that was scrolled and hides the new one from the bottom. The down button does the opposite scrolling. Meaning it gets a new feed for the bottom and hides one from the top.

Final preview

Previewing your work and deployment

Previewing is easy as usual, CTRL+Enter should do the trick. To use the output on a site, you need to copy the SWF file and XML in the same folder and include the SWF in a HTML page.

What other things can you do with Creative Flash Scroller component?

You can scroll Text, images, anything that can be included in a movie clip. A complete list of usage and tutorials is here.