Advanced Interactive Design // Task 2
20.06.2023 - 16.07.2023// Week 11 - week 15
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Lectures
WEEK 03
On week 3, we were introduced to the application Adobe Animate. (damn this software took me a decadeeeee to download it 🥲) Ok so anyways, we were taught to make shapes move, scale and transform to other shapes. Actually I think it was kinda related to the skills we learnt on AE like in AE we could also just make the shapes move, scale etc. However, one was presented in MP4, Video, GIF etc. But in Adobe Animate, you can just directly convert it and let it being presented on a url.
First of all, create a shape you want by choosing the shape tool at the bar beside and then in order to create motion for the shapes, you'll need to insert frames and then create classic tween for the frames and drag it until the timeline you wanted it to be.
 |
| fig 2.1 - process of creating motion for the shapes |
Next, to create shape transformation, you'll need to choose motion tween, delete the actual shape you have and create a new shape you wanted it to be transformed. You can also change the colour of your new shape which will be transformed automatically also. Fun fact, as a year 2 student, we were confused on how to create a triangle shape and asked our lecturer for help.
 | |
|
So here's the results after the tutorial:
 | ||
|
Then, we were asked to create a bee that flies over the screen. This is a task, we could only leave the classroom once we done this task given. So for a bee, it'll need to constructed by not just one shape but like multiples and we also need to create the shapes separately on different layers in order to apply different motion and effect between them. Well here's the outcome of my bee which I named it "bebe". (not bebe rexha ok)
 | ||
|
So here's the results after the tutorial:
 | ||
