Illustrating theory with motion graphics

Abstract

This research attempts to evaluate the concept of animation graphics for feasibility by providing readers of scientific theories (stasis theory, in particular) with Flash-based motion graphics to accompany the text. As such, my research is developmental – I’m creating something that will enhance technical communication through the use of technology. For instances when animation is not possible (a print publication, for example), a high-quality still image will be used as a visual aid. Many scientific theories are difficult to understand via text alone, especially with the new generation of visual learners. Many obstacles were faced in the process of creating a usable animation, but in the end, one was finally created that will hopefully lend itself to a better understanding of stasis theory.

Introduction

The goal of this research is to create a visual component to complement previously-published work in stasis theory. Specifically, the visuals will bring to life a word-based metaphor developed by Mark Turner, transforming it into an illustration to enhance visual thinking and learning. Metaphors extend understanding and reflect thought; as they shape thought they limit meaning, and this has huge implications for cognition. The visual components will be added to the text currently displayed at http://www.writinginstructor.com/northcut.

In the past, stasis theories have relied mostly on visual metaphors such as battlefields. Yet, those scholarly treatments tend to be published with little or no visual aid. Additionally, stasis theory is thought to apply only to verbal arguments – that is, arguments made with words – rather than the arguments found in illustrative representations or images. Flash may give us a way to create graphics that will help readers to understand the usefulness of stasis theory in scientific argument. If successful, this research may contribute to an increased public understanding of science.

Discussion

Defining Stasis Theory

Stasis theory, according to Cicero, helps categorize and classify parts of controversies to be resolved by discourse¹. Stasis is often defined in rhetorical studies and argumentation theory to be the point at which colliding points of view meet². Their intersection provides support for the standpoints, forming an issue³. Stasis occurs during the invention stage of rhetoric⁴, though stasis theory is productively used to identify sites of conflict in discourse that contain arguments. Stasis theory goes back at least as far as Aristotle, whose words eventually evolved into four key questions for defining key issues, as well as a fifth question later added to the list by Hermagoras⁴:

1. Did something happen?

2. If so, was harm done?

3. If so, was it great harm?

4. If so, was the great harm justified?

5. Is the trial for the crime being conducted properly?

These questions allowed for stasis theory to be broken down into five one-word categories, one for each question:

Conjecture
Definition
Quality
Translation
Method

The opening of De Inventione by Cicero provides the groundwork for his understanding of stasis theory, known as constitutio in the Latin: “Every subject which contains in itself a controversy to be resolved by speech and debate involves a question about a fact, or about a definition, or about the nature of an act, or about legal processes” (Reprinted translation¹).

From Print Media to Electronic

