Build Complex Interactions In Flash Lite


Once you are ready, press “Create” to open up Flash IDE. After Flash is open in document view, open up the components panel from under “Window” menu.  ie:Window -> Components

Flash IDE - Components View

Step 3: Drag the Toolbar component to stage and then delete it. It will now be available in the library. ( you can also directly drag it into the library if you wish)

Step 4: Now we will prepare the code for our walk-through demonstration.  Create a second layer on the time line and name it as “actions”. This will be the top most layer, where we shall put our logic. Label the first layer as “UI” and order it below the “actions” layer. This is where We shall put our graphic assets if any. Then create another layer called “SoftKeyLabel“, between the “actions” later and the “UI” layer. On the “SoftKeyLabel” layer we will have three textfields. Left softkey label, Right softkey label and Middle softkey label. The middle softkey label will be a dynamic textfield.

  • “UI” layer will contain a simple smiley movieclip on which we are to apply transformations.
  • “SoftKeyLabel” layer will contain sofkey labels (text boxes). Left softkey label, Right softkey label and Middle softkey label
  • “actions” layer will contain the code.

The middle softkey label (textfield) will have a instance name of “txtAction” and our UI movieclip will have a instance name of “smiley”.

Stage setup for toolbar demo

Step 5: Now we start with the code. Below is the code that goes into the first frame on the “actions” layer.

import mx.utils.Delegate;

Stage.scaleMode = "noScale";
var toolbar:MovieClip;
var keyListener:Object;
var subject:MovieClip = this.smiley;

if(toolbar == undefined) initToolbar();
if(keyListener == undefined) initKeyHandler();

Explanation: In the above code we import the Delegate class to avoid scoping problems. Then we check to see if our global variable toolbar is already initialized or not. If not then we initialize it by creating a instance of the Toolbar component clip in initToolbar() function . Similarly we check to see if keyListener has been initialized or not. If not we initialize it and register key handler on it using  the initKeyHandler() function.

function initToolbar()
{
toolbar = this.attachMovie("Toolbar", "myToolbar_tbr", this.getNextHighestDepth());

toolbar._style = "float";
toolbar.addItem("Rotate +90", "icons/rotate_clockwise.png", "icons/rotate_clockwise.png");
toolbar.addItem("Rotate -90", "icons/rotate_anticlockwise.png", "icons/rotate_anticlockwise.png");
toolbar.addItem("Zoom In", "icons/zoom_in.png", "icons/zoom_in.png");
toolbar.addItem("Zoom Out", "icons/zoom_out.png", "icons/zoom_out.png");

toolbar.onOpen = Delegate.create(this,toolbarOpen);
toolbar.onClose = Delegate.create(this,toolbarClose);
toolbar.onSelect = Delegate.create(this,itemSelected);
}

The initToolbar() Function:

Explanation: The above function creates a instance of the Toolbar component as the toolbar variable. Then we set the toolbar style as “float”. The Toolbar component has a “addItem” method, which allows to set Items along with their icon representations. So we create 4 items and set corresponding icons for them.

Finally we register event handlers on toolbar for ItemSelection , Toolbar Open and Toolbar Close.

Popularity: 28% [?]



Pages: 1 2 3


May 29, 2010  Tags: , ,   Posted in: Actionscript 2.0, Flash Lite, Mobile, Nokia, Sony Ericsson

Leave a Reply