Narrative One

What is the Visual Narrative Project, and what did it teach me? Quite a lot!

Throughout this unit, we learned to share a story in ways other than using words. In Digital Media, one of the first steps we took was to learn how to use vector art applications such as Adobe Illustrator to develop skills in graphic design, already having the experience working with raster graphics in Photoshop. We also produced a song parody with use of Pro Tools to edit out the lyrics and place in our new lyrics that we recorded in a fully-equipped studio (which Mr. Flo set up next to Freestyle!).
Through the flash fictions that we wrote as an English project, after initial brainstorming and continually revising our first drafts, we learned to tell a story within a very limited space. Combining elements from Digital Media such as designing an original album cover as well as incorporating music and SFXs into voice recordings of ourselves reading our stories, we were able to convey emotions at a more subtle, but equally effective, level.
In creating this website page to share my projects within the Narrative One unit, I learned to use Dreamweaver to develop customized website elements through coding with HTML and CSS.
Finally, I developed my Illustrator Project by designing a pattern for a wood candle-shade, which I will assemble once cut out. I enjoyed working on this project because it gave me the freedom to make any design I wanted. There were difficulties in completing and refining the design, and from them I was able to learn many techniques to wield the power of Illustrator!

In my elective class (animation), we learned to create digital animations, beginning with a simple (although not so simple behind the scenes) walk cycle featuring an original character, then creating a physical walk cycle through Dragon Frames using a puppet of the character that we built ourselves (think wires, clay, and sewing), combining the two in an After Effects composition. We also animated with lip shapes and observed natural mouth movement in a project creating a character lip syncing to a piece of audio or a song. Finally, we worked in groups to map out a creative narrative and bring it to life through animation!

Our assignment in English was to create a flash fiction featuring a unique character and demonstrating a distinct character arc showing how they grow, as they attempt to resolve the main conflict of the story. Initially I didn’t know where to begin, but I was inspired by the life of one of my friends living in China. I was able to contribute many details while brainstorming the character’s personality in a character questionnaire exercise, based on what I knew or remembered that he was involved in. Below are images of my brainstorming lists from class!

How did I produce the audio version of my story?

Once we had written our flash fictions, we recorded ourselves performing our story! From the action of writing my story, I valued learning about the techniques that well-established authors employ to create an unexpected or wholesome story and being able to apply these observations on a project of my own. From recording the flash fiction individually on the Tascam recorder (unlike for the song parody production, I chose to record my story alone, and in a personal space), I valued having the opportunity to experiment with voice and see the many changes in mood or interpretation that even a small change might bring, later working to choose the best clips that would together make up an effective piece.
Then: Pro Tools! I’ve developed a strong love for Pro Tools during the time I worked on these projects, over the hours and hours of listening to my own voice and trying to work with it to create a presentable production. Using Pro Tools helped me overcome the fear of listening to myself.

Flight

In his dorm room, Shuai slumped in his chair at his desk where he spent his midnights laboring over textbooks. He knew this habit was unhealthy, but he’d always dreamed of attending the most prestigious aviation program in China for university; if sacrifices were called for, he would make them. 

He’d dedicated countless hours to it, but studying felt like a heavyweight wrestler pinning him so that he couldn’t get up and fight the fog. Rubbing his eyes, he turned around to face the wall behind him where he’d hung up a poster of the Comac C-919 model on the first day he’d moved into the dorm. He looked at it now, sighed, then slowly pulled himself off the chair.

Shuai’s roommates were up by 6:30 AM, getting dressed and preparing their backpacks. It was unusual for an underclassman like himself to share a dorm with students in higher grades, but Shuai was content with the arrangement. He admired his roommates’ charisma and how they helped others. He thought they were good role models to follow, especially since they were absolute gods in physics and mechanics. Sometimes he imagined what it might feel like to be in his roommates’ shoes: to transition from shy to studious, passive to purposeful. 

His roommates wished him a good morning with friendly slaps on the back as they had every day for the past three months. Shuai felt warmed by the gesture, but today at this touch, his throat tightened and he ducked slightly, his mind racing as he tried to find the right words—or any words—to say. Why did such a little matter feel so difficult? Perspiration cooled under his palms and he resorted to listening quietly as his roommates jostled each other and discussed plans. Before he could try and ask again, they dispersed into the hallway beyond the dorm room door. 

Shuai left the dorm as well, feeling defeated, but he brightened at the thought of breakfast: steamed mantou and hot porridge. The cafeteria meals were delicious and helped him to start every morning afresh. Today, food played a critical role: he needed the fuel for his brain. Sitting alone at the table, Shuai opened his planner out of habit and peered at the note he’d scribbled in black pen for the afternoon section of the column: ‘flight aerodynamics final exam’. He slammed it shut again and returned it to his backpack, scrunching his eyes together to inhale the aroma of porridge. 

