New transition

A few posts ago I was experimenting with masks and morphing in After Effects. It was useful to learn how to do it but in the end the look is not right for this film. One of the great aspects of making this project while at St Joost is the feedback you get from fellow students and lecturers. I showed my morph to a couple of people and they agreed it didn't quite fit the overal look of the film. A fellow student Jonas suggested a neat solution which I was keen to try out and I now think this is the way to go.

So now in fitting with the hand made lo-fi look of the film the Mothers hand acts as a whip to reveal her husband.

Hype

Further research and another meeting with Michel from St Joost to talk about Hype and I have decided to go with this software. I explained to Michel what I wanted to do with the flow charts posted in previous blogs and Michel confirmed for me Hype was an excellent choice. He reasoning being that very quickly he could teach me to use the program to make simple actions I wanted to preform with very little knowledge of website building and no code knowledge. So within half an hour using two short 30 second test movies and a jpeg file acting as a menu we were able to create two invisible buttons that directed the user to a each film which would play in the browser.

The program reminds me of DVD Studio pro so I could easily navigate around it and preform the steps needed to make this simple test. With options such as looping a movie or having it automatically play in the browser or jump to another menu I can see that very quickly I can make Hype do the basic steps I want it to do.

To move forward I will need a domain name and a hosting site to upload my files to. At this stage I will use the St Joost site to make tests before I launch the site and go live. But before all that happens I need to finish the film!

Some of the other customisable options I would like to add is to making my own loading icon. Tumlt lists in their forums how to do this. There is a nice link to a pre-loader icon maker called spin and a nice simple bit of code to add. So even know I am choosing this program because I can used it with out code I am still willing to do a bit of code dabbling to maximise the web experience.

Morphing in After effects

Today I am testing how to morph one photograph to another using after effects. This is for the part in the story where the Mother character imagines the photograph of the US army officer in the Sydney Tribune turning into her husband as she remembers him and misses him. I found a simple tutorial about morphing and have set myself 2 hours to experiment.

The photo I am testing with is not of an Australian officer but I like the pose very much so I will later transpose his head and uniform with another face to become my character.

UK Airforce officer from WWII

The photo I want to use as the image in the news paper that reminds the Mother of her husband is by a Dutch photographer  from whom I need to get copyright permission to use this photo also.

After a couple of hours I have a test morph. It looks a bit made by a computer at the moment so it will take some more brain storming to achieve the look I want but this was a good exercise to learn how to make a simple morph with After Effects using the replace mask shape effect and the opacity levels.

It felt a little strange to paste out the US solidier out of the photo considering the controversial nature of there involvement in the war and transpose him with a British man from the 2nd World War. I am very conscious of the real life people's stories I am working with when making this film and I really don't want to offend anyone with my creative interpretation of this real life document.

Animation test with sound

The last month has been spent mostly at the cintiq work station drawing and I can now say that I am one third through the film. Nearly all the scenes need some finessing and some of the backgrounds still need to be shot however I am pleased at the overall result. As the days disappear as I lean over my drawing station I realize I have been a bit quite on the blog of late so I thought it might be nice to post a little sneak preview of how the animation is shaping up.

Researching HTML5 to use as a platform builder

Today I am researching HTML5 and how it might be used to build a platform on the web for What Love Sounded Like. 

The main reason behind putting What Love Sounded Like on the web is to utilise a interactive platform that can expand the story further. Assets such as additional photographs and background information relating to the characters in the film which can give the audience/users a richer experience and highlight the documentary elements in the film.

Short film and possible assets

The above diagram shows the 4 components making up one episode of What Love Sounded Like. A short film has a beginning middle and end. An interactive platform brings new elements to story telling and raises questions as well as possibilities.

Questions like;

• will a story begin straight away or does the site require interaction to start

• how will the audience choose which episode

• can they click ahead to another story or other additional material

• how will I monitor and test audience participation to make sure my story architecture and structure is working at its best

possible website flow chart

After a story has finished playing or the film has been skipped a submenu appears. Below are two examples of how they might look. The audience is asked if they would like to know more about the author of the recording. In the case of 'Just The Two Of Us' the author is 'unknown' and in 'Please Hold The Line' the author is 'Howard'. The red arrows indicate how parts of the image will be animated.

possible sub-menu for Just The Two Of Us

possible sub-menu for Please Hold The Line

So now I have the basic asset ideas and structure. Which platform builder should I use? I have little experience of website building and no code writing knowledge so I will need a program that does all that for you. Website editors often have a WYSIWYG (What You See Is What You Get) function which is important to see what you are doing as you build. Which brings me to Hype. I am interested in Hype as it a WYSIWYG application that allows users to program events to occur in sequence or after user actions like mouse clicks and doesn't require code knowledge.

Here are some pros and cons:

Pros

• HTML5 by default
• Timeline features to animate the page
• browser checking support with problems highlighted when chosen
• no coding required
• user friendly
• affordable
• technical support from St Joost (Michel knows how to use it)
• free trial

Cons

• HTML is not 100% valid in all cases (although Hype website says it supports most devices) 
• No upload
• No forms, tables, or e-commerce
• no text editing

At this stage I think the pros out way the cons for Hype. First of all because I dont need to know code and I have experimented with the program and it seems something I could work with. I think HTML5 interactive abilities out weigh the fact that is not 100% used across all devices as it is more valid then Flash for example. I dont need ecommerce and while I first thought I would like to invite the audience to upload their found audio I think this could potentially become too much for me to manage on my own over the life of the project. The no text editing function is not ideal as I want to have a subtitle option however I think there might be another way to include text in the actual video as a work around for this. The user could also have the choice of turning the sub-titles off if I load a video asset with no text embedded.

Another no-code WYSIWYG web editor I am considering is Website painter. 

Pros

• clear instructions
• affordable
• drag and drop building
• supports e-commerce
• free trial

Cons

• traditional menu layout

The main con for me is the traditional menu layout. I am not sure I will be able to create the design I want by using this program but I will download a trail to experiment with.

Another no-code WYSIWYG web editor to look at is Freeway express.

Pros

• drag and drop building
• supports comments
• track visits with google analytics
• supports
• e-commerce
• free trial

Cons

• express doesn't support HMTL5 and full version is 3 times the price of Hype and Website painter.
• traditional menu layout (but may be more flexible compared to Website painter)

While there are a lot of website editors  to try it can take a lot of hours to work out the best one for what I am trying to do and I dont want to waste time trying programs that will not do the best job in the end or take too much time for me to learn. I think another meeting with an experienced user like Michel at St Joost will help me decide on the best no-code web editor now I have the assets and basic structure to work with.

Museum Next

Interesting and relevant talks are happening this week in Amsterdam at the Museum Next conference. I can't make it there but I will use the website to do some research on some of the speakers and the museums they represent.

www.museumnext.org/

One of the interesting talks in the schedule to look at which might have some resonance for my project :

Crowd Sourcing; The Story of Amsterdam

This presentation tells the story behind the Hart Amsterdam Museum community showing how the Amsterdam Museum connects the stories that are collected in the neighbourhood sites and story sites to exhibitions, on the web on the Hart Amsterdam Museum site and in the Museum.