Bay 12 Games Forum

Finally... => Creative Projects => Topic started by: Blargityblarg on December 09, 2010, 09:50:06 am

Title: Blarg has to make a Flash Animation!
Post by: Blargityblarg on December 09, 2010, 09:50:06 am
Right, so for my IDM (Interactive Digital Media) class, we're learning Flash animation, and our assignment for the first term is to make a short Flash animation. This is my current concept, and yes, the premise is meant to be fat buck insane.

Fuckin' clowns, how do they work?

Setting: Alternate Earth, clowns are a natural energy resource (like Monsters Inc. vis a vis emotion to energy, but more literally and violently.) usually mined as 'Clown ore' or occasionally, a Clown Nugget (i.e. a limb, organ, or other body part, un-corroded.) Clown ore gets tossed in the furnace, everyone has to leave the area due to mix of screaming and honking and carryon as the clowns melt down into distilled foolium jestate or whatever the fuck it ends up being called. Foolium Jestate also used as a drug..?

Dramatis Personae: William Branks, miner and general badass tough nut, uses knowledge of the mines to his advantage throughout.

Henry Trafalgar: Butt monkey new kid, gets torn to fuckin' shreds.

'Bozo': Clown Nugget consisting of an entire fuckin' clown. Wakes up, killing rampage, bluh bluh bluh.  Main antagonist.