Throughout his morning classes, Shuai fostered a nervous energy, feeling like a rubber band stretched taut to maximum tension before breaking. He knew  his roommates had class close by—maybe he could try to find them after class. As he pondered how he might approach them, his mathematics teacher cracked her ruler down onto her desk, snapping his attention sharply back to class. He was called up to the board to solve a problem and promptly sent back to his desk in disgrace when he could only stand there for a few blank moments. When the bell finally rang, he rose, burdened by the tugging straps on his shoulders. 

The hallway always filled with a torrent of student bodies during passing periods, especially before lunch. Standing in the shadows against the walls, Shuai scanned the rapids, but to no avail, and he felt a strange sense of relief—then shame. When he finally saw the two familiar faces coming around the corner of the hall, he had a split moment of indecision. He saw in his mind’s eye how it could play out: an imagined version of himself watched the boys pass and the distance between them grow, then walked toward the cafeteria, facing the floor. Discomfort prickled on Shuai’s scalp as he realized the pattern of how he’d acted for years, for his entire life. His face grew hot although there was nobody paying attention to or scrutinizing him. He popped his heel, taking a careful first step, then wove through the crowd at an increasing pace.

Shuai collided with his roommates ungracefully and blushed crimson, but they grinned, one boy saying, 

“What’s up, kid?”

He felt tongue-tied once more and panic rose in his throat, but he forced it down. 

“I…would love some help, please,” he choked out. His facial muscles loosened as he released his breath.

The boys turned to each other with a glint in their eyes and cried, “Of course!”, in unison. After escorting Shuai to the cafeteria, they stayed and looked over his books for the rest of lunch, explaining the concepts of complicated formulas that he didn’t previously understand. Shuai felt a warmth in his stomach which he suspected wasn’t just from the cafeteria noodles. When the bell rang, his roommates walked with him to his classroom, wishing him good luck.

Inside, desks were spaced apart, papers aligned with the top-right corner of each. Shuai’s hands were clammy and his heartbeat accelerated, but he steadily took out five No. 2 pencils, a calculator, and his good-luck eraser, a puppy-shaped mound now with its muzzle reduced to a stub—he still loved it. A dizzy pain formed in his head when the 45-minute timer began with a loud buzz, his eyes taking in the condensed characters lined in small rows. The noise was light but inescapable, the pressure clenching its fist tightly on him, his shoulders, his back. His chest felt tight, but then he remembered the encouragement his roommates had shared with him through the time they spent helping him review. Shuai took a deep breath, then joined the collective scritch-scratch that echoed throughout the classroom. 

He felt extremely grateful for having reviewed mechanical concepts with his roommates, and he managed to apply interpolation to form reasonable estimates, which he could never work out in his all-nighters alone! As he finished up his final response, the timer sounded. His papers were collected with those from the rest of the class, and he exited behind the line of students, softly closing the classroom door behind him. 

Behind the scenes

Editing in Pro Tools was not easy, even though I valued what I learned, and extremely time-consuming. As someone who constantly worries about overlooking small details, I resolved to listen to each and every recording attempt, before grouping the best takes into their separate sections of the story, before grouping those best takes into a final compilation. I also had no ideas for finding music that would match the mood of my story. Luckily, I had a backup piece of classical music – a piece that I am currently learning to play as a duet with a friend later this spring – which seemed to work well with the development of the narrative. The piece, by Gabriel Faure, is called Elegie. Here are some images showing my progress while editing!

Compiling my final tracks in Pro Tools, including background music!
Adding fade onto clips, which creates a cool visual effect.
A list of recordings to listen to carefully, before I decided which was the best to use.
Behind the scenes: Album art

Having just completed a series of assignments in learning the basics of Adobe Illustrator, we applied our skills to create album art covers for our flash fictions in the Soundcloud. Since I had personified my main character as being quite associated with food, I based my album art cover around the breakfast that he so enjoys. The art is not physically plausible, since words float in space and rockets appear tiny; my intention is to include both literal and metaphorical representations from the flash fiction.

My short story album art!

For the Illustrator project, students could choose their own project to create, among stickers, iron-on clothing art, and laser-cut wood candle-shades. I chose to design a 12-sided (dodecahedral) candle-shade, which was surprising to myself since I’d usually jump at the chance to draw freely and create stickers with my own designs. I’m glad I chose to work on this project option; I practiced the skill of creative problem-solving as I ran into obstacles (mainly not knowing how to create certain visual effects), and when I couldn’t figure it out, I asked for help!
Seeing other designs on the web inspired the design for my own project. Something else that I thought would create a cool visual effect on the wall was: bird silhouettes! Having found fitting reference images (of a crane, spoonbill, Scissor-tailed Flycatcher, American Avocet, and falcon), I used the pen tool to create bird outlines.
Below is my project design:

