Printer Friendly

SYNC OR SWIM: Rough Animator.

In the Spring 2016 issue of Screen Education, I looked at an app called Loop, which could be used for making really simple animations. This is how I started that article: Animation is an amazing way to bring content alive. For many students an animation can be that doorway into understanding wider theoretical concepts. It moves on from the nineteenth-century teaching techniques of pantomime gestures, students as props, or 'movement lines'in diagrams, and into explanations with actual moving parts. That's what translates it from a concept to an idea. That's what moves it from a premise to a fact. The other truths of animation are that it's really difficult, it's really time-consuming, and it's much more suited to those fanciful timewasters in the Visual Farts department. It comes so easily to them and what do they use it for? Dancing meat and Thug Life sunglasses! (1)

It's a few years on, but this is as true now as it was then: animation is still super important in teaching, it's still great for exploring complicated theoretical concepts, and Visual Arts teachers are still fanciful timewasters. The one thing that has changed is that Loop, the focus of the article, doesn't exist anymore. Loop was developed by design studio Universal Everything as a way to quickly workshop an idea visually - and, because it's the twenty-first century now and visuals aren't intrinsically static, these design sketches needed to be able to capture movement. But apps need to be updated in line with operating systems, and Universal Everything isn't an app development agency, etc. In a nutshell, Loop no longer exists.

Loop's non-existence helps us to investigate two (sort of) related dilemmas: l) How do you future proof your educational technology plans so you don't get really invested in tech that won't last?; and 2) What do you do when you've identified a need but no longer have the means to respond?

