HOTS' Flash and Art Tutorials

Self explanatory, if you need an explanation for what this is for then you should get out lol.

Moderators: AD Team, ADB Moderators

VCams are movieclips that act as a camera when you place them on your Flash animation and then press Ctrl-Enter. TUTORIAL HERE

For Flash 8 you'll need an AS2 VCam, there's one here.

If you need an AS2 VCam check out the section above. Otherwise here is the best AS3 VCam I've found; I've modified it so you can add logos and it works well with Swivel.
Thx to CoreAdro for conversion.

If want to fix/upgrade an existing VCam in an anim without undoing your progress, you can copy the code from a different VCam.

This is the solution for an AS3 VCam:

  1. Go File>Publish Settings, at the top-right set your Flash Player to the highest version and the Script to ActionScript 3
  2. Double-click on your current VCam to open it, click on the frame with an "a" and press F9 to show its code.
  3. Replace it all with the code below.
  4. Click your Timeline, stay inside your VCam Movieclip. Click on your viewfinder (the part you want hidden when playing), make sure it's a Movieclip (F8 to convert it), then in the Properties Inspector (either top-right or bottom-left) give it the Instance name of vCamInner_MC
  5. (Optional) Create a new layer in the VCam for your logo
Code: Select all
 * VCam AS3 v1.01
 * VCam based on original code by Sham Bhangal and Dave Dixon
 * Dynamic Registration AS3 code based on work by Oscar Trelles, AS2 work by Darron Schall (
 * and AS1 work by Robert Penner (
 * Special Thanks to Josh Steele and Jeff Brenner
 * @author Bryan Heisey
 * @version 1.01
 * @created 27-May-2008
 * **Modified by 20 Sep. 2017 to give option to disable caching to bitmap for when you want to upscale the stage size with Swivel.
 * **Caching to bitmap makes the vcam capture a fixed-res image to make it play better in swf but zooming into the created image shows it as pixelly.
 * **The downside of disabling caching is you can no longer apply filters to the vcam, the upside is you can click on buttons and upscale into swivel.
 * **I have no idea what I'm doing but I haven't had issues, let me know if something breaks.
 * Requirements: Flash CS3+ & Actionscript 3

var isCache:Boolean=false; //Change to true if you want to cache as bitmap


// Get stage width and height //////////////////////////////////////////////

var oldScaleMode:String=stage.scaleMode;

var sW:Number=stage.stageWidth;
var sH:Number=stage.stageHeight;


// Get Vcam width and height ///////////////////////////////////////////////

var bounds_obj:Object=this.getBounds(this);
var camH:Number=bounds_obj.height;
var camW:Number=bounds_obj.width;

// Creat Point for dynamic registration point //////////////////////////////

var rp:Point=new Point(x,y);


// Create BitmapData ///////////////////////////////////////////////////////
   var bmp:Bitmap;
   var myBitmapData:BitmapData=new BitmapData(sW,sH,true,0);
   bmp=new Bitmap(myBitmapData);

function camControl(...event):void {


   // Move the registration point to the vCams current position ///////////////

   // Gets the current scale of the vCam //////////////////////////////////////
   var h:Number=camH * scaleY;
   var w:Number=camW * scaleX;

   // Gets the stage to vCam scale ratio //////////////////////////////////////
   var _scaleY:Number=sH / h;
   var _scaleX:Number=sW / w;

   // Positions the parent ////////////////////////////////////////////////////
   x2=w / 2 * _scaleX;
   y2=h / 2 * _scaleY;


   rotation2=- rotation;
      // Draw bitmap of parent////////////////////////////////////////////////////


      // Apply vCam filters to bitmap ////////////////////////////////////////////



function reset(e:Event):void {
   // Cleans up data for garbage collection ///////////////////////////////////

   // Resets parent properties ////////////////////////////////////////////////
function set x2(value:Number):void {
   var p:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));
   parent.x+= value - p.x;
function get x2():Number {
   var p:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));
   return p.x;
function set y2(value:Number):void {
   var p:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));
   parent.y+= value - p.y;
function get y2():Number {
   var p:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));
   return p.y;
