ADVANCED INTERACTIVE//TASK 1
29.08.2022 - 25.10.2022 (Week 2-Week 9)
LECTUREWeek 1
Public Holiday. Mr Razif briefed us about the module.
Week 2
For our first project, we have to create a UI for a mobile application that can make payment. Mr Razif encouraged us to do a topic or brand that can cover the mobile app, filter and website. I started to think of some brands and topics, and I decided to rework my Cake brand from the Brand Corporate Identity project "Okek".
Week 3
We learned about the basics to create a new project in Adobe Animate and some useful techniques to create motion and morphing effects.
LECTURE
Week 1
Public Holiday. Mr Razif briefed us about the module.
Week 2
For our first project, we have to create a UI for a mobile application that can make payment. Mr Razif encouraged us to do a topic or brand that can cover the mobile app, filter and website. I started to think of some brands and topics, and I decided to rework my Cake brand from the Brand Corporate Identity project "Okek".
We learned about the basics to create a new project in Adobe Animate and some useful techniques to create motion and morphing effects.
TUTORIAL/PRACTICAL:Explore Adobe Animate
Figure 1.0 Practice 1 flying bird and moving background
Figure 1.1 Practice 1 Animation, 14th Sept 2022
Figure 2.0 adding keyframe, 14th Sept 2022
Figure 2.1 Practice 2 girl bouncing.gif, 14th Sept 2022Tips:
-Dot turn black if have content
-Name layer
-Overlapping shapes in same layer (erase)
-Classic tween: Convert graphic
-Convert to symbol (movie clip)
-Ctrl enter (view on browser)
Week 3 Exercise
1. Animate the box from top left top top right
2. Animate from top right to bottom right
3. Animate from bottom right to bottom left
4. Animate from bottom left to top left (original starting position)
5.Morph to a rabbit (break apart), highlight > shape tween (morphing)
6.Rabbit blink
7.Bouncing ball
Figure 3.0 30 frama rate, 14th Sept 2022
Figure 3.1 Moving shape, 14th Sept 2022
Figure 3.2 Ease in and out, 14th Sept 2022
Figure 3.3 Week 3 exercise, 14th Sept 2022Week 4 Exercise
Pages, button, back button, button on click, animate text
Figure 4.0 Exercise progress, 21st Sept 2022Figure 4.1 Exercise.video, 21st Sept 2022
Week 6 Exercise
Pages with content, view item Prev and Next
Figure 5.0 Exercise, 5th Oct 2022 Figure 5.1 Exercise video, 5th Oct 2022Week 7 Exercise
Add to cart, cart amount, prev and next item.
Idea 1: Tote Bag Store
My first idea was to build a tote customisation app, however due to time limitation I was not able to build a complete the brand profile. Therefore I decided to go with Idea 2.
Figure 6.0 Tote app flow, 5th Oct 2022
Figure 6.1 Tote wireframe, 5th Oct 2022
Figure 6.2 Tote wireframe, 5th Oct 2022Idea 2: Cake Store
Continue OKEK brand that I did for my brand corporate identity module, I decided to create an app for this brand. I decided to go with second idea.
Figure 6.3 App Flow, 5th Oct 2022
Task 1 Submission
Figure 7.0 Design Progress, 5th Oct 2022Figure 7.1 App walkthrough, 5th Oct 2022
TUTORIAL/PRACTICAL:
Tips:
-Dot turn black if have content
-Name layer
-Overlapping shapes in same layer (erase)
-Classic tween: Convert graphic
-Convert to symbol (movie clip)
-Ctrl enter (view on browser)
Week 3 Exercise
1. Animate the box from top left top top right
2. Animate from top right to bottom right
3. Animate from bottom right to bottom left
4. Animate from bottom left to top left (original starting position)
5.Morph to a rabbit (break apart), highlight > shape tween (morphing)
6.Rabbit blink
7.Bouncing ball
Week 4 Exercise
Pages, button, back button, button on click, animate text
Week 6 Exercise
Pages with content, view item Prev and Next
Week 7 Exercise
Add to cart, cart amount, prev and next item.
Idea 1: Tote Bag Store
My first idea was to build a tote customisation app, however due to time limitation I was not able to build a complete the brand profile. Therefore I decided to go with Idea 2.
Idea 2: Cake Store
Continue OKEK brand that I did for my brand corporate identity module, I decided to create an app for this brand. I decided to go with second idea.
Figure 6.3 App Flow, 5th Oct 2022
Task 1 Submission
FEEDBACKMr Razif looked at my draft interface design for tote app, he advised me to reduce the button and image size to include more breathing space. I need improve on the aesthetics complete the transaction pages. For Okek app, looks fine overall. Can add animation to make it interesting. The greeting card page can remove.
FEEDBACK
REFLECTIONExperience: This module looks stressful as I have never used Animate before, it took me quite some time to digest the information and make things work. The basic exercises in Animate were exciting, but when it came to the app, it was slightly different. I have tried my best on this project, but I need more practice to master Adobe Animate.
Observation: The coding part was slightly different than what we learned last semester, Adobe Dreamweaver. It could have been more precise, and we always have to add this.stop ( ); in the timeline. However, Animate does help with the coding wizard part so that should make things a little better.
Findings: I am glad that Mr Razif is willing to help in a one-to-one tutorial to troubleshoot the error I faced. I would only have made the HTML work with this help. I realised that we need to be patient in finding the key error when the code doesn’t work.
REFLECTION
Experience: This module looks stressful as I have never used Animate before, it took me quite some time to digest the information and make things work. The basic exercises in Animate were exciting, but when it came to the app, it was slightly different. I have tried my best on this project, but I need more practice to master Adobe Animate.
Observation: The coding part was slightly different than what we learned last semester, Adobe Dreamweaver. It could have been more precise, and we always have to add this.stop ( ); in the timeline. However, Animate does help with the coding wizard part so that should make things a little better.
Findings: I am glad that Mr Razif is willing to help in a one-to-one tutorial to troubleshoot the error I faced. I would only have made the HTML work with this help. I realised that we need to be patient in finding the key error when the code doesn’t work.
Comments
Post a Comment