Using krpano with Flex Application

  • There are a few problems when you try to use a flex application as a plugin with krpano. I'm learning flex myself, but after about a week of searching and testing I managed to work out a few of the problems; enough so I could use mxml. Most problems come from the fact that we have to use an application container which holds all our controls.

    I wanted to share in case there are others out there trying to use flex application with krpano. Please feel free to add any comments.
    If something is wrong or you know an easier or better way to solve a particular problem please let me know so I can edit this post. If you have solutions to other problems, please share.

    I'm using Flex Builder 3, with Flex 3.5.0.12683 sdk.

    -----------------------------------------------------------

    PROBLEM: Any controls placed in the application container are being scaled (changes size) when you resize the window. This applies when you are using using width or height percentage values for <plugin>. For example <plugin width="100%" height="100%">

    If you use a fixed size for width and height, you will not have this problem, but then all your controls will not be aligned when there is a window resize. <plugin> allows for aligning controls but this aligns the entire plugin. In a flex application you can have many controls aligned in many different ways.)


    SOLUTION: Do not set width and height value for <plugin>. Simply do not use it. This tells krpano to use the application width and size. In your application mxml set your width and height to any FIXED value. (No percentage).

    Code
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" width="500" height="500">


    Then we need to tell our container to resize itself everytime the stage resizes. Add an eventlistener:

    Code
    stage.addEventListener(Event.RESIZE, onStageResize);


    And a handler that resizes the application container:

    Code
    private function onStageResize(evt:Event):void 
    { 
    if(stage.stageWidth != width || stage.stageHeight != height) 
    { 
    width = stage.stageWidth; 
    height = stage.stageHeight; 
    } 
    }


    -----------------------------------------------------------

    PROBLEM: The controls are not the same size as when I created them. For example, a perfectly square button is shown like a rectangle in krpano.

    SOLUTION: Application container has a different value than what you set in <plugin> width and height. Either make sure they have the exact same size, or simple do not use it width and height values for <plugin>

    -----------------------------------------------------------

    PROBLEM: If you set <plugin capture="true"> then you cannot move the panorama at all. If you set <plugin capture="false"> then you can move the panorama but you can also move it even if you click inside any control.

    This problem arises from the fact that you have to use an application container which "wraps" your entire plugin. So when you capture="true", krpano thinks that your container is a control, so it ignores the mouse event. If you capture="false" then this allows krpano to handle any and all mouse events include those inside your controls; if you click and move your mouse while inside a button, this will also move your panorama.

    SOLUTION: The best solution I've come up with is setting capture="false" and then blocking the mouse event from bubbling down to krpano if mouse down event comes from any control that is not the application container.

    Add an event listener for MOUSE_DOWN for you application container:

    Code
    this.addEventListener(MouseEvent.MOUSE_DOWN, onApplicationMouseDown);

    Then block the event if it comes from any control that is not the application container:

    Code
    private function onApplicationMouseDown(evt:MouseEvent):void
    {
         if(evt.target != this)
              evt.stopPropagation();
    }

    -----------------------------------------------------------

    PROBLEM: You get a blue or white box that covers your panorama.
    SOLUTION: Set the application container backgroundAlpha to 0.

    Code
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">


    -----------------------------------------------------------

    PROBLEM: krpano events (REGISTER, UPDATE, RESIZE) are not triggering.
    SOLUTION: I have not found a solution for this yet, but I have a couple of ideas. I will update result soon.

    -----------------------------------------------------------

    I will update if I come up with more.
    Have fun using flex applications with krpano *thumbsup*

  • BIG thanks for your post.

    PROBLEM: krpano events (REGISTER, UPDATE, RESIZE) are not triggering.

    SOLUTION: I have not found a solution for this yet, but I have a couple of ideas. I will update result soon.

    Have you solved the above problem? I'm unable to move on without getting to the krpano plugin defined in xml config file.

  • PROBLEM: You get a blue or white box that covers your panorama.SOLUTION: Set the application container backgroundAlpha to 0.

    Unfortunatelly the method you gave is not working in Flex 4.
    If you want to make s:Application transparent in flex 4 you must use the custom skin class by setting the skinClass property of the Application.
    Once you create it then find the section backgroundRect section: And set the alpha value of the SolidColor to 0.
    I've included the AppSkin.zip file whitch is AppSkin.mxml example file with background alpha set to 0 in the way i've told you

  • About this problem:

    Zitat

    <plugin capture="true"> then you cannot move the panorama at all. If you set <plugin capture="false"> then you can move the panorama but you can also move it even if you click inside any control.

    Setting the event.preventDefault() can be problematic. (For example the combobox's dropdown list does not hide when you click to stage). I've found that better solution is to do somethink like this on the main app:
    ANOTHER SOLUTION:

    Code
    _krpano = krpano_as3_interface.getInstance();
    addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown, false, 0, true);
    			stage.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp, false, 0, true);
    Code
    private function _onMouseDown(event:MouseEvent) : void
    		{
        		_krpano.call('freezeview(true)');
    		}
    	
    		private function _onMouseUp(event:MouseEvent) : void
    		{
     		    _krpano.call('freezeview(false)');
    		}

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!