flash clinic

[the.ronin 5]

ok, seeing as how velocity is having some tachnical difficulties with his design forum and seeing as how even on its first day i saw some flash related questions, i figured i start a thread specifically got any questions relating to flash.

i will be posting mini-tutorials here to hopefully get some people up and going.

i also notice that a number of people here like sybarite are adept at flash. please feel free to chime in or contribute your own advice / tutorials.

class is open

[300Mag 0]

I like this idea. Actually, I like the whole mini tutorial idea. It would be a good idea to carry this into other disciplines if possible. Cuts through the fat and gets at that which is important.

[the.ronin 5]

lesson 1: life, the universe, and flash

appreciating the power of vector rendering

the key to understanding flash is appreciating the efficiency of vector rendering.

there are two types of visual renders (i use "render" to mean images or animation or any sort of visual multimedia): vector and bitmap. imagine a square. vector rendering would interpret the square in mathematical equations. draw line spanning x% of screen on y degrees, make 90 degree turn, repeat. bitmap rendering would interpret the square by overlaying a grid over it. each coordinate in te grid would be assigned a color.

these different approaches mean that vector renderings do not lose their resolution and are size efficient.

if you doubled the size of a bitmap render, each coorinate also increase in size whilst maintaining the sme number of total coordinates resulting in the blocky look you see (eg, when you zoom in on a jpeg). however since a vector is all mathematically based, there absolutely no loss to resolution.

from an render detail-quality standpoint, think of the difference between vectors and bitmaps as the difference between a gif and a jpeg. the former being great for few colors, uncomplicated images and the latter being great for millions of colors and photo-realistic imagery.

flash is a vector program. in skilled hands, flash can accomplish amazing renders in unbeleivably small file sizes.

only when you understand how to balance your use of vector and bitmap renders in flash, will you be able to truly take advantage of the rendering platform.

[up next... lesson: 2 how to boil water - tweening, masking and other boring stuff]

Edited March 2, 2003 by the.ronin

[firefly2442 0]

I don't suppose there are any free editors for flash? The actual software is like $400 dollars isn't it?

[terp09 0]

I don't suppose there are any free editors for flash? The actual software is like $400 dollars isn't it?

sorry

[the.ronin 5]

nope. there is an alternative and that is "swish" (look it up on cnet downloads). however it has maybe 10% of flash's capabilities, at best.

[Ruin 17]

I'll be reading this thread carefully.

[Major Maximum 0]

@everyone:

there are tuts on flash included in the program, If you want additional help. Just go to help>Lessons.

[the.ronin 5]

indeed, with any macromedia product, it will initially startup with a nice little intro including 'whats new' and some basic tutorials. these tutorials kinda suck tho.

also, if you push F1 (i think) it will pull up the online the manual. this is great for reference especially since it includes a keyword search. again, however, it reads like income tax return laws.

[the.ronin 5]

lesson 2: how to boil water

tweening, masking and other boring stuff

nfl – negligable*

as with everything in life, one must learn the absolutely mind-numbing mundane stuff before getting to the cool stuff. consider this algebra 101. no pain no gain.

objects & instances

in flash, there are objects and instances. this is HUGELY important to understand. think of a car manufacturer. they make all sorts of cars. one kind is an SUV. there are many different kinds of SUVs. but to make production easy, they have an SUV template. they just change the colors and stuff on the finished SUVs. the SUV template is an object. a finished colored SUV is an INSTANCE of that OBJECT with color parameters.

example time. click on the FONT icon and type in “RONIN.” with that text box selected, press CTRL-F8 and create a RONIN graphic. now press CTRL-L to pull up the library. the RONIN graphic you see in the library is the OBJECT. the RONIN graphic u see on the workplace is an INSTANCE of that object. place another INSTANCE onto the workplace by dragging the OBJECT from the library and resize the two differently or add color. you can alter the instance without affecting the original format of the object.

sound like semantics? nay. imagine you have a kajillion instances of your clan name somewhere. now you change names. rather than going through each instance, you just change the object and all the instances will follow. voila.

more importantly even, imagine these were not turned into objects yet you have them show up twice looking differently. when flash renders, it will REDRAW each one. if they were objects, it will have stored the instructions to draw each one ONCE and repeat it TWICE therefore cutting down on file space by a theoretical 50%! (this is a simplified example – flash mx will actually recognize this goof and automatically turn them to objects when rendered – even if you don’t see them as objects in your library. flash mx is slick like that. if they were two identical bitmaps however, you are paying double the price.)

tweening

funny name. infinitesimal purposes. tweening is the crux of flash’s vector capabilities. it essentially means ‘extrapolation.’ when you tween an instance, you are asking flash to interpret what happens between the starting point and end point (called “key frames”).

motion tweening. motion tweening is asking flash to move an instance of an object between a starting point and an ending point. you can only tween ONE instance per layer. lookie here...

