関連ページ  
【WEB Flex】 Flex book component (beta) テスト

↓実行リンク

表示されたページの左ページの左側は透明ページです。端あたりをクリックで表紙が表示されます。

Google で「Flex Book」で探すと、2つ見つける事ができ、
以前テストしたのは こちら ですが、
『FlexBook』と『Flex book component』と似たような名称で、
当然同じようなものではありますが、

『Flex book component』は、ドキュメントがある ので取り組みやすいのは間違い無いです。

ダウンロードは少しわかりにくいですが、
ソースサンプルページ(左下) からダウンロードします。

ブラウザでダウンロード
プログラミング不要 
このサンプルでは、プログラミング的な事はいっさいやっていません。
というか、この Flex book component は、メソッドが少ないので
もともとできる事がほとんどありません。

やるとすれば、他のコントロールを組み合わせた場合に発生する
プログラミングですが、それでもこの視覚効果はプログラマにとっては
とても貴重なものだと思います。

ちなみに、Google MAP は動きません。しかし、原因は Flex book component 
側では無く、adobe 側にあります。

ローカルの信頼されたディレクトリ内でのみ動くという妙な現象でした。
( まあ、レスポンスを考えて根本的に処理が違うのかもしれませんが )




ライセンスは Creative Commons licence です。
原著作者のクレジットを表示し、Creative Commons licence である事を明示すれば、フリーです。
( http://creativecommons.org/licenses/by/3.0/deed )

プログからは解りにくいですが、原著作者は Ruben Swieringa 氏です。

トップページはさらに解りにくいので・・・
http://www.rubenswieringa.com/blog/ が Flex book component のトップと考えて良い
とは思いますが、↓いちおうアーティクルページのリンクも添えれば良いと思います。
http://www.rubenswieringa.com/blog/flex-book-component-beta
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
001.<?xml version="1.0" encoding="utf-8"?>
002.<mx:Application
003.    xmlns:mx="http://www.adobe.com/2006/mxml"
004.    xmlns:filters="flash.filters.*"
005.    xmlns:rs="com.rubenswieringa.book.*"
006.    backgroundColor="#333333"
007.    layout="absolute"
008.>
009.     
010.<mx:Script>
011.<![CDATA[
012. 
013.[Bindable]
014.private var infoText:String =
015."赤い炎に包まれた瞬間・・・・<br /><br />彼女は信じられない速さで移動していた<br />";
016. 
017.         
018.]]>
019.</mx:Script>
020.     
021. 
022.<!-- 位置指定して本の横に文字 -->
023.<mx:Label
024.    text="Flex Book Test"
025.    x="40" y="150"
026.    fontSize="30" color="#FFFFFF"
027./>
028.<mx:Label
029.    text="( night walker )"
030.    x="50" y="220"
031.    fontSize="24" color="#FFFFFF"
032./>
033. 
034.<mx:LinkButton
035.    label="End Book"
036.    x="70" y="400"
037.    fontSize="10" color="#C0C0C0"
038.    click="myBook.gotoPage(lastPage)"
039./>
040. 
041.<mx:LinkButton
042.    label="Top Book"
043.    x="600" y="400"
044.    fontSize="10" color="#C0C0C0"
045.    click="myBook.gotoPage(0)"
046./>
047. 
048.     
049.<!-- ***************************************************************************
050. 
051.openAt : 最初に表示されるページ( 0 始まり )
052.autoFlipDuration : クリックやメソッドで実行されるアニメーションの時間幅(ミリ秒)
053.easing : 徐々に加速または減速( 通常デフォルトの 0.7 で良い )
054.regionSize : めくれる事が可能な高さ・幅
055.sideFlip : 真横からめくれるかどうか
056.hardCover : 最初と最後をハードカバー( 折れない )にするかどうか
057.hover : マウスに反応してめくれるアニメーションをするかどうか
058.snap : true にすると、easing が機能しない( パタっとあっさりめくれる )
059.flipOnClick : ページの端のクリックでめくるかどうか
060.**************************************************************************** -->
061.<rs:Book
062.    id="myBook"
063.    x="{Math.round(Application.application.width/2-400)}"
064.    y="32"
065.    width="800" height="530"
066.    openAt="3"
067.    autoFlipDuration="800"
068.    easing="0.7"
069.    regionSize="150"
070.    sideFlip="true"
071.    hardCover="true"
072.    hover="true"
073.    snap="false"
074.    flipOnClick="true">
075. 
076. 
077.    <!-- 最初のページ -->
078.    <rs:Page>
079.        <!-- 扉画像 -->
080.        <mx:Image source="@Embed('image/b2architecturals042.jpg')" />
081. 
082.        <!-- 位置指定して文字で画像内にタイトル -->
083.        <mx:Label
084.            text="night walker"
085.            x="20" y="20"
086.            fontFamily="impact" fontSize="20" color="#FFFFFF"
087.        />
088.    </rs:Page>
089.     
090.    <!-- 最初のページの裏( 透明 ) -->
091.    <rs:Page
092.        backgroundAlpha="0"
093.    >
094.        <!-- 位置指定して文字で画像内にタイトル -->
095.        <mx:Label
096.            text="night walker"
097.            x="20" y="20"
098.            fontFamily="impact" fontSize="20" color="#FFFFFF"
099.        />
100.    </rs:Page>
101. 
102.    <!-- めくれる最初のページ -->
103.    <rs:Page
104.        backgroundColor="#FFFFFF"
105.        backgroundAlpha="1"
106.    >
107.        <!-- 画像 -->
108.        <mx:Image
109.            y="100"
110.            source="@Embed('image/se.jpg')"
111.        />
112. 
113.        <!-- 位置指定して文字で画像内にタイトル -->
114.        <mx:Label
115.            text="night walker"
116.            x="20" y="20"
117.            fontFamily="impact" fontSize="20" color="#000000"
118.        />
119.    </rs:Page>
120. 
121.    <!-- めくれるページ2 ( 画像半透明 ) -->
122.    <rs:Page
123.        backgroundAlpha="0"
124.    >
125.        <!-- 画像 -->
126.        <mx:Image
127.            alpha="0.5"        
128.            source="@Embed('image/b17maartent974_2.jpg')"
129.        />
130. 
131.        <!-- 位置指定して文字で画像内にタイトル -->
132.        <mx:Label
133.            text="night walker"
134.            x="20" y="20"
135.            fontFamily="impact" fontSize="20" color="#FFFFFF"
136.        />
137.    </rs:Page>
138. 
139.    <!-- めくれるページ2 ( 背景ほぼ透明 : 画像自身の背景が左半分透過 ) -->
140.    <rs:Page
141.        backgroundAlpha="0.1"
142.    >
143.        <!-- 画像 -->
144.        <mx:Image
145.            source="@Embed('image/12253419214967.png')"
146.        />
147. 
148.        <!-- 位置指定して文字で画像内にタイトル -->
149.        <mx:Label
150.            text="night walker"
151.            x="20" y="20"
152.            fontFamily="impact" fontSize="20" color="#FFFFFF"
153.        />
154.    </rs:Page>
155. 
156.    <!-- めくれるページ3 -->
157.    <rs:Page>
158.        <!-- 画像 -->
159.        <mx:Image
160.            source="@Embed('image/s_b19nature_landscapes061.jpg')"
161.        />
162. 
163.        <!-- 位置指定して文字で画像内にタイトル -->
164.        <mx:Label
165.            text="night walker"
166.            x="20" y="20"
167.            fontFamily="impact" fontSize="20" color="#FFFFFF"
168.        />
169.    </rs:Page>
170. 
171.    <!-- ハードカバー最終ページ手前 -->
172.    <rs:Page>
173.        <!-- 画像 -->
174.        <mx:Image
175.            source="@Embed('image/b4nature_elements016.jpg')"
176.        />
177. 
178.        <!-- 位置指定して文字で画像内にタイトル -->
179.        <mx:Label
180.            text="night walker"
181.            x="20" y="20"
182.            fontFamily="impact" fontSize="20" color="#FFFFFF"
183.        />
184. 
185.        <mx:TextArea
186.            x="10"
187.            y="140"
188.            width="100%" height="135"
189.            color="#E1EAE1"
190.            textAlign="left"
191.            backgroundAlpha="0"
192.             borderStyle="none"
193.            editable="false"
194.            selectable="false"
195.            htmlText="{infoText}"
196.        />
197. 
198.    </rs:Page>
199. 
200.    <!-- ハードカバー最終ページ -->
201.    <rs:Page id="lastPage">
202.        <!-- 画像 -->
203.        <mx:Image
204.            x="40"
205.            y="100"
206.            source="@Embed('image/b4nature_elements016.jpg')"
207.        />
208. 
209.        <!-- 位置指定して文字で画像内にタイトル -->
210.        <mx:Label
211.            text="night walker"
212.            x="20" y="20"
213.            fontFamily="impact" fontSize="20" color="#000000"
214.        />
215.    </rs:Page>
216. 
217.</rs:Book>
218. 
219. 
220. 
221. 
222.</mx:Application>