I gotta admit, the first time I saw Steve Jobs doing “the pageflip” on the iPad I was amazed..in awe! It was a show stopper (at least for me). I thought to myself….”I want it! Gotta have it! Need it!”

So, I was thinking…mmhh.. If I had to show case the BlackBerry tablet’s Adobe AIR capabilities what type of App would I write. Immediately I had the thought of the pageflip book in mind. IT’S OneOfA …hellAva …sleek ‘n sexy app for the BlackBerry PlayBook as well as being …mmh a book!

I was aware that Ruben Swieringa has done exactly that – here!

Kudos to Ruben for his amazing work and making it available to the community!!!

So, here goes!!!!…I am so excited……Here is the animation video and the pics! – Enjoy!!!

Complete Flex Project Download: http://www.filefactory.com/file/b43096e/n/PaperClip-PlayBook-09112010.zip

Here is the SWF animation video:

http://na.isobar.com/demos/wagied/2010-11-08_0923-PageFlip-Fancy.swf

..and here’s the code:

<?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.*"
	layout="absolute"
	backgroundColor="#333333">

	<mx:Style source="../assets/style/book.css" />

	<mx:Script>
		<![CDATA[
			import com.rubenswieringa.book.*;

			import mx.core.FlexGlobals;
			import mx.events.SliderEvent;
			import mx.controls.sliderClasses.Slider;
			import mx.effects.Fade;
			import mx.controls.Alert;

			private const TICK_INTERVAL:uint = 5;

			[Bindable]
			private var currSliderValX:Number;

			[Bindable]
			private var currSliderValY:Number;

			[Bindable]
			private var hardBtnIcon:Class = hardBtnIcon1;		

			[Embed(source='../assets/style/icons/hard1.swf')]
			private var hardBtnIcon1:Class;

			[Embed(source='../assets/style/icons/hard2.swf')]
			private var hardBtnIcon2:Class;

			[Bindable]
			private var tearBtnVisible:Boolean = true;

			private function onCreationComplete ():void {
				myBook.addEventListener(BookEvent.PAGE_TORN, onPageTorn);
			}

			private function onPageTorn (event:BookEvent):void {
				var currentPage:Page= event.currentTarget as Page;
				if (myBook.pages.getItemIndex( currentPage ) == -1){
					tearBtnVisible = true;
				}
			}

			private function addTearable ():void {
				//myBook.addChildAt(tearablePage2, 10);
				//myBook.addChildAt(tearablePage1, 10);
			}

			private function slider_rollOver(evt:MouseEvent):void {
				Slider(evt.currentTarget).tickInterval = TICK_INTERVAL;
			}

			private function slider_rollOut(evt:MouseEvent):void {
				Slider(evt.currentTarget).tickInterval = 0;
			}

			private function onSliderChange(event: SliderEvent): void
			{
				var resizeSlider:Slider = event.currentTarget as Slider;
				currSliderValX= (resizeSlider.value/100.0) as Number;
				currSliderValY = currSliderValX * 0.65;
			}

			private function toggleHard (event:Event, pageIndex:uint):void {
				var button:Button= event.currentTarget as Button;
				var currPage:Page= myBook.pages[pageIndex] as Page;

				if( button.id == "hard_btn_prev")
				{
					hard_btn_prev.toolTip = (currPage.hard) ? "Page Hard" : "Page Soft";
				}
				else if( button.id == "hard_btn_next")
				{
					hard_btn_next.toolTip = (currPage.hard) ? "Page Hard" : "Page Soft";
				}
				currPage.hard = !currPage.hard;
			}
		]]>
	</mx:Script>

	<mx:Array id="cmbDP">
		<mx:String>Ambient-1</mx:String>
		<mx:String>Ambient-2</mx:String>
		<mx:String>Ambient-3</mx:String>
	</mx:Array>

	<!-- TOP CONTROLBAR STARTS HERE -->
	<mx:ApplicationControlBar id="top_controlbar" dock="true" horizontalAlign="center" height="80" width="100%" >	

		<mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10"
				 paddingLeft="10" paddingRight="10">
			<mx:Button
				id="hard_btn_prev" styleName="book"
				toolTip="Toggle Soft/Hard Page"
				x="66" y="365" height="48" width="48"
				icon="{hardBtnIcon}"
				alpha="0.8" rollOver="{hard_btn_prev.alpha=1}" rollOut="{hard_btn_prev.alpha=0.8}"
				click="toggleHard(event, myBook.currentPage)">
				<mx:filters><filters:GlowFilter color="#FFFFFF" alpha="0.5"/></mx:filters>
			</mx:Button>
			<mx:Button
				id="goto_prevpage_btn" styleName="book"
				toolTip="flip to previous page"
				height="40" width="40"
				icon="@Embed(source='../assets/style/icons/prev_page.png')"
				alpha="0.8" rollOver="{goto_prevpage_btn.alpha=1}" rollOut="{goto_prevpage_btn.alpha=0.8}"
				click="myBook.gotoPage(myBook.currentPage-2)">
				<mx:filters><filters:GlowFilter color="#FFFFFF" alpha="0.5"/></mx:filters>
			</mx:Button>

			<mx:HBox paddingBottom="5"
					 paddingTop="5">
				<mx:ComboBox dataProvider="{cmbDP}"/>
				<mx:Spacer width="100%"/>
				<mx:TextInput id="myTI" text=""/>
				<mx:Button id="srch1" label="Search" click="Alert.show('Searching')"/>
			</mx:HBox>

			<mx:HSlider id="resizeSlider"
						toolTip="Resize"
						minimum="0"
						maximum="100"
						liveDragging="true"
						dataTipPrecision="0"
						snapInterval="5"
						tickInterval="25"
						labels="[0,25,50,75,100]"
						change="onSliderChange(event);"
						rollOver="slider_rollOver(event);"
						rollOut="slider_rollOut(event);" />

			<mx:Button
				id="goto_nextpage_btn" styleName="book"
				toolTip="flip to next page"
				height="40" width="40"
				icon="@Embed(source='../assets/style/icons/next_page.png')"
				alpha="0.8" rollOver="{goto_nextpage_btn.alpha=1}" rollOut="{goto_nextpage_btn.alpha=0.8}"
				click="myBook.gotoPage(myBook.currentPage+2)">
				<mx:filters>
					<filters:GlowFilter color="#FFFFFF" alpha="0.5"/>
				</mx:filters>
			</mx:Button>

			<mx:Button
				id="hard_btn_next" styleName="book"
				toolTip="Toggle Soft/Hard Page"
				x="66" y="365" height="48" width="48"
				icon="{hardBtnIcon}"
				alpha="0.8" rollOver="{hard_btn_next.alpha=1}" rollOut="{hard_btn_next.alpha=0.8}"
				click="toggleHard(event, myBook.currentPage + 2 )">
				<mx:filters><filters:GlowFilter color="#FFFFFF" alpha="0.5"/></mx:filters>
			</mx:Button>
		</mx:HBox>

	</mx:ApplicationControlBar>
	<!-- TOP CONTROLBAR ENDS HERE -->

	<!-- BOOK STARTS HERE -->
	<rs:Book id="myBook"
			 x="{Math.round(FlexGlobals.topLevelApplication.width/2- 500)}"
			 y="50"
			 width="800" height="600"
			 openAt="0" autoFlipDuration="600" easing="0.7" regionSize="100"
			 sideFlip="true" hardCover="false" hover="true" snap="false" flipOnClick="true">

		<rs:Page id="pg1" tearable="true" liveBitmapping="true">
			<mx:Image source="@Embed('../assets/img/sumeco/dreamscan.jpg')"
					  scaleContent="true"/>
		</rs:Page>

		<rs:Page id="pg2" tearable="true" liveBitmapping="true">
			<mx:Image source="@Embed('../assets/img/sumeco/formula.jpg')"
					  scaleContent="true"/>
		</rs:Page>

		<rs:Page id="pg3" tearable="true" liveBitmapping="true">
			<mx:Image source="@Embed('../assets/img/sumeco/hollywood.jpg')"
					  />
		</rs:Page>

		</rs:Book>
	<!-- BOOK ENDS HERE -->

</mx:Application>

Viola!!!