The Story Behind an Interactive iBooks Publication
Abstract: As a final project for Immersive Authoring, we were put into groups to create an interactive publication using iBooks Author. The group I was in included two other people besides me. Their names are Kylee Apple and Ichika. I took the roles of asset creation and assembling the iBook into its final form.
The Problem
We worked as a team to create a cohesive and interesting publication that we could share with others. This included coming up with an idea to base our project on and a way to bring all of the information together in a way that people would be able to understand and enjoy.
The Objectives
- Find a topic that three people agree with.
- Come up with what we would cover within that topic.
- Assemble all of the research into a digital publication.
- Make the project interactive with different forms of media.
The Process
I started by finding things I wanted to create that coincided with my group’s interests. I asked my group what they liked; they listed fashion, gaming, and animation. After discussing different topics within those parameters, we agreed upon Studio Ghibli, a Japanese animation studio.
The next time, we met as a whole group. We discussed the parameters of what we wanted to accomplish.
- Pages about the movies
- Pages about the characters
- Pages about Studio Ghibli
We were initially going to include five more movies and their characters but decided to remove them to avoid overwhelming ourselves. We narrowed the selection down to the three most recognizable. These included Kiki’s Delivery Service, Spirited Away, and Howl’s Moving Castle. We began creating sketches for what we wanted to do. My original sketch contribution was this.
What I wanted to do was have a section dedicated to explaining Studio Ghibli, a page about the movie containing an image and the description on a single color background, which would then transition to a sizeable in-width image shown across the character pages, with the characters, descriptions and video clip above that image. Then, an additional page with the songs from the movie on that. When I met with my group, we reiterated and finalized this version.
This idea separated the movie pages and the character pages into individual sections and defined the character pages. We both agreed it was an excellent way to go.
I continued sketching and planning out the individual pages.
The plan included the entire layout of those pages. The movie page would consist of the movie poster, a description, and either the trailer for the movie or the more recognizable songs from the film. The character page would include a hype widget of the character, the character’s characteristics, and a video clip about the character.
Next was getting all the assets required for the final turn-in; this would be pretty easy since Studio Ghibli is an animation and movie production company. Animation has a large amount of visual content. However, much of the content I wanted to find was not accessible online due to copyright infringement. This was mainly for the character images. I plan to get pictures to which I can add transparent backgrounds.
Using Adobe Premiere Pro, I captured the images I wanted to use. These images came from my personally owned copy of the three movies. However, getting the movie files to be accessed by Premiere Pro took some finagling. I searched for a while to find a program that would download the content from the DVD to my computer. I ran into a program called AnyDVD, which gave me a month-long free trial to download the video files.
I hoped to use those video files to create the video assets for the character pages; however, the audio did not transfer to English.
My group, specifically Kylee, was able to gather most of the videos necessary for the character pages. The next issue I ran into while getting these images was that they had artifacting when expanded in size. I went back to the video project files in Premiere Pro and exported them in bigger frame sizes, which solved the artifacting.
The next task was cutting out all the characters with transparent backgrounds. Using Adobe Photoshop, I used the quick selection tool, selected the subject, and added a transparent layer mask.
This process took some time to accomplish. The select subject option didn’t select everything correctly. Using the quick select tool, I added and subtracted content from the edges of the running ants. When the layer mask was added to the image, it made the edges pixelated or showed the background. I did this process for 90% of the character images.
The next step was adding the images within Hype 3 to create animations for the final product. Kylee accomplished this task.
Within iBooks Author, I tested out how all the interactions worked. I knew how to add images and videos, but I didn’t see how the table of contents worked, how to add audio, or how to link items to different pages. I looked at the program and used Apple tutorials to figure these things out. I couldn’t implement what I found through the tutorials, so I went on to create more assets.
On the character pages, I still needed the hype images, character bios, videos, and page transitions. Kylee was making the hype images, I had asked Ichika to work on the character bios, and Kylee was finding the videos. I just needed to create the page transitions.
Using the same color as Studio Ghibli’s branding, I made an Adobe Illustrator file that was an eighth of the iPad screen size, then added the character’s name on top of it. I found a serif font that matched the Howl’s Moving Castle poster font and used it. It is called Linux Libertine G.
I later added the Japanese characters with Ichika's help finding the character bios, which she included in both English and Japanese.
Later, after I had looked at the iBook file, I noticed that the transition wasn’t quite what I wanted. I made another Adobe Illustrator file half the size of the previous one, minus the character names. I then inserted the graphic on the opposite side of the page. It made the blue transition from one page to the next.
I then began working on the chapter artwork for the character pages. I looked online for Studio Ghibli characters and found the image for the cover and chapter artwork.
I moved on to the Movie pages. The layout had been preplanned in sketch form. In iBooks Author, I needed to add the movie posters, the synopsis, and the audio files. I already had the synopsis for each movie so I inserted the previously written content. Then the movie posters. Those were easy to find on the internet using Google. Next was the audio files. Those took more work to find. The song titles were different on youtube.com, and quite a few of the songs were unavailable due to copyright infringement. After getting all the song titles off the internet that I could, I went to the iTunes store and bought the two I was missing and wanted to use. Putting all of these things into iBooks Author was easy. I only ran into a slight hiccup when adding the songs. I had created a play icon to be used instead of their standard icon, but the sizing wouldn’t adjust small enough. Instead of my own design, I used their icon.
On each movie page, I added buttons with the individual character’s names and had them as a link to the character pages. They used the same font as the character sidebars and transitioned between two colors so you could tell that they were individual buttons.
The movie pages chapter artwork consisted of the actual title from their DVD cases and movie posters. They were put onto a black background and edited together into a single image.
I needed images of Hayao Miyazaki and Joe Hisaishi for the About Studio Ghibli pages. I quickly found those images. I had already decided to use the Studio Ghibli logo for the chapter art. I found a transparent picture of the logo and then added the color background I had implemented for the character page transitions.
I also used this image for the table of contents artwork.
I had some difficulties adding this image to the program within the table of contents. It was created in Adobe Illustrator and Adobe Photoshop.
I made it with a mixture of JPEG images and a vector file. The vector file was the black timeline, and the images were poster images cut to showcase only the characters shown on them. After creating the vector timeline and cutting out the images, I put all the files together in Photoshop using a new document sized 2048x1496. This measurement was given to me by Michael Harper a professor at Utah Valley University, it was the correct sizing for iBooks Author. This new document had these items placed in it, plus an image I had taken as a screenshot of my iPad to find the correct sizing for where to put the items.
I put the images where they went and uploaded them onto iBooks Author. The act of uploading the images is where I hit a problem. The image, at full size, cut out some of the content. I noticed that the image insert box was half the size of the area shown on the table of contents page. I tried something. Going back into Photoshop, where I had created it, I took the whole image, and using the transform tool, I squished it down to half the width of the original page size at 1024x1496.
I saved that file as a .psd because you can add those into iBooks Author and put the image into the program again. It fit the space without cutting it and was just a simple matter of extending the image to the full page width. The images looked the same as they did with the original image, and the vector timeline lined up where it was needed when exported to an iBook.
The table of contents page for the characters was the simplest to create; it had a blue background plus ‘characters’ written large and in the center of the page. One about the things on the table of contents pages that was unchangeable was that the page numbers have to be in the same spot on every page, luckily I had an empty space on all pages where that could go. It was on the top right side of the screen.
The next thing was finding the opening video. I started searching for videos of the characters on YouTube because I needed clarification on what my groupmates were accomplishing for the project. I had already found the videos for Kiki and Jiji when Kylee walked into the classroom and explained that she had already seen and started working on this part of the project.
While searching for those videos, I ran into this video: https://www.youtube.com/watch?v=52raDbtNpa4&t=502s. I loved the beginning section of the video and decided to borrow it. After downloading it, I again used Premiere Pro to edit some clips together using the content from the video. The first 32 seconds of the video and audio were used straight through. The rest were clips from the video, and the audio was one of the songs I downloaded for the movie pages. I put them together in a pleasing way, which ended up being the introductory video.
My edits include a transition that doesn’t sound the best, but I still like how it turned out. I also had to export the video again to constrain the file size.
I received the character videos from Kylee. I put them into iBooks Author. It was at that point that I noticed a few that were missing. There were also some with not as good of quality video. The two that were missing were Jiji from Kiki’s Delivery Service and Zeniba from Spirited Away. I found Jiji’s on YouTube and put it straight into the project. Zeniba was a little more difficult. Kylee had looked for it but couldn’t find one. I found a download of Spirited Away, and using that video, I found all the clips of Zeniba from the movie and found the ones I wanted to splice together to make a little clip. It was pretty short and just explained why she looks like Yubaba.
The other videos that I thought were of bad quality, I first asked Kylee if she wanted me to find a different video. She gave permission. These two videos were Calcifer from Howl’s Moving Castle and No-Face from Spirited Away. I had both of these movies downloaded on my computer, so I did the same thing as I had with the character Zeniba. I found all the clips relating to those characters and choose the ones I wanted to use. Calcifer was the easier of the two since I wanted a certain scene and just used that. No-Face took some more effort because I wanted to showcase more of his character. I wanted to show so much that I didn’t use my time as effectively as I should have. The video clip went down from a four-minute video to a 30-second video. Once those were done they went into the iBooks Author document.
The final thing I need to cover is Kylee's Hype 3 files. She originally made them into GIFs. When tested in the iBook file, those had a black band around the outside, and they also showed in front of the other items on display. I explained the problem and gave her an image of what was happening.
I requested that she save them as an HTML file. She gave me those and they would not go into the program. She then figured out the proper way to give them to me but only one transferred successfully. I didn’t know what to do, and she didn’t either. After some internet searching, I found a tutorial that explained how to use the zip file to create it into a widget. This tutorial came as a video and a website. The website had certain assets needed for this to function. The video is https://www.youtube.com/watch?v=MfVZLa0Oeo4 and the website is http://kinetic-media.com/get-html5-working-inside-of-ibooks/. This is what the original folder looks like.
The image below displays how it should look to function correctly.
The steps between the two were as follows.
- Add the info.plist into the folder
- Rename the .html to index.html
- The PNG image is required; it will not work otherwise
I did that process for all the hype files. Some did not work correctly, and I don’t know why. The Calcifer one wouldn’t work, so I substituted it with the original GIF version. Kiki and Jiji also would not work so I remade them. Then Yubaba and Zeniba went into iBooks Author, but the content wasn’t there, so I remade those completely. I told Kylee, but she didn’t respond in time, so my remade files are there.
Testing
The final item to tackle is testing. The Ursula button at the bottom of Kiki’s Delivery Service movie page is not working, the Zeniba button is also not working. The text slider boxes need to be adjusted in their sizing. The sizing of the Ursula widget can be bigger so can the rest of Kiki’s Delivery Service characters minus Jiji. The very first page needs a size readjustment. I was also told by Ichika that the Movie chapter image has a different order than presented in the iBook. Which I plan to fix. Most of these items are nitpicky, all the more important things are working properly.
I have fixed these issues and will show you the adjusted image for the chapter page.
Outcome
Below is a video of the final product.
What I learned
Gathering all the assets was the most challenging part of creating an interactive publication, but seeing it all come together was the most rewarding. In terms of the group I was assigned to, I became the leader and had to keep the group working to meet the deadlines that were assigned. It was a complex but rewarding experience that taught me I can lead and make a good product.
