HTML内でSWFファイルにメッセージを送信(Gradleでswfファイルをコンパイル)

HTMLファイルよりswfobjectを使用してswfファイルに引数を渡して、swfファイルで渡された引数を表示するSampleを作成してみました。
swfのコンパイルは、FlashBuilderを使わずにGradle(Ant)で実行。

初期表示の画面

[send message to Flex]ボタンをクリックした画面

HTML内で入力したメッセージ「greeting!」がFlex内で表示。

Flex内で[Message Rotate]ボタンをクリックした画面

作成したファイルの構成(以前にJavaFXで作成したアプリで表示）

code1(Sample.html)

swfobjectはGoogle Code Archive - Long-term storage for Google Code Project Hosting.よりdownload
swfobjectのembedSWFメソッドを使って「Sample.swf」にflashVarsとしてメッセージを送信。
初期表示時は固定文字「hello flex!」、「send message to Flex」ボタンをクリック時は「message」に入力された値を送信
「Sample.swf」ファイルは、outputタグ「id：result」に表示するように指定

<!DOCTYPE html>
<html>
    <head>
        <title>HTML with Flex Sample by swfobject</title>
        <meta charset="UTF-8">
        <script src="../js/lib/jquery.js"></script>
        <script src="../js/lib/swfobject.js"></script>
        <script>
            $(function(){
                var flashVars = {message:'hello flex!'};   // *** 初期メッセージ指定
                swfobject.embedSWF("../Flex/swf/Sample.swf", 'result',
                '300', '200', '10.0.0', '', flashVars);
                $("#sendBtn").click(function(){
                    var msg = $("#message").val();   // *** 入力メッセージ指定
                    var flashVars= {message: msg};
                    swfobject.embedSWF("../Flex/swf/Sample.swf", 'result',
                        '300', '200', '10.0.0', '', flashVars);
                });
            });
        </script>
    </head>
    <body>
        <div>
            <label>Message:</label>
            <input type="text" id="message" />
            <input type="button" id="sendBtn" value="send message to Flex" />
        </div>
        <div style="width:320px; padding-left:10px; background-color: aqua;">
            <label>Flex comes here</label>
            <output id="result"></output>
        </div>
    </body>
</html>

code2(Sample.mxml)

画面ロード後に「init」メソッドを実行するように指定（initメソッドはcode3に記述）
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Rotate3D.htmlを参考にRotateを実装

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="init()"
			   >
	<fx:Declarations>
        <s:Rotate3D id="rotateEffect" target="{messageLabel}"
            angleXFrom="0" angleXTo="180" angleYFrom="0" angleYTo="180"
            duration="1000" autoCenterTransform="true"
            effectStart="rotateButton.enabled=false" effectEnd="rotateButton.enabled=true" />
	</fx:Declarations>
	<fx:Script source="../script/Sample.as" />
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		s|Label {
			font-size : 18pt;
			color : Blue;
		}
	</fx:Style>
	<s:VGroup paddingTop="10" gap="5" >
		<s:Label id="label" width="100%" />
		<s:Label id="messageLabel" width="100%" text="unrecieved" paddingLeft="50" />
        <s:Button id="rotateButton" label="Message Rotate" />
	</s:VGroup>
</s:Application>

code3(Sample.as)

HTMLより「embedSWF」メソッドで渡された値は「FlexGlobals.topLevelApplication.parameters」で取得
HTML内の「flashVars」で「message」としているのでここでも「message」を指定

private function init():void {
	this.label.text = "Message is ";
    var msg:String = FlexGlobals.topLevelApplication.parameters.message;  // *** HTMLよりmessage取得
    messageLabel.text = msg;
    // message rotate button
    this.rotateButton.addEventListener(MouseEvent.CLICK, function(e:Event):void {
        var msg:String = FlexGlobals.topLevelApplication.parameters.message;   // *** HTMLよりmessage取得
        messageLabel.text = msg;
        rotateEffect.play();
    });
}

build.xml

mxmlcのantタスクはAdobe Flex 4.6 * Using Flex Ant tasksを参考
「flexTasks.jar」は以前http://d.hatena.ne.jp/tomoTaka/20140410にdownloadしたsdk配下よりコピー

<?xml version="1.0" encoding="utf-8" ?>
<project name="My Sample Builder" basedir="." >
    <taskdef resource="flexTasks.tasks" classpath="${basedir}/lib/flexTasks.jar" />
    <property name="FLEX_HOME" value="/Users/tomo/Flex4.12" />
    <property name="APP_ROOT" value="Flex" />
    <property name="DEPLOY_DIR" value="swf" />

    <target name="compile">
        <mxmlc file="${APP_ROOT}/view/Sample.mxml" keep-generated-actionscript="true" output="${APP_ROOT}/${DEPLOY_DIR}/Sample.swf" >
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
            <source-path path-element="${FLEX_HOME}/frameworks" />
        </mxmlc>
    </target>
</project>

build.gradle

   ant.importBuild 'build.xml'

Sample.mxmlのコンパイル

第17章 GradleからAntを使うを参考に、Gradleも初心者なので[AntBuilder]を使ってmxmlcでSample.mxmlをコンパイル

gradle compile

コンパイル結果

一応gitにアップしましたGitHub - tomoTaka01/SampleProject: HTML with Flex(swfobject)
Flex、Gradleとかまだまだ初心者ですが、いろいろ挑戦していけたらと思っています！