|
WEEK 12
On week 12, finally we were going to campus for physical classes after so many weeks of no classes conducted:,( So for this week, we actually learnt quite much things.
First, we were taught to make buttons to click and which will lead us to the screen that we want to. And we were asked to create rectangles in Animate CC as screens and its respective buttons.
 |
|
So the screens were positioned right next to each other from left to right which the main screen is the green but it will start moving on the blue. Technically, how does it actually works is that we should use the "Action" panel to create actions for them which clicking the buttons will lead to its screen respectively. We were not using Motion Tween and Classic Tween on this lecture, instead of Action panel. It was actually quite like scripting and coding concept which correct codes need to be use efficiently to let things work. Here's the actions in the Action panel.
 |
|
So here's the results after the tutorial:
|
Afterwards, we were taught to make buttons that will remote and move to the expect spot of the screen. So first, find a HD wallpaper from online and download it as bitmap jpeg then place it onto the the board. Enlarge it over the board, so you could control the buttons that will remote to the screens outside the board.
Then buttons are created and were convert to symbols and the wallpaper earlier were named as movie clip "mc_screen". Then action script were used, to make the buttons to move the mc_screen. Things to be ensure that is do not insert the codes in the Global Script or else it won't work.
 | ||
|
 | ||
|
You can manually position the screen that you want to be move to when clicking the buttons by inserting its X and Y. Besides, moving duration could also be adjust like if you want it to move within the duration you wanted, you can insert seconds like 2s.
So here's the results after the tutorial:
|
Task 2
On this task, a Thematic Interactive Application Screen Design Prototype were to created. An interactive application is an application that allows users to interact with audiovisual information via effective screen design layout.
We are required to create a (prototype) interactive application for an online store. For example, an online ticket booking system for cinema / football matches, a restaurant reservation system with an online menu or a pizza ordering system. We are only required to develop the front end interaction, UI design, scripting and animation. Backend programming is not required as it is meant to be a prototype. Interactive applications should be able to communicate to the audience about the sites goal and objectives. Users should be able to navigate and use the applications without any difficulties. The required software to be used for this task is Animate CC.
My plan on first pace is to make a website related to fashion apparels which I could use the logo I designed myself which was inspired by my Initial letters of my name, Selina Lim, which is "selinxlim". But then, from last semester module's task, Interactive Design, I've already done a fashion website so thinking to change it, not selling clothes again. Instead of that, I think of perfume and yes let's go with that heh.
So for inspiration and reference, I went to search up few branded websites and look on their interfaces design which most of them were in minimalist style which was very my taste also. I then created a moodboard for my design stage to have a better guidance and not to be too away from my ideas.
Moodboard: https://miro.com/app/board/uXjVM0blMwE=/?share_link_id=92196824446
 |
| fig 5.1 - moodboard in Miro |
Then, I started to design my assets, visuals etc in AI. I wanted to go with something minimalist and elegant so I've chosen a plain neutral earth tone as my colour theme for the website. And for the fonts, I liked this font "Philosopher" so muchhhh, it's so pretty and nice! After reseraching on few websites, I find that Chanel and Diptyque's website interface designs are more my design concept, others are less likely to meet my preferrance. Hence, I take them as my referred website for designs.
 |
| fig 6.1 - interfaces design in AI |
 |
| fig 6.2 - logo close up |
Then, I dragged the files into Animate CC and start to animate them! Well at first, I locate each frames in the main timeline according to the screen to be showed with all the buttons and layers inside. Then after I done all the animate and position, I wanted to preview and find that it won't load like I expected. Then, I asked my peers for help. As I really was breaking down, and couldn't figure out why. Then, she asked me to drag everything out from layer and place them into the main timeline and only locate the layers together in a folder. Then, it only works.
Here's an overview of the layers in folder and its animation in the main timeline.
 |
| fig 6.3 - layers arrangement and its animation in main timeline |
Then, after the animation, comes to action scripting which I called it "BreakDown Stage". At first, I recall things taught in videos and follow the steps and make the object into buttons that I want them to be clicked on and will be bring to the specific frame. Then, when in preview, they don't work ;D I cry omg...
Then, I asked my friend again, she asked me to try converting them into movie clips instead of buttons in the symbol and see if works. Then yes it did!! OMG heart atttttack! Then, this issue was then settled and the next issue is that some movieclip converted button don't work. Then, I try going back to the frames that it could work and check on what have I missed out or insert incorrectly. Then, I find out I should convert them into movieclip on the frame where I would click it instead of making them movieclip when they came in on the first frame as the action doesn't meet at its frame.
 |
| fig 6.4 - symbol converted into movieclip at the right frame |
Then, I asked my friend again, she asked me to try converting them into movie clips instead of buttons in the symbol and see if works. Then yes it did!! OMG heart atttttack! Then, this issue was then settled and the next issue is that some movieclip converted button don't work. Then, I try going back to the frames that it could work and check on what have I missed out or insert incorrectly. Then, I find out I should convert them into movieclip on the frame where I would click it instead of making them movieclip when they came in on the first frame as the action doesn't meet at its frame.
At some point, some buttons don't work is due that I've created dupliacte buttons and movieclips on the same object, and the action script could not even detect which one was only the correct one so it won't be clickable. Hence, I keep checking on the library panel to make sure if none of them are duplicated.
 |
| fig 6.5 - check on duplicated symbols |
Here's an overview of my action script, most of it used were click a button and bring to a specific frame then play as animations are most of them created in the timeline already. To be honest, I don't really know how to use this software and not very familiar with it even though I've seen so many tutorial from YouTube but still ya. So my animation was kinda shitty to be honest haha.
 |
| fig 6.6 - Action script of home page |
Then, after previewing a few times, I recognise that it's very not convenient to go back to my product page to surf on the other product animation and flow. Hence, I've extra added a "back" icon as button and added on respective pages.
 |
| fig 6.7 - "Back" button added |
 |
| fig 6.8.1 - Action script of products page |
 |
| fig 6.8.2 - Action script of 1st product Then, I wanted to make some animation for the product details when clicking its product name, so I separate them frames with its animation and make it "click then go to frame". So that flows of appearing its details would be more smooth and not too boring. |
 |
| fig 6.9 - action script for 1st product details |
After done setting up the whole thing, checked animation in timeline was good, action script was fine and no problem with the preview run too. Then, I publish it and drag it to netlify for submission.
While, never thought that even in Netlify also have issue in setting up the sites. Keep showing link is broken:D heart is tired already, cannot take it anymore. Then, I ask my peers for help and they ask me to check is the files inside the folder complete and is the file named index.html inside. Then ya, renamed it and it works woohoo! And I changed my site name and submit all the links and files into mytimes. (yes I know I'm very late but I really tried my best okies)
 |
| fig 7.1 - site name changed in Netlify |
Final Submission:
Netlify Link:
https://selinxlimfinaltask.netlify.app/
Video Presentation:
Reflection
Oh my gosh. Finally in my life, I have ended this hardcore task. I am very exhausted. This task was very challenging and through all the journey, I have faced a lot of constraints. Reasons why are because not much lectures and tutorials were given during our classes and not much we have learnt. Somehow, we only get the task instructions on about week11 which was already almost the end of the semester. I really cannot start doing something that I don't even have an idea on how to start. Meanwhile, a lot of other modules's assignments are like halfway done and it needed us to rush them before its due. So ya, it's very hard for us to be watching only the youtube playlist and learn from it. Also, I have asked from my professionals designer friends and they don't even used animate CC to create the website animation. So I'm like cool, who can help me now, I am all my own and the due is tomorrow woohoo!
However, I was very grateful that I even vomitted something out not just leave it blank. While submitting this 3 days late aren't really good but at least I really tried my best, dragging the due to make it better and run smoother.
Ciao, animate CC, till we meet again. (i won't be using it until it was very very necessary to haha)
Comments
Post a Comment