Web animation for interactive media: Task 3

Here is my finished vector based project for web design:



This animation was created in after effects as a demonstration of what a functional website would look like based on my pre-production and planning, all of the assets were made previously used for my graphic narrative, so not much creative effort was needed to create this project, since the old assets served their purpose.

My goal was to have an interactive website where the user can explore the different elements within the games story, with each page/slide having its own distinct theme and feel, while making it easy to access and navigate.

Although I think the end product is suitable, I think that more could have been done to make it more animated and lively, the buttons light up as you interact with them, however, you are greeted by still images when you visit each page, perhaps the the various creatures on display and their backgrounds could have been made to move around in order to make visiting the website more engaging and exciting.



Creating this in after effects required A few extra assets on top of the ones I already had in order to make it interactive. Firstly, a mouse cursor from Google, since you cannot screenshot your own mouse on mac.

Image result for mouse cursor

I also wanted some sort of highlight to make sure that the user knows they have a clickable item selected that can take them somewhere, I took the original image from my graphic narrative:


And added some glow effect to them in Photoshop, and placed them over the original items in after effects to give off the illusion that something is being highlighted, when it is actually a different image entirely.

swirly not highlightedswirly highligted

I then wanted some sort of left and right arrows, to make the website navigable in a slide show style, so I created these arrows in Photoshop with the “Custom Shape Tool”


I then added my original asssets from my graphic narrative, that would be reachable by clicking one of the symbols on the main menu. to the them to both sides of each slide, adding a navigational tool for people to explore each slide.

fire transition

To create the transition from each slide, I then took a box of each color, orange, blue, green, and grey, and had them mask the entire after effects project using scaling opacity, when the opacity of the box reached 100%, It would then remove the previous image, and introduce the next one.



I then used the appropriate colours to have a transition from each slide.








Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s