Search code examples
actionscript-3airembedding

Issues with embedding objects using htmlloader

I'm making an editable stage where the user can add images, videos, and embedded content. Currently all objects reside in a classfile called Space. All objects that you can add go inside of bounds_mc inside of space. Those objects are called SpaceObjects and are handled by the classfile SpaceObject...

Right now, when I tell my SpaceObject to add an embed it does it, but..there's a bit of an issue.

enter image description here

When I add the object I can't exactly interact with it. I am able to highlight it with the same mouse icon that you would see when highlighting text..but nothing else. I can move bounds_mc around just fine (the white space behind it) and have that object move accordingly..but nothing else.

Now if I add this object directly to the stage by passing the stage all the way down to my Space class and doing a stagee.addChild(htmlLoader) this issue is resolved.

At first I thought this was because it was inside a bunch of movieclips or some kind of order issue in the displaylist...but that was disproved by this testrun.

enter image description here

I have the HtmlLoader inside of three movieclips and I'm able to interract with the embedd just fine. I'm trying to figure out what could be causing this. I've tried switching where HtmlLoader goes from here to there but I still get this issue.

Here's the embedd

<iframe width="560" height="315" src="https://www.youtube.com/embed/Kzgjiuvpmsk" frameborder="0" allowfullscreen></iframe>

Here's a sample from my Space class that handles user input from the menu.

                case "embeddedobject":
                trace("Embeddedobject");
                //For now, just testing a standard embedd from youtube. Dynamics later.
                var so:SpaceObject = new SpaceObject("embeddedobject", '<iframe width="560" height="315" src="https://www.youtube.com/embed/Kzgjiuvpmsk" frameborder="0" allowfullscreen></iframe>', new Rectangle(rightMouseX, rightMouseY));
                bounds_mc.addChild(so);
                //Tested with and without the eventlistener..same results
                so.addEventListener(MouseEvent.CLICK, contentClickHandler);
                spaceObjects.push(so);
                break;

This is an excerpt from SpaceObject. It handles the arguments passed from it's constructor. In this case its generating my embedd. The first argument is source. the second is actions (the string of the embedd)

public function SpaceObject(source:String, actions:String, bounds:Rectangle, rotation:int=0, matrixx:Matrix = null)
{
//...
    if (source == "embeddedobject")
        {
            htmlLoader = new HTMLLoader();
            htmlLoader.placeLoadStringContentInApplicationSandbox = true;
            htmlLoader.loadString(actions);
            htmlLoader.addEventListener(Event.COMPLETE, handleHtmlLoadComplete);
        }
//...
}
    private function handleHtmlLoadComplete(e:Event):void 
    {
        trace("Html content load complete");
        htmlLoader.removeEventListener(Event.COMPLETE, handleHtmlLoadComplete);
        htmlLoader.width = htmlLoader.contentWidth;
        htmlLoader.height = htmlLoader.contentHeight;
        addChild(htmlLoader);
    }

Here are the links to the classfiles involved that I've made on pastebin.. all space objects reside in Space. Space resides in SpaceContainer.

SpaceContainer.as

Space.as

SpaceObject.as

Edit 12/5/15: An interesting note. When clicked on, e.target is returned as a sprite. When other objects are clicked on (be it images or videos) they're returned as my SpaceObject. This happens both at times when I add it to the stage, and when I add it to bounds_mc.

e.target = [object Sprite] vs e.target = [object SpaceObject]

Edit 12/5/15: Looks like any alteration of the objects (aside from its x and y) disables any interactive objects inside the embed and turns it into some kind of bitmap.

Solution

  • Resizing.

    It looks like when you resize or alter any displayobjects that are containing the embed (either before or after you place the object) it will disable the embed.

    This line was in main.as and was constructing SpaceContainer.

    var sc:SpaceContainer = new SpaceContainer(stage);
//resize(sc, stage.stageWidth, stage.stageHeight);
...
        private function resize(mc:DisplayObject, maxW:Number, maxH:Number = 0, constrainProportions:Boolean = true):void
        {
            maxH = maxH == 0 ? maxW : maxH;
            mc.width = maxW;
            mc.height = maxH;
            if (constrainProportions)
            {
                mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
            }
        }