One of the most memorable moments in my life is still the day I was taken through the Disney Studio in Sydney, Australia, by a friend of mine. I got to meet real animators, layout artists, inbetweeners and the whole crew that put together an animated movie. That friend, Steve Trenbirth ( after he finished directing the film “Jungle Book 2 “), and I, ended up starting our own animation studio “Mad Cow Pictures“, which he still runs today.
My biggest problem was that I couldn’t draw, …
Animation was what I loved, and still do. My biggest problem was that I couldn’t draw, but I could teach myself the whole production process , and any digital techniques I could find, to try and make myself useful in the animation industry, one way or another.
Flash made me Useful
When it came to animation, Flash was the application that came along and saved the day. Even though I couldn’t draw, I was quite good on the computer. So I grabbed this application and started animating, with artists supplying the drawings I required.
I stopped using Flash because of the iPhone & iPad
When it comes to interactive storytelling, in my opinion, you couldn’t go past Apples latest devices. iOS Interactive Illustrated Storybook Apps took storytelling to this amazing new place that combined a printed book, an audio book, a movie and a game. This was where I wanted be, and because the iPhone and iPad didn’t run Flash animations, it was time to move on to programming with Xcode and Cocos2D.
Can I use some old Flash Character Animations in an iBooks Author project?
Adding animation to an iBooks Author project is pretty much controlled by using the HTML5 Widget. Flash doesn’t export directly to an iBooks Author widget, but with the new Flash CC, you can now export your project to HTML5. Then after a couple of more steps, you’re ready to import your animation.
I have a piece of Flash animation that was created for sale on ActiveDen. Cute Bunny Magic, is 2 animated magician’s white-gloved hands, pulling a rabbit out of a hat. You can click here to see the animation running on the ActiveDen site. This was perfect for a test, it’s only a few seconds long, and it’s a looping animation, so it will just keep running.
Here’s how I imported my Flash Animation to iBooks Author
1. Export file to HTML5
First I opened open the Flash file in Adobe Flash CC (2014).
At this stage all I did was play the animation to make sure it was all OK, which it was.
The next step is to convert the Flash file to HTML5.
Go the the “Commands” in the Main Menu, and click on “Convert to HTML5 Canvas…”
You will get a box asking you to name and save your file. Do this and save the file. This will create a copy of your Flash file with the naming convention ending in “.fla (Canvas)”
In the “Properties Inspector” click on the “Publish Settings” button.
In the Publish Settings click on the Folder icon at the end of “Output File” to name your files and choose a destination. I named my files “Bunny-Magic“.
I just left all the settings as they are and clicked the “Publish” button.
Now, these 2 files are not enough to get you into an iBooks Author project. You need to add a couple of things first.
2. Add a “Default Image” as a Preview image
Create a Default, or Poster Image for your animation. I just took a screenshot of the animation. Name the image Default.png, and add it to the folder.
3. Add “info.plist” file
You need to add an info.plist file to control the assets. Click here to download the file.
It’s VERY IMPORTANT that you open the file in a text editor and change the “MainHTML” string name to your own html file name.
After changing the html file name, save the info.plist file and add it to the folder.
4. Create a HTML5 Widget for iBooks Author
You should now have a folder with 4 files inside.
When you press enter after adding the wdgt extension, you will get a “Are you sure...” message. Just click “Add” and your folder has now turned into a HTML5 Widget ready for your iBooks Author project.
Open up your iBooks Author project, and drag your new HTML5 Widget directly from your desktop on to the page. Make any adjustments to the look of the widget in the Widget inspector, and then Press “Preview” to view your animation in the iBooks app.
NOTE: Alternative with Adobe Edge Animate
If you have Adobe Edge Animate, you can skip the info.plist and default image steps altogether. Just open the Flash exported HTML file in Edge Animate and publish using the “iBooks / OS X” target. This will create a folder with everything you need. Just add the .wdgt extension to the new folder.