Cityscape Interactive Animation
A vector interactive illustration of a cityscape. Created in Adobe Illustrator and Animate.
Objective: Illustrate, animate with HTML5, and use JavaScript to create an interactive animation
Response: My illustration is of a quiet moonlit cityscape along an ocean shore. I animated my content as a vector illustration, and I then brought it into Adobe Animate for animation. I wanted to create a very subtle animation that visually enhances and does not distract from my illustrative work. As pictured below, I animated the twinkling of a select few stars in my night sky and the rippling of the water on the shoreline. My interactivity allowed for several other animations to be triggered with the use of the coding language JavaScript. Upon clicking on the moon, a shooting star is animated to fly across the sky. I also programmed the building lights to be interactive, each click turning the lights on and off. My final interactive component was triggered upon touching the water. When you click the ocean, a fish leaps off the water and creates a splash as it descends.