1. New Software Notice alert!

    The new Web Graphics Creator (version 4.0) will be out soon.

    For now, version 3.0 is still active and works great on most Windows machines. It no longer runs on Macs using Lion or greater... (but the new version will fix this)

    So hang in there! It's almost done!

Getting your hands dirty

Discussion in 'Web Graphics Creator' started by PhilE, Jul 2, 2007.

  1. PhilE


    Trophy Points:
    The Flipbook

    Plaese note that some of the following have already been highlited in this forum. I've not had the time to go through the whole forum from end to end so I appologise if the solutions I offer are repeats.

    OK. Lets get a couple of moans out of the way first and then give you a couple of solutions for getting around them without breaking any copyright laws :0)

    1. Do not clear the initial graphics out. If you do you are liable to get script or other errors.

    2. If you use jpg files do make sure you use rgb mode when you create them. If you use cmyk or other modes you will end up having black pages. This is not a progran fault! Flash itself does not like them.

    3.There is no way within the GUI to:
    • Save or load a project.
    • Change the order of your pages
    • Delete a single graphic

    4.If you don't use the 'flip on click' and/or the 'always opened' options then you cannot reopen your book once you have closed the front or back cover.

    5.You cannot have a book more than 999 pixels wide. Why would you? I here you ask, well on my intranet I do. That's all I can say.

    6. Your SWF file is always called 'MyFlipBook'.

    Right, enough moaning, prepare to get you hands dirty. The main code that is used for the page turning ie. the SWF file that does all the work is great. The problem arises from the user interface. To overcome these problems we only have to delve into the HTML and the XML files. For those of you that already have, you don't need to go any further you have already worked it out for yourselves.For those who haven't, IT'S NOT DIFFICULT honest.

    If you look at the structure of the directory you saved your files to you will find the following:


    the directories
    Book_Images (with your images)

    To start: create your graphic pages (jpg files) for your projects, just 4 will do fine and. load them into the program and make sure you choose 'flip on click' and 'always opened'. don't worry about sizes etc. Create your book.

    Go to your project directory.

    I rename my template.html file and erase everything between the <body> tags in apart from the following:

    <div align="center">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="827" height="587">
    <param name="movie" value="MyFlipBook.swf">

    <param name="quality" value="high">
    <param name="flashVars" value="xmlConfig=config.xml">
    <param name="scale" value="noscale">
    <param name="bgcolor" value="#FFFFFF">
    <param name="wmode" value="transparent">
    <embed src="MyFlipBook.swf" wmode="transparent" width="400" height="200" quality="high" bgcolor="#FFFFFF" flashvars="xmlConfig=config.xml" scale="noscale" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>

    Works for me.

    To change the name of your swf file:

    a. Right click on your swf file and rename.
    b. In your HTML file change the <embed src="MyFlipBook.swf" to the name of your SWF file.​

    To size the animation:
    Open the xml file and change the following line to reflect the sizes you want:

    <width> 827 </width>
    <height> 587 </height>
    <scaleContent> TRUE </scaleContent>

    Don't forget to have the scale set to true if these sizes are different from your original graphics.

    go into your html file and do the same for the sizes in there.​
    To add/delete/change the order of your pages:

    Go into your Book Images directory and add or delete your files. It does help to keep your naming to 01,02,03 etc starting with 01. It also helps to keep your filesizes small and your Hight/width the same for all of your graphics/swfs.

    Now open your config.xml file and change the list to reflect your list of graphics. This is also the order in which they will appear:

    <page> book_images\01.jpg </page>
    <page> book_images\02.jpg </page>
    <page> book_images\03.jpg </page>
    <page> book_images\04.jpg </page>


    To get around the non opening front and back pages:

    This all depends on odd and even pages. If you have an even amount of pages:
    Create a blank page to match your webpage colour.
    Save it as 00.jpg and (in the case of the above code) 05.jpg.
    If you have an odd amount of pages I suggest you create a back page graphic and add to the end of your list.

    Add the new pages into your Images directory and to the top and bottom of the list in your xml file.

    Because you are using the 'always open' option these two pages will remain static and blend into your website. Your book will work as normal.​

    If none of this is new to you then I'm sorry to have wasted your time. If it has helped then all the better.

    You can control just about anything from the xml and html files. Don't be afraid to play.

    I have two config files allowing me to have two different sizes of book called from the html file using the same swf file. By using <div> and visibility you can switch between them. But that's another story.
  2. PhilE


    Trophy Points:
    Demo at Systems Flip Book
    I've used a wooden texture for the first and last pages so that you can see them. Use coloured pages or white to blend into your web page.

Share This Page