2013/10/19

Flex:: アニメーション シェーダー編

Flex 4.10:: Flexでの２Dアニメーションと３Dアニメーションを以前紹介しました。今回は、シェーダーについて紹介します。シェーダーとは簡単に言えば、画面遷移の際に急に変化するのではなく、徐々に変化するエフェクトのことです。（たぶんそんな感じ。シェーダについてWikiページはこちら）

説明むずかしいので、まぁ結果とソースコード見てください。

■クラス
  • CrossFade
  • Wipe

■結果（Flash コンテンツ）
A Flash Content


■ソースコード
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?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="955" minHeight="600">
 
 <fx:Script>
  <![CDATA[
   import spark.effects.WipeDirection;
   [Embed(source="images/spring.jpg")]
   [Bindable]
   private var imgSpring:Class;
   
   [Embed(source="images/summer.jpg")]
   [Bindable]
   private var imgSummer:Class;
   
   [Embed(source="images/fall.jpg")]
   [Bindable]
   private var imgFall:Class;
   
   [Embed(source="images/winter.jpg")]
   [Bindable]
   private var imgWinter:Class;
   
   protected function img_clickHandler(event:MouseEvent):void
   {
    var numRandom:Number = Math.floor(Math.random() * 5);
    trace(numRandom);

    switch (numRandom)
    {
     case 0:
      transition.effect = aniCrossFade;
      break;
     case 1:
      transition.effect = aniWipe;
      aniWipe.direction = WipeDirection.LEFT;
      break;
     case 2:
      transition.effect = aniWipe;
      aniWipe.direction = WipeDirection.RIGHT;
      break;
     case 3:
      transition.effect = aniWipe;
      aniWipe.direction = WipeDirection.DOWN;
      break;
     case 4:
      transition.effect = aniWipe;
      aniWipe.direction = WipeDirection.UP;
      break;
     default:
      transition.effect = aniCrossFade;
      break;
    }
    
    switch (currentState)
    {
     case "spring":
      currentState = "summer";
      break;
     case "summer":
      currentState = "fall";
      break;
     case "fall":
      currentState = "winter";
      break;
     case "winter":
      currentState = "spring";
      break;
    }
   }
   
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <s:CrossFade id="aniCrossFade" target="{img}"/>
  <s:Wipe id="aniWipe" target="{img}"/>
  
 </fx:Declarations>
 
 <s:transitions>
  <s:Transition id="transition" effect="{aniWipe}"/>
 </s:transitions>
 
 <s:states>
  <s:State name="spring"/>
  <s:State name="summer"/>
  <s:State name="fall"/>
  <s:State name="winter"/>
 </s:states>
 
 <mx:Image id="img"
     source="{imgSpring}" source.summer="{imgSummer}" source.fall="{imgFall}" source.winter="{imgWinter}"
     click="img_clickHandler(event)"/>
</s:Application>


http://www.adobe.com/devnet/flex/articles/flex4_effects_pt2.html
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)