当JS暴露方法在flash DOM对象上可用时触发的JS回调?

时间:2013-12-26 23:34:45

标签: actionscript-3 flash angularjs swfobject

我使用swf-object库将一个flash对象嵌入到Angular JS指令中。这是在链接功能中完成的。我试图通过JavaScript开发对象的基本接口,以便我可以更改一些动作脚本Shape对象的位置。我想从链接函数中的flash对象中获取初始位置坐标,这样我最初可以填充局部范围变量并绑定到视图。

app.directive("flashTest", function() {
    return {
        restrict: "E", // add to a div
        scope: true,
        templateUrl: "flash/flash-test.html",
        link: function($scope, element) {
            /* Embed the swf */
            var
                flashVars= {},
                flashParams= {
                    allowScriptAccess: "always",
                    allowFullScreen: "true"
                },
                attributes= {};

            // embed
            swfobject.embedSWF(
                "/public/assets/flash/as-test/Main.swf",
                "flash",
                "550",
                "400",
                "11",
                "/public/assets/flash/expressInstall.swf",
                flashVars,
                flashParams,
                attributes
            )

            var
                $elResetButton = element.find("button"),
                flashDOMObject = document.getElementById("flash");

            // setup scoped variables
            $scope.j1x = flashDOMObject.j1x();
            $scope.j1y = flashDOMObject.j1y();
            $scope.j2x = flashDOMObject.j2x();
            $scope.j2y = flashDOMObject.j2y();
            $scope.j3x = flashDOMObject.j3x();
            $scope.j3y = flashDOMObject.j3y();

            // setup callbacks/watchers
            $scope.$watch("j1x", function() { flashDOMObject.setJ1x($scope.j1x) });

            $elResetButton.bind("click", reset);

            function reset() {
                flashDOMObject.reset();
            }
        }
    };
});

但是,当我尝试调用它时,flashDOMObject没有公开的(通过ExternalInterface)方法j1x()。我调试了这个,原因是浏览器还没有为SWF文件发出http请求(因此不知道javascript暴露的api)。是否有注册回调的编译和加载指令模板的资产,以便我可以填写swf文件后填充范围变量?

UPDATE 在使用DOM元素上的外部公开函数之前,加载swf文件后使用50ms的定时延迟的当前工作解决方案:

.directive("junctions", function($timeout) {
        return {
            restrict: "E", // add to a div
            scope: true,
            templateUrl: "flash/flash-test.html",
            link: function($scope, element) {
                /* Embed the swf */
                var
                    flashVars= {},
                    flashParams= {
                        allowScriptAccess: "always",
                        allowFullScreen: "true"
                    },
                    attributes= {};

                // embed
                swfobject.embedSWF(
                    "/public/assets/flash/Junctions.swf",
                    "flash",
                    "550",
                    "400",
                    "11",
                    "/public/assets/flash/expressInstall.swf",
                    flashVars,
                    flashParams,
                    attributes,
                    function() {
                        $timeout(function() {
                            // setup scoped variables
                            $scope.j1x = flashDOMObject.j1x();
                            // setup callbacks/watchers
                            $scope.$watch("j1x", function() { flashDOMObject.setJ1x($scope.j1x) });
                        }, 50)
                    }
                )

                var
                    $elResetButton = element.find("button"),
                    flashDOMObject = document.getElementById("flash");

                $elResetButton.bind("click", reset);

                function reset() {
                    flashDOMObject.reset();
                    $scope.j1x = flashDOMObject.j1x();
                }
            }
        };
    });

是否有更可靠的方法来检测通过ExternalInterface api公开的动作脚本方法何时可用?

1 个答案:

答案 0 :(得分:0)

我怀疑它不是你需要的Angular回调,而是SWFObject加载后的回调。看its docs,它确实提供了一种传递方式。

swfobject.embedSWF(
  "/public/assets/flash/as-test/Main.swf",
  "flash",
  "550",
  "400",
  "11",
  "/public/assets/flash/expressInstall.swf",
  flashVars,
  flashParams,
  attributes,
  function() { 
    $scope.$apply(function() {
      // Do post-SWF-loading here
    });
  }

$scope.$apply中包装回调可能是个好主意,以确保Angular正确处理任何范围变量更改。