Creating a scrolling text component in Adobe FlashLite 1.1

Recently I have been heavily involved in an on going FlashLite 1.1 based project. Some thing I know my development peers have been extremely jealous of as they bang their heads against the hellish development processes of Flex, Air, ActionScript 3 and Flash 9, not!

One of the most enjoyable features of FlashLite 1.1 is its (lack of) ability to measure the height, width or any metric of text once it is displayed on the screen of your shiny new Nokia N95. This makes efficient text scrolling a particular joy to produce. To this end I have produced a simple example of a fairly flexible scrolling text component for FlashLite 1.1.

Below is a comprehensive (hopefully) tutorial describing how to create such a component.

Creating the component project
The first thing to do is to create a new FlashLite file, in this tutorial I have based the development on a QVGA mobile phone, such as the N6110 or N95. To do this simply set the stage size to a width of 240 pixels and the height to 320 pixels. I haven’t altered the default frame rate. In the flash publish settings “File > Publish Settings” set the Flash version to FlashLite 1.1, this will automatically set the ActionScript version to 1.0 (is there a 1.anything else?) after that we are good to go!

Creating the scrolling text field

  1. Create a new symbol in your Library and name it “TextArea”.
  2. On the stage of this symbol create a dynamic text field with a width of about 220 pixels and a height of 280 pixels.
  3. With the text field selected put “text” in the Var field in the properties inspector. We will use this later to assign text to the field, remember no instance names on text fields in FlashLite 1.1.
  4. Next create a new symbol in your Library and Name it “ScrollingTextArea”.
  5. On the stage of this symbol drag an instance of your “TextArea” symbol and position it to position X:0 and Y:0 and give it an instance name of “textArea_mc”, for clarity you should name the layer this instance sits on “TextArea” or you might prefer “textArea_mc”.
  6. Add a new layer to your “ScrollingTextArea” symbol and name it “ActionScript”. On this layer in frame 1 add the ActionScript command stop();.
  7. Create a new layer folder and name it “CallFunctions”.
  8. Inside the “CallFunctions” folder create a new layer and call it “init”, on this new layer create a blank key frame on frame 2 and give it the frame label “init”.
  9. On the new “init” frame add the following code that will be used later to initialise our scrolling text field.


    // store maxScroll Locally
    maxScroll = textArea_mc:text.maxscroll;
    // if max scroll is greater than 1 we know we need the text to scroll
    if(maxScroll > 1)
    {
    // store the current scroll position loccally
    currentScroll = 1;
    // set scrollPercent to 0.
    scrollPercent = 0;
    //set the scroll bar height to the height of the text field
    scrollBar_mc.trackHeight = textArea_mc._height;
    //set the scroll thumb height
    scrollBar_mc.thumbHeight = 30;
    // init the scroll bar
    call("scrollBar_mc/:Init");
    // show the scroll bar
    scrollBar_mc._visible = true;
    }
    // otherwise hide the scroll bar, its not needed.
    else
    {
    scrollBar_mc._visible = false;
    }

    At this stage most of the values in this code block will not function, but they will be required in a later step.

  10. Inside the “CallFunctions” folder create a new layer and call it “setText”, on this new layer create a blank key frame on frame 3 and give it the frame label “setText”.
  11. On the new “setText” frame add the following code that is used to populate our text field component.


    // set the text value to the text field
    textArea_mc:text = text;
    // call init to reset scroll parameters
    call("init");

  12. Inside the “CallFunctions” folder create a new layer and call it “scrollUp”, on this new layer create a blank key frame on frame 4 and give it the frame label “scrollUp”.
  13. On the new “scrollUp” frame add the following code that is used to scroll the text in our component up the screen.


    // increase the text scroll
    textArea_mc:text.scroll++;
    // store the current scroll position locally
    currentScroll = textArea_mc:text.scroll;
    // if the current scroll position is the same as maxScroll scrollPercent is 100
    if(currentScroll == maxScroll)
    {
    scrollPercent = 100;
    }
    // other wise calculate the percentage scroll position
    else
    {
    scrollPercent = Math.ceil(((currentScroll-1)/maxScroll) *100);
    }
    // set the scroller scroll percentage
    scrollBar_mc.scrollPercent = scrollPercent;
    // call the scrollBar setScrollPercent function
    call("scrollBar_mc/:setScrollPercent");

  14. Inside the “CallFunctions” folder create a new layer and call it “scrollDown”, on this new layer create a blank key frame on frame 5 and give it the frame label “scrollDown”.
  15. On the new “scrollDown” frame add the following code that is used to scroll the text in our component up the screen.


    // decrease the text scroll
    textArea_mc:text.scroll--;
    // store the current scroll position locally
    currentScroll = textArea_mc:text.scroll;
    // if the current scroll position is at 1 then there is no more scrolling to be done, so scrollPercent is 0
    if(currentScroll == 1)
    {
    scrollPercent = 0;
    }
    // other wise calculate the percentage scroll position
    else
    {
    scrollPercent = Math.ceil(((currentScroll-1)/maxScroll) *100);
    }
    // set the scroller scroll percentage
    scrollBar_mc.scrollPercent = scrollPercent;
    // call the scrollBar setScrollPercent function
    call("scrollBar_mc/:setScrollPercent");

  16. Finally add code to frame 1 of the actionscript layer so it looks like this:


    // by default hide the scrollbar
    scrollBar_mc._visible = false;
    // call the text field init function
    call("Init");
    stop();

