FlexBookの勉強(1)

Flex

FlexBookとは、Flexで作成された本のページをめくるような感覚のUIが実装されたコンポーネントです。

Quietly Scheming » FlexBook


ユーザービリティがそんなに良いとは思いませんが、動きが面白いのでFlexの勉強がてら少し触ってみることにしました。

とりあえず、今回は一番単純なサンプルを作成することに。

「FlexBookの勉強(1)サンプル」は誤って削除したため、公開していません。。。

※ちなみに、前回同様、Flex3用のBuilderを持っていないので、とりあえずFlex2で作成ｗ


以下、備忘録です。


1)FlexBookのソースファイルをダウンロードした。

ソースのダウンロード


2)ダウンロードしたファイルをFlexBuilderでインポートした。

私の場合は、FlexBuilderで予めbookというプロジェクトを作成しておき、そこにインポートしたよ。


3)試しにapp.mxmlを実行してみた。

素晴らしいｗ


4)book.mxmlのルート宣言を記述する

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:controls="qs.controls.*"
	xmlns:l="*">


5)Canvasを作成

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:controls="qs.controls.*"
	xmlns:l="*">

	<mx:Canvas  width="80%" height="80%">
	</mx:Canvas>

</mx:Application>


6)表紙と背表紙を設定する

	<mx:Canvas  width="80%" height="80%">
		<controls:FlexBook x="10" y="29" width="100%" height="100%">
			<controls:cover>
				<l:LetterPage text="表紙" backgroundColor="#000000" color="#FFFFFF" />
			</controls:cover>
			<controls:backCover>
				<l:LetterPage text="背表紙" backgroundColor="#000000" color="#FFFFFF" />
			</controls:backCover>
		</controls:FlexBook>
	</mx:Canvas>


7)ページを作成する

	<mx:Canvas  width="80%" height="80%">
		<controls:FlexBook x="10" y="29" width="100%" height="100%">
			<controls:cover>
				<l:LetterPage text="表紙" backgroundColor="#000000" color="#FFFFFF" />
			</controls:cover>
			<controls:backCover>
				<l:LetterPage text="背表紙" backgroundColor="#000000" color="#FFFFFF" />
			</controls:backCover>
			<l:LetterPage text="1ページ目" backgroundColor="#FF9A16" color="#FFFFFF" />
			<l:LetterPage text="2ページ目" backgroundColor="#1146C4" color="#FFFFFF" />
			<l:LetterPage text="3ページ目" backgroundColor="#16C411" color="#FFFFFF" />
		</controls:FlexBook>
	</mx:Canvas>


8)book.mxmlを実行する

こんだけで、ちょー簡単なサンプルはできるんだねｗ

次は、コンテンツの中身を充実させよっと！