Plot: Starts out with William generally outlining the setting, panning scenes of whatever he's describing, ending w/ third-person view of mine elevator descending into darkness, (tearing exposed clown nugget limbs apart?) the walk to the shaft (perhaps with annoying yokel miners gawking and giggling about some mildly taboo portion (arse?) of a clown comprising a nugget (Hey Zeke, dis here's a clown's butt! Hyuk hyuk hyuk!) Be sure to kill off violently at hands of Bozo later on.) William arrives at his shaft, meets Henry, who's been arsing about 'cause he's a rookie without a fuckin' clue. William clips him 'round the ears, gets him to blow a charge they'd set yesterday. Charge reveals part of a whole clown (Bozo) still mostly covered with rock. William tells Henry to clear rock with a pick, clinks away for a bit, maybe William internally monologuing about how 'kid has potential' etc, until eventually we get a different sound for the pick's strike; turns out Henry has buried his pick in Bozo's skull. Standard horror movie schtick, eyes suddenly come alive, hand shoots out and grabs Henry by throat, et cetera. Might have to cut to showing violence-through-shadows (Gears of War, first Berserker-style) if a) I'm too terrible at Flash art to do it justice or b) Aidurp decrees that clowns performing rapid deconstruction of people onscreen is not suitable for a school project. William GsTFO, Bozo extracts himself from rubble, removes pickaxe from head, and gives chase. William gets caught in a small cavein, knocked unconscious for a few hours, wakes up in end of tunnel sealed with rubble, (Blood seeping through rubble?), mines his way out, finds scene of destruction (including some ironic and altogether satisfying death for yokel 'tard miners), Bozo finds him again, chase ensues, maybe additional scenes here (Nugget storage room, hard as fuck for William  to tell which limb is inanimate, which is Bozo, hilarity ensues?), eventually make it to smelting works, struggle, Bozo falls into blast furnace, gets melted (a la Terminator 2), credits roll. Epilogue: portray some junkie snorting melted Bozo juice whilst looking away, looks at 'camera', has Bozo's eyes (Red clown nose?) Fade to 'To Be Continued?'

Suggestions? Criticism? Offers of help and/or undying love?
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Supermikhail on December 09, 2010, 09:56:00 am
That's a lot more than a one page script?
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Blargityblarg on December 09, 2010, 09:58:26 am
Quite possibly, but I only have a very vague idea of what I have to do next year, and I can always compact it if I need it to.
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Argembarger on December 09, 2010, 10:16:27 am
this... sounds absolutely terrifying.

That is all.
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Blargityblarg on December 09, 2010, 10:23:44 am
I'm going for just the right juxtaposition of absurdity and absolute blind terror to get maximum win.
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Armok on December 09, 2010, 05:54:46 pm
Sounds fun. You should model the furnaces after Auschwitz for extra symbolisms and history creed!
Title: Re: Blarg has to make a Flash Animation next year!
Post by: Blargityblarg on February 07, 2011, 09:08:43 pm
Rise, thread, for your time has come!

I've begun the class and linked my teacher here- with any luck he'll be shocked and appalled be making with the hypothetical sponsor money throwing. Has anyone got any tips for Flash I should use, or anything else relevant?
Title: Re: Blarg has to make a Flash Animation!
Post by: Itnetlolor on February 08, 2011, 01:35:12 am
I'd like to put in my advice, but my relevance only really extends to CS3 (might check out CS5 sometime); so I am uncertain of the amount of help I can provide that will be compatible.

Motion scenes work better with 5 moving layers for the scene (2BG-MG-2FG), than 3 (BG-MG-FG), I guess; 7 if you want to be really fancy. Repetition isn't all bad for scenes like that, provided a slight alteration to elements here and there (color filters and such really help here). If you're good with javascript, you can always use code to work that out as well. A proc-gen moving scenery tossing script could work, provided a starting anchor point and a delete point. This can also easily be done if you're ahead of class and are bored. Stock up on your own material while you wait.

Make as many elements (especially if they're going to be commonplace) beforehand and in a separate document. For example, I have a weapons and scenery cache, all pre-built, animations and animation variations (with sounds already included and pre-synched) and etc.; all I need to do is copy-paste them into a scene from the arsenal document into the project document. It would also provide security you won't lose an awesome element if the program crashes. It also helps since the noises should already be linked (provided they haven't moved since last time accessed) to the animations. An example of my arsenal is a rifle. I have a semi-auto animation (essentially just 2-4 frames (depending on FPS chosen); 1=☼, 2=Base), burst fire animation (helps to have pre-made sets depending on FPSs that might be chosen (24 or 32 FPS varieties), and automatic animations (same as semi-, except on a constant loop until I choose the right frame to switch it back to the base frame; burst is like this, except with a 3-6 frame delay as the base frame for the ending frames, but not too different from the effect this set gives off at the beginning (only for the total of 6-12 frames at the start)). All that needs to be done is change the variation for via the replace options, and choose the appropriate frame. Any other time it's not used, just leave it the base-frame graphic.

You can also do similar with special effects as well. Pre-render and compose and synchronize special effects in a separate document as well, or have a good idea of what you're doing with them.

If doing explosions, to retain quality, you can go simple, but space the timings with only 3 keyframes and 1 sound effect and a small group of layers, and even abuse some of the time spacings along the sound track for the one effect. 1 explosion, and maybe 7 yellow-to-red gradient circles (from center outward, with a transparent fade on the outermost end of the gradient), 3 layers, 12 frames (good for a half-second explosion noise); render it like you see an enemy explode in an early console/arcade game.

  123456789012R          Explosion Pattern
1 ☼====►◄====►R           OO
2 ◄=======►◄=►R           O  o
3 ◄==►◄==►◄==►R          o o  o

Legend:
☼- Noise start (.5 seconds, or 12 frames length), also the start of a gradient circle frame.
◄==► Frame length of gradient circles that make up the explosion (larger = more frames)
R- Repeat point

Note:
Order of explosion pattern don't matter, as long as it looks like it makes sense structurally. Just remember to place the end points while the explosions are small scaled, and choose wisely where, and how big, the explosion point will be. 3 keyframes minimum. 5 or more if you want some variety added to the explosive motion. Speaking of motion, make them move as well to add dynamic effect as well (better if more explosion pods are used however). They don't need to be gradient pops however, they can be any other effect. You can even use this structure for, I dunno, even a fire or torch effect. You can even time a few random noises in separate points of the effect to make a more convincing effect (place noises as you would the graphics for the frames; take advantage of those layers). Fire crackling could be 3 different variations of a breaking branch noise at separate pitches or tempos placed strategically to make a seamless burning noise and match with the scene's tone.

For reliability, it would be a better idea to have a separate layer for the sound(s).

The beauty of these is that they stack up very well (literally; you can stack one atop the other halfway or 1/3 through, and it would blend it beautifully, and just 2 layers with 1/3 it's frames delays between make for plenty of variety in a scene; especially relevant if were a fire effect. allow enough frames total to hide any gaps, or manually fill it in with an edited start (latter half or 1/3rd, let's say) mixed in.) and can prolong an effect if synched well enough. Even single rounds with a noise (like a simple pop, or a loud bang) with just a single gradient circle can work well. I used something like that when I animated a mech exploding. Oh yeah, don't forget to add more looped frame cycles (at least enough to square off again) to make it seamless if you're applying an offset layer of a premake like that.

A good rule of thumb with animating: Math does wonders for timing. In this case, frames work almost as well as metric; especially if FPS is the scale you base off of. Just keep it simple that divides well. (1-2-4-8-16-32-64-128-256-512-1024... works best). 32fps is preferred for ease of timing and smoothest animation. However, this quality difference may make a larger file, pre- and post-processing.

For looping frames, I'm sure it's common knowledge, but might as well say anyway, make the keyframes and everything as you would normally, and trim off the last frame, but not before converting the second-to-last frame of the animation frames into keyframes. In case you want to do some editing or want clean angles (0,45,90,135,180...) if animating a wheel or prop, then this may take a bit of trial and error to get it right, but I'm sure this method works best and quickest. Just preset 1 or 2 frames beforehand before apply that trim method to ensure it holds together post-trim.

The only problem with the -1 frame looping method is that if you stack one loop with another kind you may end up with something like this:
12-frame full cycle loop
◄==========►◄==========►◄==========►
◄=========>◄=========>◄=========>'''
11-frame clean cycle loop (1 and 12 = same frame)

''' = 3-Frame gap, compared to above.
> = Converted Keyframe from (motion or graphic) tween frame
This is caused by a 12-frame loop and a 11-frame clean loop being alongside each other. It's subtle, but to a keen eye, it's noticeable. At that rate, it'll take 12 loops for them to meet up and synchronize again, only to repeat again for another 12 loops. Kinda a reason this is a bit of a trial and error kind of deal with animating loops. And going -1 with 13 frames may knock the clean balance of the animation (0,45,90...), if used, off; Then again, starting with an odd number of frames (start x+1 and then trim the excess off), will make placing the center and additional support frames (1/4 and 3/4, for example) much easier. Again, this depends on the use of the looping animation, and if you intend to make more use out of it (breaking it apart or something in the future). My advice, with loops, 32fps is most user-friendly, and -1 at a clean factor amount of frames for the loop (x-1, x=4,8,16,32...) for all the looping elements. Everything should remain consistent throughout.

Actually, in hindsight, the x+1, place keyframes, convert to keyframe on x, then trim off the last frame should yield the best results most consistently. Disregard most of the previous statement then. Overshoot by 1 frame, convert, subtract. That should work even as low as 2 frames (though it would be trivial then, going that low; 3 or 4 is more appropriate for aiming low, and are the most flexible to use).

Let's see:
Start with this:     ◄====cc====►
Overshoot by 1:      ◄=====c=====►
Convert to KF:       ◄=====c====>►
Subtract last frame: ◄=====c====>

c = Center 2nd (usually) keyframe

12-frame full cycle loop
◄==========►◄==========►◄==========►
◄==========>◄==========>◄==========>
12-frame clean cycle loop (1 and 13 (non-existant now) = same frame)
Yeah... Looks much better now.

EDIT:
In case you already knew of these, then anyone else that comes across this might learn a new Flash trick or 2 by reading that. And remember to make the last keyframe look like the first, but different enough to complete a cycle (actually rotate the last keyframe by 90 degrees or something if it's spinning, but make sure it looks exactly like the first keyframe before trimming down the animation.

EDIT EDIT:
Cleaned up some of it. A good idea to associate the keyframe looping lesson is by animating a wheel spinning. If you can get a clean looping animation done (which can be done in fewer frames even, just animate as much that would actually be noticed. like a wheel with 4 circles symmetrically visible, just animate a quarter of it, and save some time and space to animate it. 3 or 4 frames of a spin for 90 degrees of rotation repeating is more efficient than 12 frames for a full 360 rotation, and nobody would notice. Symmetry = efficient animation if you can cut down the total frames, but not lose the quality.

EDIT EDIT EDIT:
Did some lurking, and found an old HAPPY post that is relevant to my lesson. The animations are about 4 frames long of loops for just about each moving element visible. Click on the link inside the quote to watch:
Quote from: Itnetlolor on June 02, 2010, 08:27:19 pm
Seeing those Flash animations/games kinda got me wanting to show a little something I made in Flash as part of my old class project. I might toss  in the project when I have the time to find it. Here's a sample of something I made at least.

I guess the best way to describe it is "What if Lamborghini designed tanks?":
Lambo-Tank (http://www.swfcabin.com/open/1275522126)
Caution: Right click plenty of times. Rewind and forward are your friend, as well and especially pause.
Basically it goes: treads, tank, tank moving, tank falls apart.

Note: The tank falling apart is supposed to showcase all the layers used, and how the tank has a sort of damage model to it's design.

Sorta half-assed, but it was part of a greater project (was also a resource file), so detail wasn't absolutely required (since it was mostly shrunken throughout). I think I made that a good year ago; took maybe a half-hour to produce. I know my skills are better than that, I just haven't gotten around to doing many Flash projects (even a weapons closet to use for other flash projects hasn't had an update in ages). I'm open to all sorts of ideas. Maybe something DF related, like replicating someone's interesting adventure (especially the combat). But I would need a good enough story to work with. At least it would keep me busy and doing something artistic (so at least my household doesn't think I spend every breathing moment playing games until my eyes bleed).

And I just realized watching it again, that the treads are moving in the wrong direction on the top-down view; according to the direction they're moving, it should be moving backwards. Just pause the animation; it'll keep animating, but not move, you'll see what I mean.
Title: Re: Blarg has to make a Flash Animation!
Post by: GamerKnight on February 08, 2011, 03:43:35 am
Cthulhu himself could look upon this thread and know absolute terror.
Title: Re: Blarg has to make a Flash Animation!
Post by: Blargityblarg on February 08, 2011, 06:32:16 am
Quote from: Itnetlolor on February 08, 2011, 01:35:12 am
*itnet says things*

Itnet, most of this is just a tad advanced for me; I opened the program for the first time just today. I imagine I'll come to comprehend it better as I learn, though.
Title: Re: Blarg has to make a Flash Animation!
Post by: Julien Brightside on February 10, 2011, 03:04:07 pm
There are some really good tutorials on youtube.

Also, you can draw stuff in GIMP and record sounds in Audacity.
 
If you want to "borrow" music of youtube, you can use the flvtubeplayer.

Title: Re: Blarg has to make a Flash Animation!
Post by: Blargityblarg on March 08, 2011, 06:13:41 am
holyshitprogress

I had to make a Statement of Intention for the class (as a VET class, it's hands-on, and is designed to simulate actual work.)

The following is my SoI:

Quote
Statement of Intention – Down in the Clown Mines
By Blargity ‘Fluffy’ Blarg
Synopsis

The animation is set in a world where clowns are an energy resource, mined from the ground. One day, a clown comes alive. The protagonist is a grizzled clown miner, who makes his way, constantly plagued by the angry clown monster, through such locales as the worker’s living spaces, the mineshafts themselves, the elevator, the ore warehouse and finally the smelting works, where the clown meets his Terminator 2-style end. There is much rejoicing.
How this Animation will be Achieved:

The animation will be created in Adobe Flash CS5, and will run for between three and five minutes. Static backgrounds will be created in a layer separate to the animated portions, with another for semi-permanent objects (i.e. bloodstains created midscene).
Target Audience:

Bored people on the Internet. It’s a flash animation. Why do you even need to ask this?
Creative influences:

Yahtzee (Ben Croshaw)’s Chzo Mythos series of adventure games. Originally I planned to tell this story as a game in a similar style using a program like AGS or Game Maker.
Youtube search: five days a stranger DeceasedCrab LP
Site: www.fullyramblomatic.com/5days/
Toady One (Tarn Adams)’s Dwarf Fortress. The community of the game refers to ingame demons (found by uncovering a chamber deep underground) as ‘clowns’ to avoid unnecessary spoilers, which gave me the original idea for the whole underground clown horror theme.
Site: www.bay12games.com/dwarves/
Derpimus Prime (Physics de la Teacher)’s interminable post-end-of-year Physics classes. I have to be incredibly bored to come up with shit like this.
Director’s Statement:

The Game  The clowns represent homosexuality, stuffed underground since ancient times (Rome, Greece w/ pederasty) before returning as a source of energy and joy and subsequently killing everybody  THE GAME The story does not really have a message beyond ‘Seriously, don’t fuck with clowns’.

As you can see, I'm not great at directing statements.

I've also got a background for my first scene half-done. The last two periods consisted of me making various rage-noises while my mate asked me if 'u mad?'.

Does anyone know a way of erasing only inside a shape, but on a different layer to it?
Title: Re: Blarg has to make a Flash Animation!
Post by: Blargityblarg on March 21, 2011, 04:16:52 am
A wild double post appears!

http://www.youtube.com/watch?v=EZIesE-JfU0&feature=mfu_in_order&list=UL
Title: Re: Blarg has to make a Flash Animation!
Post by: Soadreqm on March 21, 2011, 07:27:49 am
I don't know a thing about flash animation, but the premise reminds me of Whistles: The Starlight Calliope. Especially this bit (https://blob-s-docs.googlegroups.com/docs/OgAAAPq2PCb7kTlcBRqkk1s6hfEduE9-5UI0tKQEIwNCo8OfEnPWeMtDLhcVQqhhqNe9kv2223RCNKQgBr9wywf6eTMA15jOjD6jACDr_jn5NFNmkmvTDKxw4IH4). Some of it's available on Google Docs (https://docs.google.com/present/view?fs=true&id=dfshd4fn_192tbr23h).
Title: Re: Blarg has to make a Flash Animation!
Post by: Blargityblarg on April 06, 2011, 06:56:02 am
Suddenly deadlines!

I've got the first scene complete, and the second halfway there. What I hand in'll end up being a simple trailer for the actual feature, which I hope I will actually motivate myself sufficiently to do at some point, or perhaps during the 'learning to make interactive shit with Flash' part of the course.

Huge screenshot of my current work. Fuck the Bone Tool. So much.
Spoiler (click to show/hide)
Title: Re: Blarg has to make a Flash Animation!
Post by: Julien Brightside on April 07, 2011, 05:48:39 am
Nice to see that you are going forward.
Title: Re: Blarg has to make a Flash Animation!
Post by: Blargityblarg on April 07, 2011, 06:02:27 am
I've made a copout don't-fail-the-class-by-technically-meeting-all-requirements-despite-actual-work-being-a-piece-of-shit trailer; I'm hung up on whether or not I should bother uploading it to Youtube.