6 Replies Latest reply: Apr 28, 2012 6:33 PM by jeff4mac
jeff4mac Level 1 (0 points)

I'm trying to create a video in iBook's Author and create the same effect in EO Wilson's book (the earth movie).  I've figured out how to drop an image into a full-screen video, but the Play Button disappears, and the text does not wrap and follow the contour of my poster image (it wraps around a rectangle box).  My poster image (PNG) is a person with the background made transparent through the alpha tool.  Has anyone figured out how they did this in the sample EO Wilson iBook?

iBook, Mac OS X (10.7.3)
  • ZUOPENG Level 1 (0 points)

    You may get my sample to look, this is a clip. I don't know that if you need.  if yes you need to video editing on the iMove or other. Large size is 960x540 for iPad 2, I tried it.

  • ZUOPENG Level 1 (0 points)

    My eBook is Basics of Photography, you can get it on the iTunes.

  • jeff4mac Level 1 (0 points)

    That's great...  What I'm looking for is the technique to create the wrapped text image that launches a full screen video.  I've tried everything and at this point they either did it in HTML5 or its a bug in the software.

  • spudmachine Level 1 (30 points)

    Hi Jeff,

    I think I figured out how to do this and I'll try to explain it. I've sort of got this to work experimentally in IBA, but the only Mac I have is the one my daughter uses so I don’t get much opportunity to try this out :-) So from memory:

    The most important thing you need is a video in which one or more frames has a specific shape object. In the case of the EO Wilson video on Page 28 it's a circle - the Earth. I've got a video with a triangular shape, and you could possibly do this with any irregular shape, but it might be a bit fiddly.  I will refer to this as the “video shape”.


    On Page 28 of EO Wilson, the image you see is the actual video object – it’s not a snapshot with a “play” symbol pasted over it.



    Step 1:  Create a mask image with a transparent shape that is the same shape as your “video shape”.


    I used Photoshop for this.  Create a PNG image with transparency.  If your book has a white background to the page, start with a white rectangle that is the size of your video.  Create a “video shape” in the right place on the mask.  In the EO Wilson example that’s a circular shape that matches the position of the Earth in the video.


    If you use a program like Photoshop to do this it’s easy thanks to the Layers feature.  Take a snapshot of the video and use this to create the right size and position for the “video shape”.


    Fill the “video shape” with transparent colour and save the file as a PNG.  So in the case of the Earth movie the PNG would be a white rectangle with a transparent circle in the middle, and the size and position of the transparent circle matches the Earth on the video.



    Step 2: Insert the various elements you need on the page.


    Insert and position the PNG mask with the transparent “video shape”.  Send it to the back.


    Insert and position the movie.  In Inspector choose the “poster frame” to the place in the video that matches your “video shape”.  So in the EO Wilson movie the frame shows the Earth.  Send the movie to the back of the page.


    Using the IBA drawing tools, insert and position a shape that matches the transparent hole in the mask (a circle in the case of EO Wilson).  It doesn’t matter what colour this shape is because it’ll be hidden behind everything.  In Inspector set the text to flow around this object.  Send it to the back.  The only purpose for this object is to force text to flow around it.



    (Note if you follow this sequence the elements should be in the right z-order on the page, but sometimes you need to feel with the order to match the mask and the video properly, and then send them back afterwards. )


    You should be all set.  It might take some adjustments, but you should now see the text “flowing around” your selected “video shape”.  But it’s still a video object, and when you click on the play icon it will play full screen.


    Maybe you need to select “play in full screen only” in Inspector for the video so that it never plays "inside the mask".


    I hope this works for you.  I’m pretty sure it should, but like I say I didn’t really have a chance to completely implement this yet.




  • spudmachine Level 1 (30 points)

    So I now had a chance to finish this and I can confirm it works.


    One tweak is that the circular shape that causes the text to "flow around" should not be sent right to the back.  When I do this the text stops wrapping.


    I assune a "wrap" shape like this has to be in front of the text it is causing to wrap.  No worries - just go to Inspector and make it fill "none" and stroke "none" and it's invisible.


    Two other things I noticed:


    - When the video is "small" there is no "play" icon over the image.  I'm not sure why that is (maybe I toggled something...I'll check in Inspector for the video object).


    - When the video shrinks back (like if you pinch it when playing) it drops back to a small rectangle, seems to pause for a couple of seconds, and then "goes behind" the mask.  The transition back to the small video object is not as smooth as on the EO Wilson book.



    But until the people who created that iBook make a "Making of Life on Earth" movie I guess people like me with just have to take our best guesses at how they did what they did.




  • jeff4mac Level 1 (0 points)

    Yes, after my last post (rant), I figured it out as well.  What I did was start with a PNG image and removed the background using the alpha tool (in Preview).  Then I made this image the poster for the movie.  Using the exact same PNG, I brought that into the book as a stand alone image.  The text flows nicely around a PNG with transparent background.  I then put the video on top of the text by making it a floating object.  I then put the PNG image behind the "floating video" and the image now wraps around my video.  By the way I made my own play button graphic using the shape tool in IBA. The play button graphic needs to be in front of the video.  So I have these layers:


    1. Play button graphic in front (I made this to looks just like the apple default one)

    2. "floating" video with PNG poster in the middle layer

    3. PNG (same exact dimensions as the poster image) behind the video (forcing the text to wrap)  I also made this PNG 100% transparent, so it's only value is to force the wrapping.


    I tested this and it behave exactly like the EO Wilson book, so I think I've nailed the techique they used.


    The part that had me stumped was the play button.  I thought the program was generating this and it is obviously not.  They created a "fake" one to make it look like the other videos.