My final Illustrator project design

The most difficult parts of working on this project were 1) trying to transform and distort a complex object into the appropriate angle perspectives (in order to paste them around each pentagon), and 2) making sure that all parts would have the correct size so that they can be assembled without issue. To solve the second issue, I learned to use the horizontal alignment tool to organize each white tic mark on the design (empty spaces for assembly) apart by equal spacing; then, hiding the extra tic marks that I had used as endpoints.

Progress in Illustrator!
Assembly
Final project
What a beauty.
Yes.
Birds!

We began learning how to use the Pro Tools application by completing a series of tutorials about basic tool functions, and finally editing vocals into the song, Beat It. Once we had these skills down, we were able to create a parody of an existing song, as individuals or with peers! The process of producing the parody involved first writing lyrics, recording them Tascam recorders or in Freestyle’s studio, and editing the recordings to create a final compilation. I had the chance to work together with Janine; we weren’t sure what topic to orient our lyrics around, but inspiration arose from holding a video-call late at night to discuss this project, while feeling defeated by the school day. Ultimately, the lyrics (below in pink) tell the story of students experiencing a lot of stress (especially heading into finals week), but finding solace in listening to music and having a moment of “inner peace”. I hope listeners will be able to resonate with the lyrics.
Compared to visual or video editing, I think that editing, mixing, and incorporating audio is a lot more of a risk-taking process. To produce something you are happy with and proud of, you first have to experience confidence to record yourself, following your ideas and inspiration. For me, this was definitely easier to do together with a friend and with humor involved. While we recorded, we attempted to ‘harmonize’ terribly with myself trying for an extremely high pitch and having voice breaks while Janine sung at a low tone. I had a lot of fun both in recording our song and in deciding how to compile the audio! Here is our song below:

Our Parody Song! Thank you to JanineL for working together!
Lyrics

Song title: Lifeline

Verse 1:
I am scared of in-te-grals and sumssssssssss
I am tired from never sleeping enough
Oh, all my cells are turning mushed
crushed and grounded by our daily habits.

Ohhhhh-ohhhhh-ohhhhhh, oh break-ing-down, and I choke and cry!

Chorus:
Papers, strewn all across the floor now,
I’ve given away to my dark side,
I just wanna keep up good grades.

I love you, music, you’re keeping me sane and
not alone at midnight, ‘cause
I still need to submit my work.

Verse x2:
You ask if all of this is worth the while,
Killing our brain cells o-ver quizzes and finals
It’s hard to live in here & now,
always fearing the future for what to do next.

Ohhhhh-ohhhhh-ohhhhhh, find my playlist, then I press the key!

Chorus x2:
I’m nodding, bobbing along to the lyrics,
keeping my toes with the rhythm,
all other thoughts fly out of my head.

My worries, disintegrating like soap flakes,
I know they’ll come back to find me,
but right now I have my inner peace.

How did I edit out the original vocals?

To do this, first I downloaded the song from YouTube and imported the mp3 audio file into Pro Tools. It must match the 48kHz setting of the session! Splitting the stereo track into 2 left- and right- mono tracks, I set each to be panned in the center, meaning the sound is distributed evenly through both sides of the headphones. I created a Master fader track, which can control the overall volume of all audio tracks. Pro Tools has many plugins that can be used on each audio track which alter the sound in some manner. By putting an EQ3 (1-band) plugin on one of the mono tracks, I inverted the audio waveforms, which reduced some of the vocals – but not all. I edited out the vocals further by nudging the other mono track forward or backward a few spaces; I thought this step was pretty experimental, since there is no set amount of nudging that would guarantee a complete reduction in vocals. Sometimes it takes one nudge, five nudges, or it may not work on the specific audio; then, try another method. By setting a multichannel EQ3 (1-band) plugin on the original stereo track and using a low pass filter, I cut out all of the original audio except for the low bass beats. Played together with the mono tracks, the compilation resulted in an audio production which retains the instrumentals and beats with reduced vocals, which acted as a blank slate for me to insert my own recorded parody lyrics once I compiled them.
Once I made the final compilation of our raw recordings, I added a D-verb plugin which changes the audio to sound like it has an echo (reverb). There are so many settings for the type of environment that the sound would be a simulation for, such as a small hall, large hall, a church, etc. The bypass tool on the plugin’s interface allows you to apply an effect over certain parts of the track but not the entire track, by penciling out points at which you’d like the effect to be overlooked. Finally, adding a multichannel maxim plugin to the Master track and using its mixing limiter settings allowed the compilation to be played at the loudest volume, without breaking up sound.

