AS3 External SWF OnComplete not Firing

ensure you do not compile the external swf as a debug version.

Wezside toolkit - change scroller height

In order to change the height of the Scroller track you need to do the following after building the element with a scrollerbar.

scroller.scroll.track.height = 200; // new height 

scroller.scroll.track.arrange();

Resize font when text is too long

If you are looking to resize the font when the text over flows the given area, here is a code snippet that may help.

Example is to fit a label into a given height.

On arrange check the height of the label then create a loop to reduce the font size until it fits.



while (bodyLabel.height > (image.y - bodyLabel.y)) 
{
   bodyLabel.size = bodyLabel.size - 1;
  bodyLabel.arrange();
}

AS3 - Embedding fonts issue

If the font is not appearing then try adding this line to the complier arguments.


-managers flash.fonts.JREFontManager flash.fonts.BatikFontManager flash.fonts.AFEFontManager


also try adding this to the embed tag


embedAsCFF="false"


http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_06.html

Creating a Scroller for a UIElement

A UIElement has a scrolling component which can either be a vertical, horizontal or a custom scroller. 


Create a basic scroller with the default style
I'm going to show you how to create a horizontal scroller as an example so create a UIElement and set its background like below, ensure you specify the width and height:

carousel = new UIElement();

carousel.background=new ShapeRectangle(carousel);

carousel.background.colours=[0xFF0000,0xFF0000];

carousel.background.alphas=[1,1];

carousel.background.width=200;

carousel.background.height=50;

Now we have to provide is with our layout decorators, the first is a horizontal layout and the second is a padded layout. Both of these layouts must be added to the element and in the order shown in the example for this to work. Make sure you set all the padded layout properties as shown below.

carousel.layout = new HorizontalLayout(carousel);

carousel.layout.horizontalGap=5;

carousel.layout = new PaddedLayout(carousel.layout);

carousel.layout.top=10;

carousel.layout.left=10;

carousel.layout.right=10;

carousel.layout.bottom=10;

The next thing to do is to create all the objects which will be in the scrollable area. I created a function to create 20 dummy UIElements via a function, below is the function call and the functions which are executed..

createBoxes();
/////

private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
   addElement();
}
}
////
private function addElement():void{
        var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}



Finally we create the scroller then set its properties and build the UIElement. You need to provide the scroller with either the scrollHeight or scrollWidth depending on the scroller you have created.


 carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

To Hide Scroller
You need to set the scrollBarVisible to false but after the arrange of the element.


Full code:

private var carousel : UIElement;
public function TestCarousel() {

carousel = new UIElement();
carousel.background=new ShapeRectangle(carousel);
carousel.background.colours=[0xFF0000,0xFF0000];
carousel.background.alphas=[1,1];
carousel.background.width=200;
carousel.background.height=50;
carousel.layout = new HorizontalLayout(carousel);
carousel.layout.horizontalGap=5;
carousel.layout = new PaddedLayout(carousel.layout);
carousel.layout.top=10;
carousel.layout.left=10;
carousel.layout.right=10;
carousel.layout.bottom=10;
createBoxes();
carousel.scroll = new ScrollHorizontal(carousel);
carousel.scroll.scrollWidth =200;
carousel.scroll.verticalGap  = 5;
carousel.build();
carousel.setStyle();
carousel.arrange();
addChild(carousel);

}
private function createBoxes():void{
for(var a:int=0; a < 20;a++)
{
trace("building");
addElement();
}
}
private function addElement():void{
var element:UIElement = new UIElement();
element.background=new ShapeRectangle(carousel);
element.background.colours=[0x000000,0x000000];
element.background.alphas=[1,1];
element.background.width=50;
element.background.height=50;
element.build();
element.setStyle();
element.arrange();
carousel.addChild(element);
}
}

StateManager

The state manager works like a traffic light system or it can be used light switch system. The traffic light system has a number of states and when one is turned on the rest turn off. The light switch system has a list of states which can have more than one state turned on.

1. first you have to create a string of state names as shown below:

public static const UNIT_WEIGHT_METRIC : String = "UNIT_WEIGHT_METRIC";

public static const UNIT_WEIGHT_IMPERIAL : String = "UNIT_WEIGHT_IMPERIAL";

public static const UNIT_HEIGHT_METRIC : String = "UNIT_HEIGHT_METRIC";

public static const UNIT_HEIGHT_IMPERIAL : String = "UNIT_HEIGHT_IMPERIAL";

2. Create a StateManager and add each state to it, by default the reserved value is set to false which means the states acts in the traffic light system so if you want to use the light switch system you must set the reserved value to true as shown below.

configState = new StateManager();

configState.addState( UNIT_WEIGHT_METRIC, true );

configState.addState( UNIT_WEIGHT_IMPERIAL, true );

configState.addState( UNIT_HEIGHT_METRIC, true );

configState.addState( UNIT_HEIGHT_IMPERIAL, true );

3.All the states by default are turned off, in order to turn on a state you must do the following.

configState.stateKey = Survey.UNIT_HEIGHT_IMPERIAL;

4.To turn off a state you need to do the same as above as the state manager will check the state and switch it.

5. To check if the state is turned on or off you do the following.

if ( configState.compare( Survey.UNIT_HEIGHT_IMPERIAL))