11 Replies Latest reply: Sep 20, 2010 6:45 AM by Sherrick26 RSS

    InDesign CS4 Flip Book Exported to SWF

    merbland Community Member

      I've never used InDesign or Flash before, so please don't assume that I know something just because it is so simple that I should. 

      I've created a first draft of a flip-book as a 'test of concept' .  I've posted this first draft at the following URL (2MB) so that you can better understand my questions in the context of the book I'm building: 
      http://www.JustPhotos.ca/cc/Island_Arthropods_1st_Draft.html

      I want to build this entire flip-book from inside InDesign and use InDesign CS4's Export to SWF capability to produce the web-ready SWF and HTML files.  The link given above was produced in this manner.  I know that a more experienced person would probably do the layout in InDesign and then export to an XFL file so that the navigation details could be built in Flash.  I prefer not to do this because I find it hard enough to learn InDesign for the first-time let alone trying to learn Flash simultaneously.

      Here's the items that I want to add / modify in my existing 'test of concept' book posted above.  Help on how to do these things would be greatly appreciated.

      1.   I want to get rid of the excess gray area around the flip book.  I can't seem to figure out how to do it.

      2.  I'd like to add a Button Action to the 'Fast Forward' and 'Fast Rewind' buttons that would cause the pages to flip continuously in the corresponding direction until the first r last page is reached.

      3.  I'd like to add a Button Action to the 'Stop' buttons that would cause the automatic flipping (as requested in my request #2) to stop at whatever page is displayed when the stop button is pressed.

      If I MUSTexport to xfl and use flash in oder to accomplish my goals, then comments on how to do this in Flash are also welcome.

      Thanks for any help you can offer.  Mardon

        • 1. Re: InDesign CS4 Flip Book Exported to SWF
          Petteri_Paananen Community Member

          I have made a product called eDocBrowser. It´s done for making SWF files exported from InDesign more user-friendly. There is no Play-button but I think I could make it quite easily to next version of it. There are lots of other extra features added instead. Like zooming, scrollin zoomed pages etc... and user interface is fully customizable...

           

          More info: http://www.prepress.fi/index.php?id=157

           

          Demo Magazine: http://www.prepress.fi/eDocBrowser

          (3 dummy magazines from indesign connected together)

          (theres help-button in the top-right corner of eDocBrowser)

          • 2. Re: InDesign CS4 Flip Book Exported to SWF
            merbland Community Member

            Thanks for the idea, Petteri, but the flip book I'm developing is just a hobby project for me.  This means I'm not looking to purchase another commercial product to develop it.  If I were doing this commercially, I'd certainly consider using your software.  I've already bought the Adobe Master Suite CS4, so there's no additional cost for me if I use those programs to develop my flip book.  I also enjoy figuring out how to use new software, in this case InDesign (and maybe Flash).  The challenge of figuring out how to get the book working is almost as much fun for me as producing the final product.  That said, I still need lhelp from people in forums like this one.  I'll be distributing my flip-book for free under a Creative Commons license, so that's another reason I'm hoping to avoid buying more software just to produce it.  I like the feature of your software that allows resizing the viewing window and going to full screen.

            Still hoping for ideas on how to solve the 3 issues I outlined. 

            • 3. Re: InDesign CS4 Flip Book Exported to SWF
              Bob Bringhurst - Adobe Adobe Employee

              You may want to read up on exporting to SWF. This help topic is a good starting point, there's a good video by Michael Ninness, and there's a blog entry on exporting interactive documents to SWF.

               

              1. Try experimenting with different page sizes. When you create a document, notice that there are presets such as 800x600 and so on.

               

              2. I'm not aware of a way to do this in InDesign. If there is a way, I'd love to know what it is. But that seems like something you'd have to do in Flash Pro, and it sounds like you want to avoid the XFL route.

               

              3. Same as #2.

               

              If you are going to try exporting to XFL to edit the file in Flash Pro, start with this help topic. It includes links to one video that covers exporting an InDesign file to XFL, and another video that discusses how to edit the XFL file in Flash Pro. For the Flash Pro side, you'll want to ask questions in the Flash forum.

              • 4. Re: InDesign CS4 Flip Book Exported to SWF
                merbland Community Member

                Hi Bob,

                Thanks for your reply.   It sounds like my 'fear' is true;.  That is, your reply seems to confirm that in order to add any substantial degree of interactive navigation to an InDesign layout the layout must be exported as an XFL file and edited in Flash instead of using the simple SWF export.  As a total Newbie, the problem I'm having in doing this is that an XFL export from InDesign only puts each spread on the Flash timeline as individual frames.   It seems like none of the page-flip transition information gets exported.  The last URL you suggested (http://www.adobe.com/go/lrvid4093_fl) begins to touch on how to edit the exported file in Flash but trying to re-build the InDesign page flips from withinin Flash is beyond my skills; at least at this point in time.

                The first URL you suggested (http://help.adobe.com/en_US/InDesign/6.0/WS2DECDF40-B6DA-40b6-804F-2703D6C6A460.html) is one that I had seen and it actually helped me get as far as I have with my test document (http://www.JustPhotos.ca/cc/Island_Arthropods_1st_Draft.html).    None of the InDesign tutorial URL's you suggested deals directly with how to add buttons that are unaffected by the page transitions.  All of those tutorials show buttons that are placed on the Master pages and the buttons also flip as the page-flip transitions occur.   I did not want this in my design.  I wanted the buttons to be located off the page and not appear to flip.  The work-around I've used is to make the button from a PNG file with a transparent area that overlaps the page that flips.  This makes the button look like it is off the page but it's not a great solution because the button still has a noticeable blink to it as the page flip transition occurs.   The tutorials also don't directly answer the problem I'm having with trying to eliminate the extra 'dead' space around the useful elements.  If I export to different sizes during the SWF creation process, it just makes everything smaller but the % of non-useful gray space does not change.

                At least the CS4 version of InDesign is a big step forward with the creation of Flash previews directly from InDesign.  Perhaps some of these things I'm trying to do will be added in future editions of InDesign.  Or perhaps I'll have to get more serious about trying to learn Flash. 

                • 5. Re: InDesign CS4 Flip Book Exported to SWF
                  jesster00 Community Member

                  Hey merbland,

                   

                  I've been having the same gray space problem with my indesign export. after thinking about it for a bit, i found that if you can html code (or you have dreamweaver) you can put the flash file into a table. just set the table width to the width of your indesign document.

                   

                  hope this helps. i'm sure we're not the only ones who had trouble figuring this out.

                  • 6. Re: InDesign CS4 Flip Book Exported to SWF
                    bluffhouse Community Member

                    Or, re: the "grey space" -- edit the body bgcolor attribute in the html document to a color which compliments your design. Not elegant, but easy.

                    • 7. Re: InDesign CS4 Flip Book Exported to SWF
                      bluffhouse Community Member

                      My own first flipbook turned out quite nicely --except for one thing.

                       

                      The Previous Page button works, but the Next Page button does not. You have to view the whole thing backward.

                       

                      There are no overlapping transparent objects in the vicinity.

                       

                      I tried copying the working button, flipping it, and changing the Action. No joy. It's not "hot" and it doesn't show either the assigned rollover color or the pointing finger icon.

                       

                      I don't know a thing about Flash, either.

                      • 8. Re: InDesign CS4 Flip Book Exported to SWF
                        Petteri_Paananen Community Member

                        Have you tried to use some Sample buttons? Theres lot´s of different arrow-shaped buttons which have been pre-programmed as next and previous page actions. Arrows that point to left is previous page and arrows that point to right is next page. You will find Sample Buttons panel from Buttons panels flyout menu...

                        • 9. Re: InDesign CS4 Flip Book Exported to SWF
                          bluffhouse Community Member

                          I haven't tried the sample buttons. I'd like to be able to figure out why, if I can create one button which works, why I can't create two. ;-)

                          • 10. Re: InDesign CS4 Flip Book Exported to SWF
                            Benjamin J Farnell Community Member

                            I too found the grey space very frustrating, but I eventually figured it out. (see - www.thetrouserpress.co.uk/sketchbook.html).

                            The colour and the size of the grey area can be changed in this part of the html file (see bold content):

                             

                            AC_FL_RunContent(

                             

                                      'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',

                             

                             

                            'width', '1024',
                                      'height', '500',


                                      'src', 'sketchbook',
                                      'quality', 'high',
                                      'pluginspage', 'http://www.adobe.com/go/getflashplayer',
                                      'align', 'middle',
                                      'play', 'true',
                                      'loop', 'true',
                                      'scale', 'showall',
                                      'wmode', 'window',
                                      'devicefont', 'false',
                                      'id', 'sketchbook',
                                      'bgcolor', '#ffffff',
                                      'name', 'sketchbook',
                                      'menu', 'true',
                                      'allowFullScreen', 'false',
                                      'allowScriptAccess','sameDomain',
                                      'movie', 'sketchbook',
                                      'salign', ''
                                      ); //end AC code

                             

                            Be warned though! The area around the document is the space where you can see the page turning outside the boundry of the document. (try setting it to the same size as your document and you will very quickly see what I mean.

                             

                            I can't help you with the other requests, but I hope I have been of some use.

                             

                            Ben.
                            • 11. Re: InDesign CS4 Flip Book Exported to SWF
                              Sherrick26 Community Member