Announcement

Collapse
No announcement yet.

[SOLVED] DropDownList Popup Layering Issue (AS3)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    [SOLVED] DropDownList Popup Layering Issue (AS3)

    I've run into an issue with the AS3 DropDownList component when putting the cursor in the same SWF as the menu. I've put my cursor in MovieClipA and my menu in MovieClipB. Both are on different layers of the stage root. Everything works correctly, until the DropDownList component is clicked. At this point, the list of items rendered on top of the cursor. As far as I'm aware, the list should be created as the top-most element in MovieClipB, but it should not be rendering above MovieClipA. I've tried to do this a few different ways, but it seems like such a simple issue shouldn't be causing so much trouble. It feels like I've missed a setting somewhere (especially since there seem to be very few issues on the forums about this topic).

    Any help/direction would be much appreciated.

    EDIT: See this post for an AS3 solution to this issue.

    #2
    I have found that layer assignments are somewhat lacking by themselves. However from what you wrote im going to infer by layer you literally mean layers in the timeline, which is what you want for this.

    Make sure whatever UIComponent you have your Mouse MC object contained in has the following setting:
    Code:
       topmostLevel = true;
    ... On a side note, I would also strongly discourage the use of AS3 at this time.

    Comment


      #3
      Originally posted by Gedden View Post
      I have found that layer assignments are somewhat lacking by themselves. However from what you wrote im going to infer by layer you literally mean layers in the timeline, which is what you want for this.
      If I wasn't completely clear, our timeline has two layers: one containing the cursor MovieClip and one containing the menu MovieClip (which is a container for all CLIK components used in that menu). The cursor MovieClip is on top of the menu MovieClip container. When running the SWF, either in the game or in the Scaleform Launcher, the list part of the DropDownList will always render on top of everything else.

      Originally posted by Gedden View Post
      Make sure whatever UIComponent you have your Mouse MC object contained in has the following setting:
      Code:
         topmostLevel = true;
      I've attempted to set the topmostLevel property is several ways (UnrealScript, ActionScript), but it has not given the expected result. It is possible that I'm not understanding how it is supposed to be done. The following is the hierarchy of our SWF:

      Code:
      Stage Root
        - cursor (Layer)
          - cursor_mc (MovieClip)
            - Cursor Image (Bitmap)
        - menu (Layer)
          - meun_container( MovieClip)
            - CLIK Components
      Originally posted by Gedden View Post
      ... On a side note, I would also strongly discourage the use of AS3 at this time.
      That's the consensus I've come to after reading through these forums. It seems like AS3 support was released before it was ready for use.

      Comment


        #4
        This can be done entirely through Actionscript. To the point where once this looks correct from the scaleform launcher outside of UDK, it will look good inside of UDK as well.

        So I will say you are on the right track. Without knowing a little more I cant speak to exactly what your issue is, but I can tell you what I am doing.

        Code:
        Stage Root
        - Mouse [Layer]
            - MouseCursorInstance : MouseCursor // where MouseCursor.as is a custom class that extends UIComponent
        - Container [Layer]
           - conatiner:UIContainer // where UIContainer.as is a custom class that extends UIComponent
        Im not saying this is the ONLY way to do things, however this is how I do them. UIContainer contains my entire UI. Which is useful because not only does it let me do drop downs that appear under the mouse but it lets me do popups that appear over my entire UI but under the mouse as well.

        Code:
        import flash.external.ExternalInterface;
        import gfx.core.UIComponent;
        
        import HUD.UIController;
        
        class owl.hud.MouseCursor extends UIComponent 
        {	
        	/******************
        	* Called when this 
        	* component is loading
        	******************/
        	function configUI()
        	{
        		// Hide normal "Windows" pointer.
        		Mouse.hide();
        		Mouse.addListener(this);
        		topmostLevel = true;
        	}
        
        	/**
        	* Scaleform call to UDK, recieve mouse click!
        	**/
        	function onMouseClick()
        	{
        		ExternalInterface.call( "RecieveMouseClick" );
        	}
        
        	/**
        	* Override the mouse listener function
        	**/
        	public function onMouseMove()
        	{
        		var isChanged = _x != _root._xmouse || _y != _root._ymouse;
        	
        		// Simply sanity check
        		if( !isChanged ) return;
        		
        		// Set the cursor instance position to the mouse position.
        		_x = _root._xmouse;
        		_y = _root._ymouse;
        		
        		// Tell our UnrealScript about the new mouse coords.
        		if( !UIController.getInstance().debugMode ) // Stop the spam in debug mode, makes it hard to deal with
        			ExternalInterface.call( "ReceiveMouseCoords", _root._xmouse, _root._ymouse );
        		
        		updateAfterEvent();
        		(...)
        	};
        UIContainer.as
        Code:
        /***********************************************
         * Serves as the main UI controller/container.
         *
         * Keeps everything in check
         **********************************************/
        class owl.hud.UIContainer extends UIComponent 
        {
        	var optionsContainer     :MovieClip;
        	var popupContainer	:MovieClip;
        	var mouse			:MouseCursor;
        	
        	static var instance	:owl.hud.UIContainer;
        	
        	/*********************
        	* Singleton accessor
        	*********************/
        	static function getInstance():UIContainer
        	{
        		return instance;
        	}
        	
        	/*********************
        	* Automatically called when a UIComponent is constructed. 
        	*
        	*********************/
        	function configUI()
        	{
        		// Scaleform likes this
        		_global.gfxExtensions = true;
        		
        		// simple accessor
        		mouse 			= _root.MouseCursorInstance;
        		
        		optionsContainer= this.createEmptyMovieClip("popupContainer",_root.getNextHighestDepth());
        		popupContainer 	= this.createEmptyMovieClip("popupContainer",_root.getNextHighestDepth());
        
        		// Finally, set the instance
        		instance = this;
        	}
        
        	/*********************
        	* Show the loading box
        	*********************/
        	public function ShowPopupDialog(dialogTitle:String, dialogMessage:String, asset:String, isModal:Boolean, isOptionsLayer:Boolean):MovieClip
        	{
        		(...)
        	}		
        	
        	/*********************
        	* Show the loading box
        	*********************/
        	public function ShowOptionsDialog(asset:String)
        	{
        		return ShowPopupDialog(undefined, undefined, asset, true, true);
        	}
        
        (...)

        Comment


          #5
          After looking through the Popup related classes, it appears that the following two lines of code need to be added somewhere in the code (I put them in my configUI):

          Code:
          InteractiveObjectEx.setTopmostLevel(cursor, true);
          InteractiveObjectEx.setHitTestDisable(cursor, true);
          The first puts the cursor to be always on top, the second makes the cursor graphic unclickable (similar to mouseEnabled and mouseChildren).

          On the CLIK API Documentation page under Popup Support, I found the following quote (after I knew what I was looking for):

          Note that InteractiveObjectEx.setTopmostLevel() can be applied to non-popups as well, and the z-ordering of such elements in the Stage is maintained. Therefore, to draw a custom cursor on top of popups, the cursor can be created at the highest depth or level and set its topmostLevel property to true.
          What this means that as long as your cursor is in the highest layer on the stage, it will appear above any other elements that also have TopmostLevel set to true.

          Comment

          Working...
          X