Thats all there is for the development of the text field, and also for the scrolling functionality. You will notice that in our text field “scrollUp” and “scrollDown” call frames we reference a scroll bar clip, we will now create that scrollbar.

Create a simple FlashLite 1.1 scroll bar component

  1. In your library create a new symbol and call it “square”.
  2. On the stage of your new “square” symbol draw a square with no stroke give it a width and height of 50 pixels, place the graphic at X:0 and Y:0.
  3. In your library create a new symbol and call it “scrollbar”.
  4. Label the layer in your new “ScrollBar” symbol “scrollTrack”. Bring an instance of the “square” symbol on to this layer and position it at X:0 and Y:0 change the symbol instance’s with to 10 pixels and its height to 100 pixels. Also give the instance an instance name of “scrollTrack_mc” and apply a colour tint of your choice.
  5. Create a new layer above the “scrollTrack” layer name this new layer “ScrollThumb” and add another instance of your “square” symbol to it.
  6. This time set the instance name to “scrollThumb_mc”. Position it at X:1 and Y:1. Set the new “scrollThumb_mc” width to 8 pixels and its height to 50 pixels. Again apply a colour tint, making sure it is different to the one you applied to the “scrollTrack_mc” instance.
  7. Add a new layer and name it “ActionScript”. In frame 1 of this new layer add the following code:


    // call the scroll bar init function
    call("init");
    stop();

  8. Create a new layer folder and name it “CallFunctions”.
  9. Inside the “CallFunctions” folder create a new layer and call it “init”, on this new layer create a blank key frame on frame 2 and give it the frame label “init”.
  10. On the new “init” frame add the following code that will be used later to initialise our scrolling scroll bar.


    // apply padding to the scroll thumb
    scrollPadding = 1;
    // call the set scroll height function
    call("setScrollHeight");

  11. Inside the “CallFunctions” folder create a new layer and call it “setScrollHeight”, on this new layer create a blank key frame on frame 3 and give it the frame label “setScrollHeight”.
  12. On the new “setScrollHeight” frame add the following code.


    // resize the scroll track
    scrollTrack_mc._height = trackHeight;
    // resize the scroll thumb
    scrollThumb_mc._height = thumbHeight;
    // set the tscroll thumb position to the padding value
    scrollThumb_mc._y = scrollPadding;
    // store the max scroll position
    maxScroll = (trackHeight - thumbHeight);

  13. Inside the “CallFunctions” folder create a new layer and call it “setScrollPercent”, on this new layer create a blank key frame on frame 3 and give it the frame label “setScrollPercent”.
  14. On the new “setScrollPercent” frame add the following code.

    // set the scroll position based on a percentage value using math. :D
    scrollThumb_mc._y = Math.max(((maxScroll*(scrollPercent/100))-scrollPadding), scrollPadding);

This completes the development of the simple scrollbar component, all you need to do is to add it to the “ScrollingTextArea” clip we created earlier.

  1. Return to editing the “ScrollingTextArea” symbol in the library. Add a new layer above the “TextArea” layer and name it “ScrollBar”.
  2. Drag an instance of the SrollBar symbol out onto the new layer. Position the new instance at X:225 and Y:0.
  3. Give the new ScrollBar instance an instance name of “scrollBar_mc”.

This completes the development of the scrolling text field component. All that remains is to show how it can be used within a project. To do this we need to add the scrolling text field to the stage of the main time line, add some ActionScript to populate the text field component, and then add a key press handler.

