v2 logo

I’ve had my current theme for more than half a year, and I’m currently working on the next version during leisure time. “But the current one is good, simple and plain” – Yes it is, but it lacks things that I didn’t knew yet when I first made this. Actually v1 is my first full WP template. So basically, the current theme (v1) doesn’t support wordpress widgets. Oh yes, widgets, also known as the “sidebar accessories” which are plugins that can be integrated into the sidebar.

So taking feature and content design into consideration, I decided to redesign my theme and catch up. And now presenting a sneak peak into the version changes. (also click on image below to enlarge)

v2 design

• I’ve redesigned the logo to be brighter and sharper.
• Kept the color scheme (I still like my colors) and some box styles yet made the design livelier.
• Sided with more personalized design than corporate look but still as sleek as it is.
• Widget support! And it’s not for sidebars only.
• More content/game/portfolio exposure.
• Maximized content width yet still support 1024×768 user screens.
• Removed the news section (from v1).

As of this post’s time, sliced it up into html/css then the next step is converting into a wordpress theme. Watch out, I’ll be uploading v2 in a week or three.

Cel-shading

I’ve introduce cel-shading – my personal preference on art style (and its currently the best I have ) – in a previous post Using Cel-shading. And now I have something to share on basically how to apply them in flat drawings using flash. This is based on my experience from how I started drawing it to how I do it these days.

With tools provided with flash we can achieve a cel-shaded effect in quite different ways and yet achieve similar (if not so the same) results. As for this, we’ll be using the rectangle tool, line tool and brush, but of course all with the help of the selection tool and paint bucket tool for our color fill needs.  Just remember the base rule, to have consistent light source when adding the shades.

Our sample character

I’ve prepared a hand drawn character where we will be applying shading. Now, don’t tell me that my drawing doesn’t look any good, it’s all that I can do. :-p

Rectangle Tool

First off the bat, is the rectangle tool. Why the rectangle, not the cirle? Hence the edge points will be needed to snap on other line’s edges. The rectangle tool is only good for simple shapes with not so much detail, so for this example I can only see the nose to be simple enough.

Nose - Simple shape 1. Start with a basic shape from your drawing where the shade would not be too complicated (so don’t choose the ears, unless your ears is all round and flat to begin with).	2. Select a skin color which is slightly darker to the skin color. Take note the darkness or lightness of the shade would depend on the imagined light intensity.	3. Using the rectangle tool, draw a small circle.
4. Make sure to enable snap to objects to connect points easier. Use the selection tool to drap the corner to it one of the border edges.	5. Continue dragging the corners to the borders. Then use the paint bucket tool to color fill the space created .	6. Drag the other sides to form a curve. This will be the shade for the nose curves.
7. Continue dragging the remaining sides and curve them to make the round nose appear more round.	8. Now from the point where both points meets (a corner) drag it to make a smooth curve.	9. And we have the shading for the nose.

Well it obviously took long enough just to have that shade using the rectangle tool which will prove that it isn’t that effective for this task.

Line Tool

So next we will be using the line tool. Now things would be much quicker to do hopefully compared to the above or maybe not, since we’ll be shading the whole face now (with the ears).

10. Using the line tool, create a line above the jaw then curve it a little. We will have connected lines instead of having just one so that we can have more control over the curves.	11. The reason we curved the line is so that we won’t hit the mouth lines. Now extend it just above the chin. Curve it to your liking and to follow the jaw lines.
12. Continue with creating lines and curve them to show how the face is (note: straight lines = flat faces).	13. Continue lining and curving until you close the line for the shaded part.
14. Since the ears are a little huge (okay, not little but really huge!), we won’t completely shade it. Create lines and curve them respective to how the ears are popped-out.	15. After lining and curving, we can simply use the paint bucket tool to fill the shade color.
16. When everything is looking okay (lines and curves are good enough), we have to delete all the lines (unless you’ll make them necessary).	17. And look now, we have our character shaded quite well.