In the narrative unit, animation students worked on three main projects: a walk cycle compilation, a lip syncing animation, and a final group narrative.
Leading into the digital walk cycle project, students designed an original character in Photoshop, physically built puppets with moveable joints, and created biographies sharing the story of their character.

Character Bio

I suppose my character is not entirely original, since the Monkey King has existed since the 16h century, when the Journey to the West series by 吴承恩 (Wu Cheng’en) was written – plus I found out that he has even been made into a character in several video games. I chose to use the story of the Monkey King as that for my character because I’ve grown up hearing his story over and over, from different storytellers, and I never got tired of it. He was the first thing that I thought of when I realized we would be constructing puppets later on. This is a way of reconnecting with my roots! When I began my character design using Photoshop, I first used pastel colors to sketch out the shape of the character, and later used black to draw a refined outline. I had no idea how to use Photoshop at this point, especially for filling in the color and creating shading. The experience of drawing this character was valuable as I learned how to take full advantage of Photoshop having layers and a paint tool! Drawing people/animal characters is not a strong suit of mine yet, and I went quite minimalistic on Monkey King’s facial features.

Side view sketch
Character bio, showing front, back, and posed views
Puppet walk cycle

I had no experience with making jointed puppets, but I had decent sewing and crafting skills, so I looked forward to making the clothes for the puppet! We started construction of the puppet by making a T-frame from twisted wire. There is a plastic material which melts when in hot water, which we used to mold the shapes for the chest, torso, and feet of the puppet. For my puppet, I built the head and hands (and countless fragile strands of hair) using clay, and I cut up chopsticks and taped them around each half of the limbs. Transporting the puppet home to continue working on it was tricky, but luckily the fragile hair was more stable once I applied layers of glossy nail polish (which I borrowed from a friend, thank you Jazlyn) to it. After applying paint, I sewed fabric into the shapes of clothes, and I used clay and yarn to make the headdress/antennae.

Stop motion walk cycle, shot using Dragon Frames
Character digital walk cycle

A typical walk cycle consists of 25 frames, with 12 frames making up each step. Because I am such a slow animator, I reduced this to 13 frames for the entire sequence, and I am quite happy with how smoothly the walk turned out! I created the digital walk cycle in Photoshop by making a frame animation with each pose. Instead of drawing every pose separately, I duplicated the pose preceding it and lassoed the limbs that were to be moved (arms, legs, antennae feathers, and hair), pasting them into a new layer and rotating them into the position that the motion would continue into.

Digital walk cycle
A very cool PNG showing all 13 walk cycle poses together
Walk cycle composition

In After Effects, we imported the videos of both walk cycles. To make their backgrounds transparent, I used the Roto Brush tool to select areas to be kept visible, deleting the rest of the space. I was able to add a few graphics of bushes in the foreground in order for the composition to feel 3-dimensional. Something cool that I learned was how to create a shadow effect that moved with the character in each pose: you duplicate the character, reflect it vertically, moved down to contact the character at the feet, change the contrast and color settings to reflect that of a shadow, and add a blur effect. The ‘shadow’, playing as a video at the same time as the character, will be able to move in sync.

Final compilation combining the digital and physical walk cycles
Lip sync animation

Designing a character presented challenges yet again. My character for this project was inspired by designs I saw in Lofi beat videos. This was my first time attempting an anime style of drawing. I’m pretty amused by how much the boy resembles my cat, while also looking like a tough wrestler kid. My audio of choice was quite unrelated! At the time that we began this project, I was obsessed with listening to music by Lola Marsh, the song “Only for a Moment” in particular. Therefore, my plan was to animate the anime boy singing to lyrics from this song. In Photoshop, I drew all the poses and lip shapes that my character would have. Carrying over to After Effects, I imported all of the files and spent much time adjusting each file and ordering graphics into a smooth, realistic sequence, matching the audio.

Sketching out my character
Final lip sync animation
Visual narrative animation

You can find our visual narrative group animation in the Freestyle playlist on YouTube.

Below are many behind-the-scenes moments to show our process for creating this animation!

This project was the first opportunity I’ve had to create a background setting for a story. With the goal of creating a forest run scene, I was inspired by looking at examples of anime-style environments. Below is a forest background that I pored my heart and soul into making.

Initial idea outline
Progress! Beginning to add color and shading
Finished background

The experience of creating this background taught me many elements of art. I was able to practice shading using different tones and use shapes to create texture.

Background GIF with fox

It was challenging to create a run cycle for the fox from the back view. Several people said the fox has a kangaroo quality, which makes it more endearing!

Here is another scene where the fox is about to steal the character’s wallet.

Fox about to steal the wallet

Finally, the image below has my rendition of granola bars.