this image shows a motion between where instances of an object “box” is moved from frame one to frame ten all the way to the right. in the above image, i have turned on “onion skinning” which allows you to see a trace of the interpolated motion. you can see the settings for this motion tween in the lower image. when this is rendered, a blue box will move right.

shape tweening. shape tweening is the exact same extrapolation concept except rather than use instances of objects, it uses RAW VECTOR graphics which are shaped differently and interpolates its metamorphosis. in skilled hands, shape tweening can be great for morphing objects. lookie here...

the onion skinning here is very helpful in showing you how this tween works. note that since these are not objects, shape tweening is HUGELY size intensive. as a side note, you can apply “shape hints” to areas of the starting and ending objects to give flash hints as to how it should tween (look this up by pressing F1 for more info).

food for thot – try tweening an objects alpha, tint or other non-movement motion.

masking

along with motion tweening, you’ll find masking is limited only by your creativity. masking is simply taking a shape (object or no), designating it as a MASK layer, therefore telling flash to show only those objects/shapes COVERED by the mask shape. lookie here...

the above image shows the layer structure. basically a blue box in the mask layer and a text box in the maskED layer saying “ghostrecon.net” – the image below shows the render – only the area COVERED by the mask shows through.

food for thot – try tweening the ghostrecon.net lettering or even the mask itself. with the knowledge above, you should be able to recreate the tunnel vision of a scope site. ahh haaa!

motion guides

a very cool way to make things move along a predetermined path. lookie here...

