Animating Text in Flash

There were certain parts of the captains log that set a certain tone, ones that were quite visual such as the rough weather, so I imagined the text would create a huge wave that would crash resulting in the text to drip down to create the next sentence. I started animating the text usig motion tweening so it bobbed as if on the water’s surface but it didn’t give the effect of ‘Rough weather’. I then tried creating a vector wave and merging the text with the vector but it looked a bit tacky and I also wanted to animate the words which was the whole point of the project really!

Animating Text in Flash

I began animating in Flash. The start of the scene illustrates notes written by the captain of a ship travelling from Romania to England. The captain keeps a log and describes the weather and the strange incidents taking place onboard. I am trying to set the scene with my animation using kinetic typography and design so I decide to create a handwriting effect for the captain’s letters. I did this my making a shape out of the text, converting it to a movie clip and deleted section of the text, frame by frame, in the same way it would be written if someone was doing it by hand. I then inversed the text so that it played from left to write.

Change in direction

After a meeting with my supervisor, I decided to continue with Flash including more text animation in Flash rather that in javascript. This gave me much more flexibility as Flash, in particular the timeline, is more familiar to me. I drew another storyboard taking into account morphing and masking techniques. I decided to simplify the previous animation I’d done of the ‘Dock’ scene and revert back to a paper background, I took a photo of some handmade paper I’d bought for another project, and I started to focus on placing words on the paper but to make those words coma alive. I realised by trying to animate the whole scene I was not focusing on typography.

Flying text again

I went back and looked at some code my supervisor gave me, which has text flying around randomly on the screen. This worked perfectly on top of the flash animation. However, I need to figure out how to time this text and use fades and entrances to achieve the effect I’d like to.

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

Clearing the canvas

After getting my canvases layered on top of one another, I began trying to fade the text in and out. Either the text started to flicker or the flash animation was blacked out. I couldn’t figure out why, but I think it has something to do with me not clearing the canvas to draw the text on to it.

I thought of using extracts from the captain’s log to introduce the scene and then show the captain tied to the helm. The dog would then appear and morph into a bat, flying off screen. The text “Dracula would then appear”. I need to get the text working first before adding in flocking bats and bleeding text…but that is the plan.

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

Layering the canvas

I was struggling to get my flash animation and my text to layer on top of each other. I then created separate id’s and gave them different z-indexes.

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

Working with Photoshop, Flash and Illustrator

I did the background in Photoshop using some simple wooden textures. The idea is to use simple silhouettes to illustrate the start of the book where Dracula arrives at Whitby Harbour in the form of a giant dog.  I then drew some dog walking and flying cycles in illustrator and brought them into Flash to start animating them. I’m doing this animation in Flash as I find it a lot easier to work with the timeline in Flash. However I’m hoping to animate the text using javascript as I think it will be easier to manipulate.

Storyboarding — Dracula

I began storyboarding and planning the layout of the animation with a few simple sketches

globalAlpha Property

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_03.html

When considering what my supervisor suggested about using a flocking algorithm (boids) I also looked into other forms of interaction the user could have and found this alpha mask filter which could be a great form of interaction on the site http://www.createjs.com/#!/EaselJS/demos/alphamask

I played around with different effects on the canvas, I noticed on Chrome I get square shapes around each letter when the effect is applied but in Safari I don't, something I need to figure out.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_bounce.html

Textillate

