danielhordern.com
Sample News
html displayflash display

Flash ? What da!

Often when a piece of software is shown for the first time "wouldn´t it be nice if" questions start to raise their head. In this case, the question related to displaying the articles in within a flash-only site. This was a concept that appealed to me - I love the separation of content from UI!. It is time to dust of the old flash-5 manuals

How to do the flash thing

I’m certainly no flash-head, however I have studied the flash "action-script" manual for previous project (an age ago)- and remembered a few action-script commands / flash features that should make this a trivial implementation.

Flash will display simple html - although it only supports a few simple tags (font, p, b, i etc) it should be enough to produce a reasonable display of articles.

Action-Script has an ideal command - loadVariables( URL) for communicating with the ASP pages. The trick deal with this command is how it parses the returned text. If my ASP page returns text formatted as "&Var_1=something&Var_2=somethingelse" action-script will assign "something" to an action-script var "Var_1".

On the ASP side, a new ASP page has been created (flash_news.asp) makes a few calls to news_functions.asp to retrieve - the number of pages, the number of records, and a simplified output of Page N articles (using only simple html tags <p> and <font>). This information is sent back to the requester (flash) and hey presto! The previous page page displays a working example.

Flash Article (n text) Dynamic scroller

Implimented as a "drop in" movie-clip - allows users to scroll through text. Text is loaded from either:

  • Articles retrieved from a set of asp pages and access database.

  • A text file (located on the server)
  • To create your own scroller.....

    Create the "up" and "down" buttons as buttons

    Create the "scrollbar" ( typically the same width as the buttons, and the height of the textbox this scrollbar will scroll ) as a single frame movie clip. The scrollbar must be created as a full size scrollbar, with the center point being positioned at the vertical top / horizontal center of the scrollbar. This is a requirement as the supplied action-script code scales the scrollbar depending on the length of the text being displayed.

    Create a single frame movie clip (for the complete scroller).

    Add the "up" and "down" buttons (I added these on a layer per button)

    Add the scrollbar movie clip - ensure it's instance name is "scrollbar". Important - ensure the center point of the scrollbar movie clip is vertically aligned with the center point of this clip - this is a requirement for correct scaling of the scrollbar.

    Add a dynamic html text box with an instance (variable) name of "m_Text" - once again I typically place this on its own layer.

    Add any other visual decorations the scroller requires note in most cases such visual elements would be added to the main movie, keeping this scroller as a drop-in library component (of fixed size)

    Add the following actions to the "up" and "down" buttons:

    "up" button actions (copy from articles_scroller.as)

    on (press)
    {
    trace ("up press");
    this.m_Scrolling = "up";

    }

    on (release)
    {
    trace ("up release");
    this.m_Scrolling = 0;

    }

    on (releaseOutside)
    {
    trace ("up releaseoutside");
    this.m_Scrolling = 0;

    }

    on (dragOut)
    {
    trace ("up dragout");
    this.m_Scrolling = 0;
    }

    "down" button actions (copy from articles_scroller.as)

    on (press)
    {
    trace ("down press");
    this.m_Scrolling = "down";

    }

    on (release)
    {
    trace ("down release");
    this.m_Scrolling = 0;

    }

    on (releaseOutside)
    {
    trace ("down releaseoutside");
    this.m_Scrolling = 0;

    }

    on (dragOut)
    {
    trace ("down dragout");
    this.m_Scrolling = 0;
    }

    Thats all that is required for the articles_scroller movie clip!

    Main movie

    Use the supplied fla file as a sample. For my fla I did the following.

    Created a movie about the same size as the scroller movie clip already created.

    On the first layer (single frame only) I dropped the scroller movie clip ( in my sample the movie clips instance name was "articles" - if you use my main-movie actions ensure your instance uses the same name or change my supplied actions to match your instance name. Actions for this clip are::

    #include "articles_scroller.as"

    I created another layer with 4 frames, then adjusted the first layer's single frame to spread over the second layers 4 frames (is that a poor attempt to communicate flash lingo or what!). All other UI elements were placed on the second layer.

    Frame 1 actions simply initialised a couple of vars I used to display and track the current page, number of pages and number of articles.

    Frame 2 actions initiate loading the data to be displayed from the server:

    trace("frame 2");

    if( currentPage < 1 )
    {
    currentPage = 1;
    }

    // comment out for local testing
    articles.LoadArticlesPage( currentPage );

    // for local testing comment out for deployment on server
    //articles.LoadTextFile("news_text.txt");

    Frame 3 is an empty key frame (although I have placed a "trace" action-script statement on this frame to debug. Action-script / flash seems to be shitty about being told to gotoAndPlay the current frame (the playhead seems to jump back to the previous frame)

    Frame 4 checks to see if the data has been loaded yet. If the data has been loaded and other UI elements that require visual change are changed, then the action-script "stop()" statement is used to stop. If the data has not been loaded the script simply loops back to frame 3 so we can continue the waiting-for-data loop.

    trace('frame 4');
    if( articles.IsLoaded() )
    {
    trace('frame 4 - loaded');
    // update movie vars (from articles vars)
    //
    numArticles = articles.NumArticles();
    numPages = articles.NumPages();
    currentPage = articles.CurrentPage();
    // stop!
    stop();
    }
    else
    {
    trace('frame 4 - not loaded');
    gotoAndPlay(3);
    }

     

    I suggest creating a very simply sample (i.e. duplicate everything I have done yourself ) for the first time.


    Next.... XML - an improved solution?