you’ll notice a very similar layer structure to that of masking and motion tweening. the motion guide is the predetermined path – you can just as well draw a straight line and it will follow that path. the trick is to make sure that the guided instance (must be an instance of an object) is “anchored” to the ends of the motion guide (you will notice that the center of the instance is directly over the end of the motion guide.. it may be helpful to turn on “snap to objects” (under “view”) and drag the instance from the center so it “snaps” to the end of the motion guide.

when this is rendered, the blue circle will move right in a wavy fashion following the motion guide.

so that’s it for this insanely boring lesson. hear me now though when i say that the mastery of these very basic concepts will pave the way for you to create efficient and fantastic flash presentations. there is always more than one way to accomplish the same thing in flash – its who can accomplish it in the least amount of space that’s important

fun fact -- did you know the term “hacker” comes from a contest where people “hacked” code to be the smallest possible? the contest was to create the smallest possible amount of code which would render a blinking cursor on the screen! it had nothing to do with “hacking” into secured computers.

up next... lesson: 3 the art of preloading – are we there yet, poppa smurf?

nfl – slight chafe. *

* my tutorials will be gradually increasing in complexity as indicated by the N00b Frustration Level.

Edited March 3, 2003 by the.ronin

[the.ronin 5]

im bout to hunker down and write the next tutorial. just curious if the ones reading this thread are finding it helpful? im assuming you already know the ultrabasics (creating a keyframe, etc). also let me know if there are any particular flash techniques you'd like to cover since ive no idea what to cover after "preloading."

[Killa_N_Manila 0]

Ronin, I'm actually copying your different tutorials and saving them on my comp for future reference when I might have flash and can utilize the tutorials put out thus far...In other words, keep 'em coming!

[Zantar45 0]

just curious if the ones reading this thread are finding it helpful? im assuming you already know the ultrabasics (creating a keyframe, etc). also let me know if there are any particular flash techniques you'd like to cover since ive no idea what to cover after "preloading."

lol jk

[~NkOgNiTo~ 0]

i am a lil familiar with flash but have always prefered using image ready for animation, but my animations have been too big for the contest and i have noticed that those using flash have small file sizes....i have tried importing my already created bitmaps into flash and exporting them as .swf but they seem to be twice the size? any thoughts?

[the.ronin 5]

what are the native file formats of the images being imported into flash? bmp? you might consider re-rendering them as jpeg or gif depending on their color detail. these will be much much smaller than bmp. to eek out that last bit of kb, pull up files / publish settings and set the image compression real low to 10 or something. see how that works out.

keep in mind flash was meant to be a vector pogram and not as a bitmap frame-by-frame animation program. its tough i know im guilty of using it for that often. the most efficient use of flash is with vectors tho.

[WickedWeasel 0]

Nice thread ronin.

I know how to use flash...just not how to teach it...kinda self taught.

[~NkOgNiTo~ 0]

the image is a .gif i have created in image ready, here is the original, it is over 800k, i can get it down to 100 by adjusting the lossy and dithering, which gives it kind of a neat grainy look and changes the animation all together, but it still looks kool...but the contest is set to 40k not 100k like the forum rules i was not aware of this till yesterday and have withdrew my entry for the first round since it was a lil over 200k...

here is the smaller version just under 100 but still not small enough, and if i do any more it is unrecognizable...

Edited March 12, 2003 by ~NkOgNiTo~

[magnumkp 0]

~NkOgNiTo~

Thats the trouble with .gifs, because they only allow a max of 256 colours and animation, whereas jpgs/swfs allow millions of colours but no ani.

Just a quick background on a gif for those who don't know/care. Gifs are the ideal format for those little smilies because they are quick, small, low in colours and basic, but for any animation above 150px 56k'ers are going to hate you. The gif has to load every frame and doesn't short cut like flash (this is where those vectors come in).

In flash, you could have your dark background image, and your green foreground image and that is all it needs to load. (In my effort for the sig awards 1, I used 8 individual items, and just reused them. For flash it only needs to load the item once, and then it is effectivily stored for the rest of the clip. It is only referencing it. ) To make it fade in and out like you want it you would have to have a complex layer mask on the green layer, with an adjustment alpha for the fade over a set period of time BUT, flash only cares about the 2 images and the layer mask, and that is all it has to load. So when it goes to the next frame, it knows to fade up the green layer a bit, and on the next frame do it a bit more. It isn't completely reloading the entire frame, only what has changed. I hope this is clear, and I don't want to step on Ronins open toed sandels. I'm not even sure if this is what you wanted but umm, I've written it now so it is too late.

Edited March 12, 2003 by magnumkp

[the.ronin 5]

I hope this is clear, and I don't want to step on Ronins open toed sandels.

haha dude its very clear and no worries about the reefs -- they can take a beating.

i think magnum pretty much hit all the important points nkognito. i would add that gifs allow for transparent backgrounds as well. an easy way to remember gif/jpeg is "gifs for logos, jpeg for photos."

i cant quite make out what the animation is supposed to be but if all youre trying to do is have a constant background and a fading foreground, it may be worth cutting out the fading elements (using the marquee in your paint program) and exporting that part as a gif with a transparent background. turn that into a flash object and just tween its alpha in and out.

it should be noted that alpha tweening is the most size intensive operations in flash but is light years more compact than doing a gif animation.

[~NkOgNiTo~ 0]

i think magnum pretty much hit all the important points nkognito. i would add that gifs allow for transparent backgrounds as well. an easy way to remember gif/jpeg is "gifs for logos, jpeg for photos."

i cant quite make out what the animation is supposed to be but if all youre trying to do is have a constant background and a fading foreground, it may be worth cutting out the fading elements (using the marquee in your paint program) and exporting that part as a gif with a transparent background. turn that into a flash object and just tween its alpha in and out.

it should be noted that alpha tweening is the most size intensive operations in flash but is light years more compact than doing a gif animation.

yeah i am aware of all this, i am myself a graphic designer,i am a stay at home dad and i do mostly freelance work now, but used to work for a large beer distrubator, i have just always used image ready or director for anything animated, as u said flash is modtly for vector based art, i am familiar with flash but has been sometime since i used...so i guesse i was looking for an easier way to get a smaller file size than having to recreate it but i guesse thats what i am gunna have to do...thx for your replies.

[magnumkp 0]

Hey, sorry ~NkOgNiTo~, I should've realised your skills. I'll shuffle off and share my wisdom with someone who doesn't know more than me.

[~NkOgNiTo~ 0]

Hey, sorry ~NkOgNiTo~, I should've realised your skills. I'll shuffle off and share my wisdom with someone who doesn't know more than me.

oh no, not all bro, i am not claiming to know more than anyone i was just stating what i was actually trying to do...

...i was looking for an easier way to get a smaller file size than having to recreate it but i guesse thats what i am gunna have to do...thx for your replies...

which was being lazy!!!.............. ..............i love to hear everone's opinions in here and was stoked too see so many peeps into graphic design in the games it just gives us all more to talk about and more to do together...which makes GR.net one of the best sites on the NET!!!...sorry to stry from the topic of this thread ronin... ...i am sure you saw my post on your site but i thought i would say it again...YOUR SITE IS PRETTY FRIK'N KOOL!

[the.ronin 5]

nkognito no worries man. like i said theres always more than way to accomplish something so i, presonally, always find myself asking about things i already know how to do in case there is a more efficient way to do them.

and dont worry about going 'off topic' here ... so long as its even remotely related to flash, shoot away (questions or answers).

yeah i saw your post thanks a lot dude. im revamping the site from scracth cos some of the sections are too cpu intensive. the next version will run much faster.

[magnumkp 0]

Ronin (or anyone else) know the easiest way to save an .swf off a web site (preferably free plugin/program)? I looked on download.com and some of them look a bit dodgy, any ideas for a good'un?

[the.ronin 5]

if you know the address you should just be able to right click save on the link. reverse engineering the render (so that you can open it up as an fla) is a totally different story -- borderlining on hacking. one of the benefits of flash is its ability to keep your work proprietary unlike static pages whos source you can view easily. theres a number of programs out there though that will do this (unfortunately i dont know which cos i never tried them) but expect the de-rendered fla to be far from the original structure -- it will most likely be condensed and missing all notes.