Please note that this site contains archival information. Adobe no longer supports the Edge Animate program. In addition, Apple has modified the way animations perform in the Books app which results in stuttering and other undesirable playback function using these techniques.
HTML5 widgets are placed on pages using iBooks Author. My example book, "Balloon ABC," is vertically oriented with a full page animation that plays when each page is tapped. One full page widget is placed on each page. Because this is a picture book, the first page is the chapter head. Subsequent pages are pages within the chapter. To the user it appears that it is just 29 pages without chapters.
To start, open the "layouts" section in iBooks Author by going to view/show layouts. For my book, I wanted to set up the "chapter text" layout and the "page" layout so there's a live area that won't be covered by the widget. A non-retina vertical screen is 768 pixels x1024 pixels. There's a 20 pixel header at the top of each page which is a "dead" area that contains information about the wi-fi status, the time and the battery status. If you make a widget at the full, "live" image area on an ibook page (768x1004), it is impossible to access the table of contents because the widget lays on top of the navigation and makes it inaccessible. One solution is to create a 20 pixel band at the top of the page. In this case, I made the band black and added the word "index." Now you just need to make sure the widget is placed below the index band. That way, viewers can access the table of contents by tapping the index band. I made an identical layout for "chapter text" and "page" to eliminate the impression that the book consists of chapters.
HTML5 widgets are placed on pages using iBooks Author. My example book, "Balloon ABC," is vertically oriented with a full page animation that plays when each page is tapped. One full page widget is placed on each page. Because this is a picture book, the first page is the chapter head. Subsequent pages are pages within the chapter. To the user it appears that it is just 29 pages without chapters.
Setting Up Layouts
To start, open the "layouts" section in iBooks Author by going to view/show layouts. For my book, I wanted to set up the "chapter text" layout and the "page" layout so there's a live area that won't be covered by the widget. A non-retina vertical screen is 768 pixels x1024 pixels. There's a 20 pixel header at the top of each page which is a "dead" area that contains information about the wi-fi status, the time and the battery status. If you make a widget at the full, "live" image area on an ibook page (768x1004), it is impossible to access the table of contents because the widget lays on top of the navigation and makes it inaccessible. One solution is to create a 20 pixel band at the top of the page. In this case, I made the band black and added the word "index." Now you just need to make sure the widget is placed below the index band. That way, viewers can access the table of contents by tapping the index band. I made an identical layout for "chapter text" and "page" to eliminate the impression that the book consists of chapters.
![]() |
The "chapter text" and "page" layouts were both set up to have an "index" band at the top |
Modifying the Widget
Now you are ready to drag the HTML5 widgets onto their respective pages and use the "inspector" to make adjustments to the widgets. This is what the page looks like when you first drag a widget onto a page:
Sizing and Positioning the Widget
Now go to the metrics inspector (the ruler icon) and set the size and position of the widget. In the case of my vertically-oriented book the widget was designed to be 768 pixels x 984 pixels. This size was chosen to take into account the 20 pixel header at the top of each page and the 20 pixel index band added just below the header (1024-20-20=984 pixels high.)
Pay close attention when you set the size and position of the widget. You are setting the size and position of both the animation and the default image, though this may not be apparent the first time you use the metrics inspector. The first time the widget is selected you will see selection indicators at the top of the widget but the "file info" box in the "inspector" will be empty. Avoid tapping the widget again with the mouse because you are setting the position of the animation at this point. In my case, I set the size to 768 x 884 and position to 0x and 20y, moving the widget down to expose the index band.
If you tap the widget with the mouse once again, the "file info" will display "Default.png" Now you are setting the position of the default image (the static image when you first come to the page). I wanted the default image and the animation to be perfectly aligned so if the settings are the same as before (768 x 984 at 0x and 20y) then all is well. If not, you will need to set those to match if you want the default image and the animation to be aligned. If the widget does not play at the proper position and size, I have found it's easier to delete the widget and start over rather than try to fix it by re-entering values.
Note that horizontal books would have a live area of 1024x748. As with vertical pages, there is a non-live 20 pixel header band at the top of each page. Again, a piece of the live real estate would have to be exposed so the reader can access the table of contents. Using a similar treatment as the vertical page discussed above, a band could be added at the top to allow access to the navigation. If a 20 pixel high index band is at the top of the page, the widgets would have a dimension of 1024x728 and they would be placed 0x, 20y (768-20-20=728 pixels high.)
Setup for a Horizontal Book
Note that horizontal books would have a live area of 1024x748. As with vertical pages, there is a non-live 20 pixel header band at the top of each page. Again, a piece of the live real estate would have to be exposed so the reader can access the table of contents. Using a similar treatment as the vertical page discussed above, a band could be added at the top to allow access to the navigation. If a 20 pixel high index band is at the top of the page, the widgets would have a dimension of 1024x728 and they would be placed 0x, 20y (768-20-20=728 pixels high.)
Proofing and Publishing
When all the widgets have been placed and positioned, the enhanced iBook could be previewed in iBooks on a Mac although enhanced ebooks are primarily intended for iPad viewing. It's best to connect an iPad to the computer and preview it on the iPad. Once everything is working, the book can be submitted to the iBookstore.