04.04.2023 - 04.07.2023 / Week 1 - Week 14
Yung Siew Weng / 0339847
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures & Exercises
(yt-400x225)
LECTURES
#WEEK 1
Advanced Interactive Design Lecture #1: Introduction to module
This week, I missed class since I decided to enrols in the module on advanced interactive design at the end of the week. But, thankfully, thanks to my friends, I was able to obtain the necessary notes that the instructor instructed us to complete before the upcoming week.
#Given Task :
1. Research on TikTok Filters
2. Capture 3 Filters that you like and share.
3. Brainstorm at least 3 ideas for your own filters (can get inspiration from Instagram filters as well)
4. Download and install TikTok Effect House.
5. Update your Blog. The blog Submission link is up on myTimes
#
Capture 3 Filters that you like and share
Fig 1.1 Top 3 Favourite Filters, Try-on (week 1/ 09.04.2023)
1. Cartoon Disney Filter (Cartoonify)
The Cartoon Disney Filter on TikTok is a popular filter that transforms the user's face into a Disney cartoon character. It applies a cartoonish filter to the video, creating a fun and entertaining effect. The filter has become popular among TikTok users because it allows them to transform themselves into their favorite Disney characters, such as Ariel from The Little Mermaid, Elsa from Frozen, or Simba from The Lion King.
From my perspectives, I enjoy the filter because it allows me to express their creativity and imagination in a fun and unique way. From my perspectives as girl, girls usually grew up watching Disney movies and have a strong connection to the characters, so the filter allows us to express our love for these characters in a unique way. Additionally, the filter can make users feel more confident and empowered. Seeing myself transformed into a beautiful and iconic Disney princess can be a boost to their self-esteem and provide a fun escape from the stress and challenges of everyday life.
Overall, the filter is simply fun and lighthearted way to add some entertainment to our social media feed.
2. Time Warp Scan
Fig 1.3 Time Warp Scan, YouTube
The Time Warp Scan filter is a popular filter on Instagram that creates a "time warp" effect by scanning a line across the screen, which freezes everything in its path. The filter creates a unique and mesmerising effect that can be used in many creative ways.
The benefit of the Time Warp Scan filter is that it allows users to create interesting and engaging content that stands out from the crowd. The frozen motion effect can be used to create all sorts of interesting illusions and visual effects, from making it look like objects are levitating or multiplying, to creating interesting patterns and designs. In the other way, the filter can create some memories with friends and families as well as help users to increase their engagement and reach by creating content that is more likely to be shared and liked by their followers.
3. Virtual Make Up filter
The Virtual Makeup filter is a popular filter on Instagram that allows users to try on different makeup looks virtually, including lipsticks, eyeshadows, and blushes. The filter uses augmented reality technology to apply the makeup look to the user's face in real-time, creating a realistic and immersive experience.
With the Virtual Makeup filter, users are able to experiment with different makeup looks without actually having to apply makeup. This is particularly useful for people who are new to makeup or who want to try out different looks before committing to buying new products. Additionally, makeup filters have indirectly help to boost confidence by enhancing natural features and minimising imperfections. For example, a filter that adds a smoothing effect can help to reduce the appearance of blemishes, redness, and other imperfections, creating a more flawless appearance. This can help users to feel more confident in their appearance and less self-conscious about their skin. It can stated that having this filter, I was able to selfie and record the moment everywhere and in anytime without thinking about my skin condition.
#WEEK 2
Advanced Interactive Design Practical #2: Effect House
For this particular week, since we are instructed to pre-download the TikTok effect house, we had a live tutorial and practical to explore the basic function and features of the effect house. We had been instructed to test AR filters via Effect House during the class.
AR filter #1 : Face Distortion
1. What is Face distortion?
Face distortion refers to the intentional or unintentional alteration of facial features in an image or video. This can be done for artistic purposes, such as in caricatures or cartoons, or for more practical reasons, such as in medical imaging or security applications. Face distortion can also occur unintentionally due to technical issues with cameras or lenses. In some cases, face distortion can be used to manipulate or deceive people, such as in the creation of deepfake videos.
2. Experiment and Exploration
Throughout the experiment and exploration on the face distortion, I really made fun of it greatly; my classmate and I experiment and preview our each outcome on TikTok in order to share the happiness and fun together.
Fig 2.1 Development, Effect House (week 2/ 11.04.2023)
Fig 2.2 Compilation of Face Distortion,
outcome and preview (week 2/ 11.04.2023)
AR filter #2 : Mini Clones (3D)
For this tutorial, we are required to try out the 3D effect based on the tutorial (mini clones) by effect house. The image object allows you to create an image plane that you can move, rotate, and resize in the 3D scene.
- Add an image object by clicking the Add button [+] > 3D > Image in the Hierarchy panel.
- With the image object selected in the Hierarchy panel, go to the Inspector panel and click + Add component > 3D > Look At.
- Add a Head Tracker object by clicking the Add button [+] > AR Tracking > Head Tracker in the Hierarchy panel.
- Select the Image object in the Hierarchy panel, then go to the Look At component in the Inspector panel and change the Target property to Head Tracker.
- Change the Look At component’s Mode property to Look At Direction.
- Add a Portrait Segmentation Texture by clicking the Add button [+] > Texture > Segmentation Texture > Portrait in the Assets panel.
- Select the Image object in the Hierarchy panel, then go to the Image component in the Inspector panel and change the texture to Portrait Segmentation Texture.
- Resize and position the image in the Scene panel to your desire.
- Feel free to duplicate the image in the hierarchy panel and create as many mini clones as you want!
Fig 2.3 Development, Effect House (week 2/ 11.04.2023)
Fig 2.4 Outcome and preview,
AR filter #2 : Mini Clones (week 2/ 11.04.2023)
#WEEK 4
Advanced Interactive Design Tutorial #4: Adobe Animate
As usual, create a new project > remember to change the platform Type to HTML5 Canvas.
For this particular tutorial, I did a recap and reconstruct the "practical" via the Youtube Live.
#How to create bouncing ball?
Fig 4.1 Development in Adobe Animate,
Bouncing Ball
(week 4/ 25.04.2023)
1. Create New > HD > HTML5 Canvas
2. Create a circle, convert to symbol (as we only can tween a object by using "symbol")
3. Insert a keyframe on the 30s, insert a new keyframe on the 15s and [shift + arrow down] to make the circle in different position.
4. Create classic tween in between the keyframe [right click > Create Classic Tween]
5. Insert effect [right properties > Frame > Tweening > select the Effects] to make the character move smoothly.
6. Make the character to be squeezed /realistic, insert keyframe on 16s [the more the keyframe, the smoother it goes]
Fig 4.2 Outcome, Bouncing ball (week 4/ 25.04.2023)
7. Turn the clip to be its own timeline, create new symbol [insert > new symbol] // so that you can do an independent animation within its own movie clip.
8. Copy and Paste the timeline from the main scene to its own movie clip. [main scene, right click > copy frame > its own movie clip, right click > paste frame]
9. Drag its own movie clop/ symbol to the main scene [right scene> library]
10. For example, having intention to let the ball to bounce from the left to right, [insert keyframe > create classic tween] and [shift + < or >] to control the position.
11. View in web [command + enter]
(week 4/ 25.04.2023)
#Introduction to first script // A basic on how to use Adobe Animate to create a website.
Fig 4.4 Development in Adobe Animate,
Pages Navigation
(week 4/ 25.04.2023)
➜ Pages Navigation
1. Divide the pages into section (30s), and create different pages.
2. To make it to look and behave like pages, we need to stop the timeline. //currently looks like animated GIF
3. Create a new layer, rename as "script", and [right click > action > add the script this.stop(); ] to stop the animation.
4. Create a new layer, rename as "nav", make sure the "script" layer always be on top; use the shape tool to create different button.
5. Convert all the button into symbol [right click the button shape > convert to symbol > change the type to "button"], remember to give the button an instance name [properties > object > instance name]
6. Double click the button shape, insert keyframe on over, down and hit.
7. Apply script to control the button, In the actions window, use the wizard tools to easier the process [wizard tools > Go to frame number and Stop > This timeline > change to your desired seconds > select a triggering event > select your desired button > duplicate the same code for the following buttons].
8. To having a better for us to refer, create a "label" page, create keyframe on the pages and name the label [properties > frame > label]
9. To make the animation, convert the elements in page into symbol, insert keyframe, create classic tween as well as apply ease in/ out.
10. Insert keyframe at the frame before each page the script layer. Add the script this.stop(); into each frame script.
11. Change the Script from "gotoAndStop" to "gotoAndPlay".
12. View in web [command + enter]
Fig 4.6 Outcome, Page Navigation
with Animation Principle (week 4/ 25.04.2023)
#WEEK 5
- No class @ TikTok Workshop -
During this session, we were introduced to the advanced technology features of the TikTok app, which empower users to create filters within just 30 seconds using TikTok new features. In the meanwhile, we were invited to explore on how the app's user-friendly interface and streamlined tools enable quick and efficient filter creation, highlighting the accessibility and convenience that the platform offers to its users.
Fig 5.1 Exploration of TikTok Features (week 5/ 02.05.2023)
#WEEK 6 - 11
- Feedback session @ Project 1 : Interactive AR Application -
#WEEK 12 @ GSAP
In this particular week, I had faced issue on my Animate CC software, I'm not able to log in and even re-downloaded the version still was not applicable; I do tried on download an older version but it will having the chance that I will be "quit" again and not able to enter the site (as you know, there is a "small" portion on us being force quit from the Adobe Software). However, I am glad that my friend from other uni was in her semester break, and she sent her laptop to me, just to help me (mentally) to complete this module and even the final project. So, for this particular lectures and tutorial, I recap on YouTube Live that provided by Mr. Razif (Wednesday session).
This week, we focused on some script things. We are required to consider whether want to use scripting or timeline in order to achieve our animation outcome. But, mostly recommended to use both to create the final project. Before we depart into the tutorial, we are be reminder again on the requirement of the project, HTML5, 30 Frame Rate, Full HD 1920 x 1080.
In order to use script in Animate CC, we are required to download GSAP zip file from GreenSock.
#What is GSAP?
- GSAP is a Javascript animation Library, normally it is used in web HTML and CSS but we can also use it in Animate CC because essentially when we export Animate CC, it's will become HTML canvas so this means it also can read Javascript. So, GSAP is a software that able to empower our animation so that we will not be too limit and confined to the timeline as there are limitations of creation by using timeline.
#How to use GSAP in Animate CC?
1. Download GSAP Zip file
Fig 6.1 GSAP Zip File in Downloads
2. Create a new main folder and drag the GSAP Zip file into the main folder.
3. Save the Animate CC canvas into the same main folder and rename it as "index.fla".
4. In Animate CC, right click in the timeline > actions > expand Global > under "Include", click "+" > add files > browse to the GSAP folder and import the file named "gsap.min.js" under minified folder.
5. Create a rectangle
*normally when need to do a simple shape or movie clip, avoid using stroke.
Fig 6.2 Registration symbol / point [the black point]
6. Convert it to a movie clip [right click > convert to symbol and make sure the registration symbol is in the centre].
Fig 6.3 Name the "instance name"
7. Name the "instance name". Instance name is very important while doing scripting as without the instance name, the script would not able to know which to control or to direct.
8. Create a new layer, just to organise the script [named it Action/ script]. And under the script layer, right click to "Actions"
9. Go to GSAP website, under product and click the "GSAP cheatsheet".
*There are two popular properties which is gsap.to which means animate to a particular location or state and gsap.from means animate from.
*In Animate for the script, the " .. " was not required, but make sure type "this." before the instance name. For example, this.instancename
#Practical 1
To make it animate by using the GSAP code : gsap.to(".box", { x: 200 ,duration: 3,})
Fig 6.4 The "function"
Fig 6.5 Outcome
And, continued to adding the "transition". There are many much transitions can refer to. For example, elastic, bounce, ease in & out....
gsap.to(".box", { x: 200, duration: 3, ease: "transition" });
Fig 6.6 Outcome
If I don't want this upon load automatically, but only execute when the user click (mouseover/ click) :
Fig 6.7 Mouse click function (week x/ xx.xx.2023)
Fig 6.8 Outcome, Click and Go
#Practical 2
Create 4 page and animate it (somewhat like carousel/ page navigation, when the user click the button and it will be direct to the page specifically.
Fig 6.9 How to create page navigation
Fig 6.10 Outcome
#Practical 3
A intractable website in a same scene / may suitable for landing page design (for scroll bar).
Fig 6.11 How to create intractable website
Fig 6.12 Outcome
Comments
Post a Comment