So today I'm going to tell you about my process of creating the interactive poster for COMIC-CON MCM LONDON.

I had to create an interactive poster for the bus stop.

It’s effortless and fun to interact with the poster while waiting for the bus as it contains different pages, animations and characters.

My target users are children and teenagers aged 10-16 years old, so I used characters that are popular heroes of movies and series but in a cartoonish style.

I created eight pages (including INTRO page) and tried to make every page unique, so the user could get a feeling like it’s not just a poster, but a small universe =3. So on each page, it’s a different atmosphere and background music.

But at the same time, all the pages are connected by the same mood and style.

Process

I started my working process with the Comic Con research.

The pages I created are the parts of the real COMIC CON website.

"Comic Con is a fiction fan convention held in the London.

The convention mainly focuses on video games, sci-fi, cosplay & popular media from the United Kingdom, United States and Japan (Wikipedia)"

Available at www.theguardian.com

I started to research the popular cosplays, series, games and other trends to fill the poster with recognisable heroes and objects in my style.

Sketches

After research I started to do sketches. All the objects first was drawn by hand, after I draw them in Adobe Illustrator.

Keyframes and Coding

After sketching and drawing objects in Adobe Illustrator I imported them in Adobe Animate.

The Project size is 768x1024 px with 25 fr/sec

I created for each object a separate layer. Also as I wanted to make the interactivity simple I used the simplest coding, mostly the coding for the buttons

Intro Page

In the very beginning the poster starts with the opening animation. I decided to make logo appear from the clouds, and again - it’s inspired in someway by the Simpsons series, which famous intro starts in the clouds too. For this I used the camera tool.

Home page

On my home page the use can see on Background the famous London buildings - Big Ben with moving clock, the St Mary Axe building, The Shard, St Paul’s Cathedral and London Eye. The Buttons are recognisable characters and object from Movies and Series - The Pennywise from “IT”, Walter White from “Breaking Bad” and Tardis from “Doctor Who” Also every button includes the sound effect and a small movie clip.

Flowchart and Wireframes

You can watch the final result right now:

Self-evaluation

Before this task, I never used Adobe Animate and I knew nothing about Comic Con. So it was a pleasure for me to get through all this journey, to improve my knowledge and skills. I loved to know more about the popular movies, games, series.

The most difficult for me was to work in Animate, to work with coding and to understand the principle of the program. This program is totally different from Photoshop and Illustrator, so I was very uncomfortable. In the middle of the process, I had huge problems with interactivity and with Keyframes. I literally just couldn’t understand anything. So I made a risky decision - I deleted all my project and started it again from the very beginning. This was difficult for me but it helped me to understand Adobe Animate better, to get into it. I loved to find my mistakes or hidden solutions, it was like a quest.

I feel that I need to learn and use more time-saving tips, like hotkeys, character and paragraph style. In the future, it would save me a lot of time. Also, I would like to create more realistic animations, like moving, form changing. My plans for this task changed few times. In the very beginning, I was sure to create more animations, that will be more difficult, to create more interactive elements.

I think this is the main thing that disappointed me in my myself - In the last week I created all interactivity poster from the very beginning, so if I could be more diligent in the start of the course, I could finish it much earlier, and also I would have time to learn and create stronger animations. So if I could do this task again, I would start to learn and work on it harder, to make it more interesting, to make characters more real, with live emotions.