The first question is complicated, and it's something that has been an issue for this column since its inception. Print publication requires a much longer view than online: the final drafts of these articles are due about three to four months before you receive your print copies of them, and it's hard to write about tech that far in advance (and it's only getting harder). In Screen Education 82, for instance, I wrote a piece about Adobe Voice. The week before it was published, Adobe made a big announcement about it: while the base functionality would remain the same, the app had changed its name - to Spark Video - along with where it sat within Adobe's product range. In Screen Education 85, I wrote about Zeetings, a brilliant presentation tool. That app still exists; but, about six months after the issue went to print, it was bought by Canva. The Canva purchase was in no way a bad thing - it added a bunch of functionality and created a lot of cross-linkages between the platforms - but it changed Zeetings. Likewise, in Screen Education 86,1 wrote about Adobe Premiere Clip, which is being phased out by spiritual successor Adobe Rush; while, in Screen Education 87,1 wrote about Office Mix - an add-in that Microsoft developed to add a heap of useful and interactive functionality to PowerPoint - which has since been retired, with aspects of its functionality either baked into PowerPoint or shifted into other programs or services that Microsoft expects to integrate into PowerPoint in some way in the future.

So my track record isn't great... but what should I do? You might presume the problem lies in investigating products from smaller tech providers, but a lot of these bigger changes are coming from big tech firms - and I guess that's where the second dilemma comes in. The need is why the tech exists, and not the other way around. And this is where it gets difficult in teaching. Teachers are just as guilty of the 'Where will I use this in real life?' question as their students are. And how you use something in 'real life' is less about the technology itself and more about redefining our relationship with technology.

Too often, we talk about the functionality of technology, but not the function. Creative technologies' primary purpose is communication; honestly, most technologies' primary function is communication. A teacher or student who can create a video or an image has more avenues through which they can communicate than one who can't. Each medium is a language - and if you can hear a language but can't speak it, then you are at a disadvantage. We can also use this concept of communication as a way to evaluate technologies. While we are stuck in a perpetually reactive state, in that we can't predict what companies will do with the tech they develop, this communication between technology and user is a lot more of a two-way street these days; and, as a result, we don't have to consider being reactive to be a bad thing nowadays. If you can look at what's happening in technology and react and change, then you are agile or adaptable - capabilities that keep creeping further and further up lists of sought-after soft skills. (2) So why isn't that agility a bigger part of education? Technology has changed: we are no longer going out and buying a floppy disk of programs at the start of the year, installing them all and assuming that's all we need to do, but we still behave like that is how technology works. Tech companies were able to shift us to a subscription-based service model with the promise of a more consistent stream of innovation, and, for the most part, a lot of them have delivered on that; (3) but we don't benefit from it, because we haven't changed how we view them or how we use them (particularly as institutions). Why do we fight so hard against the benefits of change? I think it's about looking at the purpose of our technology and using that to help us get better at evaluating and onboarding. In other words, how does this technology allow you to communicate, and how does this technology communicate with you?

For years and years, teachers have been trying to use movement to help guide attention and provide emphasis, either through concepts like 'movement lines' - perhaps using a different-coloured whiteboard (and always a colour that no-one in the back row of the class can see) - or using their own body, by pointing and gesturing wildly. Movement is how we communicate that attention is needed. But most of these types of examples rely on the teacher and the student sharing the same space, and they're all impermanent. One of the big drawbacks of the world of flipped and online learning is that it's harder to virtually replicate that physicality of a classroom teacher, whether it consists of tapping their whiteboard marker on the part of the board they want you to look at; scrawling lines and circles to indicate connections between things; or using their hands (or props) to hide and reveal various parts of information. In flipped, online and standard classrooms in the twenty-first century, the teacher is still the best avenue for communicating knowledge and skills. That's where Rough Animator comes in: it's an opportunity to translate that physicality to a transferable and more permanent format (so it can be used across a multitude of learning environments).

What is it?

Nothing I said about perceptions of animation in my Loop article has changed much. It's still considered to be out of the grasp of a lot of teachers because it requires investments in time and skill development, and seems to require a marrying of tech and creative skills that most teachers don't have (including a lot of Art and Media teachers). But how much of this is actually true?

Yes, making beautiful animations that pull on a variety of emotions is hard and probably beyond the grasp of a bunch of people. But animation itself is a really basic concept: it's just a collection of images that show sequential change - that's it. As such, you can animate with anything. You only have to worry about a few factors. The first is frame rate, which is just how many pictures you fit into a second. For animation, we're generally talking less than twentyfour (and twelve will usually suffice, producing slightly stuttery but still reasonably smooth movement). The next is content, which is just getting those twelve or more frames together, placing them one after another and getting them to play. And, while this is a little time-consuming, it's not essentially difficult.

I think the trick is how you package up the concept of animation - and this is why I always loved Universal Ever/thing's approach. They used animation as a way to communicate movement, which is what you need to do if you want to communicate a concept that isn't stagnant. But it doesn't have to be pretty; it just needs to be functional - and, as its name suggests, RoughAnimator is perfect for that. (4)

Why use it?

There are heaps of products out there on the market you can use to animate - from Animatic and Animation Desk to Adobe After Effects and Blender - and they all have their specific uses and audiences. Personally, I animate primarily in After Effects and Procreate (which I love), but these aren't great places to start in animation. Despite its crudeness, or perhaps because of it, RoughAnimator is perfectly positioned to be useful to the widest audience of animators. It's routinely used by professionals who want to explore an idea before getting too deep into the design weeds, but the interface is simple enough to prove useful for anyone.

RoughAnimator was developed by animator Jacob Kafka (whose work you may have seen on Our Cartoon President) to one would assume - solve the problem of how to make a rough digital animation ... actually, there isn't heaps written about why he made it. But there sort of doesn't need to be; the app really speaks for itself. It allows you to simply and quickly make a rough animation, works across multiple platforms, and, practically every month, gets improvements to its workflow and functionality. It is described on its website as a 'fully featured hand drawn animation application' that is 'powerful enough for professional animators' and 'simple enough for beginners'. (5) It's a great little app that can serve a million different education use cases. And the fact that it's supposed to be rough and sketchy removes that first barrier to entry - the message is more important than the pretty packaging you wrap it up in.

How does it work?

The reason RoughAnimator is able to be powerful enough for professionals but simple enough for everyone else lies in how cleverly Kafka has designed the interface. It's simple and intuitive - everything anyone would need is front and centre - and all the things that might help as you develop your skills are there too (but just not as prominent). It's technology that communicates well with you by giving you what you need without overloading you. For most apps, I look for a few YouTube or Instagram walkthroughs to get me started, but with RoughAnimator I didn't feel that need. It's got a lot of the same interface tools as apps like Loop or Animatic: things like pens, onion skinning (6) and simple frame-by-frame navigation. There are two interrelated features that make RoughAnimator really easy to communicate with: layers, and the ability to adjust frame duration. While the layers function adds a slightly more complex thought process in terms of where things fit together, working with layers means you are able to work nondestructively. One of my first experiments with RoughAnimator was the classic bouncing-ball animation. The animation itself turned out fine, but, even with the onion skinning, my 'floor' had drifted a little so that the animation didn't loop particularly well. But because I'd drawn the ball and the ground on separate layers, I was able to shift the ground back in line so that it would stay in the right spot. Another solution would have been to just use a single static layer for the floor: RoughAnimator allows you to adjust frame duration independently, so I could have had my floor layer consist of one frame that went for the entire animation and added a separate ball layer. Either option means that it's easy to go back and rough things into where you want them.


For the Loop tutorial, I made a graphic to assist in explaining how sound travels through vibrating air particles, affecting those around them and causing the sound to travel. I also tried to include the concept that sound dissipates as each vibration causes less movement in the particles it influences. This is one of those concepts that was explained to me using physicality and the body movement of multiple people in a physical demo, so it's certainly something that works best when it has movement as part of it. I'm going to attempt that same tutorial here with RoughAnimator.

The app is available on a range of platforms (iOS, Android, Mac and PC), and accepts inputs from a range of styluses on touchscreen devices - or you could just use your finger. For this demo, I'll be using the iPad version.

When you select NEW PROJECT (Figure l), you get to choose your resolution and frame rate. The defaults of each are 1280 by 720 pixels and 24 frames per second respectively, but I find a frame rate of 12 makes it a little easier - it gives the animation a nice pace and a sketchy look.

The interface (Figure 2) is pretty simple. The timeline is along the top and the tools are down the left-hand side - either or both toolbars can be minimised if you're after a little more screen real estate. The app has the classic button set of brush, eraser, fill and lasso, as well as undo and redo options. The timeline shows a background and one layer by default, but as you add layers, they will appear here.

The arrows under the 'play' button go to the next or previous frame. If you are on your last frame, then the right arrow will have a plus symbol on it; selecting that will add a new one. The bar between these buttons is a scroll wheel that allows you to scrub (meaning to roll forward and back between frames at your own pace). Underneath that is the option to enable or disable onion skinning.

There is a range of brush options (Figure 3), and you can even add your own brushes in - you just need to add a PNG file with a transparent background, and it will use the silhouette as the brush shape. You can also alter the brush size, colour, spacing and opacity (to show the sound dissipating in my graphic, I'm going to slowly reduce the opacity over multiple frames)

Once you've selected your brush, you draw your shape (or sketch, or whatever you are doing) and select the option to advance to the next frame (Figure 4). The timeline will indicate that you are now one frame forward. If you've enabled onion skinning, you will see that the image from your first frame has become more opaque.

For this example, I've drawn twelve versions of this base image (where the 'sound' is coming from). While it's just a circle in the centre of the screen, the slight movement and jitter across frames adds to the sketchy nature; because it's not static, it continues to draw the audience's attention. But so far, there's nothing particularly difficult here - just twelve versions of the same circle (Figure 5).

A brilliant timesaving aspect of RoughAnimator is the ability to make cycles - in this instance, instead of drawing another twelve, twenty-four or thirty-six circles, I can set the ones I've done to loop. Once you've set the range you want to loop (for me, it's the first twelve frames), you need to drag the cycle duration out - you'll see a small green arrow on the side of the right-most event in the timeline that allows us to extend that frame (Figure 6).

With the loop sorted, I'm going back to the individual frames to use the lasso tool to move some of my sketches into place a bit better (Figure 7). Because I set the loop up before doing this, everything I do will be included in it.

The option to add and remove layers is located by clicking on MODIFY LAYERS (Figure 8). The sketched circle in my example is the source of the sound that I'm seeking to represent visually, so I'm going to add a new layer to show the soundwaves. The idea is that working across these separate layers is so much simpler than trying to get everything done perfectly in one go - with everything separated, it's possible to move, rotate and alter elements without having to change or redo everything.

On my new layer (Figure 9), I'm drawing my soundwaves, and, with each new frame, I reduce the opacity slightly (by about 10 per cent) so that I can illustrate the sound gradually dissipating (Figure 10).

With my red version of the sound dissipation finished, I've added another layer (Figure 11) to include an orange one a few frames later to further demonstrate that dissipation. Doing that on its own layer gives me lots of options for revision as well as placing.

Using the arrows next to the layers, you can shift the order of the layers (Figure 12). RoughAnimator uses a standard layer hierarchy, in which the topmost layer is the most visible. Because the orange layer is supposed to trail behind the red one, it makes more sense if it's behind it (in case there is any overlap).

Once you've got your animation sorted, you can export it out (Figure 13) as a video, GIF or PNG image sequence (which means that each frame is saved as its own image). You'll notice here that you also have the option to import images and videos and use them either as a guide or as part of your piece. These can be images gathered from elsewhere or - more usefully and copyright-compliantly - videos or photos from your own device.


Kevin Lavery was an Art and Media teacher in Melbourne for nearly ten years before packing up for life in Brisbane. He is now the training and liaison officer for TAFE Queensland's eLearning Services. You can find his RoughAnimator example on his @kevlavery Instagram account.


(1) Kevin Lavery, 'Sync or Swim: Loop', Screen Education, no. 83, Spring 2016, p. 101.

(2) See Gregory Lewis, 'The Most Indemand Hard and Soft Skills of 2019', Linkedln Talent Blog, 3 January 2019, <>, accessed 2 October 2019.

(3) David Pogue, 'Adobe's Software Subscription Model Means You Can't Own Your Software', Scientific American, 1 October 2013, <>, accessed 2 October 2019.

(4) RoughAnimator is available for a free trial or for US$4.99 to buy outright. While I normally try to talk about free technology in this column, I've found that, with this sort of software, the free versions don't offer the same functionality or usability that a paid app like RoughAnimator does - they're just not as simple for onboarding (and, all in all, not as good).

(5) RoughAnimator website, <>, accessed 2 October 2019.

(6) 'Onion skinning' is an animation term that refers to a previous frame's visibility. When this function is enabled, the previous frame is visible at a lower opacity to act as a guide (or a reference to where you were at). It's kind of like animating on tracing paper. It makes a big difference to the ease with which you can animate as well as how stable the end product looks. Animating without onion skinning is like writing without lined paper - while you're working, it looks like you're doing okay, but when you step back and take a look at the overall product, you'll see that you've drifted a lot.
COPYRIGHT 2019 Australian Teachers of Media
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2019 Gale, Cengage Learning. All rights reserved.

Article Details
Printer friendly Cite/link Email Feedback
Author:Lavery, Kevin
Publication:Screen Education
Date:Dec 1, 2019
Previous Article:Writing with Sound and Vision: THE AUDIOVISUAL ESSAY IN THE CLASSROOM.

Terms of use | Privacy policy | Copyright © 2020 Farlex, Inc. | Feedback | For webmasters