Progress so far

There are a few glitches and timing issues but here's how it looks so far:
http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_index_05_dracula.html
I got some help from a lecturer adding int the flocking algorithm  and it works quite well apart from one part in the animation, the bit that slows down because of a filter used on a movie clip. I have to remove that and use something else.

One month to go

I’ve been trying to resolve some issues I’ve had with my mouseOver event on the home page. I’ve been using code snippets to add some interaction to the main image. The eventhandlers didn’t work because I had not used a bind method. I got some advice from people on Stackoverflow to include ‘on’ and ‘off’ instead of using ‘addEventListener’, the event handler assumes the scope o the object that dispatched the event. I’m playing around with this as only one of the movie clips plays properly so I may need to use the binding method anyway.

The Windup Girl

I’ve decided to take a slightly different approach to animating The Windup Girl. Dracula acts as more of an intro to the book, with the Windup Girl I want to animate an extract from the book to see if it’s something that could work on website or for eBooks. I want to include some simple user interaction that would take the user from one paragraph to the next.

Home Page

I think my animation is pretty simple. I will have to write clearly how and what I’ve spent my time doing. By trial and error, I’ve figured out how to make certain things work and what hasn’t worked so well i.e masking and filters on movie clips. I’ve decided to spend the day working on the home page. I’m still aiming to work on three books–Dracula, The Windup Girl and Peter Pan, if I only manage two I think my write up will have to explain why.

Boids

Adding the Three.js with my flash document is proving harder than I though. The animated birds freeze when I try to add the two elements together. I’ve tried placing the two elements at different z-indexes but I think it’s something to do with setting a time out button, I’m not sure.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_canvas_geometry_birds_riona1.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_05_Dracula/rnb_kt_index_02.html

Website

Once I was happy enough with the animation I brought it into the website. I had some work to do on the website such as including links and changing the home page. If I only do one book I’ll have to take change it again but that’s something I have to ask my supervisor about.  I also began including boids. I had thought about this for some time. There are some effects such as fog, clouds, rain which would add greatly to my project. I had looked up Mr. Doobs and GitHub for some code to use. I found the code for the flocking algorithm used on the Arcade Fire website http://www.thewildernessdowntown.com/ and thought if I could at least get one of these elements into the project that would make it from being just an animation you look at to something the user can interact with. Also, if I can get this working it might open the doors for the other effects mentioned above.

http://playground.eca.ed.ac.uk/~s1364534/Dracula/rnb_kt_index_04_index.html

http://playground.eca.ed.ac.uk/~s1364534/Dracula/rnb_kt_canvas_geometry_birds_riona2.html

Timing & tweeking

There were certain elements that were too fast and too slow so I spent some time watching the animation and jotting down the time elements faded in at. I looked back at other film titles such as ‘Catch me if you can’ to see what their timing was like, if I had enough time to read the text and how long it took for elements to appear on the screen. I had to do some adjusting but noticed that masking and blurring filters affected the timings no matter how many times I changed them.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial8.html

More animating

I originally wanted the bats mouth to open, showing sharp fangs but in order to simplify and push ahead with the project I just faded the screen to black and illustrated the fangs at the top of the screen. This is something I might come back to if time permits but for now it will do. I continued on animating blood dripping from the fangs to create the word ‘Dracula’ which would then fade to red.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial7.html

Masking and morphing in Flash

There is a piece in the captain’s log when the captain first catches a glimpse of Dracula, “I saw it, HIM”. This is a pretty scary encounter and the words alone make you question what form Dracula was in. When the ship first docks at Whitby harbour, the only thing that is seen leaving the ship was a beast in the form of a dog. I decided to morph the words “it” and “him” into a dog. Because Dracula is more famous for bats I then morphed the dog into a bat that flies directly at the camera/viewer. Shape tweening wasn’t working as well as I wanted it to, even when using shape hints. I think if I’d morphed one letter it may have worked better but morphing words, with open spaces in ‘e’ and ‘a’ caused a lot of problems, so I morphed the ‘HIM’ into a dog using frame by frame animation and then masked the bat so it appeared on top of the dog and as the bat flies towards the screen the dog faded out.

I was also concerned still about canvas sizing and didn’t want to go too far without having that sorted, I emailed my supervisor and asked for some suggestions about size and he advised on 16:9 ration to get that cinematic effect.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial6.html

Fog and filter problems

The captain at the beginning of the Dracula story logs details about the fog, I was hoping to do this using ThreeJS but was having difficulties getting the fog and the canvas stage working together so I decided to continue with flash and try to do it later. Applying masks and blurring filters gave me some warnings when I published it but it worked to a certain level, it caused some delay and I noticed a shift from a smooth vector shape to a pixelated one. This is something I’ll go back to, for now I want to complete the animation and get it working on the website.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial5.html

Scaling the canvas

I was unsure of what size to make the canvas because I wanted it to take up a large portion of the screen but when scaled down I still wanted the text to be legible. I’m also concerned about how it will look on a tablet, portrait and landscape. I posted on the Adobe forum and asked for some advice, I was told to make my canvas any size and just use the following code:

canvas.style.width = window.innerWidth+"px";

canvas.style.height = window.innerHeight+"px";

This worked however it squashes some elements when viewed portrait so I think I’ll need a fixed height or some way of doing it. I also saw some information about keeping the aspect ratio of the canvas to 4:3 on this website http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_04_Dracula/rnb_flash_trial3.html

Animating Waves

After trying the vector and text approach I also began animating the wave creak or crash. I wanted the spray fro the wave to form the next section of text. During this whole process I’ve been publishing my work and checking it on screen to see how it looks and also to go through the timing and rhythm. When I published the wave-crashing scene I kept getting errors and it would not publish a HTML & JS file for me. After some research I found some answers on forums about the animation being too detailed. I continued to explore my options and decided to simplify it and make the words build in height slowly so that the words themselves created a wave. I tried this quickly and published straight away to see if there were any problems and it published for me. I think there were too many illustrations in my original wave-crashing scene and it was too expensive (in terms of size)

http://playground.eca.ed.ac.uk/~s1364534/Flash/rnb_flash_trial2.html