11 Replies Latest reply on Jan 18, 2014 4:17 AM by SanjayJangid

    Flip Book Example not working in flex 4

    linrsvp Level 1

      Hi,

      I downloaded the page flip example by Ruben Swieringa. I tried using the AS3 classes in my flex 4 application, like this :

       

      <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"
                     xmlns:filters="flash.filters.*"
                     xmlns:book="com.rubenswieringa.book.*"
                     width="1000"
                     backgroundColor="#333333" >
         
          <s:layout>
              <s:BasicLayout />
          </s:layout>
          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                  import mx.core.FlexGlobals;
                  import mx.events.FlexEvent;

       

              ]]>
          </fx:Script>
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
         
          <book:Book id="myBook" x="100" y="50"
                     width="800" height="530" openAt="0" autoFlipDuration="200" easing="0.7"
                     regionSize="150" sideFlip="true" hover="true" snap="false" flipOnClick="true">
              <book:Page id="page1">
                  <s:BorderContainer borderWeight="2" backgroundColor="#1AADBD" fontSize="16" fontWeight="bold"
                                     width="95%" height="95%">

       

                      <s:TextArea contentBackgroundAlpha="0" width="100%" height="100" borderAlpha="0"
                                  editable="false" selectable="false" text="{introText}" />
                  </s:BorderContainer>
              </book:Page>
             
              <book:Page id="page2">
                  <mx:Image source="@Embed('assets/img/sumeco/dreamscan.jpg')" />
                  <mx:Label
                      x="343" y="38"
                      fontFamily="Verdana" fontSize="9" color="#466C64"
                      text="beta2" />
                  <mx:Label
                      left="30" right="30" y="90"
                      fontFamily="Arial" fontSize="10" color="#9BBFBA" textAlign="center"
                      text="by Ruben Swieringa" />
              </book:Page>
             
              <book:Page id="page3">
                  <s:BorderContainer borderWeight="2" backgroundColor="#1AADBD" fontSize="16" fontWeight="bold"
                                     width="95%" height="95%">
                     
                      <s:TextArea contentBackgroundAlpha="0" width="100%" height="100" borderAlpha="0"
                                  editable="false" selectable="false" text="{introText}" />
                  </s:BorderContainer>
              </book:Page>
             
              <book:Page id="page4">
                  <mx:Image source="@Embed('assets/img/sumeco/dreamscan.jpg')" />
                  <mx:Label
                      x="343" y="38"
                      fontFamily="Verdana" fontSize="9" color="#466C64"
                      text="beta2" />
                  <mx:Label
                      left="30" right="30" y="90"
                      fontFamily="Arial" fontSize="10" color="#9BBFBA" textAlign="center"
                      text="by Ruben Swieringa" />
              </book:Page>

       


      The application compiles without any errors, but when I run the application, it dsnt show anything. I tried putting alerts at creationComplete, initialize and preinitialize events, but nothing shows up. it just shows the grey background that I have assigned to the application but the pages dsnt show....

       

      What am I doing wrong ? Please help as this is very urgent.

        • 1. Re: Flip Book Example not working in flex 4
          D Baron Level 1

          Hi There,

           

          Were you ever able to get the Flip Book working in Flex 4?  I also would like to use this code, but was concerned it might not work.  I contacted Ruben, but he basically has not worked on it for several years now and is only 'pretty sure' that is should work in Flex 4.x.

           

          Please let me know...

           

          Thanks,

           

          -David

          • 2. Re: Flip Book Example not working in flex 4
            aktell2007 Level 1

            Hi there,

             

            If you use Flex Builder 4, but work it as 3.5 with everything with (mx) ! - already than it does not work any longer properly and Rubens knows about it ! I cam't understand why he would say that it should work with Flex 4 ?

            regards aktell2007

            • 3. Re: Flip Book Example not working in flex 4
              shmonika

              Hi,

              I have tried making the Flip Book Example in Flash Builder 4.5 and it works fine. Just make sure you use the <s:Application/> tag instead of <mx:Application/> and include all the namespaces. Include the style through <fx:Style>.

               

              Just dont blindly copy paste the downloaded code but make changes according to the 4.5 sdk.

              You will have to remove the backgroundAlpha property from all the TextArea also.

               

              Thanks

              Monika

              • 4. Re: Flip Book Example not working in flex 4
                Harpalsinh Rana Level 1

                I found the same problem. flipbook works for 3.5 or 3 but not for higher than 4.

                In flexbook.as file there is a delta property set in following way.

                 

                delta = new Vector(new Point(x,_pointOfOriginalGrab.y),new Point(x+10,_pointOfOriginalGrab.y+1));

                 

                But compiler gives error that vector class can not accept more than 0 arguments. Thogh Vector class inside the qs.utils pacakge constructor has created with two arguments.

                public class Vector

                {

                          public var p1:Point;

                          public var p0:Point;

                 

                          public function Vector(p0:Point,p1:Point):void

                          {

                                    this.p0 = p0.clone();

                                    this.p1 = p1.clone();

                          }

                 

                Can anyone please help me to solve this issue? I see it only in flex 4 and 4.5 not in flex 3

                • 5. Re: Flip Book Example not working in flex 4
                  crowezr1 Level 1

                  I know this thread is old, but I ran across this issue recently and found a simple solution.

                   

                  It appears there is some sort of conflict with the internal Vector class in Flex 4 which causes the issues. If you simply rename the qs.utils.Vector to something else such as FlipBookVector, it should work just fine.

                  • 6. Re: Flip Book Example not working in flex 4
                    Vahid Arjmand

                    hi every one, i solved this problem the flex book dont compatible with flex 4.6 with this code :

                     

                    <?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"

                                   xmlns:filters="flash.filters.*"

                                   xmlns:rs="com.rubenswieringa.book.*"

                                   width="900" height="900" minWidth="900" minHeight="900" backgroundColor="#9EB9CD"

                                   creationComplete="onCreationComplete(event)" pageTitle="Flip Book Simple">

                        <s:layout>

                            <s:BasicLayout/>

                        </s:layout>

                       

                       

                       

                        <fx:Declarations>

                            <!-- Place non-visual elements (e.g., services, value objects) here -->

                        </fx:Declarations>

                       

                        <fx:Script>

                            <![CDATA[

                                import com.carlcalderon.arthropod.Debug;

                                import com.rubenswieringa.book.*;

                               

                                import flash.display.Loader;

                                import flash.display.MovieClip;

                                import flash.events.Event;

                                import flash.events.MouseEvent;

                                import flash.net.URLRequest;

                                import flash.text.TextFormat;

                               

                                import mx.controls.Button;

                                import mx.controls.TextInput;

                                import mx.effects.Fade;

                                import mx.events.FlexEvent;

                               

                                protected function onCreationComplete (event:FlexEvent):void {

                                    myBook.addEventListener(BookEvent.PAGE_TORN, onPageTorn);

                                    myBook.addEventListener(BookEvent.PAGE_TURNED, onPageTorned);

                                    myBook.addEventListener(BookEvent.STATUS_CHANGED, onPageStatus);

                                   

                                    this.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseNavigate);               

                                    page_number.text = myBook.currentPage + ' / ' + myBook.pages.length;

                                   

                                }

                               

                                private function onPageTorn(e:BookEvent):void{

                                    Debug.log('PAGE_TORN');

                                }

                                private function onPageTorned(e:BookEvent):void{               

                                    page_number.text = (myBook.currentPage+1) + ' / ' + myBook.pages.length;

                     

                                }           

                                protected function onPageStatus(event:Event):void

                                {

                                               

                                }       

                                protected function onMouseNavigate(event:MouseEvent):void

                                {

                                    if(event.delta > 0){

                                        myBook.prevPage();

                                    }else{

                                        myBook.nextPage()

                                    }

                                }

                            ]]>

                        </fx:Script>

                       

                        <!-- book w:h >> 800:590  -->

                     

                        <rs:Book id="myBook" bottom="91" width="820" height="700" hardCover="false" horizontalCenter="-10"

                                 layoutDirection="right" regionSize="30" sideFlip="true" liveBitmapping="true">

                                  

                                <rs:Page id="page01" >               

                                    <mx:Image source="@Embed('assets/pages/page01.swf')" />

                                </rs:Page>

                                <rs:Page id="page02" >

                                    <mx:Image source="@Embed('assets/pages/page02.swf')" />       

                                </rs:Page>

                                <rs:Page id="page03" >

                                    <mx:Image source="@Embed('assets/pages/page03.swf')" />       

                                </rs:Page>

                                <rs:Page id="page04" >

                                    <mx:Image source="@Embed('assets/pages/page04.swf')" />       

                                </rs:Page>

                                <rs:Page id="page05" >

                                    <mx:Image source="@Embed('assets/pages/page05.swf')" />       

                                </rs:Page>

                                <rs:Page id="page06" >

                                    <mx:Image source="@Embed('assets/pages/page06.swf')" />       

                                </rs:Page>

                                <rs:Page id="page07" >

                                    <mx:Image source="@Embed('assets/pages/page01.swf')" />       

                                </rs:Page>

                                <rs:Page id="page08" >

                                    <mx:Image source="@Embed('assets/pages/page02.swf')" />       

                                </rs:Page>

                        </rs:Book>

                       

                    </s:Application>

                     

                     

                    but i have a new problem , please help me

                    i want to access page content (i have a textfield in each page i want access text in any textfield),How do i can ?

                    sorry for weak my english language

                    • 7. Re: Flip Book Example not working in flex 4
                      Harpalsinh Rana Level 1

                      ITs easy..

                       

                      you can do it this way.

                       

                      for ( var i:int=0; i< book.content.length; i++ )

                      {

                               var txt:string =    (book.content[i] as Page ).textField.text ;

                                trace( txt );

                      }

                       

                      you can do this same for cover and back cover.

                       

                      Message was edited by: Harpalsinh Rana

                      • 8. Re: Flip Book Example not working in flex 4
                        Vahid Arjmand Level 1

                        Harpalsinh Rana wrote:

                         

                        ITs easy..

                         

                        you can do it this way.

                         

                        for ( var i:int=0; i< book.content.length; i++ )

                        {

                                 var txt:string =    (book.content[i] as Page ).textField.text ;

                                  trace( txt );

                        }

                         

                        you can do this same for cover and back cover.

                         

                        Message was edited by: Harpalsinh Rana

                        thank friend

                        but your code have a two problem.

                        there are no propery with name content in book class (i guess your target is page  proprty in book class)

                        and another problem is direct access a textfield in page content , If you have carefully too page class , each page have a child with Image type and can not access content in page continer

                        if you have any idea this idea please help

                        • 9. Re: Flip Book Example not working in flex 4
                          Harpalsinh Rana Level 1

                          I have sent u a message here. check it.

                          • 10. Re: Flip Book Example not working in flex 4
                            StardusterII Level 1

                            While this is now running in 4.6, has anyone been able to get it to run in a mobile environment with Flex?   I've created a moible project with the code but it flags the following function with an error, "1020: Method marked override must override another method"

                             

                            override public function getElements():Array {

                             

                               return this._pages.source;

                              }

                             

                             

                             

                            Anyone know what that means!

                             

                            • 11. Re: Flip Book Example not working in flex 4
                              SanjayJangid Level 1

                              Hello monika

                               

                                   your post use full

                               

                                 it also working fine with flex 4.6

                                 But i also need information about flip book lienceing it is free or paid.

                               

                              Thanks

                               

                              Sanjay