Jumbotron

MONSTERS - An Interactive Story
- Focus on Content Creation, Illustration and Interactivity

Click the buttons to go to the project demo

Click the tabs to view different aspects of the project

ABOUT THE PROJECT

To create an interactive story using professor provided web-based framework.

OBJECTIVE

To create a story for kids that is engaging, entertaining and one in which they can interact.

THE PROCESS - Branding and Text Content Creation

I began with thinking of a story that has a moral and can teach children some lesson that they should know. I went with a “don’t judge a book by it’s cover” theme, and I put a spin on it and created a similar theme and applied it to monsters. Monsters gave the unique ability to create original characters and assets.



THE PROCESS - Illustration and Animation through Coding

After deciding on the story text for each page, I made story boards of the characters and scenes for the story. Illustrator was used to create all of the backgrounds and characters and convert them to svg format for easy animating. The svg’s was loaded and position.

ROLES

Creative Designer
Illustrator
Asset Creator
Coding for Design
Children's storybook Writer

TOOLS

Sketching
Illustrator
Photoshop
Brackets

Pre-loader Gif

Illustration and Animation through Coding

ANIMATION / CODING TECHNIQUES

A variety of animation and coding techniques was used. In particular, their are a few elements of gif animation, but the majority was animated using TweenMax. Css absolute positioning properties was used to build the screen from the illustrator file composition.

Monsters eye blink1 Monsters eye blink2

Eyes that Blink gif



The illustrator Composition including notes for the story and ideas.