Now that we have our character’s face shaded, the only thing left is the shirt.

Brush Tool

For this last one, we’ll be using the brush tool and expect this one to be the quickest of them all. Although the outcome might not be well straight and curved unlike from lines but who care anyway, we just want it to look better and do it fast. By the way I’m using my tablet but this shading can still be achieved by using a mouse.

18. With the Brush tool, we have to set the brush mode to Paint Selection.	19. Select the fill for the shirt using Selection tool.	20. With Brush mode set to Paint Selection, only the selected parts will be painted, so go on and brush the upper part of the shirt which is supposed to be shadowed from the character’s head and don’t worry about paint going off the selection, it won’t.
21. Then do the same for the part bellow the arms.	22. And also with the sleeves.	23. And do the same for the arm too. And we’re finished!

I supposed you would not like to use the rectangle tool, but I just wanted to share that since I once used it before. The line tool has it’s own purpose on certain circumstances that using the brush tool might be troubling.

Sample character with shading

So maybe now, you have an idea on how you’ll be able to cel-shade your drawings from my example here. Of course hand draw styles are not meant to be with perfect lines, curves and shades, it would all come to a matter of preference and personal style. Learning this drawing style might take a while for you to get used to but it will be well deserved when all comes to place after a lot of practice. Now, go! go! go and draw your toons…

Cel-Shading

As most of the games I’ve designed so far, it has come to me that I finally have my favorite and primary drawing style. I’m not a fantastic nor a pure talent but I believe I don’t completely lack the skills needed for me to draw my own art. And so I’ve been comfortable with drawing in 2d cartoons then shading them properly to add life – and so, cel-shading.

I first discovered my quirky drawing skills back when I was in grade school but soon after I just lost interest and my drawing did not improve by then. But during flash development, the need was called forth again, “Learn to draw!!”. From my previous games until now the progress of digital art is noticeable should I say.

Cel shading or toon shading has been a traditional drawing style, which expresses the hand drawn style of comics and cartoons. The term came from painted cels from clear sheets of acetate which was used for traditional 2D animations.

Figure: Square and cel-shaded square

Cel shading looks quite easy but is not really and could be well complicated especially for those who are not trained, educated or simply not inclined with the art field itself. Basically, from your 2 dimensional shape (see figure), you have to imagine a 3rd dimension which is practically affected by lighting and shadows. A basic rule is to keep consistent the light source, if it will be from the top left then shadows would usually be found on the lower right of the object and light glares or shines will be on the top left also. From the figure, after having a light source and some shade, the box appears to be least flat.

Some advantages when cel-shading is applied on your flat shapes and objects:

• Depths would be more clear – which side or area is deeper or more beveled.
• light texture is displayed – rocky, spiky or simply varying surfaces can be expressed from proper shades.
• contrast can be improved by having varying borders and edges are usually thicker.
• having a light 3d effect while still being in 2d.
• and lastly it gives more life into the shape/object.

Of course, cel-shading is not the best there is with regards to drawing, but it is one of those which are most easiest to implement.

With the tools provided in Flash, we can apply this technique from various methods and get similar results – but I’ll leave that to another post.

Flash tools

Starting of the Arts n Visuals category, I’ll present you a classic traditional animation technique yet very useful even now, especially for 2D animations, Squash and Stretch. Seeing an abundant genre of flash games concerning with balls especially bouncing balls, the Squash and Stretch technique might serve some help for those who wish to make more bouncing ball games.

Squash and Stretch is a traditional animation technique that is famously used by 2D animators and cartoon designers although not quite practical for 3D animators. It can give your object some realism and weight into it. When a moving object collides into a stationary object, it will deform on impact. Remember that no matter how much an object deforms from squashes and stretches is that it will always have the same volume. Also, the deformity would rather depend on the object’s rigidness and flexibility, so a rubber ball is most likely to deform more than a golf ball upon impact.

Usually with cartooning, the deformities are exaggerated and could either show more realism or make it more inherently funnier. An obvious example I have is a rubber ball.

