Scaleform 4/AS3 - Creating a DropDown Menu

[Matt Doyle]

This tutorial will walk you through the steps needed to get a working drop down menu in the Scaleform 4/AS3 integration of UDK.

NOTE: This tutorial uses all ActionScript 3 on the timeline of the main Flash file. However, you could also do this in a custom AS3 class instead, or via UnrealScript. This tutorial does not cover those options.

1. Create a new AS3 Document.
2. Open the file CLIK_Components_AS3.fla found here: C:\UDK\UDK-2012-03\Development\Flash\AS3\CLIK\components\
3. Open the Library panel of this file.
4. Locate the following components and select them (use CTRL click to select them all):
   
   
   DefaultDropdownMenu
   DefaultListItemRenderer
   DefaultScrollingList
   
   
5. Right click and choose Copy.
6. Return to your AS3 document, and right click in the Library panel.
7. Choose Paste.
8. Select the DefaultDropdownMenu and drag it to the stage.
9. With the drop down menu on the stage selected, open the Properties panel.
10. Give it an instance name of 'mydm' without the single quotes.
11. Open the Component Parameters.
12. Set the menuRowCount to 10
13. Add a new layer, and give that layer the name 'actions'.
14. Select the actions layer and open the ActionScript panel.
15. Enter the following code:
    
    

    import scaleform.clik.data.DataProvider;
    
    var itemsData:Array = new Array();
                
    for (var i:int = 1; i < 11; i++) 
    {
        itemsData.push({label:"MyItem " + i, index:i});
    }
    
    var dp:DataProvider = new DataProvider(itemsData);
    			
    mydm.dataProvider = dp;
    mydm.selectedIndex = 0;

16. Double click the drop down menu widget on the stage.
17. Select the textField.
18. On the Properties panel, click the Embed button.
19. Select Basic Latin.
20. Save the FLA file somewhere.
21. Publish the file using the Scaleform Launcher.

[yczwk]

Is this only can use in TimeLine?
I write this to Main.as,but failed.
How could I use it in as file?

[Prezadent]

Step 2 and I already have an issue.

Missing BitstreamVeraSans-Roman font. Never heard of it.

[Matt Doyle]

So change the font being used by the textfield to one you do have.

[kmadhukishore]

Hello Matt,

Thanks for the instructions. I did follow them as it is. But I am getting
"Error: ReferenceError: Error #1065"

I did some searching in internet to resolve this error. It sounds like this happens because of me unchecking "Automatically declare stage instance" in Actionscript 3.0 settings. But without this setting I am getting different errors.

Any thoughts?

[kmadhukishore]

Also, if I don't uncheck "Automatically declare stage instances" it throws following errors:

A conflict exists with inherited definition scaleform.clik.controls:Button.textField in namespace public.
5000: The class 'scaleform.clik.controls.Slider' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type.
5000: The class 'scaleform.clik.controls.DropdownMenu' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type.

[Rokit]

I am also getting reference error 1065:

ReferenceError: Error #1065: Variable CLIKScrollingList is not defined.
	at global/flash.utils::getDefinitionByName()
	at scaleform.clik.controls::DropdownMenu/showDropdown()
	at scaleform.clik.controls::DropdownMenu/open()
	at scaleform.clik.controls::DropdownMenu/handleClick()
	at scaleform.clik.controls::Button/handleMouseRelease()

Edit: Could this be a problem with the flash version? I am using CS4 and I noticed in the setup link that CS4 is not mentioned for AS3/SF4:

http://udn.epicgames.com/Three/Setti... / Scaleform 4

[Rokit]

I got it to work. Check the dropdown list parameters. It defaults to CLIKListItemRenderer and CLIKScrollingList. If you change that to the names of the actual scrolling list and list item renderer in the library, ie. DefaultListItemRenderer and DefaultScrollingList, then it should work. I'm now getting the problem of the dropdown list covering up the custom mouse cursor.

[MandyDark2]

Not working for me...
The dropdown is there, but no items are loaded.

[kmadhukishore]

When I got "Error: ReferenceError: Error #1065" error long back, it was because I dragged and dropped just "DefaultDropdownMenu" from Components window with in the flash. But "DefaultDropdownMenu" also needs "DefaultLisItemRenderer", "DefaultScrollingList", I had to drag and drop all three of these for drop down to get it to work.

[Salepate]

Hi,

I've followed your steps, everything goes fine, but the dropdown menu itself appears above my cursor.
My cursor is one layer above the dropdown menu, Am I missing something?

[reinrag]

I could be wrong but this may be due to the index position of the cursor; you may want to use setChildIndex.

setChildIndex( ObjectInstance, index ); In your case you'll want to pass the instance of that object - and the new index position for that object.

setChildIndex( ObjectInstance, numChildren - 1 );

also note that this is AS3 not unrealscript, in case that wasn't clear

[slowJusko]

This works for me:

        override protected function configUI():void {
            Mouse.hide();

            mcMouseCursor.mouseEnabled = false;
            mcMouseCursor.tabEnabled = false;            
            
            InteractiveObjectEx.setTopmostLevel(mcMouseCursor, true);
            InteractiveObjectEx.setHitTestDisable(mcMouseCursor, true);
        }

[Salepate]

thank you both!