Advanced Interactive // Final Project: Thematic Interactive Website
21.6.2023- 16.7.2023 (Week 12 - Week 15)
Britney Chow Pei Jun / 0350043 /
BDCM
Advanced Interactive
Final Project: Thematic Interactive
Website
LECTURES
WEEK 3
For this week, we're learning Adobe Animate. Below is some my learning
progression.
Fig 1.1; Classic Tween; (19/04/2023)
In this week's class, we learned about making a very simple animation in
Animate CC. Basically, some of them are quite similar with After
Effects, since we have to add keyframes to make it work and whatnot.
After that, in order to make the animation play smoothly, we have to
apply classing tween to it.
Fig 1.3; Other Tweens; (19/04/2023)
Fig 1.4; Classic Ease; (19/04/2023)
After learning classic tweens, we then start to learn about other
tweens, we first start off by using classic tween again, but this time
we can add in classic ease to make the animation even more
smoother.
Fig 1.5; Circle Scaling; (19/04/2023);
Fig 1.6; Circle Sliding Out; (19/04/2023);
Fig 1.7; Shape Tween (process); (19/04/2023);
Fig 1.8; Circle changing color and shape (result);
(19/04/2023);
Fig 1.9; Shape Tween 2 (process); (19/04/2023);
Fig 2.0; Square changing into another shape (result);
(19/04/2023);
Fig 2.1; Motion Tween; (19/04/2023);
After that, we start to learn both shape and motion
tween. In this case, we used shape tween to change the
color and the shape of the original movie clip. Before
that, we need to make everything that needs tweening
into a movie clip. After that, we use motion tween to
plan out the path way the shape goes.
WEEK 4
Fig 2.2; Page Navigation Exercise; (26/04/2023)
Fig 2.3; Creating Page 1; (26/04/2023)
Fig 2.4; Creating Page 2; (26/04/2023)
Fig 2.5; Creating Page 3; (26/04/2023)
In this exercise, we were taught on how to do a page navigation along
with its animation. First of all, we need to create the pages first,
in this case it's the blue rectangle, a pentagon, and rectangle boxes.
After creating them, we have to name them into labels in the timeline
section.
Fig 2.6; Creating buttons; (26/04/2023)
Fig 2.7; Editing buttons; (26/04/2023)
Fig 2.8; Coding buttons; (26/04/2023)
Fig 2.9; Stop looping; (26/04/2023)
Next, we will have to create buttons for each page as to have
the users to direct them. I have created 3 buttons and named
them accordingly. However, our lecturer reminded us that not
only do we need to name them when we convert them into symbols
but we also need to name their instances. After making sure I
have done that, I then proceed to edit the buttons such as the
hit, hover state. With that done, we proceeded into coding
section.
WEEK 12
Fig 3.0; GSAP Animation; (21/06/2023)
This is a very short exercise. Basically in this week's class, we learned
about importing GSAP animation into Animate CC and using it. In this case,
we used GSAP Animation to make the box bounce after it's clicked. By doing
this code, we used a simple function provided, which is "add using wizard"
and add the GSAP Animation code that we can get from its website.
Fig 3.2; GSAP Animation 3; (21/06/2023)
Fig 3.3; GSAP Animation 4; (21/06/2023)
In this exercise, we used GSAP to navigate between those pages in order
to make the animations seems more smoother. As we can see in the code,
the first 2 lines of codes makes the screen move from the left to the
right and come back to the left again without any triggering events.
Then the other codes is to make the buttons functional. So, depending on
which page the user wants to go, the buttons can direct them.
Fig 3.5; GSAP Animation 6; (21/06/2023)
Fig 3.6; GSAP Animation 7; (21/06/2023)
Fig 3.7; GSAP Animation 8; (21/06/2023)
Fig 3.8; GSAP Animation 9; (21/06/2023)
The same goes for this exercise, but we used a different image
instead. By clicking the buttons, it directs us on which side of
the page to go to.
PROGRESSION
For our final project, we have to choose either a product or service to do.
Below is my progression for my final project.
Visual References
Fig 4.1; Search for Work Happiness 3; sauce: (Find Work Happiness)
Our lecturer has shown us some of the examples of the website that we
could do, some ideas that we can take a look at FWA website, and this is one of them. This website is about promoting a book
entitled "The Search for Work Happiness" and I think it looks pretty cool
since there's many interactable elements in it. Furthermore, the art style
of the website seems really cute too, and I also think that it has
effectively promoted their book.
Fig 4.2; Field Day Sound 1; sauce: (Field Day Sound)
Fig 4.3; Field Day Sound 2; sauce: (Field Day Sound)
Fig 4.4; Field Day Sound 3; sauce: (Field Day Sound)
Fig 4.5; Field Day Sound 4; sauce: (Field Day Sound)
Another website that I have browsed through is Field Day Sound. This
is a website of them trying to promote their creative sound and music
company. I think that the whole website looks quite okay since it's
pretty minimalistic for its landing page, but when you hover over
their different categories, they will play different videos for it.
Overall, I think it looks okay.
Fig 4.6; Baden-Württemberg 1; sauce: (The Land)
Fig 4.7; Baden-Württemberg 2; sauce: (The Land)
Fig 4.8; Baden-Württemberg 3; sauce: (The Land)
Fig 4.9; Baden-Württemberg 4; sauce: (The Land)
Another website that I'm interested in is this, a website that
promotes Baden-Württemberg and its land, basically providing good
career opportunities and whatnot. I like how there's little
animations going on even while behind the scenes. Furthermore,
users can also drag around to see more areas of their land and
interact with small little places that will pop up information. I
think I really like this website as it gives off both cool but not
noisy type of feels in the website.
After doing some research of the websites, I then proceeded to
prototype mine out in Figma.
Prototyping
After much debating and research of what I'm going to do, I decided that in
the end, I'm going to do the 2 new drinks that San Francisco Coffee just
released during summer.
Fig 5.0; Assets Preparations; (28/6/2023)
Fig 5.1; Assets Preparations 2; (28/6/2023)
Fig 5.2; Assets Preparations (typeface) ; (28/6/2023)
Fig 5.3; Working in Figma (Page 1); (5/7/2023)
Fig 5.4; Working in Figma (Page 2) ; (5/7/2023)
Fig 5.5; Working in Figma (Page 3) ; (5/7/2023)
Fig 5.6; Working in Figma (Page 4) ; (5/7/2023)
Fig 5.7; Working in Figma (Page 5) ; (5/7/2023)
I first start off by making the assets in Illustrator and Photoshop
depending on what I need. After deciding the colors and the typeface
that I'm going to use, I then proceed to work on the layout in Figma
so that I can have more clearer visuals on how I'm going to proceed
with my website in Animate CC. Below is my Figma Prototype.
Execution
After completing the assets, layout planning and whatnot, I then proceed to
work it in Animate CC. Below is some of my progression:
Fig 5.9; Logo Animation; (10/7/2023)
Fig 6.0; Homepage Animation; (10/7/2023)
Fig 6.0; Button States; (10/7/2023)
Fig 6.1; Button Scripting; (10/7/2023)
After importing all the assets and convert them into symbols, I
then proceeded to animate them. This part is pretty easy since we
have learned it before in class and I have also looked up for
tutorials in YouTube whenever I have a problem. However, in this
part, I decided to change the gif animation that I initially
planned to put since the original gif is too big for it to work
and it makes my computer flies. So I decide to save myself and my
laptop from the trouble and change it to a slightly lesser trouble
gif.
Fig 6.2; Second Page Animation; (10/7/2023)
Fig 6.3; Second Page Animation 2; (10/7/2023)
Fig 6.4; Cloud Animation; (10/7/2023)
Fig 6.5; Button State Animation; (10/7/2023)
For second page animation, it is pretty similar to the
homepage as I just need to arrange the keyframes and the
placement of each movie clip and buttons. However, for
this page, I decided to add some minimal animations to it,
for example, the spinning sun and also the moving clouds.
In order to do this, I have to animate it in the sub-layer
of the cloud movie clip instead of the main one. After
getting the hang of the software, I was able to quickly
get the logic behind it and work with it.
Fig 6.6; Page 4 Animation; (15/7/2023)
Fig 6.7; Page 4 Animation 2; (15/7/2023)
Fig 6.8; Button scripting; (15/7/2023)
This page and the third page proves to be slightly
harder compare to the others but it's not as big
deal since I was able to solve it quickly without
spending much time than I expected. For this page,
I planned to make buttons appear on the drinks and
after it's clicked, the information of the drink
will pop up. I first animate the info pop up in
its sub-layer and adding classic ease to it to
make it smoother. Next and I placed it in the page
4 scene and started to script it. I first planned
to make it hover instead of clicked, but then it
works weirdly, so I decided to change it into
clicking.
Fig 6.9; Contact Us Page Animation; (16/7/2023)
Final Submission
Fig 7.1; Video Walkthrough of Website; (17/7/2023)
Link to Website: SFC Coffee Thematic Interactive Website
FEEDBACK
*none*
REFLECTION
For this project, I think it's quite fun since we were able to explore
different types of website and interact with it and in the end, create our
own website. At first, I think it will be real great if I can go something
game related for the project, however, after much thinking, I thought I
could do it if I have more time. However, due to the amount of other
assignments I have, I think it's pretty sad that I couldn't and have to go
for my second choice instead. Nonetheless, I still feel great since I was
able to finish it in due time. Although I may not be as satisfied with my
end product, I really do think I learned a lot.
Comments
Post a Comment