Using animate.css and lettering.js I incorporated textillate.js (http://jschr.github.io/textillate/) to experiment with timing and other text effects. I also included fonts from google fonts. I’m struggling a bit to see the project coming together but I’m hoping that some of these experiments are helping.

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_01.html

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_02/index_rnb_kt_02.html

Method of my madness

I looked into how methods work and the “this” keyword and also, how to create objects using either literal notation or constructor notation. I hope the time spent on tutorials will benefit me, I've learned a huge amount and finished the Javascript section of Codecademy, so I'm feeling a little more confident in what I'm doing. 

OOP (object-oriented programming)

During the last meeting with my supervisor I was advised to look into object-oriented programming. I did some tutorials using objects and learned how to add keys to objects.

Heterogeneous arrays and jagged arrays

Continued on with tutorials on logical operators and different types of arrays; heterogeneous arrays and jagged arrays.

Switch statements

I decided to do some more javascript tutorials and learn about Math.floor and the switch statements, hoping my mojo comes back....

Back to basics

Struggling to stay motivated so to keep myself occupied I did some tutorials on CodeAcademy, mainly focusing on While Loops and Do/While Loops. I'm doing this to learn and have a good understanding of some of the basics

Interim Presentation

We had the interim presentation with Dr. Martin Parker today. Four sound designers and two others from DDM joined me. It was very useful to get feedback from Martin and others in the course. It was suggested that I look at how this would work on and iPad if people are looking at it landscape or portrait. Other’s wondered weather the website would act as a shop to sell books or was it an app. I was also asked whether it would be interactive or would this be gimmicky? A lot of questions came up that I hadn’t thought of, which made it great to do this type of thing so early on.
It was also suggested that I change my title from “Can the use of kinetic typography enhance the communicative potential of text?” to something like “The Expressive Type: the future of book covers or eReaders” which, I think is a lot more suitable.

HTML5 - text experiments

http://playground.eca.ed.ac.uk/~s1364534/Kinetic_Type_Test_01/rnb_text_effects_seuss3.html

I followed tutorials from my supervisor and from http://learningengineer.com/newwords.html

Automated Kinetic Typography

After speaking with another lecturer today to get some feedback, I was reminded of a site that one of his informatics students worked on http://akt.akineticblog.com using Python and Flash. The website segments text in order so that it is displayed, in a similar way, to the rhythm of speech. Started to get a bit confused as to where I am going with my project and need to make a plan, start writing and dive into HTML5 now rather than later.

Discussion Points

I found that more questions started arising once I started making a plan for my dissertation, here’s a rough draft of some of the points I hope to look at:

·      Theme 1 –

1.     Use of kinetic typography in film and advertising

2.     Animation techniques

3.    Timing and text

4.     Natural and realistic animation effects

5.     Rhythm

6.     Layout

7.     Navigation

8.    Colour and texture

9.     Reusable effects

·      Theme 2 – Methodology

1.     Research

2.     Tools - use of HTML5 – CSS, Javascript, possibly jquery

3.    Review of current kinetic typographic websites

4.     Sampling/experiments

5.     Analysis

·      Theme 3 - Findings and discussions

1.     Analysis of perception to the website.

2.     Where will it fit in to other peoples work?

3.    How will this affect other designers’ work?

4.     How will this affect the work of the author?

5.     Will this increase the emotional response to text?

6.     Could Kinetic Typography assist authors express their ideas and opinions?

7.     Will it limit the readers’ imagination?

8.    As a designer, how will my design style affect the content?

9.     By using code, is art being created with maths? Like poetic mathematics?

Computer Code as a form of poetry?

An interesting article today on BBC News describes how Cambridge students were asked to write about a poem, which included no words. The poem, Tipp-Ex Sonate by Andre Letoit consists only of brackets, quotation marks, exclamation marks and question marks. References were made to Robert Rauschenberg's Erased de Kooning Drawing or John Cage's 4'33" but it was also mentioned that some could have written about computer code as a form of poetry. I think this a pleasant way to describe it but, I suppose, it depends what is done with it and how it is used. Maybe it should be called ‘the art of maths’ instead of coding?!

http://www.bbc.co.uk/news/blogs-magazine-monitor-27680904

Stranger than Fiction (2006)

As the narrator describes the daily routine of the main character, text and icons appearing on screen add detail to what is being said and also offers a glimpse of what is possibly going on inside the mind of the main character.