Reply to topic  [ 8 posts ] 
 Yom's Flash Lessons (video)! 
Author Message
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Yom's Flash Lessons (video)!
Attend if you want to lern2flash.

Table of Contents
Lesson 1 - Simple drawing.
Lesson 2 - Basic animation


Lesson 1!
SIMPLE DRAWING.


Link


In this lesson, I'll use the simple tools Line, Pencil and such to draw a simple character.

We start off by selecting the line tool.

Then, we draw a crude outline shape. That's all we need for now. I used a hexagon.

Then, I click the black arrow (selection tool) and start adjusting the outline. Click the segment of the outline you want to gently curve.

Now, we create a new layer. Imagine this new layer as a canvas over the original, an overlay, so to speak.

After selecting this new layer, we begin by using the line tool to draw the hair outline.

Now, we switch to the selection tool, and click the intersection of two lines. See? We can adjust BOTH lines now.

Once that's done, we add in curves.

Once our adjustments are done, we go to fill tool.

Before we start filling in stuff, we make a slight adjustment. Gap size; we allow small gaps to be autofilled.

Then, we paint in the hair. How does this work? Because the hair is in a different layer; the face part has no contact with layer 2.

Now, we select layer 1, and fill in the face with skinny color.

See? two layers for seperate objects. It reduces the hassle, and allows you to select what is needed. It's useful if you want to edit colors... or give someone the blackface.

Now, we add facial features on the same layer as the face. If you feel like it, you can make a new layer for facial experessions and such.

Note how the effect is below the hair? That's how layers work. If layer 2 is above layer 1, drawings in layer 2 overlay drawings in layer 1.

You can also change the brush size if you want to draw more detailed stuff.

Or you can use a pencil.

Even after drawing, you can adjust objects if you dont like how they came out.

Now, we add a third layer.

Drag and drop the new layer below the other layers. Guess what this does?

It adjusts where drawn objects of this layer appear.

Now I draw some back hair with the pencil tool.

All done!. Time to add your signature and you're good to go!.

Any questions?

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Sun Apr 07, 2013 2:17 pm
Profile E-mail WWW
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Re: Yom's Flash Lessons (video)!
To answer Remon's question about top layer...

Image

The layer that is at the top will overlay all below it.

For example, if hair is on the top layer, it will overlay the face and the body.

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Sun Apr 07, 2013 2:34 pm
Profile E-mail WWW
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Re: Yom's Flash Lessons (video)!

Link


How to adjust your flash size. :P

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Sun Apr 07, 2013 2:47 pm
Profile E-mail WWW
Level 38
Level 38
User avatar

Cash on hand:
435.45

Bank:
2,750,364.30
Posts: 10364
Joined: Sun Oct 26, 2008 5:47 am
Group: Dev Team
Post Re: Yom's Flash Lessons (video)!
Where is that sexy voice of yours?

_________________
My Pixiv
Image
Spoiler: show
OLD VERSION, BITCHES!
Image