function get scaleX2():Number {
   return parent.scaleX;
function set scaleX2(value:Number):void {

function get scaleY2():Number {
   return parent.scaleY;

function set scaleY2(value:Number):void {

function get rotation2():Number {
   return parent.rotation;
function set rotation2(value:Number):void {

function setProperty2(prop:String,n:Number):void {
   var a:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));


   var b:Point=parent.parent.globalToLocal(parent.localToGlobal(rp));

   parent.x-= b.x - a.x;
   parent.y-= b.y - a.y;


Open Flash and experiment with these. There are 4 major symbols.
Create a new Graphic, Movieclip, or Button with Ctrl-F8, or convert anything to a symbol with F8. Convert to a Group with Ctrl-G.

There are 3 ways to edit a symbol:
1. Double-click it to edit it in place on the main timeline
2. Double-click on the symbol in your library (F11 to show) to edit on its own stage (does not work with Groups)
3. Click the shapes button at the bottom-right of the timeline (does not work with Groups)
To exit a symbol click this arrow:

Make a Graphic if:
- You want to reuse it or store it for later
- You want it as a self-contained looping animation with its own timeline
- You want to draw on the same layer without ruining it
- You need to classic tween it (this is automatic)
You can make a Graphic play/pause by selecting one of its keyframes on the main timeline, going to the Properties panel, and change its Looping. This is commonly used for lip syncing.

Make a Movieclip or Button if:
- You need filters (blur, glow) or display effects (color filters) from the properties panel.
- You're doing programming
- Avoid these when possible because they won't animate in the timeline, you'll need to preview with ctrl-Enter

Make a Group if:
- You don't want it in your library
- It's not animated
- It's not tweened
- You just want it to draw on it without ruining it

Press Ctrl-B to break apart any symbol into basic shapes. Pressing Ctrl-B twice on text prevents it from vibrating when tweened and ensures other computers can see it in the .swf even when they don't have the same font.

1. Click File>Import>Import to Library, if they don't import then do this.
2. Create a keyframe where you want the sound to start
3. Click on the keyframe and in the properties open the dropdown to select the sound you want
4. Use another dropdown to change each sound from Event to Stream
5. For each anim, improve the sound quality by following these steps (Make sure you have the Convert Stereo to Mono option UNCHECKED so sounds don't crackle)

If you click on a sound on your timeline: in the properties, beside Effect:, there's a pencil you can click to lower/pan/fade the volume of individual sounds.

If you want to make any punch sound stronger: combine it with a gunshot or explosion. Combining sounds lets you reuse them without sounding repetitive.

To put a .mp4 or similar video file into Flash it works best to first convert it to FLV, then File>Import Video into Flash and choose the Embed FLV option.

To convert to flv, if you have Flash 8 then search in your programs for Macromedia Flash 8 Video Encoder (other flash versions will have a program called Adobe Flash Video Encoder I think). The video encoder may tell you to download Quicktime first, which is available free from Apple's site. I think Quicktime generally makes flash more stable too. You can skip all that if you've found other video conversion software.

If you want only the audio of the mp4, follow this guide.

Maybe you don't want to use hips/shoulders/feet on your stickfigs but still want them to look great. If you use a human body as a reference for your proportions your stickfigs will automatically look better. Proportions are just the relative sizes of body parts.

If you move onto fancy stickfigs with hips and shoulders (essentially skeletons) it'll force you to have a good understanding of the body. It's hardcore but I recommend.
^ Lines get thinner based on distance!

After you've grasped human proportions you can choose to exaggerate them cartoonisly. Unsure of what to exaggerate? Use cartoons as reference, and emphasize the extremes of a character. What features are important, and are there other features you can make smaller to make the important features seem bigger? For example a brainy character will have thin limbs and a large head, whereas a strong character will have thick limbs and a small or medium head. Taller/prettier characters can have longer legs.
^ Image and advice by @Stickly

Make sure to balance proportions so that when you make one thing larger, make something else smaller. Knowing realistic proportions is a huge help when you're making unrealistic proportions, because you'll know if it looks believable (which is different from realistic).

The movieclip filter glow and blur that most people use are laggy and can't be done in Flash MX.

For the simplest alternative glow you can use linear and radial gradients with the alpha turned down.

A different alternative which makes glow surround a shape is Soften Fill Edges.
  1. Copy the original shape, and change it to the color of glow you want. Don't convert it to a symbol
  2. With it selected, at the top click Modify>Shape>Soften Fill Edges
  3. Ctrl-Shift-V to paste the original in place
The drawback is that it screws up complicated objects, so if it's screwing up then take the original shape and Modify>Shape>Optimize by 1% or so. It's finnicky, keep trying it to get a feel for the freedom it has.

For something with bright glow like a lightsaber you can make the original shape close to white.

When objects are moving so fast that they look like they're teleporting, you can fix it with inbetweens and/or smears. Depending on your preference, 12fps with smears can feel smoother than 24 fps with none. You can't smear every frame though, so watch your animation and add smears to the parts which might be hard for everyone to follow.

There's no science to smears; get as weird as you can as long as it looks ok. Keep in mind that your viewer won't see every frame you draw but it's still important to care about each. I try my best to make my smears for simple fast movements end within 2 frames at 24 fps, though some people prefer long goopy 10 frame smears. The difference is that when they're 1-3 frames people don't notice most of them, but the anim would look bad without them, whereas 10 frame smears are stylistic and distracting. I haven't found all the answers yet since I've stuck to fast jerky movements. Here's as good as I've gotten with smears, from 3:34 to the end.

The simplest smear in flash is to duplicate an object, lower the alpha of the trailing one, and add a line to show the motion of the tip:
The trailing object typically gets placed in the same place as an inbetween would. When you realize you can put two or more frames on the same frame, your movements can be way faster than the framerate. Here's an example of several translucent frames on top of each other to create a vibrating sword:

Here's one of my favorites, I had a ton of extra frames because the movement was too slow, so I slapped all the wasted extras on top of each other. I was thinking I needed to clean it up until I saw it in motion. Your eyes just don't care sometimes.

The regular and more respectable type of smear is to draw streaks originating from the moving object. Here's an example someone else drew, there's more in the references at the bottom.
Notice how this animator's smears for sudden movements only last 1 double-frame (so 2 frames) at 24 fps.

Impact Frames are frames which make an impact more convincing through flashing colors and lines. It's fine if they're subtle or even overdone, though some people hate it when you don't use them appropriately.

First draw a white rectangle over your stage, press F8 to make it a movieclip, click on it, and use Blending to invert the colors of your anim for a few frames. If the invert lasts more than a couple frames it implies time stops.

As you saw in the gif, I tend to use all sorts of blending options other than invert. Choose any Blending option then press the up/down arrow keys to rapidly find one you like. Above that are the Color Effects properties, which change the tint and transparency of your rectangle to improve the frame's appearance.

If you want an impact frame that isn't just a braindead color filter, then draw random lines, sparkles, and add some radial gradients. Typically everything radiates from the source of impact.

If you want something more traditional you can print out your frame in a very light color then make the lines with actual ink. Next scan it and add some filters/gradients in photoshop. I drew glow around the strokes in photoshop.

I used a thick brush pen with refillable cartridges, but the cartridges are somewhat expensive so this was a huge waste of ink.
In the future I'll use a cheap ink bottle and paintbrush, though that can be messy so the best option would be to refill the ink brush pen cartridges like 100 times using one $10 bottle of special non-clogging ink.



1. Start with a guide: draw a crappy chain, or just save time and draw a simple curving line

2. Use a reference to draw a chain link in any drawing style (use mirroring for nice symmetry), then draw a couple simple rotations. You only need 2 angles of the chain link (front and side) but I wanted more for variety.

3. Use ctrl-g once on each drawing, then copy-paste and place them. Right-click>Arrange helps overlap.

4. If you've got ugly overlap: select every-other chain link (the sideways ones you'll erase stuff from). Cut and paste them to a higher layer

5. Ctrl-B to break the top layer apart, make them a slightly different color if you want them to stand out from the ones behind them. Erase any parts that should be hidden by the chain links behind.
Try it and you'll feel your noggin joggin'

You're dunzo kid

Flash's .GIF algorithm is garbage no matter what the settings are. Here are 3 alternatives:

1. Screen Capture:
GIF screen capture software is very easy to use. I use GifCam, it lets you choose an area to capture, a framerate, and lets you edit the GIF.
2. PNG Sequence➤GIF:
File>Export Movie in Flash as a .PNG sequence and use this website to combine the images into a gif:
Export from flash as .SWF, use Swivel to export as .MP4, then use one of the many web services to turn the video file into a GIF.

If you need it to be within a filesize you can import your new gif into this website:
then go to step 7 to optimize it.

Parallax scrolling is moving different slices of a 2D background at speeds depending on their distance. It occurs only when a camera moves left/right/up/down (not rotation like pitch/yaw/roll).
In oldschool animation they used a machine to move the layers.
Here's how it looks from the camera in 2D games and animations:
It's set up so farthest background moves at same speed as camera but the ground doesn't get moved when the camera moves.
You could also get the same shot by keeping the camera in place and moving the closer layers faster than the background layers, but that's way harder since it's like moving the entire earth to make a character run on it, rather than allowing the character to move.

So you can either painstakingly tween the background layers, use Animate CC's built-in 3D tool (which doesn't export properly with Swivel, so avoid it), or use code to move the background layers.

Code Solution:
This is AS3 so it can only be used in Flash CS3+/Animate (unless you know how to convert it to AS2).

1. Combine any background elements which are equally distant from the camera (e.g. combine the near bushes with the near animal, but not with the far mountain) by converting them to a Movieclip (F8) (Graphics cannot be moved with code). All Movieclips can be on same layer
2. Click on the farthest background movieclip, in the properties give it a unique instance name like bg1_MC, do this for all.
3. Also click on your vcam and name it vCam_MC
4. Click a frame when the background movements begin, can be any layer of your main timeline, open the action panel (F9). Paste this:
Code: Select all
stage.addEventListener(Event.ENTER_FRAME, ticker1);
var vCamOgX:Number = vCam_MC.x;
var vCamOgY:Number = vCam_MC.y;
var bg1OgX:Number = bg1_MC.x; //bg1_MC has to exist onstage or else this code gives an error
var bg1OgY:Number = bg1_MC.y;
var bg2OgX:Number = bg2_MC.x;
var bg2OgY:Number = bg2_MC.y;
var bg3OgX:Number = bg3_MC.x; //remove if unused, or add more
var bg3OgY:Number = bg3_MC.y;
function ticker1(e:Event){
function vCamTrack():void{
   if (currentFrame > 0 && currentFrame <= 91){ //specify range which you want the objects to move in, currentFrame is # of frame plus frames of preceding scenes
      bg1_MC.x = bg1OgX+(vCam_MC.x-vCamOgX)*0.75; //farthest object, moves background to original position plus 75% the distance vcam moved from its origin
      bg1_MC.y = bg1OgY+(vCam_MC.y-vCamOgY)*0.75;
      bg2_MC.x = bg2OgX+(vCam_MC.x-vCamOgX)*0.5;
      bg2_MC.y = bg2OgY+(vCam_MC.y-vCamOgY)*0.5;
      bg3_MC.x = bg3OgX+(vCam_MC.x-vCamOgX)*0.25; //closest object
      bg3_MC.y = bg3OgY+(vCam_MC.y-vCamOgY)*0.25;
Make sure you mess with the values to make it look the way you want. If you want a background to be infinitely far away just make it into another object and make it move 1:1 with the vcam. If you have like 30 independent background slices then look into making automated arrays.

Flash CS3 or later versions. Audio visualizers are one of the few things that can't be converted through Swivel. Though if you're a code wizard, you could record the audio's variables to a file, then read the file, then it'd work with Swivel.

Almost nobody uses audio visualizers in Flash. There are limitless possibilities and not a lot of them have been explored! Here's what you could do if you wanted to expand a bit beyond this 10 min tutorial (caution: loud).

Playing a Sound
1. Open a new .fla file, import a sound to library (if it doesn't import check out my guide), then in the library right-click on the sound and select Properties, check Export, and write the name of your sound as your class name (use underscores or nothing instead of spaces):

2. Paste this in the Actions panel (F9) of the first frame:
Code: Select all
stop(); //this is optional
var mySnd:tone_SND = new tone_SND(); //replace tone_SND with whatever you named you sound
var mySndChannel:SoundChannel;;
It stops the animation then sets a variable to your library sound and makes a channel to play it in.

3. Preview with ctrl-Enter, wow your sound plays so nicely

Coding the Visualizer
4. Paste this after your previous code:
Code: Select all
var readFlo:Number;
const RANGE:int = 100; //range is in y axis
const SNDBYTES:int = 256; //sndbytes is in x axis, represents 256 bytes of left or right channel
const MIDPT:int = stage.stageHeight/2;

var g:Graphics =;
addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event){
    var bytes:ByteArray = new ByteArray();
    SoundMixer.computeSpectrum(bytes, false, 0);
   g.lineStyle(2, 0x22DD22); //green
   g.beginFill(0xBBFFBB) ;
   g.moveTo(0, MIDPT);
   var num:Number = 0;
    for(var i:int=0; i<SNDBYTES; i++){ //left channel
      readFlo = bytes.readFloat();
      num = readFlo*RANGE;
      g.lineTo((i/SNDBYTES)*stage.stageWidth, MIDPT - num); //uses stageWidth so x covers full width
   g.lineTo(stage.stageWidth, MIDPT);
   g.lineStyle(2, 0xCC0066); //red
   g.moveTo(stage.stageWidth, MIDPT);
   for(i= SNDBYTES; i> 0; i--){ //right channel
      readFlo =  bytes.readFloat();
      num = readFlo*RANGE;
      g.lineTo((i/SNDBYTES)*stage.stageWidth, MIDPT - num);
   g.lineTo(0, MIDPT);
Playing a 500Hz sinus wave sound gives this (green is left channel, red is right channel):

5. On the line "SoundMixer.computeSpectrum(bytes, false, 0);" change false to true to use Fourier transformations to decompress the wave into individual frequencies, it will look like this:
Interestingly, after Fourier transformation some of the waves will poke above the RANGE we set at 100.

Moving Objects with Sound
In the first link you likely noticed the red and blue headphone silhouettes moving with the music, they are simply moved and scaled to the average sound volume. Here's the speaker this example will show you to make (caution: loud).

6. First let's draw a simple speaker on the stage then convert just the speaker center into a movieclip (seen outlined in purple):

7. Click on your new movieclip, in its properties call it something like spkrCone_MC and take note of its x position and height

8. Now let's find the average volume to make the speaker cone move in and out. Place this variable declaration line below the 5th line:
Code: Select all
var floAvg:Number;

9. Paste this line twice, once after each "readFlo = bytes.readFloat();"
Code: Select all
floAvg += Math.abs(readFlo); //sums amplitude of each byte

10. Place these lines after the final "g.endFill;"
Code: Select all
floAvg = floAvg/SNDBYTES/2; //averages by dividing sum of bytes by # of bytes then dividing by 2 channels
spkrCone_MC.x = 315+floAvg*35; //my original x pos was 315
spkrCone_MC.height = 87+floAvg*5; //my original width was 87
Change 315 to your original x position and 87 to your height. I got the numbers 35 and 5 from testing what looked best so fiddle with those yourself.

Again, this is what it will look like when done (caution: loud).

Sources: Accessing Raw Sound Data

Flash 5 (2000): rarely used and old, ActionScript 1 (AS1) programming language, nearly no tutorials.
Flash MX (2003): uncommonly used, and somewhat unstable (can crash often). No brush smoothing but still a decent version. AS2.
Flash 8 (2005): very common, still used by some of the best because of its stability (varies per user). Introduced brush smoothing (I recommend 40%), movieclip blending, movieclip blur, and line corners. 2GB memory limit so has difficulty moving vCam on large backgrounds. Keep in mind if you're receiving a .Fla file from users who have later versions, the others need keep the VCam and export options as AS2.
Flash CS3 (2007): maybe uncommon, reportedly stable, 2GB memory limit. Introduced AS3 and a couple useless tools.
Flash CS4 (2008): uncommon, unstable (varies per user), introduced many useless tools such as the Bone tool.
Flash CS5 (2010): uncommon, unsure about stability, added features for AS3 and the useless tools.
Flash CS5.5 (2011): same as CS5 with a few more tacked on.
Flash CS6 (2012): maybe common, stable, built-in autosave, increased memory limit, and easy to collab with Animate CC users since it's only one version away. Introduced a ton of advanced AS3 features that you should avoid.
Animate CC (2013-present): very common, subscription fee, and occasionally gets upgraded/downgraded. Can save to Creative Cloud, can export as video (not sure how reliably). Some of the tools (such as the 3D tool and built-in camera) don't work with Swivel. It is the only version that can't use AS2, though many AS3 features were added. Great tools and upgrades may be coming but the dev team is like 7 people.

When collaborating keep in mind that all Flash/Animate versions can only save one version back, so you need every Flash version in between. For example if you want to open an Animate CC .Fla file with Flash 8, you first have to open with CC, save to CS6, open with CS6, save to CS5... all the way down to Flash 8.

This is for if your .fla is corrupted and all you have left is a .swf. Importing the swf into your anim isn't great because it won't have layers, sounds, and parts may be broken.

The guide below will return it to a nearly original fla with layers and sounds, but it only works for Flash CS5 or higher. If you have a lower version you can find someone to save it down, but they must have all the Flash versions in-between; see the previous tutorial section for more info.

If the .swf is on your computer, skip to step 5.
  1. In Chrome (Firefox is similar) when you are looking at an animation, right click anywhere on the page (except for inside the flash animation) and click Inspect.
  2. A code window will pop up, hit ctrl-F and then type in .swf, search for the swf with the right title, it'll be something like:
    Code: Select all
  3. Copy the full URL and paste it in your address bar, go to it.
  4. Click the options in the top-right of chrome, click More Tools, then save the page as a swf.
  5. Download, open your swf, export to the fla version closest to yours:

  • Set your Flash Auto-Save by clicking the wrench in the Properties Inspector (beside where you enter your stage size). If your Flash version doesn't have the option, get an Auto-Save plugin.
  • At the top-right of the timeline there's a button with an option to shorten your layers. It makes it easier to navigate a lot of layers.
  • Reuse and reduce layers (I try to stay below 30), name your layer what's currently on it.
  • You can also work way faster if you drag the timeline taller, but the taller your timeline is the more your anim lags when you press Enter.
  • You can name your frames to find locations in your timeline faster.
  • If there's lag when you press Enter to play the anim, it helps to go View>Preview Mode and choose a faster option. I have them bound to shortcuts.
  • If your .swf ever gets laggy (when you hit ctrl-enter) you can right-click on it and lower the quality. To do that automatically every time then click on a keyframe at the beginning of the anim, press F9, and write stage.quality = StageQuality.MEDIUM; (or stage.quality = StageQuality.LOW; )
  • If you're double/triple framing you can get a command to jump to next or previous keyframe, see the first comment after the parent post here


Image goes right to left:
1. Draw a side view of your weapon, cleaner lines are better so don't be like me
2. Squash and/or skew it, duplicate it
3. Center any pointy bits, draw approximate lines to link the rest
4. If you want the front view, just lead your lines across, draw straight lines by holding Shift


I feel like inspiration and references go hand-in-hand. Scour your saved pictures or dojo favs with the intent to make something; if you don't have many then check out the Art References section of this post or google your heart's desire. Pay attention to what excites you and don't waste time looking for the "perfect" inspiration; inspiration can come from anywhere but can also be fleeting.

Here's how I use inspirations/refs:

Writing Scripts/Stories
The longer I sit on a story and think about it the better it gets. Start with stuff that interests you; romance, spaceships, or base an animation around a song. Throw around all the sweet possibilities when you're sitting on the toilet and inspiration will hit. Then WRITE IT DOWN or storyboard it if necessary because you WILL forget it and you'll want to murder yourself because all you can remember is how you forgot the most interesting idea in your life. Write down every good idea, and then when making the final product you can mix and match your best ones.

A ton of animators (me especially) get lost in pre-production documentation/storyboards and grand visions and can't finish anything. Look at your script like a witch hunt and remove every time-wasting and average idea.

There's a 5 second rule wish I used more, where: If you have an impulse to act on a goal, you must physically move within 5 seconds or your brain will kill the idea.

You'll get impulses to do something which you know will be good for you (like drawing a boring human from reference), so you count to 5 and act or else. Just never let yourself hit that 5 second mark, because you'll open your eyes a year from now and wonder how you're in the same spot.

That said - habits are waaay better than motivation or impulse.
The most reliable way of keeping myself going is to habitually stream art. Even at 0 viewers, anyone could join so I stay on task.

1. Most of my composition comes from mental image or feel, move everything around to see what looks good. After that mirror it, and rotate it, suddenly imperfections pop out.
2. [this rule has exceptions so take it lightly] If the person's face/body is facing one way, offset them in the other direction (more sideways = more offset). If they're facing directly forward/away you should keep them in the center unless there is another subject just as interesting (like another person or a beautiful background). Examples I found:
3. If all else fails, try rule of thirds or something:
4. lots of negative space if it looks good. (like in above pic)
5. The closer the person, the more personal the art feels:
Image VS Image

There are many cases where these rules don't apply, depending on the effect you want your composition to have. For example the following pic breaks my rule 2 but it works well because the composition emphasizes that he's on the move.

If you want to get a satisfying pic to look at, you need to encourage the viewers eyes to wander around your pic. Sci-fi concept artist Sparth uses diagonals and rule of thirds to hook the viewer so their eyes cover the image for several seconds. Here's his diagram of what he wants the viewer's eyes to do, and a pic where he's used his technique:

Check the Animation section of the Art References at the bottom for more in-depth guides

Lazy Nezumi is an extension with a free trial, it can work on top of most programs (like Flash) and constrain your pen strokes in neat ways.
If you're passionate and already understand perspective, Lazy Nezumi is super useful for constraints such as circles and 1,2,3, or 5 (fisheye) point perspective.
The program has general stroke smoothing, but I tested it a lot with Flash and Photoshop and the smoothing never helped; it was annoying and would round corners. Maybe I'd recommend its smoothing if you have crazily shaking hands, but even then it may not do much.


Perspective tutorials by Thomas Romain:

Anime Background albums:
Your Name (Kimi no Na wa):
A Silent Voice (Koe no Katachi):
Attack on Titan (2013):
Ghibli films: and and
Princess Mononoke (1997):
Akira (1988): httpss://
Matte/speedpaint by 泉彩:

Western BG albums:
Zootopia (2016):
Song of the Sea (2014):
Steven Universe:
Adventure Time: and
The Lion King (1994):
Batman: The Animated Series (1992):
Winnie the Pooh (1988):

Photo BG albums:
Hundreds of russian/euro urban exploration albums; right-click Translate the pages:
Kowloon Walled City (Hong Kong): and

Blueprints of cars, aircraft, watercraft, guns:
Cutaways for inside views:
Star Wars cross-sections: and

Cleaning up messy Flash brushstrokes: ... ts-joining
Pixel art/animation:
Animation smear examples:
Human movement vids:
Framing/composition guides:
Film composition examples:
Evangeleon animated user interfaces:
Free textures: (no account needed) and (need account)

Combo move list:
Last edited by HeartOfTheStorm on Thu Nov 22, 2018 2:09 am, edited 2 times in total.
User avatar
AD Member
Posts: 32
Joined: Thu Nov 15, 2018 8:47 am
Location: Beyond the shores

wow these are good, thanks
User avatar
AD Team
Posts: 117
Joined: Sun May 20, 2018 12:47 am

Stickied this, great job!
The wall collab!
My BSW page
The Stick Crew (Coming soon)
User avatar
Site Admin
Posts: 56
Joined: Sat May 19, 2018 8:33 pm

Glad more people can absorb some knawledge. Thx for the sticky. Next easy tutorial might be how to draw my pretty trees/clouds in Flash; though it'll be better as a video tutorial so idk when it'll get done
User avatar
AD Member
Posts: 32
Joined: Thu Nov 15, 2018 8:47 am
Location: Beyond the shores

This is inspiring, thanks HOTS.
what's up
profile picture is art by boris groh
User avatar
Posts: 65
Joined: Sun May 20, 2018 1:26 am
Location: Canada

CLOUDS, thank you, please tell me how to shade a cloud in a good way!!
User avatar
Site Admin
Posts: 12
Joined: Sat May 19, 2018 9:42 pm
Location: Hungary

Hot stuff broski!
User avatar
AD Team
Posts: 4
Joined: Fri Nov 02, 2018 4:25 am

Return to Tutorials

Who is online
Users browsing this forum: No registered users and 1 guest