PageFlip class

Well, it's just a simple low-level class to perform some pageflip drawing. It's supports the 4 corners flip and vertical / horizontal mode.
Here's the result (show the source)

Open Source This project is OPEN SOURCE under RPL License.
2007-01-18 v1.0 pageflip_v1_0.zip


(c) by Lillycat (from MinaLoween)

If you are looking for a very talented freelancer illlustrator (french touch inside !), please contact lillycat [__at__] lillycat [__dot__] net.

Comments (24)

  1. This example doesn’t seem to work for me unfortunately, I’ve moused over every part of the image and can’t find anything to make it run :o(

    PS. Your 1st email box can’t take that many characters, my address should end with .com

    Thursday, January 18, 2007 at 10:15 am #
  2. samartini >

    This class is just a low-level pageflip drawing class, so it does’nt handle some Mouse behaviors.

    You have to code the interactivity :)

    Thursday, January 18, 2007 at 1:01 pm #
  3. fs wrote:

    haha “page flip” is a cool key word for page ranking ;)

    Friday, January 19, 2007 at 1:43 am #
  4. Kevin wrote:

    How to use it in Flex 2? Could you please give us a sample? thanks

    Tuesday, January 23, 2007 at 11:46 am #
  5. Kevin wrote:

    Here is my try:

    but it cannot work.

    Tuesday, January 23, 2007 at 11:50 am #
  6. GREAT WORK!!
    I made a sample on how you could use the class in Flex. Take a look:

    http://labs.flexcoders.nl/?p=33

    Tuesday, January 23, 2007 at 9:05 pm #
  7. Hi Kevin, I can’t see your try but maybee Maikel sample code help you ?

    Thanks for sharing Maikel.

    Wednesday, January 24, 2007 at 3:32 am #
  8. Kevin wrote:

    Thanks Didier and Maikel. It seems that I have to create a UIComponent to wrap thr render.


    [Embed(source="images/image1.png")]
    [Bindable]
    public var pix0:Class;

    [Embed(source="images/image2.png")]
    [Bindable]
    public var pix1:Class;

    public var myUIComponent:UIComponent = new UIComponent();
    public var render:Shape = new Shape();
    public var page0:BitmapAsset;
    public var page1:BitmapAsset;

    public function initApp():void{
    render.x = 800;
    render.y = 200;
    myUIComponent.addChild(render);
    this.addChild(myUIComponent);

    page0 = new pix0() as BitmapAsset;
    page1 = new pix1() as BitmapAsset;

    ….

    PageFlip.drawBitmapSheet(o, // computeflip returned object
    render, // target
    page0.bitmapData, // bitmap page 0
    page1.bitmapData); // bitmap page 1

    Wednesday, January 24, 2007 at 7:13 am #
  9. M:ke wrote:

    Dont know how to compile the example.

    Friday, July 13, 2007 at 5:31 pm #
  10. snipx wrote:

    hi everyones !

    I can’t succeed in making this example works cause of this code line i don’t understand :

    var page1:BitmapData=new page1().bitmapData;

    page1 is a variable, a subclass of Bitmap ? Thanks for your precious help to a lost newbie ;)

    Friday, August 15, 2008 at 5:54 pm #
  11. jinx wrote:

    An example of usage if you have in the library of Flash the images.

    Right click on the image in the library click properties and select export for action script, and name the first image pag0. Repeat for the second.

    after in the code replace the lines

    var page0:BitmapData=new page0().bitmapData;

    var page1:BitmapData=new page1().bitmapData;

    with

    var page0:BitmapData=new pag0(300,300);
    var page1:BitmapData=new pag1(300,300);

    and that’s it.

    full code for a .fla file :)

    import com.foxaweb.pageflip.*;
    stop();
    var render:Shape=new Shape();
    var page0:BitmapData=new pag0(300,300);
    var page1:BitmapData=new pag1(300,300);

    render.x=50;
    render.y=50;
    addChild(render);

    var o:Object=PageFlip.computeFlip( new Point(60,190), // flipped point
    new Point(1,1), // of bottom-right corner
    page0.width, // size of the sheet
    page1.height,
    true, // in horizontal mode
    1); // sensibility to one

    PageFlip.drawBitmapSheet(o, // computeflip returned object
    render, // target
    page0, // bitmap page 0
    page1); // bitmap page 1

    have fun.

    Wednesday, September 17, 2008 at 2:14 am #
  12. John wrote:

    I was wondering if any of you have try to add shadows to the engine. I have try it but without any success.

    Monday, October 13, 2008 at 9:24 pm #
  13. webby wrote:

    hello Didier:
    if I want to tear the page off.
    what can I do?
    how to unlimit the fixed point.

    thank you

    Saturday, February 7, 2009 at 6:27 pm #
  14. kristalize wrote:

    I’m also interested in tearing away the pages and also can I not load the content as bitmap but movieClips that I have created in flash ?

    Monday, February 9, 2009 at 10:53 pm #
  15. ma.tthi.eu wrote:

    Hi, thanks for that it helped me a lot!
    Here is a modified version of your class to add support for shadows, I thought it might be useful to someone : http://ma.tthi.eu/blog/2009/05/07/pageflip-with-shadows/

    Thursday, May 7, 2009 at 4:56 am #
  16. chamalita wrote:

    Has anyone tried flipping pages in the opposite direction?

    Tuesday, June 2, 2009 at 12:14 am #
  17. clark wrote:

    hi there, the links to the examples and source is not working any more :( nor is the foxweb domain, can someone send me the source?

    clark dot cookie at gmail dot com

    Thursday, July 9, 2009 at 9:46 am #
  18. Serj wrote:

    Also good free version page flip..link

    Monday, October 19, 2009 at 10:03 pm #
  19. Ds wrote:

    var page0:BitmapData = page0().bitmapData;
    var page1:BitmapData = page1().bitmapData;

    this 2 line causes problem, and looks weird for me. ‘coz I suppose page0 and 1 are new Bitmap or even I create 2 new img and set them to class. it still doesn’t work.

    i think the example is not correct.

    Wednesday, November 18, 2009 at 12:15 pm #
  20. Anna Lepage wrote:

    When it comes to page-flip effect, my first choice can be http://www.pdf-to-flash-magazine.com It offers wonderful online and offline service.

    Friday, August 13, 2010 at 8:14 am #
  21. Transforming your PDF materials into fully interactive flash e-Brochure becomes easier with page flipper online service. No need for additional software and conversion is so simplified that even people who don’t use Internet often can use it effectively. Don’t just think, use Page Flipper

    Thursday, September 9, 2010 at 2:39 pm #
  22. Leonel wrote:

    Hello Didier,
    First of all great work in this class, dispite some time distance it was just waht I needed since I can’t find such a class that work with dynamic object in AS instead of loading them with XML.

    I have a question, may be you can help me. I’m making a book that will have some records that will are read in XML. With these records I have to build visual pages like in a book.
    Since it has many pages, presenting and building them in one step is time consuming and very slow while flipping, because all pages are in the Display List and visible.
    I though of building the book dynamically while the user flips the pages. I’m able to manage that, but I’m in trouble because I must “delete” the pages I don’t see while I put the one I do see. For example you have a addChild of a Sprite (_page), to add it to the display list, but how can I remove it just as easily, but the trouble is with the index, I loose reference to them.

    Sorry for such a long post, but I’m in this for days and lots of experiments are getting me frustated.

    Basically my trouble is with child index, since I want that a new page can appear under the one that was clicked, before this one can animate and turn, to make it smooth to the user eye.

    If you or someone have some time to help me I would appreciate it.
    Thanks

    Tuesday, September 21, 2010 at 4:19 pm #
  23. mnu7 wrote:

    Hi I want as3 code for book flip???

    Wednesday, April 13, 2011 at 8:05 pm #
  24. Franck wrote:

    Hi Didier,

    I wish to contact you by email, but the foxaweb site doesn’t seem to be up to date.
    May you give me a contact ?

    Thanks

    Friday, September 9, 2011 at 3:03 pm #

Trackbacks/Pingbacks (14)

  1. [...] 上禮拜回老家 再加上週日都在玩電吉他 所以又好幾天沒寫文章了~>0< 今天就來介紹一個滿實用的網站 – ByteArray.org 而這個網站是以ActionScript3.0為主 進行開發一些實驗性的Project 目前的Project有八個 WiiFlash、Raster、MouseGesture、Live JPEG Encoder、PageFlip、 SMTP Mailer、GIF Animation Encoder、GIFPlayer 其中我比較感興趣的是Raster、MouseGesture、Live JPEG Encoder、SMTP Mailer 也就是比較偏向繪圖、影像、網路應用的部分 接著就來簡單介紹一下我個人覺得超猛的滑鼠手勢辨識Project – MouseGesture 不多說~先來玩看看再說拉~ 以下是一些擷取畫面 最左邊是字母跟數字的手勢說明,中間是手勢的圖畫區,右邊顯示滑鼠手勢輸入的文字 還可以輸入空格、點,也可以刪除文字 [...]

     
  2. [...] 第三个,高效率的AS3翻页组件 观看演示 翻页的东西做的人太多了。但向bytearray这样用AS3的一些底层绘制函数的实现的不多,他的代码又比较简洁直观,值得借鉴。   [...]

     
  3. Page Flip Class & Experiment - Forum Flash CS3 on Wednesday, November 21, 2007 at 12:30 pm

    [...] Ciao! ho trovato una classe Open Source interessante e volevo segnalarvela.. l’indirizzo

     
  4. Bill White’s Blog » PeekPanel - My New Flex Component on Tuesday, April 29, 2008 at 8:57 am

    [...] to hide options or preferences in an application.  It borrows the look and feel from the FlexBook/PageFlip components already out there, but instead of simulating a book, this is more of a way to use the [...]

     
  5. Kcchao: AIR on Thursday, September 11, 2008 at 9:02 am

    [...] PageFlip class [...]

     
  6. [...] ActionScript Page Flip Class [...]

     
  7. ma.tthi.eu» Blog Archive » PageFlip with shadows on Thursday, May 7, 2009 at 3:44 am

    [...] took the very good PageFlip class from Didier Brun and added support for shadows. It adds 3 different shadows [...]

     
  8. byK – Voice Gesture [by Didier Brun] on Friday, December 18, 2009 at 7:01 am

    [...] AS3 classes/experiments worth checking out: PageFlip Class Mouse Gesture Bump [...]

     
  9. [...] 二 6 AS3 高效率的AS3翻页组件 观看演示 无 发表评论 [...]

     
  10. [...] AS3 Projekt zu importieren gescheitert. Jetzt suchte ich nach einer PageFlip AS3 Variante und fand PageFlip class <font size='1'>[ by Didier Brun aka Foxy ]</font> – ByteArray.org Ich bin bedauerlicherweise nicht in der Lage diese xyz.as beispiele zu nutzen. Wie kann ich denn [...]

     
  11. [...] ActionScript Page Flip Class [...]

     
  12. [...] todas as informações de uso dessa poderosa classe no link: http://www.bytearray.org/?p=77 Tags: Page Flip LikeBe the first to like this [...]

     
  13. [...] ActionScript Page Flip Class [...]

     
  14. [...] to hide options or preferences in an application.  It borrows the look and feel from the FlexBook/PageFlip components already out there, but instead of simulating a book, this is more of a way to use the [...]