Mon Apr 08, 2013 4:28 am
Profile E-mail
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Re: Yom's Flash Lessons (video)!
I dont have my voice altering software on me right now. :(

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Mon Apr 08, 2013 1:44 pm
Profile E-mail WWW
Level 38
Level 38
User avatar

Cash on hand:
435.45

Bank:
2,750,364.30
Posts: 10364
Joined: Sun Oct 26, 2008 5:47 am
Group: Dev Team
Post Re: Yom's Flash Lessons (video)!
can't you just use your "newerst pran" voice? :l

_________________
My Pixiv
Image
Spoiler: show
OLD VERSION, BITCHES!
Image


Mon Apr 08, 2013 2:21 pm
Profile E-mail
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Re: Yom's Flash Lessons (video)!
Newpurple wrote:
can't you just use your "newerst pran" voice? :l


That was the voice altering software. And all the clothespins are in use. That day was Laundry day.

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Mon Apr 08, 2013 2:34 pm
Profile E-mail WWW
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Re: Yom's Flash Lessons (video)!
Lesson 2
Animating... with OBJECTS!

Animating something frame by frame is pretty hard work, ya know? Sure, you know how to do it, but you don't have the time for it... mostly.

That's why, we introduce... tweening and movieclips!

Lesson 2, part 1 of 2

Tweening:
Instead of drawing something frame by frame, flash animators use a technique called tweening to easily animate moving backgrounds, etc.


Link


Allright, step 1; we're gonna draw a moving background! Like in anime or some shit!

First, we draw our background!

HINT: Pressing SHIFT while drawing with the brush makes straight lines!

Tweens work much better with objects (in this case, a graphic). Instead of making it tween many objects, we made it tween a single object.

Tweens can also be used to move the characters you have drawn, or backgrounds, or whatever you choose.

Oh, and press ctrl+Enter to test your moovy (less cumbersome than exporting to swf, amirite?).

-

Lesson 2, part 2 of 2: movieclips!

You might think this is about exporting to swf, but no; movieclips are - simply put, are animations in an animation(Animationception up in this motherfucker!). They are used to animate sprites (because making frame-by-frame animations of walk cycles is hard!). Movieclips can also be used as background images in a still scene. Bridget Bridge, in Sex Kitten Mindfuck is a movieclip.

... there I go again with the rambling.

Video 2, GO!


Link


Now, we take things up a notch.

We start off with our previous flash; a lowly background. Now, let's doubleclick the layer it's on and give it a name. Trust me, you will find this practice of labeling layers both useful and helpful. I leave one layer for code, one layer for labels and one layer for the overlay - that way, we don't have to scream in frustration years into the future when things dont make sense. TL;DR version: LEAVE DOCUMENTATION FOR FUTURE YUU!.

... shit, I rambled again, didn't I?

Now, we create our first movieclip(or sprite, if you're an aficionado of sprite animations).

Go to Insert (on the top menu), and add a new symbol. We shall make it a movieclip!. We only need to animate only the necessary animations.

We use the onion skin feature to see how the previous frame looks like. A lot of help if you're animating something.

With our running stickman done, we go back, and then we see him in the Library; ready to be added at your discretion!.

We add a new layer, and call it objects. As it is above the 'backgrounds' layer, any and all objects, drawings, text etc will overlap the background!

We then view the mesh of the layer; to place him properly. This is useful if you want to clear away the background without deleting it.

Once we decide on a position, we add him into the scene, but there seems to be a problem

...

Running man's physical body seems to be incredibly fast(you can use this if you're drawing a fight and UltraRemon has superhuman speed or something). So, we'll edit that movieclip, adding a single frame (NOT A KEYFRAME) to each keyframe.

Now the running man looks realistic!.

-

Lesson 2; part 3 of 2.
Basic music in flash!

So yeah, you've got a simplistic flash animation; but most flash isn't worth much without auditory backgrounds!. So we gonna fix that!.

We go and import a sound (mp3 is fine), set the quality, and then define which layer will hold the sound effect. As we're done, we notice a line on the objects layer!

Now we give it a go.

...

Notice how the music loops in on itself? It's because we set it to loop; on event - the moment frame 1 is loaded, a new instance will play. Although useful for single-play sound effects, this wont do at all for music.

So, we go back to that properties page, and set the sync to start; it only starts the music and then loops it when the music is finished.

There we go!. One animation, all finished up!

You can move the character around by tweening the movieclip; good stuff to know when making movies. Experiment and learn!

Extra: Realistic sprite motions.

Enjoy. Because it's a bonus for being willing to learn. :3

-

Final Result flash.
Spoiler: show

Yes, that's a stickfigure running to Cruel Angel's Thesis.

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Thu Apr 11, 2013 7:58 pm
Profile E-mail WWW
Display posts from previous:  Sort by  
Reply to topic   [ 8 posts ] 
 

Similar topics

 
Made a video about Michael Jackson's Death
Forum: ./General Spam
Author: CarsitoPyg
Replies: 76
Video of Shocksock eating Dominos Pizza
Forum: ./General Spam
Author: Shocksock
Replies: 11
*drops a video into the forum*
Forum: Let's Play
Author: arch_enemy
Replies: 6
Project: Crash your Flash <3 Do not Enter if your Pc SUCKS!.
Forum: ./General Spam
Author: Ume
Replies: 16
Top


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Mods Database :: Imprint :: Crawler Feeds :: Reset blocks
Designed by STSoftware for PTF.

Portal XL 5.0 ~ Premod 0.3 phpBB SEO