Oh, the places you’ll see, the portals you’ll fall through

My animation, titled “Portal,” is about getting lost in smart phone technology. This topic fits in to my senior art portfolio, which discusses smart phone and social media’s impact on people’s social experiences. The story is also inspired by a print that I created last year and the video game Portal. To keep the aesthetic of the animation consistent with my other artwork, I drew all of the graphics by hand on Animate CC. Although I’m not certain that this animation will be a part of my senior show next spring, I felt it was a way to explore my ideas and approach them in a different medium than painting or printmaking.

“Portal” has a two-dimensional, monochromatic graphic style. Its color scheme is completely blue, referencing social media interfaces’ iconic and familiar blue colors. There’s no direct reference to a real living person in my animation, but the main character is a figure that turns her phone on and then shrinks to a smaller version of herself that falls through one end of the phone and out the other. Another figure exists in the beginning and end of the animation, but has no other identifying characteristics except for anonymous silhouette. These figures and main theme of getting absorbed in a smart phone are inspired mostly by friends, family and my own use of smart phones.

A couple of tools that were key to creating “Portal” were reusable symbols and shape hints. First, reusable symbols are elements in Animate CC that start off as shapes and then are converted into symbols so that the user can incorporate them into different spatial locations and moments of the animation. Viewers can distinguish reusable symbols most easily when they see different objects moving individually and separately from everything else in the frame. My reusable symbols include the silhouette’s hand holding a phone, the silhouette’s eyes, and the silhouettes. All of these symbols appear at the beginning and end of the animation, so reusable symbols made my life much easier when I wished to recreate the same scene at both moments. Second, shape hints are invisible markers that Animate CC uses to morph one shape at one frame into a different shape at a later frame. In order to achieve this effect, I referred to chapter 10.2 of Anastasia McCune’s video tutorial, Flash Professional CS6 Essential Training, which covers how to apply shape hints. They created a much smoother transformation that Animate CC’s presets. I also read a section of a support page on Adobe that explains in detail how shape hints work. According to the page, shape hints tell Animate CC what starting points will turn into certain ending points in a shape’s transformation. This was really useful to my understanding shape hints because McCune gives only an overview of how to apply shape hints, rather than how they work most effectively. The learning process of how to apply shape hints took about 15 minutes, while actually applying them in the scene where the circle morphs into a phone took about 5 minutes.

While working on “Portal,” my greatest challenge was organizing frames, blank frames, and motions on the timeline at the bottom of the Animate CC interface. My work method usually involves me first focusing on details while losing sight of the big picture. I gave myself a lot of trouble when I focused on small portions of one layer’s timeline when I could’ve been more conscious of how every layer’s timeline works together. In order to counter this problem, I’d step back from the project and look at the timeline as a whole. Also, I’d play the animation several times while I worked just in case I missed a mistake that I made.

If I could change something about my animation, I might replace the music, Dave Brubeck Quartet’s “Unsquare Dance,” for another song. I used free, online sound files for the background ambience, phone alert, and the Dave Brubeck Quartet’s musical piece. I’m not exactly sure that “Unsquare Dance” is the best fit for the story, but I really like the song, so for now it’ll stay. Happy portal-ing.


I found the phone alert sound effect on a free sound file website called SoundBible, the crowd ambience sound on another sound file website named AudioBlocks, and converted the Dave Brubeck Quartet’s song “Unsquare Dance” from a YouTube video to a sound file using the online video converter convert2mp3.

I watched Anastasia McCune’s Adobe Flash video tutorial to apply shape hints.

For another explanation of shape hints, I visited Adobe’s support page on shape tweening.

This entry was posted in #2. Animation. Bookmark the permalink.

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