Flex4入門[２日目]

アニメーション

<s:Animate>や<s:Move>など画像を動かすタグも用意されています。

[cc lang="xml"] <?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" minWidth="768" minHeight="400" xmlns:local="*">

<fx:Declarations>
    <s:Rotate3D id="rotate_effect_y"
                target="{plane1}"
                angleYFrom="0"
                angleYTo="360"
                repeatCount="2"
                effectStart="myButton.visible=false;"
                effectEnd="rotate_effect_x.end();rotate_effect_x.play();"/>
    <s:Rotate3D id="rotate_effect_x"
                target="{plane1}"
                angleXFrom="0"
                angleXTo="360"
                repeatCount="2"
                effectStart="myButton.visible=false;"
                effectEnd="rotate_effect_z.end();rotate_effect_z.play();"/>
    <s:Rotate3D id="rotate_effect_z"
                target="{plane1}"
                angleZFrom="0"
                angleZTo="360"
                repeatCount="2"
                effectStart="myButton.visible=false;"
                effectEnd="myButton.visible=true;"/>




</fx:Declarations>

<s:Button id="myButton"
          label="アニメーション開始"
          click="rotate_effect_y.play();"
          x="10"
          y="10"/>

<mx:Image id="plane1"
          horizontalCenter="0"
          width="512"
          height="342"
          source="alba.jpg"



           />

</s:Application> [/cc]

グラフィック

Flexでの描画にはMXMLグラフィックスとFXGの２種類あります。

単純な四角形の書き方。(MXML) [cc lang="xml"] <s:Graphic> <s:Rect id="rect" width="200" height="200" x="60" y="100"> <s:fill> <s:SolidColor id="rectcolor" color="#00ffff"/> </s:fill> <s:stroke> <s:SolidColorStroke color="#660099" weight="2"/> </s:stroke> </s:Rect> </s:Graphic> [/cc]

MXMLグラフィックスはコードの記述順にレンダリングされます。

FXGを使う。 イラレで保存したfxgデータをそのまま画像に利用することができます。 参照のやり方が本に載ってなかったので自力で調べる。

• srcの中に新しくfgxというパッケージを「ファイル」→「新規」→「パッケージ」で作る。
• そのfxgのパッケージの中に、イラレで作ったfxgデータを入れる。
• mxnlでとして呼び出すと表示されます。