No announcement yet.

Displaying an Icon in a Scrolling List

  • Filter
  • Time
  • Show
Clear All
new posts

    Displaying an Icon in a Scrolling List

    Want to display text and an icon in your CLIK Scrolling Lists and Drop Downs? This tutorial assumes you already have a working Menu class, with a CLIK Scrolling List in it.

    The first thing to do is to create your own ListItemRender. The ListItemRenderer (gfx.controls.ListItemRenderer) derives from the CLIK Button class and extends it to include list-related properties that are useful for its container components. In other words, a ListItemRenderer is essentially a button used by Scrolling Lists and Drop Downs to display each option in the list/drop down. Modifying this component means modifying what/how each option is displayed.

    Step 1 - Create a Custom ListItemRenderer ActionScript Class

    Rather than modify the original ListItemRenderer, it is always a better idea to "extend" the class by creating a new version with modified code. Here's the full ActionScript code for our new ListItemRenderer.

    import gfx.controls.ListItemRenderer;
    import gfx.controls.UILoader;
    class gfx.controls.MyListItemRenderer extends ListItemRenderer 
        public var textField:TextField;
        public var imageLoader:UILoader;
        public function MyListItemRenderer() 
        public function setData(data:Object):Void 
        { = data;
    	textField.text = data ? data.label : "";
    	imageLoader.source = data ? data.iconimage : "";
        private function updateAfterStateChange():Void 
            textField.text = data ? data.label : "";
    	imageLoader.source = data ? data.iconimage : "";
    Save this class as: C:\UDK\UDK-2011-09\Development\Flash\CLIK\gfx\controls\MyListItemR

    Step 2 - Create a Custom ListItemRenderer FLA file

    Now that we've created the backend of our new ListItemRenderer, we need the front end, or the visual representation of it. The easiest way to do that is to modify the pre-existing ListItemRenderer Flash file, saving it as a new file.
    1. Open C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\ListItemRende rer.FLA
    2. Now save the file with a new name (Save As) - and name it MyListItemRenderer.FLA
    3. Open C:\UDK\UDK-2011-09\Development\Flash\CLIK\components\UILoader.FLA
    4. Go into the Library panel, and right click UILoader.
    5. Select Copy.
    6. Return to MyListItemRenderer.FLA.
    7. Go into the Library panel, and right click on a blank space.
    8. Select Paste to paste the UILoader into the library.
    9. Right click ListItemRenderer in the Library panel and select Properties.
    10. Change the Name to: MyListItemRenderer
    11. Change the Identifier to: MyListItemRenderer
    12. Change the Class to: gfx.controls.MyListItemRenderer
    13. Press OK.
    14. Right click MyListItemRenderer (again) and choose Component Definition.
    15. Change Class to: gfx.controls.MyListItemRenderer
    16. Press OK.
    17. Double click the MyListItemRenderer component on the stage to enter its timeline.
    18. Add a new layer above the item layer and name it 'icon'.
    19. Select the icon layer.
    20. Drag and drop a UILoader from the Library panel to the stage, and position/scale it so it fits how you like it.
    21. Give the UILoader component an instance name of 'imageLoader'.
    22. Save & Publish this file (MyListItemRenderer).
    23. Now open your Menu file which contains a Scrolling List or Drop Down.
    24. Copy MyListItemRenderer from the MyListItemRenderer Library into the Library of your Menu file.
    25. Select your Scrolling List or Drop Down CLIK component (on the stage).
    26. Open the Component Parameters and set the itemRenderer field to: MyListItemRenderer
    27. Save and Publish this file.
    28. Reimport the file into UDK.

    Step 3 - Create a Config File Containing Data Used to Populate the Scrolling List

    There are a number of ways we could populate our scrolling list with options. One way is to use a config file that defines each option.

    Create a config file, and name it DefaultScaleformMenu.ini (saved in C:\UDK\UDK-2011-09\UDKGame\Config\)

    +ListOptions=(OptionName="Option 1",OptionLabel="Tame",OptionDesc="Easy",OptionImage="img://MyIconPackage.icon1")
    +ListOptions=(OptionName="Option 2",OptionLabel="Wild",OptionDesc="Medium",OptionImage="img://MyIconPackage.icon2")
    +ListOptions=(OptionName="Option 3",OptionLabel="Crazy",OptionDesc="Hard",OptionImage="img://MyIconPackage.icon3")
    +ListOptions=(OptionName="Option 4",OptionLabel="Insane",OptionDesc="Very hard",OptionImage="img://MyIconPackage.icon4")
    Now, ensure you have icon images in a UDK package. The path to these images must match whatever you put in the OptionImage part of each ListOption above.
    NOTE: These images must be PNGs.

    Step 4 - Setup the Scrolling List in UnrealScript

    Last of all, we need to add the UnrealScript that does the work of populating our Scrolling List when it's on screen.

    First, make sure your Menu class draws from the config file you created above:

    class SFMenu extends GFxMoviePlayer
    Then, Create the Option data structure to be used by the Scrolling List. Notice how each variable name matches the options' properties in the config file (OptionName, OptionLabel, etc.):

    struct Option
        var string OptionName;
        var string OptionLabel;
        var string OptionDesc;
        var string OptionImage;
    Next, create the Scrolling List Options array. The array name should match the name used in the config file for each line item (ListOptions). By adding the keyword config, the array will be populated by the config file.:

    var config array<Option> ListOptions;
    Declare the Scrolling List CLIK Widget:

    var GFxClikWidget ScrollingList;
    Tell the Scrolling List to populate itself in the WidgetInitialized() function:

    event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
    	case ('sl'): // this assumes your Scrolling List has an instance name of 'sl' in Flash.
    	    ScrollingList = GFxClikWidget(Widget);
        return true;
    Now, the function that actually populates the list:

    function SetUpDataProvider(GFxClikWidget Widget)
        local byte i;
        local GFxObject DataProvider;
        local GFxObject TempObj;
        DataProvider = CreateArray();
    	case (ScrollingList):
    	    for (i = 0; i < ListOptions.Length; i++)
    		TempObj = CreateObject("Object");
    		TempObj.SetString("name", ListOptions[i].OptionName);
    	        TempObj.SetString("label", ListOptions[i].OptionLabel); // this will be displayed in the list
    		TempObj.SetString("desc", ListOptions[i].OptionDesc);
    		TempObj.SetString("iconimage", ListOptions[i].OptionImage);
    		DataProvider.SetElementObject(i, TempObj);
    	    Widget.SetFloat("rowCount", ListOptions.Length);   // you must specify the row count of scrolling lists manually 
        Widget.SetObject("dataProvider", DataProvider);  	
    Finally, bind the widget:

        WidgetBindings.Add((WidgetName="sl",WidgetClass=class'GFxClikWidget'))  // this assumes your Scrolling List has an instance name of 'sl' in Flash.

    Step 5 - Creating a Reference to the Texture

    Since the texture is referenced by a string name instead of an asset reference, be careful when using this. The texture should be in an always cooked package, or a reference to the texture should be added to the GFxMovie's UserReferences to ensure that the texture is loaded on consoles.
    1. Open the Package containing the SWF that will load the image in the Content Browser.
    2. Right click the SWF, and select Properties.
    3. Open the GFx Raw Data rollout.
    4. Click the green plus button next to User References to add a new entry.
    5. Leave this window open, and select the Texture you wish to load in the Content Browser.
    6. Now click the green arrow to insert a reference to this texture into the new User Reference entry.
    7. Save the package.

    Save/Compile and test your menu.

    Thanks matt!


      I went through this line by line and repeated everything 3 times and it does not work. Either there is some critical information missing or UDK has changed. I notice that UDK also says to do the same things but misses the last but with user references. The mind boggles as to how these things don't work even when there are instructions. Has anyone got icons working in a scroll list with touch and events? I would gather that this is not so as I have searched high and low. Back to the grinding stone...

      By the way, I purchased the scaleform software and it still does not have an answer - sigh!!


        K, realized I needed to give an instance name to my scrolling list and for kismet open gfx change the type to the custom one that was coded.....

        But the image seems to be covering the text.... yours is all nice.... while mine.....


        Basically, how do i resize those icons and also keep it nice like yours?
        Attached Files


          Hmmm, still can't figure it out... when I double click the MyListItemRenderer.FLA thing, I can click the imageLoader one and set component inspector: autoSize=false, maintainAspectRatio=false

          But it still doesn't scale the image down nicely like yours.....


            Ok, so on the actual scene I'm using, I deleted the entire library as it kept the references and whatnot..... I've been trying to scale down the UILoader, but I'm still failing...

            Edit: Got it, had to make row height and button height, and all sorts of heights and x and y in the library for the scene for the row..... but it's good now!


              Hi Matt;

              Could you post a tutorial about : " How to use AS3 UILoader " , please?

              Actually, I want to display a screen snapshot on my "Game Save menu" , so I need the UILoader , to load and display the captured screen images...



                You cannot dynamically load any asset including textures, not with US, and not with AS, not in any way for that matter.

                A dynamic screenshot for saves has been discussed recently with a good level of details, search for it and start to read the thread. Long story short, it's not possible directly, though it is possible to simulate at least in two ways, but both are gonna be really time consuming, and also probably won't end up as good as a real texture.


                  Tested with may 2014 , and works perfecly.

                  I even used archetypes and it works just fine.

                  top value is the path

                  Hope there will be matt doyles tuts for UE4 scaleform if, it ever happends hehe .


                    Awesome! Really cool, I'm gonna use this method!


                      What am I reading here ? That it's not possible to dynamically load assets with AS3 ?
                      Come on. Of course it is possible. Whether or not it's possible within the Scaleform/UDK context I have not tested so far, but I dynamically loaded an entire **** 2D sprite game level in 2011 with pure AS3.


                        And on a sidenote. Take CLICK with a pinch of salt. If you stick to Scaleform best practices there's no point trying to find workarounds and tutorials when you can make your own set of UI elements that perform just as well and don't come with bloated classes full of irrelevant code doing nothing for your game. Remember the first rule of Scaleform: Use it to display stuff ONLY.