Advanced Interactive Design-Exercises

-
24.04.2024-22.07.2024 / Week 1-Week 14
Kor Qian Qian / 0359496
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises

INSTRUCTIONS



Exercises

Week 3-Adobe Animation tutorial

We learned to create illustration in adobe animate.
Fig 1.1

Week 4-Shape

We learned simple animation using keyframe with shapes.



Week 6~8-Create a text animation



(Steps for the tutorial work)

Note: unlock the layer only can edit, lock the layer to run the animation
  1. Create new file-(change artboard colour) properties-stage-colour
  2. File-Public setting-Include preloader- default
  3. Create a new layer-name it as 'Text"-create a text and type "WELCOME"-align to the center
  4. Modify-break apart/ cmd+B (do it twice, if only once is just break apart each alphabet)
  5. Select the object (cmd+A)-convert to symbol (keyboard F8)-name it 'txt_welcome'
Animate it appear from bottom
  1. Create a new layer-create a rectangle same size with the text (can show outline in the layer-show layer in outline)-name the layer 'mask_idn'
  2. Select frame 10 for the layer 'text'-insert keyframe
  3. Select frame 10 for the layer 'mask_idn'-insert frame
  4. In frame 1 of 'text', use arrow key on keyboard move down the text out from the rectangle
  5. Insert classic tween in 'text' (right click-insert classic tween)-insert ease out in properties, frame
  6. Select 'mask_idn'-right click-mask
Animate the text going down
  1. 'text' frame 20 insert keyframe- 'mask_idn' insert frame
  2. frame 30 'text' insert keyframe-'mask' insert frame-move down the text
  3. insert classic tween between frame 20&30-ease out
Next text (can do it in same layer 'text')
  1. frame 35 'text' insert blank keyframe (not continue with the 'welcome' anymore)- 'mask' insert frame
  2. add the text to "to"-select the text- cmd+B twice-convert to symbol-name it 'txt_to'
  3. align to center- use arrow key move it outside the box
  4. frame 45 'text' insert keyframe- 'mask' insert frame-align the text to verticle center to the stage
  5. create classic tween-ease out
  6. frame 55 'text' insert keyframe- 'mask' insert frame (a pause)
  7. frame 65 'text' insert keyframe- 'mask' insert frame-move down the text outside the mask-classic tween
Do "Advanced"--same step with the previous one

Do "Interactive"
  1. add a layer-name it 'cursor' (blank keyframe at frame 1)
  2. insert blank keyframe in 'text' frame 70-type "Interactive" in the center-cmd+B twice-insert keyframe at 'mask' and 'cursor' also-
  3. create a rectangle tool in 'cursor' just beside the letter I (the typing bar, width:5 height:70, only fill no stroke)-convert it to symbol-name it cursor
  4. (in frame 70) move the mask to the left of the text (at the left of the cursor)
  5. frame 75 'cursor' insert keyframe- 'mask' and 'text' insert frame
  6. frame 70 (resize the cursor)-properties, object-unlock the w&h-Height: 1px, width: 5px
  7. 'cursor' insert classic tween between frame 70&75, ease out
  8. 'cursor' add 6 keyframe (frame 76-81)
  9. frame 76,78,80 press delete
Start animation
  1. unlock 'mask'-'cursor' & 'mask' frame 85 insert keyframe- 'text' insert frame
  2. frame 95 'cursor' & 'mask' frame 85 insert keyframe- 'text' insert frame
  3. move the 'cursor' to the end of letter E-insert classic tween-ease out
  4. move 'mask' come in on the text-insert shape tween-ease out
  5. give a pause) frame 105 'cursor' insert keyframe- 'text' & 'mask' insert frame
  6. 'cursor' insert 6 keyframe (frame 106-112)- dlt 106,108,110- insert keyframe at frame 122
  7. 'text' & 'mask' insert frame at frame 122
  8. select the cursor at frame 122-width: same with the mask rectangle-move the cursor to left align with the mask
'Enter' animation
  1. Hold CMD drag to frame 115
  2. frame 115 add blank keyframe
  3. create new layer-name it 'txtenter'-insert blank keyframe on frame 110-type the word 'enter'
  4. cmd+B twice-cmd+g group the text
  5. frame 119 'txtenter' insert keyframe-inser frame 'line'
  6. frame 110 'txtenter' rightside alpha 0
Convert to button
  1. create new layer-name 'btnenter'-hold shift select 'line' and 'btnenter'-copy
  2. frame 119 'btnenter' add frame-frame 120 cmd+shift+V (paste in place)
  3. 'btnenter' convert to symbol-type-button
  1. add new layer-insert blank keyframe at frame 120
  2. add new layer 'action'- frame 120 add keyframe-right click action-add using wizard-stop-this timelime-next-with thif frame
  1. add new layer 'mainmenu'-frame 121 add keyframe-add text 'title page'-create a rectangle-cnp 4-select all the rectangle no title-right click-ditribute to layers
  2. name each layer 'menu 1,2,3,4'-top left is 1-bottom left is 2...

Week 9-Web Anim

We learned to create animation for website with created the layout and grouping in Adobe Illustration first. We learn to add action to button and play the animation.


Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design-Final Project

-
Image
23.06.2024-03.08.2024 / Week 9-Week 15 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project INSTRUCTIONS Final Project -  Completed Thematic Interactive Website In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience. Process Preloader page At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, a...
Read more

Advanced Interactive Design-Task 1

-
Image
24.04.2024-29.05.2024 / Week 1-Week 4 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Task 1 INSTRUCTIONS Task 1 - Thematic Interactive Website Proposal What to do:  Fig 1.1 Requirement Brainstorming Initially, I explored food brands such as Starbucks, McDonald's, and Burger King, but these themes didn't interest me. So, I looked into many luxury brands, and finally decided to base my assignment on Jo Malone's Mother's Day collection. Jo Malone's Mother's Day collection includes various products such as perfumes, scented candles, and cosmetics. I decided to focus solely on the perfumes from the same collection for the website I'm about to create. Fig 1.2 Main product ...
Read more

Minor Project-Pink Stuff

-
Image
24.04.2024-15.08.2024 / Week 1-Week17 Kor Qian Qian / 0359496 Minor Project / Bachelor of Design (Honours) in Creative Media Pink Stuff-Pinkify Instruction Important link MIRO Board Website Prototype Final Proposal Presentation Slide Final Project Presentation Research Question Google Form Pink Stuff Week 2 - Meet Client Met with the client to gather insights about their preferences for pink-themed products. Discussed the client's expectations from the project. Aligned on the overall vision and direction for the project. Every group members give their idea and opinion for the direction of our products, I suggested pet supplies and eco products. My idea These are the ideas of the team members. All members's ideas Week 3 Decided to focus on gaming accessories as the main product line. Discussed and finalised the specific products to be featured. Planned surveys or interviews to gather user feed...
Read more