ADVANCED INTERACTIVE DESIGN - FINAL PROJECT

10/10/19 - 28/11/19 (Week 7 - Week 14)

Yeap Phay Min (0331073)

Advanced Interactive Design

Final Project - Interactive Storytelling

---

DESIGN PROCESS


10/10/19 - 28/11/19 (Week 7 - Week 12)

Throughout the weeks, I started to work on the assets illustrations based on the story I've chosen in the previous assignment. I also made use of the references I found. This part took longer than I expected as I wanted to make sure the illustrations all matched the style and colours I was going for. I also decided to draw out the individual assets first, then arrange it later on.

Process of illustrating the individual assets:

Fig 1.1: Screenshot of Illustrator

Outcome of the individual assets:

Fig 1.2: Lanterns

Fig 1.3: Red banners

Fig 1.4: Firecrackers

Fig 1.5: Flowers

Fig 1.6: Clouds

Fig 1.7: Bamboos

Fig 1.8: Night sky

Fig 1.9: Morning sky

Fig 1.10: Nian character

Fig 1.11: Nian character

Fig 1.12: Children character

Fig 1.13: Villagers character

Fig 1.14: Cow character

Fig 1.15: Old man character

Fig 1.16: Window and door

Fig 1.17: House

Fig 1.18: House with decorations

Fig 1.19: Mountains

Fig 1.20: Mountains

Fig 1.21: Trees

Fig 1.22: Flowers on tree

Fig 1.23: Progress bar and next button

Once I had the individual illustrations, I started to play around with the arrangement to see what worked best. Initially, I arranged the assets art board by art board, then I realised I should've been arranging them in a "long scroll", since I wanted my animation to have a scroll interactivity.

Process of arranging the assets:

Fig 2.1: Screenshot of Illustrator

Fig 2.2: Screenshot of Illustrator

Outcome of the scroll arrangement of the assets:

Fig 2.3: Overview of the pages

Fig 2.4: Page 1

Fig 2.5: Page 2

Fig 2.6: Page 3

Fig 2.7: Page 4

Fig 2.8: Page 5

Fig 2.9: Page 6

21/11/19 - 29/11/19 (Week 13 - Week 14)

Once all the illustrations are done, I moved on to the next step which is to add interactivity to it using Adobe Animate. The exercises done in class, along with some example files given to this did help guide me in animating this project.

Process of animating:

Fig 3.1: Main timeline

Fig 3.2: Adding codes

Fig 3.3: Adding codes

Fig 3.4: Editing page movie clip

Fig 3.5: Adding codes to button

Fig 3.6: Editing page movie clip

Final Outcome on Web: https://jessicayeappm.000webhostapp.com

Fig 3.7: Screenshot of Web

---

FEEDBACK

17/10/19 (Week 8)
Initial illustrations of the assets are fine. Continue to work on it.

14/11/19 (Week 12)
So far, the simple scroll I've done is okay. I could also add in the assets first, then only animate them all. Adding an arrow at the start would also help to indicate the scrolling action.

21/11/19 (Week 13)
I could add a progress bar to indicate how far in the story the user is at. If the file gets too big and I can't preview, try separating the pages into different files and link them together later on.

---

REFLECTION

EXPERIENCE
This module was quite a challenge, but it all worked out in the end. I also wished I didn't spend that much time on my illustration, so that I could focus more on the animating part. Thankfully that part wasn't a big struggle as I had the sample file as my reference to guide me through. Overall, it was nice to see it all come together in the end, and I was happy that I managed to learn these new things.

OBSERVATION
Through it all, I observed that it is important to be careful and make sure all the codes are correct, including the lower and uppercases, as well as spelling and others, because one little mistake and it could cause everything to not work. I also observed how satisfied I was whenever something worked, whether it is a scroll or even just a button to go to the next page.

FINDINGS
I found that I actually liked the way Animate works when it comes to creating simple animations as compared to After Effects. Overall in this project, I also found that it was a good learning experience, to be able to take a story, illustrate it, and on top of that add all these interactivity to it to achieve an interactive storytelling.