In the past several years, journal articles have been popping up more and more online. This transition from print media to electronic media opens up possibilities for fluid – rather than static – illustrations to be used. Sites such as KAIROS (http://www.technorhetoric.net) and Writing Instructor (http://www.writinginstructor.com) give writers the opportunity for multimedia, but because of the ever-evolving nature of technology, it’s very difficult for one to adapt at the same rate. This is where my research comes in. By replacing static images with eye-catching animations, not only does the article become more attractive overall, but animations also typically help the reader to better understand the concept that is being illustrated.

Furthermore, animations made with Adobe Flash offer nearly universally playability, excellent image quality, and a small file size. Unlike animations of the past (animated GIFs), Flash animations can be as intricate as full-motion videos with sound or as basic as a two-frame animation. Web giant YouTube uses a Flash-based system for their videos for its ability to compress video to make it a small enough file size for viewers to be able to watch, whatever their Internet speed.

Whether animated or not, visual communication is an important tool used to help one understand. As stated by Dr. Sandra Moriarty⁵:

I would like to suggest that visual communication is as much a primary system as verbal language, and that language based communication has been inappropriately privileged in contemporary Western culture. This is not to say that visual communication is more important, or language less so. The argument here is that an equally important form of communication – visual communication – has been ignored because of the strong emphasis our culture and the academy have placed on language.

I agree with Dr. Moriarty in this situation, as this serves as a primary point for my research.

Results

The Original Objective

I began working on the project in the fall of 2007. All I knew at the time was that I would be working independently to learn how to create Flash animations – which I was very excited about as I had always wanted to learn Flash but never had the time – and using my newfound knowledge to better illustrate the concept of stasis theory in an online journal article. The animations would replace simple static, two-tone graphics that were primarily placeholders till an animation was ready.

Specifically, it was my goal to create an animation that would feature a landscape, two mountains, and some text. The mountains (a metaphor for each half of an argument) would rise up out of the landscape and then move toward each other before clashing at the point of stasis. This was all very foreign to me at the time, so it took many verbal illustrations on her part before I finally understood.

Learning Flash

When I began learning Flash, I was a complete novice. Though I was very familiar with other Adobe programs (such as Photoshop and InDesign), I was fairly new to animation (with the exception of some very simple animated GIFs). Therefore, I was very daunted when I first opened Flash. With nearly every computer program I’ve ever used, I could figure it out by simply playing around with it. I could see right away that this wouldn’t be the case with Flash. The timeline (the simplest tool for creating animations in Flash) felt slightly familiar from my experience with Windows Movie Maker, but it was much more complex. Additionally, Flash uses vector graphics (infinitely scalable graphics) rather than raster graphics (set number of pixels), which I was completely unfamiliar with. Photoshop uses, for the most part, raster graphics, while Adobe Illustrator (a program I had never used) is for vector graphics. Thus, another unforeseen stumbling block was placed before I even started.

To help me get started, I found some tutorial videos online and began watching them. The first few were extremely basic concepts which I had already figured out, so I skipped ahead to the parts about animation and that’s when I finally began learning. I also had some help from a couple 800+ page books on the subject.

The first animations I made were extremely simple – a bouncing ball (with very suspect physics) and a twirling pentagon. I was making progress, though.

The Prototypes

The first animation I created that was related to my goal was a very basic two-dimensional view of the two mountains coming out of the ground – first individually, then together – and colliding, then going back into the ground (Figure 1).

It was a very simple animation, but I just wanted to make something in order to get some feedback from Dr. Northcut on which direction I should go. I soon received that feedback, as she told me “the hills should be shorter, and move a little more slowly. We need the 3-D look/feel, as in my original line drawings.”

I was unsure of how to achieve the three-dimensional look that Dr. Northcut requested, so I had to go back to the drawing board and rack my brain.

A few days later, I came up with a basic three-dimensional animation (Figure 2). It was little more than a colorized, animated version of Dr. Northcut’s original image. She responded with “Great, you're getting there. You know how there is the crosshatched grid on 3-D topo images? Maybe research how that is done?”

At this point, our new goal was to create and animate a three-dimensional topography map. After some research, I found a website called ForgeFX (http://www.forgefx.com/casestudies/prenticehall/ph/topo/topo.htm) that’s an online, Shockwave-based three-dimensional topography map creator. It was really neat and showed some promise, but when it came to trying to animate the topography maps I created in it, it turned out to be an insufficient tool. I also had an idea to use a 3D modeling program to create the landscape, but ultimately decided against that for the same reasons.

Because I was still in the process of learning Flash and we were running out of time, Dr. Northcut suggested animated GIFs as a possible alternative. Animated GIFs are created by putting together static frames into an animation. While this method is easier to do than Flash, it is much more time-consuming and less user-friendly (due to larger file sizes and decreased quality). If you know what you’re doing, Flash does most of the work for you. The problem was that I really didn’t know what I was doing.

After I failed to come up with a decent animated GIF, we explored the possibility of highly detailed static images. I decided to use Dr. Northcut’s original image as a base, redraw the frame, and then add realistic textures. The result was the most encouraging bit of progress I had made yet. I made a comparison to show how my newly-created image differed from Dr. Northcut’s (Figure 3).

Because it was meant to be a quick tool to see if we were headed in the right direction, I used easy-to-find, low resolution textures and the same image (albeit flipped horizontally) for the mountains. Upon seeing the comparison image I created, Dr. Northcut was “really happy with the progress.”

Just when I had given up on creating an animation, I had an epiphany. Because I created the new, static image in Photoshop with layers, I had the ability to separate out each object on the image. For example, with the click of a mouse I could remove the mountains entirely. Also, because Flash is also made by Adobe, it has the ability to open Photoshop files and import layers. Therefore, I could import the image I created and animate (move) the mountains independently. I don’t know why it took me so long to figure this out.

I created a trial run of the mountains in motion, and Dr. Northcut was happy with the results. This paved the way for the final product – a high resolution version of what I had just created, with all of its rough edges smoothed out.

Technical Difficulties

Between the time I completed the final prototype and began the final product, I began having major computer problems. As someone who is very dependent upon his computer, I quickly purchased a new computer (expecting a care-free transition) but was plagued with frequent system crashes (on a brand new computer, mind you). After about two weeks of headaches, I cut my losses by formatting the hard drive and starting over. I immediately installed the tools I would need to work on the graphic/animation and began my search for high resolution textures to use on it. However, I had just lost a lot of valuable time, and would have to work efficiently to make up for it.

The Final Product

To take into account the various possibilities on how the image/animation would be displayed, I began work on the final image with a large canvas. I made the image (which I would later animate) able to be scaled to fit an entire 8.5 by 11-inch sheet of paper, yet to still be functional at the small size of the original.

Finding high resolution textures to apply to the frame was more difficult than I had expected. I needed one for below ground, one for the surface of the ground, and one for each mountain. After going through literally thousands of pictures, I found four that worked. I put it all together with a much greater attention to detail than the previous image I had made. I was happy with how it turned out (Figure 4).

My final goal was to convert my newly-created image into a Flash animation, just as I had done previously. Because this concept was no longer new to me, it went much smoother and the animation came out just as I had envisioned it.

Evolution

This research turned out to be a bit of a rollercoaster ride. My primary goal changed many times as I came to realize the limitations of each of the methods I was exploring. For example, I started off learning and using only Flash to create an animation. I started off with a two-dimensional animation, but soon created a three-dimensional animation instead. When I was unable to produce a realistic and animate three-dimensional landscape, I turned to topography maps. When I realized that I couldn’t animate topography maps, I considered modeling my own three-dimensional landscape, only to throw that idea out for the same reason as topography maps. Animated GIFs were then considered but soon thrown out. Giving up on animation altogether, static images were the new goal. When what I had learned about Flash clicked with what I knew about Photoshop, I realized that I could create static images and then easily convert them to Flash animations. To be sure, I created a low resolution mock image, and it turned out to be great progress. Finally, I did the same thing but with more detail and came up with the final product. My methods changed a total of six times before coming full circle and going back to what I had originally intended.

Acknowledgements

This research would not have taken place without the past-research and present-scholarship of my advisor, Dr. Kathryn Northcut. With her help, I was able to learn a fairly complex program (Flash) that will serve as a powerful skill on my résumé. I would like to thank Dr. Northcut for her hard work and patience as I completed this research.

References

1) Matsen, Patricia, Philip Rollinson, and Marion Sousa, eds. Readings from Classical Rhetoric. Carbondale, IL: Southern Illinois UP, 1990.

2) Northcut, Kathryn M. "Stasis Theory and Paleontology Discourse." The Writing Instructor. 2007. http://www.writinginstructor.com/northcut (12 Nov. 2007).

3) Hauser, Gerard. Introduction to Rhetorical Theory. 2 nd Ed. Prospect Hts., IL: Waveland Press, Inc., 2002.

4) Kennedy, George A. A New History of Classical Rhetoric. Princeton, NJ: Princeton UP, 1994.

5) Moriarty, Sandra. “Visual Communication as a Primary System.” Journal of Visual Literacy. 1994. http://spot.colorado.edu/%7Emoriarts/primelang.html (31 Mar. 2008).