Completing the project

  1. Re-name the layer “Layer 1” on the main movie time line to “textArea”.
  2. Drag an instance of our “ScrollingTextArea” clip onto the new “textArea” layer. Position the new instance at X:0 and Y:19. Give the new instance an instance name of “scrollingText_mc”.
  3. Create a new Layer above the “textArea” layer and name the new layer “ActionScript”. On frame 1 of this layer add the following code:


    // dummy text to populate our text field
    textVar0 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non urna. Ut leo metus, euismod non, semper et, ultrices at, nisl. Fusce non orci vitae dui blandit sagittis. Vestibulum laoreet feugiat leo. Suspendisse malesuada. Maecenas ultricies fermentum mi. Proin nulla. Mauris at dolor a nisl cursus congue. Maecenas id justo tincidunt augue molestie commodo. Donec nec metus eu tellus cursus mollis. Cras justo. Nunc sapien arcu, luctus id, porta sit amet, ultrices non, metus. Donec cursus. Aenean eleifend facilisis odio. Sed suscipit, odio eu fringilla ornare, eros metus eleifend quam, eget facilisis nulla turpis at tellus. Ut et massa a est faucibus fringilla. Nam nisl magna, condimentum non, lobortis et, porta non, ipsum. Aliquam ultricies augue sed urna. Sed ligula magna, vehicula at, scelerisque id, luctus eget, tortor. Donec aliquet purus ut neque.\n\nCras porttitor facilisis sem. Praesent cursus nulla euismod lorem. Donec vitae nunc. Quisque nec quam. Integer nonummy nisl vel mauris. Aliq\n\nam sed felis eu risus scelerisque scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tortor nisl, sodales et, eleifend sed, porta eget, urna. Sed adipiscing dolor sit amet dolor. Vestibulum fermentum lorem quis nulla. Donec id ligula. Suspendisse potenti. Aenean ac quam quis sapien sollicitudin dapibus. Cras vitae neque nec ante pharetra hendrerit.\n\nDonec ante lectus, gravida non, nonummy et, pulvinar ut, lectus. Ut sem nisi, dapibus non, scelerisque at, convallis sit amet, dolor. Cras vitae velit et lectus rhoncus ullamcorper. Sed sodales adipiscing tortor. Curabitur non dui ut ligula laoreet mattis. Ut vitae lacus quis enim placerat tristique. Donec ornare mauris eget sem faucibus lacinia. Vestibulum hendrerit diam et neque. Vestibulum imperdiet. Maecenas tincidunt felis vitae lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit hendrerit felis. Mauris convallis elit vel justo. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel mi. Phasellus ultrices porta felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut sed metus vel erat ultricies egestas. Pellentesque et ligula.";
    // alternate dummy text to try, this should hide the scroll bar
    textVar1 = "Test Text";
    // set the text var we want assigned to our text field
    scrollingText_mc.text = textVar0;
    // call teh set text function on our scrolling text field
    call("/scrollingText_mc/:setText");
    stop();

This provides some dummy text with which to populate the text field component that has been developed, it then assigns one of the text variables to the components “text” value, and calls the “setText” function in the call frame of the scrolling text field component.

At this point you could export and test the movie, you should see the field is populated, and the scroll bar is correctly scaled and displayed to indicate that the text will scroll. Finally we create the controls to make the textscroll.

  1. Create a new button in your library and call it “keycatcher”.
  2. In the “up” frame of this button I have put simple text label with the string “KeyCatcher” so I can identify the symbol on stage.
  3. Return to the main timeline and create a new layer above the “textArea” layer, name this new layer “KeyCatcher”.
  4. Drag an instance of the “keycatcher” button onto the stage on this new layer. Position it off stage at X:-110.0 and Y:0.
  5. With the “keycatcher” button still selected add the following key handling code to the button:


    // assign our down key press handler
    on (keyPress "")
    {
    // only cal the scroll function if the test is not at its maximum scroll
    if(scrollingText_mc.currentScroll < scrollingText_mc.maxScroll) { call("scrollingText_mc/:scrollUp"); } } // assign our up key press handler on (keyPress "")
    {
    // only cal the scroll function if the test is not at its minimum scroll
    if(scrollingText_mc.currentScroll > 1)
    {
    call("scrollingText_mc/:scrollDown");
    }
    }

All that should remain is to save, export and test you new component in Device Central.

Download the source files of the scrolling text component for Adobe FlashLite 1.1

NOTE: If you have used embedded fonts in your text area and are seeing no text appearing, try using device fonts (non embedded) instead. Apparently there is a know isue with Flash CS3 exporting embedded fonts in FlashLite 1.1 swf files that are viewed in Device Central. More information is discussed briefly on the Adobe Device Central forums

6 thoughts on “Creating a scrolling text component in Adobe FlashLite 1.1”

  1. Hi! Nice tute here – very explanatory. Downloaded but it gives the following error: FTPA007: getProperty or setProperty not supported for: maxscroll.
    Pls help
    Thanks,
    Daydah

Leave a Reply

Your email address will not be published. Required fields are marked *