【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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:filters="flash.filters.*"
	xmlns:rs="com.rubenswieringa.book.*"
	backgroundColor="#333333" 
	layout="absolute"
>
	
<mx:Script>
<![CDATA[

[Bindable]
private var infoText:String = 
"赤い炎に包まれた瞬間・・・・<br /><br />彼女は信じられない速さで移動していた<br />";

		
]]>
</mx:Script>
	

<!-- 位置指定して本の横に文字 -->
<mx:Label 
	text="Flex Book Test"
	x="40" y="150" 
	fontSize="30" color="#FFFFFF"
/>
<mx:Label 
	text="( night walker )"
	x="50" y="220" 
	fontSize="24" color="#FFFFFF"
/>

<mx:LinkButton
	label="End Book"
	x="70" y="400" 
	fontSize="10" color="#C0C0C0"
	click="myBook.gotoPage(lastPage)" 
/>

<mx:LinkButton
	label="Top Book"
	x="600" y="400" 
	fontSize="10" color="#C0C0C0"
	click="myBook.gotoPage(0)" 
/>

	
<!-- ***************************************************************************

openAt : 最初に表示されるページ( 0 始まり )
autoFlipDuration : クリックやメソッドで実行されるアニメーションの時間幅(ミリ秒)
easing : 徐々に加速または減速( 通常デフォルトの 0.7 で良い )
regionSize : めくれる事が可能な高さ・幅
sideFlip : 真横からめくれるかどうか
hardCover : 最初と最後をハードカバー( 折れない )にするかどうか
hover : マウスに反応してめくれるアニメーションをするかどうか
snap : true にすると、easing が機能しない( パタっとあっさりめくれる )
flipOnClick : ページの端のクリックでめくるかどうか
**************************************************************************** -->
<rs:Book
	id="myBook"
	x="{Math.round(Application.application.width/2-400)}"
	y="32"
	width="800" height="530" 
	openAt="3"
	autoFlipDuration="800"
	easing="0.7"
	regionSize="150"
	sideFlip="true"
	hardCover="true"
	hover="true"
	snap="false"
	flipOnClick="true">


	<!-- 最初のページ -->
	<rs:Page>
		<!-- 扉画像 -->
		<mx:Image source="@Embed('image/b2architecturals042.jpg')" />

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>
	</rs:Page>
	
	<!-- 最初のページの裏( 透明 ) -->
	<rs:Page
		backgroundAlpha="0"
	>
		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>
	</rs:Page>

	<!-- めくれる最初のページ -->
	<rs:Page
		backgroundColor="#FFFFFF"
		backgroundAlpha="1"
	>
		<!-- 画像 -->
		<mx:Image
			y="100"
			source="@Embed('image/se.jpg')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#000000"
		/>
	</rs:Page>

	<!-- めくれるページ2 ( 画像半透明 ) -->
	<rs:Page
		backgroundAlpha="0"
	>
		<!-- 画像 -->
		<mx:Image
			alpha="0.5"			
			source="@Embed('image/b17maartent974_2.jpg')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>
	</rs:Page>

	<!-- めくれるページ2 ( 背景ほぼ透明 : 画像自身の背景が左半分透過 ) -->
	<rs:Page
		backgroundAlpha="0.1"
	>
		<!-- 画像 -->
		<mx:Image
			source="@Embed('image/12253419214967.png')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>
	</rs:Page>

	<!-- めくれるページ3 -->
	<rs:Page>
		<!-- 画像 -->
		<mx:Image
			source="@Embed('image/s_b19nature_landscapes061.jpg')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>
	</rs:Page>

	<!-- ハードカバー最終ページ手前 -->
	<rs:Page>
		<!-- 画像 -->
		<mx:Image
			source="@Embed('image/b4nature_elements016.jpg')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#FFFFFF"
		/>

		<mx:TextArea 
			x="10"
			y="140"
			width="100%" height="135" 
			color="#E1EAE1" 
			textAlign="left"
			backgroundAlpha="0"
			 borderStyle="none" 
			editable="false"
			selectable="false"
			htmlText="{infoText}" 
		/>

	</rs:Page>

	<!-- ハードカバー最終ページ -->
	<rs:Page id="lastPage">
		<!-- 画像 -->
		<mx:Image
			x="40"
			y="100"
			source="@Embed('image/b4nature_elements016.jpg')" 
		/>

		<!-- 位置指定して文字で画像内にタイトル -->
		<mx:Label 
			text="night walker"
			x="20" y="20" 
			fontFamily="impact" fontSize="20" color="#000000"
		/>
	</rs:Page>

</rs:Book>




</mx:Application>