“The Lonely Boat”

storyboard

Rough sketch of my original storyboard for “The Lonely Boat.”

In creating my animation assignment for Games Class, I originally considered following a story similar to that of Disney’s “Steamboat Willie.” An avid Disney fanatic, I set my sights high for an adorable animation about the beloved mouse at sea. Unfortunately, my sights rested a bit too high for my feeble Action Script 3.0 skills, and I realized that Steamboat Willie, who I could not find on a free vector library site, would be too much to handle. Stuck on a maritime theme, however, I decided to create a story about the boats themselves: two rowboats, obviously friends, who encounter a horrid storm, during which they are separated and eventually come together again. Because the majority of the story deals with a singular rowboat, torn away from his loving companion, I chose to title my animation, “The Lonely Boat.”

In order to make my “lonely boat” come alive, I created a 7-scene animation through use of Adobe Flash – each scene with at least 4 layers involved. Layers were one of my initial hiccups because I kept forgetting to create new layers for new objects! This is why at the beginning the two boats rise and fall in perfect unison – they were created on the same motion tween layer. I did correct the problem (deleted the “friend boat” character and reinstituted her existence on a layer all to herself), but I liked the evident chemistry when the two boats were in sync so I recreated the same motion on separate layers. Each layer, therefore, is home to a singular character, image, or scrolling background throughout the entire animation.

The first scene, prior to adding the title in

The first scene, prior to adding the title in “The Lonely Boat.”

“The Lonely Boat” animation features only two specific characters: the “lonely” boat and the “friend” boat. While the two rowboats both find similar origin from the same image provided by ClkerFreeVectorImages, I edited the two characters independently: I made the “friend” boat face to the right of the screen while the “lonely” boat faces the left of the screen. I further manipulated the width and height of each, which I documented and continued to use for consistency sake across each scene.

Results of Google search for

Results of Google search for “skylines transparent background.”

Though my actual “character” count remains small, “The Lonely Boat” features other symbols with recurring use, such as the sun/moon, the waves (both calm and choppy versions) and the sky. The skyline images come from an image Google search of “skyline transparent background,” which I grouped together and stretched to make one large scrolling background during which the lonely boat travelled around the world.

Creating and executing a scrolling background with effective pace, to coincide with the day-to-night changing colors of the sky, which progressed slower that the waves, yet quicker than the lonely boat itself was quite a challenge. When I sat down to create this scene, I did not think it would take more than thirty minutes or so due to the simplicity of the concept; on the contrary, almost two hours had passed by the time I could move on to the next scene. My troubles stemmed from my attempts to correctly align the skylines to the day to night colors and trying to edit images after turning them into symbols. Because of this, I had to delete and recreate a couple of symbols a couple of times – a mildly disheartening process. However, each recreation was a marked improvement on the previous, and I know that my final animation is much better because of my attention to each element.

The elements within “The Lonely Boat” portray a dull type of coloring because I initially considered a black-and-white animation – similar to “Steamboat Willie.” However, when I wanted to add elements like the sun or lightening, I enjoyed the way that the yellow popped against the darker background. Therefore, I decided to keep the duller, more darkened palate, while simultaneously including bursts of color like the sun or the typeface in the title and conclusion.

My coral colored self-writing typeface is result of a YouTube video created by Dinnerz2k7, which explained how to create self-writing text in Flash. My title and writing of “The End” were pieces that I wanted to stand out against the background, and I did not want them just to appear fully written out. Because of the “cartooney” atmosphere evoked within “The Lonely Boat,” I chose a fun color, a handwriting-type font, and the same self-writing style of older cartoons, like “Steamboat Willie.”

An article by Michael Juk praising the use of jazz music in cartoons.

An article by Michael Juk praising the use of jazz music in cartoons.

“Steamboat Willie” also features a jazzy-type cartoon sound, which I wanted to replicate in my animation. Therefore, I locate some of the top songs in this category via an article by Michael Juk, which led me to Bobby Darin’s 1946 hit, “Beyond the Sea.” To complete the sound component for “The Lonely Boat,” I also searched for and downloaded thunder effects from Mike Koenig at the Sound Bible. What now remained was putting the music together before lacing it into the animation itself.

