Advance Interactive Design/Final Project: Completed Thematic Interactive Website
6/11/2024 - 8/1/2024 / Week 7 - Week 15
Janice Marie Eng Chia Hui /0361521
Advance Interactive Design/Bachelor of Design in Creative Media / Taylor's University
Advance Interactive Design/Final Project: Completed Thematic Interactive Website
Figure 7.2 Inspiration behind my preloader animation (28/12/24)
Janice Marie Eng Chia Hui /0361521
Advance Interactive Design/Bachelor of Design in Creative Media / Taylor's University
Advance Interactive Design/Final Project: Completed Thematic Interactive Website
Table of Contents:
Instructions
Task
To-do list:
- Source images for the pages (about them, tour locations and tour location) that have not been created yet
- Find out how to implement the prototype created (link)
- Realised that some of the things I planned to do didn't work in Animate so I changed my plan
- Carry out the new plan
-
Break down
The Initial Plan
My initial plan was to find videos on the things I wanted to do online
and learn from there. However, there is a surprising lack of videos on
how to make a website with Adobe Animate (AA). So my next plan was then
to random bullshit it until something clicked.
Something did click in the end and my plan was to make movie clips of
my animations and then place those movie clips into one movie clip. Said
movie clip was then placed with other movie clips in one movie clip with
gave me a total of 1 movie clip (with movie clips inside of it) that I
could control. Does this confuse you, me too I am still
confused.
Figure 1.1 Rough breakdown of my workflow, One big movie clip(mc)
containing multiple mc's which also contains mc's (27/12/24)
For the assets, I made them as I did the website. I used a mix of
Figma and AI (Adobe Illustrator not ai ai) to make them. This part had to be the most time-consuming
part. I created a shit ton of assets, some of them were not used as I
changed the design later on.
Moving onto the audio, I realised that AA doesn't support MP3 files.
So I started exporting my audio in WAV format. I managed to export
them with an online tool (pretty sure some of the music is copyrighted
and what I'm doing is illegal so I won't share the tool link). After
exporting them, I just brought them into Premier Pro to cut out the
parts that I wanted.
Unused Screens
There were 2 unused screens created, the menu screen and a loading
transition screen. The menu screen was scraped because I did not know
how to link the transitions between the menu screen and the next
page.
The transition screen was scraped because it lagged a lot.
Figure 2.1 Transition Screen (left) and Menu Screen (right) (too
lazy to make it into a gif) (27/12/24)
Landing Page
After deciding on how I would carry out the animation, this page was
pretty simple to do. I just had to make the movie clips for all of
the moving elements on the landing page.
Figure 3.1 All the MC and graphics used for the landing page
(shown in the library on the right) and the final product (left)
(27/12/24)
Figure 3.2 Final product of the Landing Page (27/12/24)
About Them Page
For this page, I was confused about how I should link these pages. I
wanted to use arrows to control them like a carousel, but I had a cover
page where the arrows would not be shown.
Looking back now, I realise I could have made use of the hide/show
function in the code to show the arrows when clicking. However, that is
not what I did.
What I did was I made some type of name card above the carousel to
represent the girls. On click of this name card, we will be brought to
the member page. Additionally, you can access them by clicking on their
figure on the cover page (i only made one of them clickable tho..). I
controlled the MC for the code by abusing the 'go to frame label and play' function.
I also wanted to add sounds when the buttons were clicked. My plan was
to find some audio clips of the members introducing themselves and then
put them into AA. Initially, I took my audio from this video (link), but there was too much background noise and I did not know how to
isolate their voices. So I found another video (link) but realised it sounded too formal (not the vibe of my website). So
in the end I managed to find this interview video
(link)
of the band and cut the audio from there.
Figure 4.1 The member's page can be accessed by clicking on the
members themselves or by clicking on their name cards (as
highlighted) (28/12/24)
Figure 4.2 Final Abt them page (28/12/24)
Tour Locations
In this page, I made individual movie clips for the tour location
pop-ups. After animating them in their respective movie clips and adding
the corresponding code (making use of the 'go to label and play' again),
I placed them into the main mc.
However, this is where I had an issue. The pop-up would open in its own
mc. So when they open in the main mc, the other pop-ups get covered by
the pop-up that is opened. Basically, a layer issue. I tried to change
the Z-index in the code, but it did not work. I then tried using the
show/hide function, but I did not have the means to make the show again.
In the end, I decided to cheat and just, slightly shift the position of
the pop-up (definitely not completely change its position).
Moving on, I had another issue. The band tour... was over.... It had
passed. I initially wanted to put a BUY TICKETS button but can't now....
So I changed it to a sold-out button instead.
Figure 5.1 Recreation of the issue I had in Figma (location icons
were in front of the pop-up) (left) vs very scuffed solution (right)
(28/12/24)
Figure 5.2 Final Tour Location Page (28/12/24)
Latest Album page
For this page, I wanted it to look like a Spotify playlist, where you
could play the music you wanted, and then on the side, you can watch the
music video. However, after some digging, I realised that it is impossible
to place a mp4 video into AA without opening it up like a separate link
(like a pop-up or smt like that, which was not what I wanted).
So I brainstormed and decided to use a GIF of the music video. I managed
to make clips from the music video into GIFs and imported it into AA. I
ended up with around 1k frames just from the GIFs alone. This is why after
importing them, my AA crashed and I had to recover the file.
Ya, I decided against using GIFs and decided to make a vinyl record play
when the song is chosen :D.
After that was decided, I just abused the 'show/hide' and 'go to frame
label and play' functions. I ran into an issue again, where when the play
button is pressed, the music would play, but I couldn't pause it. This was
because I imported the audio into the frame itself.
I looked around and managed to find this
video
where he teaches us how to call the audio with a linkage. So I put the
code in and it worked. However, there was now an issue where one of the
audio wasn't playing anymore. After working on it, I decided to just redo
the code again. It still did not work so I deleted the existing audio
reimported the audio and relinked it. Finally, it worked. Not too sure
what went wrong there, but at least I managed to tidy my script up a
bit.
Figure 6.1 Snippet of code used for the latest album page
(28/12/24)
Figure 6.2 Final Result of the latest album page
Preloader
I wanted to make a preloader. So I made one in AA, exported it as a GIF
and placed it in the publishing settings. Then I previewed it, and I
realised that AA does not make the preloader responsive. So the preloader
was placed below the page, and there was a large empty space on the top of
the preloader.
So I read around a bit and found out that this was an issue with AA
itself. I tried to find a solution, and it seems that I would have to
change the code itself. So I opened the HTML file in Visual Studio Code
and edited it. With the help of the inspect tool in Chrome, I managed to
make the preloader align in the centre. However, I'm not too sure if it's
responsive as viewing it in different screen size causes it to
shift.
Figure 7.1 Preloader GIF (28/12/24)
Unresolved Problems
- Audio: On load of the page, the audio 'we are Atarashii gakko' is supposed to play. However, currently, this audio only plays when you load the first time after you on your laptop. Meaning, once you on your laptop and access the website, the audio will play then. If you refresh the page the audio won't play then. IDK why.
- Transitions: The buttons are linked to specific animation clips, so if the buttons are not clicked in order, the transition will look weird and funky
- For the members page, only one of the girls is clickable, the rest is not because I did not know how to make the transition
Final Submission
Some of the btn needs to be clicked in a specific order or else it won't play the transition properly. IDK how to use animate to make it work.
Website Link:
Website:
Video Walktru:
Video Presentation:
Feedback
Week 14:
For the issue with your sound not playing on your laptop but on your other laptop, you can just leave it.
Reflection
What I have learnt:
- Movie clips are amazing. It makes my workspace neater and less cluttered and I can do each animation on a new canvas in the movie clip. It also reduces the number of layers in your stage scene
- The action script or code used in AA is like Js but also not the usual language I'm used to (from games dev and app design 2)???? So I had a hard time trying to understand what I needed to do.
Findings:
- Adobe Animate(AA) sucks. I hate it so much. They use design but also code. I don't know maybe it's cause I'm learning other software at the same time, but I really hated using AA.
- There is a lack of videos out there on how to use AA to make a website, so you really have to be creative and innovative with the videos you manage to find.
- You can edit the code in Visual Studio Code lmao
- This is my first time making like a website website. And the amount of work needed to get done is insane. Audio sourcing, asset sourcing, content writing, research that needs to get done to find assets and content, making the actual design etc.
Observations:
Back in interactive design, I made a website for the same band as well.
As I was uploading this project onto Netlify, I went back to see the old
website. I realised that I have gotten more consistent with my designs
(same padding for all sections and same title layout etc). It was nice to
see as I also realised that I still had the same design style.
However, I do think that I need to make my layouts more consistent and be
more detail-oriented in my designs as I think they still look a bit
messy.
Was reading through the Adobe forums while looking for solutions.
Shoutout to this one guy who replies like he doesn't care about you but
still somehow manages to appear in all the forums I was reading tru. He
truly does care
Comments
Post a Comment