Stretch - pre/post-impact

Squash - point of impact

With this example, a stretch is achieved when the ball shows speed (before and after impact) and a squash during the point of impact. Of course more stretch could be interpreted as a faster ball and more squash would show more impact strength. Although it could be exaggerated in both ways that it could also mean that the object is least rigid or not at all.

Although the best example to show this is a ball, any other object that posses proper rigidness can be used to show more speed and impact. Of course the squash and stretch technique is just one of the many ways to visually improve speed and impact realism and/or exaggeration.

Other Keywords

• Flash animating ball bounce.
• Flash animation, ball game action-reaction.
• Flash animation tips & tricks.
• Animation effect, speed, bounce, etc.

Features:
• dependent on code, not on the swf’s framing
• very flexible and expandable
• reusable for any other animation that require distinct control
• can cheat key framing
• really simple

Structure:
Basically the primary movieclip of the character shall contain a few designated frames for each possible animation it shall have. For this case I have frame 1, 3, 5 and 7 each allocated as stand/idle, running, jump and double jump animations respectively and all have “mc” as their instance names. This is also shown on these images:

Stand MovieClip, frame 1 & 2

run MovieClip, frame 3 & 4

Jump MovieClip - frame 5 & 6

Double Jump MovieClip - frame 7 & 8

Then each animation respectively has the animation sequence tween. And take note: that each animation is not key framed with one’s or two’s yet they set on a five’s key framing. This is because our frame controller must be able to tolerate slight FPS reductions based on time (detailed on this post). So when the animation is played from the timeline during design time it would appear to be quite slower than expected.

Stand MovieClip - 100 frames

Run MovieClip - 80 frames

Jump MovieClip - 65 frames

Double Jump MovieClip - 50 frames

Also take note of each of the animation’s total frames; they’ll be used when playing through them. After setting up the structures here is where the controller comes in.

Code:
This is assumed to be within your character’s class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var _cframe:Number;
var _ccframe:Number;
var mc:MovieClip; // animation movieclip child
function update(){
	controlFrame();
	// some more codes here
	gotoAndStop( _cframe );
	mc.gotoAndStop( _ccframe );
}
function controlFrame() {
	var frameSkip:Number = int( 4 * Engine.frameSpd ) + 1;
 
	switch( _cframe ) {
		case 1: // stand/idle
			if ( _ccframe + frameSkip > 100 ) _ccframe = ( _ccframe + frameSkip ) % 100
			else _ccframe += frameSkip;
			break;
		case 3: // run
			if ( _ccframe + frameSkip > 80 ) _ccframe = ( _ccframe + frameSkip ) % 80
			else _ccframe += frameSkip;
			break;
		case 5: // jump
			if ( _ccframe + frameSkip > 65 ) _ccframe = ( _ccframe + frameSkip ) % 65 + 25;
			else _ccframe += frameSkip;
			break;
		case 7: // double jump
			if ( _ccframe + frameSkip > 50 ) {
				_ccframe = ( _ccframe + frameSkip ) % 50 + 25;
				_cframe = 5;
			}	else _ccframe += frameSkip;
			break;
		default: break;
	}
}

_cframe is the current animation frame of the character and _ccframe acts like a play head for the mc animation itself.

Line 11: You can see why we used five’s key framing because our frameSkip is 5 by default and is then altered by the frameSpd. So if frameSpd is not used, then the controller will basically be frame based.

Line 15 & 19: Check if the sum of frameSkip & _ccframe is greater than the total frames then use modulus (%) to reset.

Line 16, 20, 24 & 30: Else just add the frameSkip to _ccframe

Line 23 & 28: Check if the sum of frameSkip & _ccframe is greater than the total frames then use modulus (%) to reset and add a special offset specific with respect to the animation intended.

Line 29: Transfers the animation then from double jump to jump with the same _ccframe

Line 7 & 8: The update will them take care of updating the right movieclips based on what _cframe & _ccframe was changed into.