After listening to Faith’s question from earlier this week in regards to cutting music, I opened Adobe Premiere (which I have thankfully used in previous years for Tiger TV production) and imported the song and sound effect. After finding the portions of music that corresponded with the on screen graphics during the animation, I created a song lasting for 42.2 seconds.

Because I wished to get the sound cues just right, I analyzed my Flash project, divided the length of frames of each scene (for instance, 60 frames, for scene 1) by 24 (Flash was set for 24 FPS), and added each scene’s second count together to get the length of the film itself: 42.2 seconds. When introducing the storm sound effects, I subtracted the length of first scene to place the effects at 2.5 seconds into the song within Premiere. Taking advantage of the fade in/fade out features, my soundtrack was stitched together somewhat seamlessly, though the pieces do not go in order of the original song. For instance, my opening scene features music from the middle of Darin’s song, and the middle of my animation includes Darin’s first verse. After working the math to create a singular track, I then inserted my published “song” into scene 1 of the Flash animation, thanks to the instructions of another Lynda video. Finally, the jazz introduced the animation, the storm sound aligned with the lightening image and my animation concluded with Bobby Darin’s voice fading out as “The End” is written across the screen.

The end of my project was probably the easiest part of the animation endeavor. I did struggle significantly along the way, however – performing a lot of trial and error techniques. First, creating the waves themselves took me a while because I began with a gray rectangle, but could not figure out how to make it curvy at the top. After asking Kim for advice and just playing around with the paint and grouping tools, I created a really long wave rectangle (approximately 2200 pixels per scene), which scrolled across my stable dark teal sky to look like waves led by a current. After creating the waves, I hit a second problem: during scene 2, my waves would just stop and the white stage would appear right before scene 3, which is a definite no-no. I ended up having to go into my nested timeline, remove the movement, and just use the motion tween on the main timeline to make the waves last as long as the scene. My third major problem, editing my motion tweens, took quite a while to fix because each of my characters and the lightening storm would race across the screen in jagged, unappealing patterns. After much dragging across the tween lines and moving the key frame positions up and down and left and right, I discovered how to round out the edges for many of the moments – creating a healthy mix of flowing and stiff movement patterns.

screenshot-end

The final scene of “The Lonely Boat” as seen within Flash.

Despite my difficulties, I am honestly shocked and impressed at all I have learned. While I did not directly keep track, I would assert that I have worked over 10 hours on this project and am proud of what I have created. The fact that I am able to show and then explain the general process of animation creation to my friends is astounding. I am thankful for the preliminary assignments, use of Lynda (and the internet, in general) as well as classmates, who provided useful advice that helped create my first animated short, “The Lonely Boat.”

Acknowledgements:

ClkerFreeVectorImages. N.d. “Boat wood rowing simple small bench rudder.” <https://pixabay.com/en/boat-wood-rowing-simple-small-307125/>.

Dinnerz2k7. Sept. 14, 2008. “Adobe Flash CS3 tutorial- ‘self writing’ text. <https://www.youtube.com/watch?v=GuNnNbVQOto>.

Gucyski, Kenny. Jul. 24, 2011. “Bobby Darin – Beyond the Sea.” YouTube. < https://www.youtube.com/watch?v=5bRAtV-jgoQ>.

Juk, Michael. May 15, 2013. “Jazz toons: greatest cartoon music ever” CBC Music. <http://music.cbc.ca/#!/blogs/2013/5/Jazz-toons-the-greatest-cartoon-music-ever&gt;.

Koenig, Mike. May 21, 2012. “Thunder strike 1.” SoundBible. < http://soundbible.com/2015-Thunder-Strike-1.html&gt;.

Lynda. “Importing and adding audio.” Adobe Flash Professional CC. < https://helpx.adobe.com/flash/how-to/import-audio-into-flash.html&gt;.

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s