14/06/2026 - 31/07/2026 / Week 8 - Week 15
Brenda Wynn / 0372128
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Final Project
JUMP LINKS
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1OhJvwPizBbma-LeDC3b67bNyg_n7yPwh/preview"
width="640" height="480"></iframe>
TASK
We were tasked to create an interactive website using Adobe Animate. I
decided to create a website that is dedicated to marine life. The purpose of
the website is to spread awareness on marine animals endangerment and
extinction. It also serves educational value towards kids to learn more
about marine life.
The first thing I did was create the assets in Illustrator. I created the
frames for the animation on selected assets that has been created previously
during the prototype creation phase. I mainly utilized the blob brush tool
to create the assets.
After the assets were created, I imported it to Animate and started by
turning the starting drawing as a movie clip symbol. Once the symbol has
been created, I added the rest of the frames and animated inside the movie
clip symbol. I animated all of the assets that required an animation
(animals, cause of endangerment & extinction, and prevention).
ASSET ANIMATION RESULT
animals swimming animation
cause (java stingaree & hawksbill sea turtle)
cause (steller's sea cow)
cause (vaquita)
prevention (plastic waste)
prevention (littering)
prevention (water waste)
Once all the animation components were ready, I started setting up the pages and layers. Then, I started laying out the home page. I added the logo, navigation bar, and animated animal symbols. I also added a hover animation (underlined text) on the navigation bar using the symbol feature.
After I finished setting up the home page, I started including the content on the rest of the page. Because the main mechanism of the website is by dragging/scrolling, I used a rectangle as the foundation and turned it into a movie clip symbol. Inside the symbol, I added the content, animated components, and some texts.
I asked AI (Gemini) to help me with the coding (scrolling/dragging behaviour, animated animals navigation, and cursor) needed for the website after all the components were sorted out. I also fixed the content that is overlapping with the navigation bar using mask layer.
Lastly, I added the background sound to the website which can be activated once the user clicks on the endangered page. I tried to utilize the buttons to activate the sound, but it did not work.
FINAL RESULTS
Google Drive Link:
Netlify Link:
FEEDBACK
- would be good to make the assets more consistent since the thickness of the strokes might differ when scaling
- change the logo so that it is easier to be identified and make it simple
- would be better to change the text boxes with information to animations since the overall website content might be boring
- making the marine animals swim as transition could make the website more engaging
REFLECTION
Through the period of creating the interactive website after the ideation
and planning stage, at first it seemed to be a very difficult task. However,
during the time spent into creating the website was really fun, especially
seeing the website slowly coming together. I would say that the most
difficult and time consuming task was creating the assets. Since the website
that I decided to create requires a lot of animation, the time spent in
creating the frames was very time-consuming. Although, I do think it was
worth it since I am really proud of myself for making it happen. After
completing the project, I felt satisfied with the outcome and I have learned
a lot about Adobe Animate since this was the first time I have properly
utilized it. In the future, I do wish that I could manage my time better
because I did not expect that making the assets would require a long time.
RESOURCES
Arrow:
Sound:
Comments
Post a Comment