Knowledge Base

A: First of all, you need to include your font into your project's Library. This font is set in the xml file used to set up the component. Since the text field in the headers will be rotated, you also need to increase a little the height of the headers (in the same xml file). The component instance needs to have the embedFonts property set to "true".

To continue, you have to listen for the onDrawComplete event. In the handler function you can parse all the headers of the AccordionPanel instance and rotate their text fields. Here's the code that does all this:

// First we have to listen for an event that is dispatched after all
// the component items are drawn.
var listener:Object = Object();

// The reason we are waiting for the onDrawComplete event is because
// before this is evant is dispatched, there are no items in the
// panel to be referenced.
listener.onDrawComplete = function(evtObj:Object):Void {
    if (myAccPanel.items) {
        //We traverse the children list and for every item we set its header's useHandCursor property to true
        for(var i in myAccPanel.items){
            // The text field is moved up 5 pixels so it can fit
            // better in the item header clip. The header's height
            // has been set in the xml file.
            myAccPanel.items[i]._header.accText._y -= 5;
            // Rotate the text field.
            myAccPanel.items[i]._header.accText._rotation = 10;
        }
    }
}

myAccPanel.addEventListener("onDrawComplete", listener);

You can also see the example file attached to this item:
Files: AccPanel_TextRotation.zip