11th June - 31 July 2024 / Week 8 - 15
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Advance Interactive
Final Project
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Advance Interactive
Final Project
INSTRUCTIONS
Final Project: Completed Thematic Interactive Website
Progress
Base Site Layouts
Video 1.1. Website Progress 1
I began with the simple site building first, focusing on making sure the pages
were working. I had yet to figure out how to add video in as a background as I
was unable to add a video in the normal way. During class consultations, I was
able to ask how to do it, to which Mr Razif sent a step by step video
tutorial. Of course, I still messed up following a step by step tutorial
because I am impatient and hate sitting through a full step by step video even
if I need it :D
Interactive Trial & Error
Video 2.1. Website Progress 2
I moved on to trying to get the actual interactive stuff to work. Before this
progress video, I actually struggled with the needle bind. Getting it to do
two different animations while clicking the same button/needle was a
challenge. I knew it was obviously possible with javascript since I have
learnt that prior to this class, but it was about 3 years ago and I have since
long forgotten how. I was trying to figure out how to write the if/else
statements and I was not even sure what Adobe Animate limitations are as there
are not as many tutorials on it that are for something that is more than
beginner level stuff. After much trying and stressing, I gave up and asked for
help, and I swear the most dumbest thing happened ever. I wrote the code in,
exactly as given by Mr Razif, but it would not work. When I copy pasted the
code in, it magically worked. I looked at our code side by side and I kid you
not, there was no errors, it was exactly as written but I guess Animate just
hates me.
Anyways, there were 3 main problems I faced in this progress video. One was
obviously my navigation bar, it just would not work nicely, an issue with the
hover part of the code I suppose. The second problem was me wanting to change
song when I change vinyl discs. I was able to get the needle to play and pause
a song, and I was able to get a single button to rotate the discs order, but I
was not able to get the song to change. My 3rd problem was the fact that my
songs to play was actually an mp4 file, not an mp3 or a wav or anything of the
sorts, but the mp4 file was hidden at the back and not able to be brought
forward.
These problems were something I brought up in our next class and although Mr
Razif tried seeing what could be done with the 3rd problem, it would not work.
I was able to bring it forward by editing the code from the Inspect tool when
previewing it on chrome but that was not very helpful with my endeavours.
So I gave that up for awhile and focused on the other 2 problems.
Video 2.2. Website Progress 3
After much trial and error, I was somehow able to get my needle to bind to my
discs, making the song/video pause and the needle to go off the vinyl when I
clicked to change the vinyl. But my problem of song not being able to change
still prevailed. So I seeked help from my gamer nerd coder friend who is
a code master (imo) and he helped me solve my problem in less than 20mins. A
problem I was trying to solve for about 9 hours straight :) It was a reminder
to myself that I should ask my smart friends for help more often.
Finishing Up
Video 3.1. Website Progress 4
I was starting to get the hang of things and able to work more smoothly. I say
that, but in actuality, I gave up on finding a way to bring my music videos
forward and focused on other stuff, like the tour page. I was doing more
research on his tour dates and locations and found out that Arc De Soleil, the
artist, finally had
his website ready
and running. Beautifully done with perfect timing because I realised that
there were exactly 3 looped videos that I could yoink and use to loop for my
MV.
So I was back to trying to add the videos in and bringing the layer forward, I
even tried gifs, but they don't allow that I guess. Eventually I gave up
again, for the millionth time and settled on making it an image sequence. My
slightly-slow-thinking-and-dim-self was adding each image into each frame
manually. There were about 200-400 frames for the 3 videos. I got to my 3rd
video and realised there was indeed a way to add them all in at once easily.
Anyways, I then found out all those images made my loading too slow, so my
hardwork of adding frames in 1by1 went down the drain as I re-exported the
video to have lesser frames and lower quality save and re-imported them, the
easy way this time.
Getting the videos to change along with the vinyl discs was fairly simpler at
this point as I was getting a hang of my code. After this save, at 2am, I had
a HUGE issue the next day when I continued to work on it. My file simply
stopped working. It would load and preview, although slow, but I could not get
past the home page as no buttons would work. Which was odd since I had not yet
made any changes to my code yet. I spent a few hours stressing out and crying
about it because I had no backup, which again, I am
slightly-slow-thinking-and-dim. Eventually, as I cried and felt like a fool, I
decided to just restart from fresh and create a whole new thing from scratch.
I was about as far as getting the needle to animate between play and pause and
decided to recheck the original file again. I kid you not, it began working
just as it was supposed to. I swear, Animate hates me.
Video 3.2. Website Progress 5
After getting it working again, I began backing up everything every 2 hours :)
because fool me once, shame on you, fool me twice shame on me. All that was
left was the Tour page, which was fairly simple work but just tedious.
Although I don't think it was a requirement to have the page to buy tickets, I
wanted that as an option as it just made sense to have. What's the point of a
website for an artist if not. I started with one first to ensure it works
before duplicating and editing the others.
I sometimes enjoy the smaller details of having the dates, venue, time, and so
on, to be atleast realistic or accurate, because I like to give myself extra
work for no reason. So that just became extra tedious for me as each concert
date has its own purchase pop up. The code was straightforward as it was
nothing new, so that part atleast worked out easily and smoothly.
After getting everything working, I did attempt to fix other minor things that
would make the website experience better. These would be referring to the
navigation bar, although I got it to work better than it did before, it was
still a little iffy on the hover part, especially if you move the mouse away
and back towards the 'x' button. I also wanted the video/movie sequence to
play and pause on demand, so that the current video could bind to the needle
as well, and seem as if it was actually connected to the song playing. I spent
quite a while on it and eventually gave up because sometimes, we gotta learn
to be happy as is and not go too over :)
Final Outcome
Website Link:
Arc De Soleil
*note: the load takes quite a while, which I think is due to the image
sequence but please don't hold that against me, I tried my best.
FEEDBACK
-
REFLECTION
noot
FURTHER READING
Aavriti (2017) How to Make a Drop Down Navigation [Video] Youtube. Available at: https://www.youtube.com/watch?v=mVf1s8P32T4
Digital Creative (2023) Adobe Animate CC HTML5 Canvas - exportRoot [Video] Youtube. Available at: https://www.youtube.com/watch?v=-4g__hexsR0&t=414s
Montilla, A. (2023) Create an interactive map in Adobe Animate [Video] Youtube. https://www.youtube.com/watch?v=gQUpsgixAow&list=PLsj4f7BurIrmhHMh2jNuOEVoNFZCi4CCO&index=11
Motion Tuts (2022) Adobe Animate CC 2022 - Use 1 Button to Show and Hide Object - JavaScript - If Else 3 different ways [Video] Youtube. Available at: https://www.youtube.com/watch?v=cEpt-Kpetek&list=PL5-MeQWj9oZrZAFdAQX2uE-BcrS_bW09l&index=34
Comments
Post a Comment