Advanced Interactive Design - Project 1
Kyra Binti Rizal Hamzah / 0337085 /Advanced Interactive Design / March-July 2021
PROJECT 1
Prototype mobile application using Adobe Animate. Example, online ticket booking system, food ordering system, online store etc.
Submission
26 April (Week 5)
Basic requirement:
5 screens / pages (Example: Welcome, Login, Category, Item Detail, Add to cart, Payment method, Your Item is On Delivery, Thanks you)
Interface transitions / animations
Scripting for buttons and other interactive element
resolution 720x1280 Portrait (HTML5 Canvas)
* Please ZIP your project folder, and record a video of your project
* Not all sections or button need to be clickable / visit-able. For example, online furniture store might have 3 different sections, "table", "chair" and "bed". You just need to do one for "table"
Week 1
Lecture : Module introduction. Scripting buttons and an introduction to Adobe Animate.
Exercise: Play around with adobe animate, come up with an idea for your first project.
The idea I have in mind for my project is to create a museum ticketing app.
I started off by putting together a user journey map for the app.
Then I found some examples online for inspiration,
and started putting together a lo-fi wireframe.
I started working on the hi-fi prototype as well. So far I only really finished about half of it.
Feedback from Mr Lun - Finish up the prototype asap so you can figure out how to animate it.
Week 2
Lecture : Continuation of button scripting. Radio buttons and checkboxes,.
Finished the design for my app. Mr Lun suggested to quickly start working on the animations and such.
I wasn't so sure about how to approach it, so to organise my thoughts in a way that works better for me I printed out my design prototype to make notes.
From there I figured out how to export the different assets (what would be grouped/animated together and what would be separate) and had a plan for how each page would be animated.
Week 3
Lecture: Buttons to add/subtract numbers
This week I started moving assets over into adobe Animate and started putting everything together. I struggled a bit at first as I didn't realise that each layer could only have 1 thing happening in a tween? (eg everything moves up or everything moves down). I don't know how I didn't realise that sooner. It wasn't a very difficult thing to fix as I just had to break things up into seperate layers, and from there things have been going more smoothly.
Week 4
Lecture: Masking
I finished animating all the different parts of the app and started the scripting.
The scripting at this stage was pretty straightforward. Just a lot of ''this.stop()'' and the following lines that were covered in an earlier lecture.
All that's left is to script the add/minus button in one of the screens and also the scripting for easing.
Week 5
I finished up the adobe animate portion of the prototype, so next I added a tiiiiny bit of CSS : a background colour and a border to make it look more like a phone.
Final animated prototype:
