A while ago I developed an iPad app for an artist friend of mine, Tina Burke. Tina is a children’s book illustrator, but also has an interest in doing bird illustrations. As one of the features of the app, we wanted to be able to show each final image, but also on a few of the images we wanted the ability to click on the image and have it fade away to reveal the work in progress line art. You can see 1 of the images below, including it’s work in progress version.
An iBooks Author Widget that lets you click on the image to show the work in progress line work
Lately I’ve been spending a lot more time working with iBooks Author, and am in the planning stages of creating an Art Book for another incredibly talented artist, Chantal Handley, and was wondering if I could replicate the same feature, without the benefit of actual programming, in an iBook, and wouldn’t you know… I could. And it was pretty simple at that!
iBooks Author HTML5 Widget Tutorial
Step 1 – Create the Transition Effect in Hype 2
The first thing you need is the 3 images – the final artwork and the work-in-progress version. Plus the button image that will be clicked to make the effect happen. Make sure both main images are exactly the same size. I want mine to be the full iBooks page size so am saving my images at 1024px x 748px. Save them onto your desktop.
Open up the Hype 2 application, and in the Document Inspector set the document size to match your image size. Once again in my case that is 1024px x 748px.
Make sure to save your project.
Now drag the 1st image off your desktop and position it on the stage.
Go to “Scene” in the main menu, and select “New Scene”.
Above the Stage area you should be able to see both scenes. The original with the image in place and the new scene which is still blank.
Click on the new blank scene, and drag the in-progress 2nd image on onto the stage exactly as you did with the first one.
It’s important that both images are placed on the stage in exactly the same position. You can check this by looking in the “Metrics Inspector” and making sure the Placement is set to 0 for the Left and Top co-ordinates.
Now click back on to the 1st Scene, and drag the Button image on to the stage. Position the button where you think it works best, and take note of it’s position in the “Metrics Inspector”. My button is set at Left: 920px and Top: 680px.
Now do exactly the same in the 2nd Scene, placing the button at the same co-ordinates as Scene 1.
Making sure the Button image is still selected, click on the “Actions Inspector” (6th from the left, looks like a cog with a pointer over it).
Click on the “+” sign next to “On Mouse Click (Tap)”.
Then click on the “Action” drop-down menu and select “Jump to Scene”. 2 more drop-downs will now appear, “Scene” and “Transition”.
In the “Scene” drop-down, choose “Previous Scene”, because we are still working in the 2nd Scene, and when the button is clicked, we want to transition back to the previous scene, with the final artwork.
In the “Transition” drop-down, select “Crossfade” as the effect we want when transitioning between scenes. Set the “Duration” to 1.0s (1 second). You can play with this setting, but I find that anything higher is just too slow.
Go back to the 1st Scene and make sure the button image is selected. Make all the same settings in the “Actions Inspector” as you did previously, but for 1 important change. This time when choosing the “Scene”, make sure you select “Next Scene”, so you transition to the 2nd scene with the in-progress artwork.
That’s it, all done! Everything should be in place and your fade effect should work as it should. Let’s preview our work in the browser to make sure it’s all OK before we export to iBooks Author.
Go to “File” in the main menu, and go down to “Preview in Browser” and select your browser.
After the browser opens up, you should see your first image in place. Click on your button to watch the fade transition to your work-in-progress image. Now click the button again, to watch the effect in reverse.
After playing with the effect for a while, you can close the browser and go back to the Hype project. Once again go to “File” in the main menu, then down to “Export as HTML5” and select “Dashboard/iBooks Author Widget”. Save the new widget to your desktop.
Step 2 – Add the Widget to your iBooks Author project
Open up your book project in iBooks Author. Or if you don’t have an existing book project just choose a template to start with like I’m going to do. I will be using the “Photo Book” template for this example, but it really doesn’t matter. Once the template opens up, either delete everything on the first page that is open (Usually the Chapter) or just add a blank page.
In the top menu bar of iBooks Author, click on “Widgets”, then select the “HTML” widget at the bottom.
Now you should see the HTML Widget on the page.
Now drag the Widget you created and saved with Hype, off your desktop onto the “HTML Widget” in your iBooks Author project.
My widget was created the full page size, so my size and position reflect that.
Here is my widget in place in the iBooks Author template.
Now all that’s left to do is preview the completed work.
In the top menu bar of iBooks Author, click on “Preview”. A menu will drop down allowing you to preview on “This Computer (iBooks for Mac)” or your iPad, if you have it plugged in (which I obviously don’t at the moment).
That’s it. iBooks will open up and you can play with your new Fade Transition Effect in your iBook.
You can watch the end result below, or click here “iBooks Author HTML5 Widget Tutorial for Artists” to go to YouTube.
Is there any other iBooks Author feature or effect that you would like to see that would enhance an artists art book. Let me know in the comments below.