Home Page Animation

My initial plan for the animation was that the two figures will come into the website as soon as the user goes on the page. Then I wanted to create buttons that would appear and the user could click on in order to make the figures in the page ‘speak’ to the user. I thought that having the user click on buttons will make the website more interactive. Thus I started experimenting with creating responsive buttons on Adobe Edge. I decided to use Adobe Edge Animate as it has more interactive possibilities. The hardest and the most interesting part of this whole process was learning  Javascript coding in order to make my buttons responsive. I watched multiple tutorials on youtube and it was really complicated at first because it was hard insert a code on the buttons that would make the text visible one at a time, depending on what button was clicked. I couldn’t get the animation right at first but after a while I started to finally understand how it all works and I managed to create the animation that I thought I wanted to include in my website.

The below images are screenshots of my process of creating the animations for this page.



I wanted to play with the code in order to make responsive buttons that would appear one by one in order to display different part of the conversation between the user and the figures. Another complicated part was that I had to make sure that the ‘click’ buttons become visible one at a time and that two buttons would not be visible at the same time as I thought that will confuse the users. I thus, had to input various ‘Click’ buttons on the circle around the figures and make sure that a button goes invisible once clicked and then another button would appear, revealing more of the story. Despite the fact that I managed to achieve that in the end and I was very happy that I got to play around with the code which allowed me to get more familiar with the capabilities of Adobe Edge, I didnt end up liking the effect that was created. I mentioned earlier that next term I would like to also allow the users to animate parts of the figures themselves by displaying ‘click me’ buttons. Separately these two effects might look interesting, but together they look too messy and confusing and I think they would disrupt the flow of the website and make the users loose their interest.

Thus, I decided to just make a simple gif animation for the conversation part of this page. This will allow me to add interactive movement of the figures next term, which will appear as ‘click me’ buttons after the gif text finishes playing.


I was overall very pleased with the result of this page and Im happy that I experimented with new features of Adobe Edge. Even though I didn’t end up using the coding that I learned, I still feel like I could apply this knowledge next term if I decide to create responsive buttons to any of the pages. I could also apply these skills that I have gained in my career in the future. If I ever need to create an animation for a company that I’m working for, I could use my existent knowledge to produce something even better.

Additionally, in the lecture with John Marchant, he highlighted that not following conventions could create an interesting effect. I thought that my website will not have a menu which in a way relates to his point of not following conventions because typically, websites have a navigation menu. Thus, by making the choice not to include a menu, I am forcing the user to follow a specific path and because the user cant go back and forth between the pages, he/she will have to stick to my navigation plan. Additionally, not including a menu was done in order to  make sure that the user follows a specific journey because if the user had the option to choose which section of the quiz he could go on, then the narration would be ruined. Thus, the order of everything within the website is extremely crucial for the desired effect.


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