Project Reflection

For my infographic I decided to document a process rather than an event, or a step by step guide for something. I felt for an interactive infographic, documenting a life cycle of a creature would be the perfect choice so, after researching, I settled on the cicada’s interesting life cycle.

Based on the examples recorded on my blog and other sources I came across, I think I have created a cohesive interactive experience that blends visuals and interaction together well. I achieved the look I was aiming for by mixing the simplistic styling with light contrasting colours. The subtle animations also all help to make the cicada seem more real and more alive on the screen, making the user that much more interested in the infographic. The interaction also fits with the subject matter by using simple controls and allowing the user to control the subject matter of the infographic. This control provides the user with a tighter connection to the subject matter and therefore (ideally) strengthens their memory of the facts presented to them.

Something to note as well is the 'light-heartedness' of the project. As this is aimed at a less scientific audience (as an eduction centre information terminal thing), the users need to be able to relate to accept the information that is being provided. Being more light hearted about the subject matter allows for the users to be more receptive.

I think that I also succeeded in portraying the information of the cicada’s life cycle in a simple and easy to understand manner. The information is well segmented and does not overwhelm the user.

On a side note:

Another benefit of choosing a life cycle as the subject for my infographic is that it can infinitely loop. The user will be able replay it as much as they want - which would also serve an eduction centre well as it would be easy to reset.

Development screenshots

Here is just a small number of development screenshots.

I didn't really remember to take screenshots during the creation of my infographic but here are some that I did take.

This screenshot shows the scene where the eggs hatch. It also demonstrates me using a tracer.

This screen shows the splash screen with the hit markers for the entrance button.

Here is another one of the hatching scene. This one shows the timeline and some eggs hatching.

Here is the Sap Inn. Cicadas come here after hatching (from the left) to spend most of their life drinking sap before heading above ground (to the right).

Idea settled on

I have now settled on creating an infographic around the life cycle of the north american cicada.

These bugs are interesting in that they hatch from eggs on a stick on a branch. They then fall to the ground and burrow in to spend the next 17 years underground before coming up to the surface. They then hatch from their exoskeleton and live for a very short time after hatching before dying. During this time above ground they make a lot of noise and lay more eggs.

I would like to also be fairly light hearted in my approach as well. The sort of thing that might be found in a nature reserve interactive display - which can relate to children as well as adults.

Here is the brief/quick guide of the steps to follow:


The life cycle of the north american cicada

-eggs in the bark
-hatch
-fall to the ground
-burrow in
-drink sap for 17 years
-dig a tunnel out
-find a place on the tree
-molt
-find a friend
-female lays eggs
-death
- -

rinse and repeat

Toying with Ideas

I have briefly toyed with the idea of using the creation of a film for my infographic.

It would follow these lines:

1 have an idea

2 flesh it out - script it

3 create a storyboard

4 develop the film aesthetic

5 assemble a crew

6 cast the film

7 scout locations

8 gather equipment

9 film the movie

10 edit it

11 sound effects and music

12 assemble the credit sequence

13 promote the film

14 initial screening and release

I started making this too and here are 3 screens from them

This is the splash screen.

The clapperboard is the entrance button.

And this is the first slide.

At this point I re-evaluated what I was creating and decided to change topics for my infographic. I'm now looking at life cycles of various creatures.

Infographic style examples and thoughts

Here are some infographic examples which will serve as some inspiration for this project.

This one has uses simplified elements and characters to convey the message.

This one is a website: http://neomam.com/interactive/13reasons/

This one uses subtle animations and a striking colour palette to keep the user engaged.

This one uses simplified symbols in its presentation and also makes use of contrasting colours.

Another website: http://futureofcarsharing.com/

This one uses just the left and right keys for navigation and scrolls sideways.

Things I would like to include in my infographic:

- simple but bold colour scheme

- stylised or simplified characters and objects

- simple interaction (but not boring)

-subtle animations

(UPDATE) And here is another one:

(open it in a new tab so you can zoom all the way in)

Week 2

This week was an introduction to actionscript3.

So I made a face and coded some aspects of it. Things like: width, height, alpha, and rotation as well as its position on the page.

Here is the result of some changed values. Nice.

Then I added a trace value - useful for debugging.

Same thing but with a trace being used.

A more useful trace being coded.

A more useful trace being used.

Learning how to reference inside symbols.

In this instance it was changing the look of the face.

Some more actionscript and trace code.

And here is the result.

Week 1 of assignment 2 - Class work

We were introduced to flash.

I made a face...

and turned it into a movie clip symbol.

Then I made a ball...

...and I animated it using a shape tween...

...so it was bouncing.

Then I put the face back in and made it a motion tween so its mouth was moving...

...like this...

...and this.

Afterwards I made a button.

This is another variation on it.

And so is this.