Research into animation used in a documentary

Animated documentary "Faith"

Looking at animation used in documentary, I have come across this wonderful piece that tells you of the story of his grandfather.

The first scene is a zoom out of a book, with the narration over the top, the movement is slow but works so well with the narration and visual design. I like how the depth of field works too here, everything but the book is out of focus.

The page turn looks very realistic and reveals items within the book which is also animated. I would like to mimic this effect as i think it would be a good way to introduce the book.

I like how the book has been placed on this background surrounded by lots of other objects. I t makes the scene more interesting and visually feels more real.

The book also spins around in 3D and becomes this pop out styled book with animated objects, the transition works really well.

The added clouds in the foreground and distance really enforce the 3d look.

Research into interactive documentary narrative

Storming Juno interactive documentary.

Stormig Juno is an interactive documentary for the web. It shows, images, video interviews within the documentary in which you navigate to by an interesting 360° menu.

The video starts with an intro video telling you what the story is about and what is to come if you progress further into the interactive piece.
I really like this intro video as they have used this central mask to pinpoint what the stories are about, there is not too much going on but you feel really engaged in just this small area.

For the intro video they have used a narrator who tells you what the interactive documentary is about, I really like this idea and will want to include it my intro video. It gives a clear idea on what the piece is about but remains engaging at the same time. The video is not that long only about 30 seconds.

Once the intro video has finished you come to this splash page, this page interacts with the mouse. When you move the mouse over the image it moves slightly back and fourth as well as adding to the interactivity.

The way you navigate from page to page is amazing, it's as if you are set within the scene, you can navigate around 360°. The scene is also set in 3d, there are layers on which the the closer things are on layers closer to you and ones which are further away.

I think that it would have been made like this where each layer is 360°, the closer the object the closet it is to the center.

Around the scene there are dots in which you can click and which take you to a specific scene. I think that you may miss content this way as you can easily miss the points to click and possibly forget which ones you have clicked. However the points are quite obvious but do not detract from the scene. I quite like this idea as you can have more information in a smaller area.

If you click on the points you are taken through the scene and weave in and out of objects, It would have been easy just to create in instant jump however, the designer has thought about it and made it more interesting for getting from one scene to another.

The page that appears after you have clicked on the points takes you to interviews with the people who are to do with the button you clicked. It has a similar style to the splash page where you could move the mouse and the page would respond. The broken tile effect works well with the video content. If you were just to have videos sat on top in standard rectangles it would deter from the visual style and not work as well as it does here.

When the videos are hovered over a green halo appears around them as well as more information. Having information appear before you may click on the video can give you an insight to what the video is about as well as introducing the person in the video.

Some of the videos feature images that come up as they are talking, this gives the audience something else to look at while listening, it can also be used to show exactly what the person is talking about.

The videos use multiple framing's of the people who are being interviewed, usually when there is more emotion the camera is zoomed in more and the person is larger in the frame. 

For the video interviews extra options are available from looking at their biography to more photos and turing subtitles on and off.

A small touch is the back button, when rolled over the image changes and makes a noise, its i nice added touch.

I find this interactive documentary a very useful piece of research, i like all the little features like the moving back button and having a large image in which there are points to click which take you somewhere else. Also the way that the menu has been created by clicking on certain events/objects.

Animation Research

For my animation I want to try some 3D objects within After effects, I have found that you can export models from google SketchUp and import them into photoshop and then into after effects (cs5.5) ae cs6 does not support photoshop 3D images anymore.

I really like this animation, the movement is really simple but so effective and really works with the imagery. The transitions used also look as if it is an animated story board that comes to life through the animation. Being able to draw would be a very key element in a animation like this, but i really like how they have animated it, like the small added touch of a bounce when the fire place and plant flies it. (26 seconds in)

Going back to using 3d models I quite like the use 3d planes. Once I have decided on my story completely I will be able to go more into looking how to create something like this:

The person who created this used Cinema 4D and after effects, I have used C4D before but would like to use it again, the movement would be quite simple to replicate and with the cameras in C4D i could easily add some panning shots etc.

A video i saw IMedia was one on video copilots site where the camera would start out above a street and zoom out to reveal the entire earth. This is something that i could see working for something like a map.

For my animation i want to use more photos/3d rather than trying to draw something, I want to go for more of a realistic look and feel which will tie into the skeuomorphism look I am wanting to use.

IPad Technologies

