You Are Here:

Community: Blogs

Giorgio Natili's Forum Nokia Blog

[Flash Lite 1.1 vertical scrolling menu with dynamic content]

gioorgionatili | 07 September, 2008 03:47

Another common task in Flash Lite applications is to handle a vertical scrolling menu that show different external contents in each section.

 

The main tasks of this menu are the movement of the content and the handling of the external content in the application avoiding the Flash Lite issue that can’t handle multiple simultaneous HTTP requests.

It’s a good habit to store the data you need to load in an easy to reach place in your application, for instance put the paths in the first frame of the main timeline

img_local_1 = "content/menu01.swf";
img_local_2 = "content/menu02.swf";
img_local_3 = "content/menu03.swf";

In order to complete the first task you can work as in the previous post but thinking vertical. First of all create a movie clip on the stage and arrange the timeline as the following picture

The label level contains all the stuff you need in order to create an animated scrolling menu that trough ActionScript moves itself on the y axes of the player and a group of actions that acts like a function that you need in order to move the movie clip and set the next item to show and the content level contains three movie clip that the application will use to show the content.

The content level contains three instances of the movie clip mc_item that is stored in your library with the following instance names: item_1, item_2, item_3.

Let’s start to explore the code you need to handle the animation, later we’ll take a look to the building blocks needed in order to load the external content.
In the “Init” frame you perform the initialization of the variables you need in order to know the amount of items, the current item, the increment of movement and the current position

item = 1;
item_total = 3;
move_value = .47;
move_increment = 220;
current_position = _y;

Then you set the variable needed from each item to load the external content calling the “loadContent” “function” on the first movie clip

tellTarget("item_1"){                   

current = 1;
call("loadContent");      

}

tellTarget("item_2"){

                current = 2;                       

}

tellTarget("item_3"){                   

                current = 3;                       

}

and the action needed to move the timeline to the “Pause” frame

gotoAndStop("Pause");

The “Pause” frame is the one that set again the quality to high (in order to enhance performance during the animation you’ll reduce this value) and that call the “loadContent” “function” on the current shown movie clip

fscommand2("SetQuality", "high");

tellTarget("item_" add next_item){

        call("loadContent");                     

}

When the UP or DOWN soft keys are pressed the application calls the gotoAndStop(“FRAME”) method on the movie clip that contains all the content, the “up” and the “down” frames work in a very similar way, let’s take a look to the second one.

The code in this frame set the movement destination and the item to move, pave the path and call the “handler” “function”

destination = current_position - move_increment;

if (item == item_total) {              

       next_item = 1;

} else { 

       next_item = item + 1;    

}

eval("item_" add next_item)._y = eval("item_" add item)._y + move_increment;

call ("handler");

The code stored in the “handler” frame acts like a function in Flash Lite 1.1 and each time is called it set the _y property, register current state and position and decrease the quality

_y = current_position;
item = next_item;
current_position = destination;
 fscommand2("SetQuality", "medium");

The frame after the “down” one is the responsible of the movement

if (_y <= destination + 2) {          

        _y = destination;
                gotoAndStop("Pause");              

} else { 

        _y += Math.round(move_value * (destination - _y));  

}

The “up” frame work in a similar way but the logic that olds is opposite to this one in order to handle the inverse movement.

The mc_item movie clip contains the code you need in order to handle the loading of the external content and its timeline is arranged as in the following picture

The “loading content…” text is stored inside a movie clip in order to handle the time the application needs to load the external content.

In the first frame of the “actions” level the initialization operations are performed

contentLoaded = 0;
stop();

The code stored in the “loadContent” frame perform the load operation only if the variable contentLoaded is set to 0 (it means that if the content is already loaded nothing will happen) and create a loop in which a check of the loading status is performed

if(contentLoaded == 0){

       loadMovie(eval("/:img_local_" add current), "holder_mc");
       gotoAndPlay("looper");              

}

The code stored in the “looper” frame check the current frame of the movie clip that hold the external content changing the value of the contentLoaded variable and hiding the “loading content…” movie clip

if(holder_mc._framesloaded > 0 ) {

       contentLoaded = 1;
       setProperty("loader_mc", _visible, false);
       stop(); 

}

These are the building block of a scrollable menu with Flash Lite 1.1 with dynamic content, if you need more details please contact me, I’ll be happy to explain in more details the content of this post.

 

 

 

 
 

Rate This

 
 
Bookmark this page: DeliciousDiggFacebookGoogleYahooStumbleUponRedditDiigoTechnocratiTwitter  Share this page Share this page Print this Page Print this page Invite a friend Invite a friend
京ICP备05048969号    Email Newsletters Press Terms & Conditions Privacy Policy Sitemap Contact Us © 2009 Nokia