October 15, 2023
29.08.2023-15.10.2023 (week1-week7)
Song Yang/ 0355576
Advanced Interactive Design
Instruction
LECTURES
Week 1:
We were briefed about the module outline and our lecturer showed us some examples of works that we have to do for our tasks. We were also tasked to do some research on existing TikTok / IG filters and try them out. For our TikTok Filter ideas, we have to think of 3 that fits into 1 of the 4 categories, including Interactive Game, Randomiser, Fashion & Beauty and also 3D AR.
Week 2:
We tried exploring TikTok Effect House today, a software that we will have to use to create our TikTok filters. It was difficult to navigate without watching a tutorial, so we went to the Effect house website and followed a worded tutorial on how to create mini clones.
Week 3:
For this week, we began to explore Adobe Animate and learned the basics of
how to use the software. Our lecturer guided us step-by-step in class, and it became easier to manage after more practice.
Week 4:
Our class was held online today and we resumed practicing animation using Adobe Animate. Our lecturer taught us how to animate a bouncing ball and web animation, which would be useful for future projects.
Week 5:
We had a TikTok workshop for this week and were briefed about the TikTok filter contest requirements. It was a very insightful sharing and we also got to create our own TikTok filters using TikTok Create.
Week 6-8:
We began working on our finalized TikTok filter ideas and had consultation sessions with our lecturer through physical and online modes. In weeks 6-8, it was more of exploring Effect House and seeing whether or not our TikTok filter can be made. In
weeks 9-12, we were all having individual consultations so that we can solve any problems that we have faced while making the filter.
TASKS 1
Exercises
Week 1: TikTok Filter Ideas
The first special effect I chose was pink beaver, a 3D sunglasses on my head, and the overall theme was pink. I think this theme with a unified tone is worth learning.
 |
Fig 1.1 Special Effects Inspiration 1 |
The second one is a Tom and Jerry themed special effect. The makeup for this special effect is very interesting. Tom’s blue eyeshadow color is chosen, and Jerry’s zong color is chosen as the blush color.
 |
Fig 1.2 Special Effects Inspiration 2 |
This special effect is a 3D modeled black kitten headgear. The black kitten looks very cute. The modeling features are relatively rounded and worth learning.
 |
Fig 1.3 Special Effects Inspiration 3 |
My Tik Tok Filter ideas
The inspiration came from my deep understanding of the Stitch Game, especially the tense and exciting atmosphere in the film, which gave me a lot of inspiration. When designing the special effects, I chose the classic Stitch image, so that the audience can feel the tension of the game more deeply.
 |
Fig 1.4 Stitch |
Week 2: TikTok Filter Tryout
For this week, we began exploring TikTok Effect House, a software that we will have to use to create our TikTok filter. It was quite challenging to navigate at first, but we managed to make a basic face distortion filter and test it out on TikTok.
 |
Fig 1.5 Screenshot of effects |
FINAL OUTCOMES
The link:The lovely Stitch
The visual:The lovely Stitch
Shopping sites require users to interact with them, using the interactive elements and action scripts of Adobe Animate. This includes buttons, links, and hover effects.
TASKS 2
Final Project: Thematic Interactive Website
First of all, we know that the costumes and props in the Stitch Game have unique designs and iconic looks. This inspired me to create a dedicated shopping platform that allows fans to own their favorite characters' costumes, props, and merchandise in reality. When it comes to website design, we strive for a simple, intuitive user interface to ensure that users can easily and quickly find the products they like.
The goal of Stitch Shopping is to provide a unique, fun and interactive shopping experience for Stitch Games fans. We hope that every visitor can find their favorite products here and feel our love for this classic work. Thank you all for your support and look forward to seeing you on this special shopping trip!
 |
Fig 2.1 Stitch |
1. Website Design
The original intention of the project was to combine the unique atmosphere of Stitch Games with the convenience of shopping to provide fans with a new shopping experience.
I dug deep into Stitch's themes and elements to ensure that the site remained true to its unique atmosphere. In Figma, we used a series of carefully designed ICONS, colors, and interface elements. Each page in the shopping site is endowed with a unique element of Stitch, making users feel as if they are in Stitch's world
 |
Fig 2.1 Screenshot of figma page |
2. Website Animation
Create the graphic elements of a shopping site using Adobe Animate. Include Stitch's theme colors, iconic elements, and the merchandise you want to display.
 |
Fig 2.2 work place of Adobe Animate |
Use Adobe Animate's timeline and animation tools to animate graphic elements. This includes transitions, fade-ins, fade-outs, rotations, etc.
 |
Fig 2.3 work place of Adobe Animate |
Shopping sites require users to interact with them, using the interactive elements and action scripts of Adobe Animate. This includes buttons, links, and hover effects.
 |
Fig 2.4 work place of Adobe Animate |
FINAL OUTCOME
Video presentation and walkthrough of your project
REFLECTION
Experience
I have always been intrigued by the diversity of TikTok filters, but I have never imagined myself to be creating one from scratch. It was my first time hearing Effect House and using the app to create a filter. When I first downloaded it, I was really lost with all of the unfamiliar panels and visual scripting nodes that we have to use. It was not easy to learn within a few days, but watching tutorials did help me get more comfortable with the app. There were many challenges faced when doing this assignment of course, but I am glad there was a solution to most of it. It gave me a lot of headaches, but I enjoyed the process of learning how to create a TikTok filter.
Observation
During production, I encountered some technical challenges, especially when adjusting the effect to fit the original film more closely. But through trial and learning, I managed to overcome these problems and became more proficient in some special effects techniques.
Findings
In order to increase the audience's sense of participation, I added some interactive elements to the special effects, hoping that the audience will be better integrated into Stitch's world. At the same time, I also added some innovative points, combining other pop culture elements to make the special effects more personal.
Comments
Post a Comment