http://tinyurl.com/buzp3nf

As the Ipad 3 has a retina display I could potentially make my IBook 2048x1536 at 264 ppi, using this size may/will potentially look a lot better on the retina ipad, however users using an Ipad 2/mini will have to download a larger file which will show no increase in quality. The size difference would almost be 4x the size as a non retina version (1024x768 132 dpi). This size increase is quite extortionate and as it will only benefit retina display users I am still wondering if i should go with the smaller (non retina) size as it will mean the IBook has a smaller file size and images with load quicker on all devices.

Using a test image I will see how file size, screen resolution image quality displays on the ipad 2&3.

Left non retina (756kb) / Right retina (2150.4kb)
By enlarging the image we can already see the difference in quality between the two.

Non retina 

Retina

The file size of the retina version is 2.7x more.

I have placed each image into the Ibook then exported it to IBook's format.

We has the non retina image come in at (756kb (0.7mb)) and the retina image some in at (2150.4kb (2.1mb)) 2.7x increase.

If we look at both the exported book's the file size it very similar, I did not think that they would increase/decrease so much. The non retina version increase size where as the retina version decreased, this is telling me that there is a degree of compression during exporting to ibooks.

Out of interest I created a book with both images, File size was 1.8mbOut of interest I created a book with a blank page, File size was 928kb
non retina image + blank ibook = 1684kb (1.6mb) actual size: 1.2mb
retina image + blank ibook = 3078.4kb (3mb) actual size: 1.5mb
both images + blank book = 3834.4 (3.7mb) Actual size: 1.8mb

In conclusion both images have been compressed but the larger image has been compressed a lot more. I cant really see any correlation between the files apart from a 300kb increase.
For this experiment i think that the images have been compressed to 300kb (non retina) and as the retina image is larger it comes in at 600kb (2x larger)

When exported to my ipad 2 there is a very slight increase in the time it takes to load up the retina image compared to the non retina image. However without actually looking for the delay you would not realise.

Exported Ibook:

Looking at the images simultaneous on both the Ipad 2 and Ipad 3.

I tested out this flower image on both the ipad 2 and 3. Looking at them side by side I could really tell that the IPad 3 had a much better screen: The contrast of the images was a lot more vibrant. However looking at the actual quality, I and others could not see a great deal of difference between the actual pixel quality of the images.

Therefore I have come to the decision to make my IBook PSD's at 1024x768 at 132 dpi, which is the ipad 2 resolution.

Ipad 2

Ipad3

Custom widgets.

I have looked up some custom widget apps that can be used within the ibook author app. IBooks will only accept html 5 widgets so no flash etc. I have found a website called Bookery which creates custom widgets outside of those used within the ibooks author app.

The site has a lot of useful and customisable widgets such as a youtube widget a time line widget and a 360° panorama widget. I also like the idea of an in built browser widget within the ibook. This means that the user would not be taken away from your Ibook if you wanted to link to an external page.

Another app is called hype. Hype is similar to flash although less advanced but uses HTML 5 animations instead meaning that it is fully useable within the IBook. With this app I could create a timeline feature, small interactive games/widgets.

http://tumult.com/hype/gallery/

IBooks Author

Layout

Front cover - 768 x 1024px - Can remove all existing content from front cover

Opening video/image - Auto plays on opening the Ibook - M4v 

Table of contents - Has all pages preset to the bottom of the page as navigation - Can remove everything except bottom page navigation.

Glossary 

Page structure - Chapters with sections in them

Widgets

Video has an option to play full screen only

You can remove all titles, captions and backgrounds - If the title is removed linking to the object/widget  does not work.

Gallery with/without thumbnails 

M4v video - Can play within the IBook or full screen only

Large selection of quiz type widgets - Multiple choice,
image choice etc.

3D models can be moved by the user .dae files 

Large images can be placed with tags which zoom into the image and which the user can navigate around. 

Images with captions when clicked - Can contain images - IBooks v2

Scrolling text - Can contain images - IBooks v2

Audio files - Button

Audio files - scrubber bar

Audio files - Click on image 

Limitations

No auto play

No page turns

After having a play around with IBooks author I have found that there are quite a few limitations, mostly because this is a new software. Due to this I will need to find ways in which to overcome these limitations. One main one is that PNG's with transparency cannot be used to frame widgets. Which was one of the things that i wanted to do.

Framed with transparent PNG 

When on ipad the widget comes to the front