Vectors Request

[Surskit]

So I know I've seen people comment on impressive vector jobs and it seems like a part of the animation process that really determines it's quality. I still have no idea what the process of vectorization is.

What I can tell from what's labeled well-vectored work, is that it's got a lot of independent variables moving. I'd like to learn what/how to vector things so I can maybe vector up some images for you guys making Flashes. I imagine for vector work all I really need is any version of photoshop (I've got CS3), and a lot of free time. I've got both. If all I can get is a point in the right direction I've got no problem playing with it until I've got something to show for myself.

Other Adobe things I'm confident don't matter but I have:
Bridge CS3
Extendscript Toolkit 2
Device Central CS3

If I do need another program just let me know what it is and I'll see what I can do about acquiring it.

[BlueLight]

So what i believe it takes is basically taking a photo and tracing what would be a vector.
Vector is basically a shape from my understanding.

[Mr D]

Not sure if this is what you want but it might help if you just started with flash.

What you see there is My Avatar as an picture(the first) and converted in flash(the second one). The way I change it is called tracing. You select a picture go to Modify->Bitmap->Trace bitmap (just play with the settings there). Like that you can convert picures in flash. BUT if you are asking how the models are made than you have to do it line for line. I usualy use 2 line layers witch I than fill with black color. Not sure if those informations are what you are looking for but this is all the advice I can give you -_-

[Surskit]

I didn't think it was something i would need flash for. I thought it was something I could do to prep a piece for someone to use in flash.

Best example I can find readily would be this guy's thread

viewtopic.php?f=7&t=1171

heh all the lurkers are coming out to show their love for buff-ish women. Well good on ya guys! This is Dmitrys' work and this is just the style he draws, it appeals to some but not all(personally I like it how it is) and with the amount of small framed girls on the net, it's nice to see something different. As gottstein says, if you don't like it then edit it yourself. Freaking good work, Gladiatrix. I've never seen someone vectorise a drawing this well before. You've got skills!

From what I gather, the guy didn't actually draw it out, he just made it useable for flash. And that's kinda what I wanna do to help out given I don't own flash and have very low artistic ability. I do however love to mess with things in photoshop, but those tools like vector mask and what-not have never been of much use.

[Mr D]

I didn't think it was something i would need flash for. I thought it was something I could do to prep a piece for someone to use in flash.

Sooo you want to know how to make something like this?

[Surskit]

Yes! Exactly!

[Mr D]

Yes! Exactly!

Yea, thats done by tracing an image in flash. You just take an image, trace it and cut it to pieces. Demiart did basicaly the same thing.

[Surskit]

Dang, so I need to get flash. Was hoping it was something I could do in photoshop.

Aw well, no biggie. Guess that means I'll just be fiddling with Flash and ultimately learning how to use other functions. What's the name of I guess the standard flash designer? The only name that comes to mind at the moment is dreamweaver but I heard of that years ago.

[GolanTrevize]

Standard flash designer? Flash is the name of the program

[Surskit]

Okay... Let me put it this way. If I just type in flash in google I get nothing but Adobe Flash Player everywhere.

If I put in Flash designer I get a long list of flash software that are probably more trouble than they're worth (It's like looking for a program to burn dvd's. All do the same thing, but there's some programs people swear by.)

I just put in Flash Design Software and I'm seeing Adobe Flash Professional CS5.5 - I think this is the one I should want to get, right? Also I remember seeing some issues with version compatibilities so should i see about getting an older version rather than 5.5?

Edit:
Haha, just read a review on the main site for 5.5. Guy says it's overly complicated for App writing. Gave it 1 star. So, again, best version of Flash to get?

[Mr D]

Okay... Let me put it this way. If I just type in flash in google I get nothing but Adobe Flash Player everywhere.

If I put in Flash designer I get a long list of flash software that are probably more trouble than they're worth (It's like looking for a program to burn dvd's. All do the same thing, but there's some programs people swear by.)

Well I personaly use "Adobe Flash CS4 Professional". If you know a bit about PhotoShop than you shouldnt really have problems drawing in it. And animations are also not so hard if you use sprites and dont draw picture after picture (frame after frame).

[GoRepeat]

Okay... Let me put it this way. If I just type in flash in google I get nothing but Adobe Flash Player everywhere.

If I put in Flash designer I get a long list of flash software that are probably more trouble than they're worth (It's like looking for a program to burn dvd's. All do the same thing, but there's some programs people swear by.)

I just put in Flash Design Software and I'm seeing Adobe Flash Professional CS5.5 - I think this is the one I should want to get, right? Also I remember seeing some issues with version compatibilities so should i see about getting an older version rather than 5.5?

Edit:
Haha, just read a review on the main site for 5.5. Guy says it's overly complicated for App writing. Gave it 1 star. So, again, best version of Flash to get?

Pffft CS5.5 is basically same as CS5 which if you use AS2 is basically same as CS4 which basically same as Flash 8

Nothing about language changed except gotten better/more options guy is stupid.

You can use photoshop to draw in layers which flash can interperet when we bring in if you want to just do art and not mess around with flash. Since both adobe products, flash will register layers from drawing in photoshop (so you can break apart while drawing, etc) sounds most like what you want to do; since photoshop is much better for creating sprites than flash

for example, I took one of bussa's pings:
viewtopic.php?f=7&t=1224&start=86

had bussa broken layers (I had to trace and animate as described above by D), I could have animated a lot more (freer movement, actual action); I believe Bussa works in photoshop

[Surskit]

Just got myself a copy of CS4 so I'll be playing around with it for the next couple of days. I'll post my progress once I've figured this crazy thing out. Flash layout is intimidating, but I'll get it. I want to at least have 1 thing vectored before classes start Monday. Term's gonna be brutal, but I'll still have my weekends thankfully.

I've made a mess of edits so here's the gist of it:
- Not sure if I'm saving this thing correctly as a "Flash Project."
- Why does tween sometimes throw my image all over the place.
- How do I thicken lines in a smooth transition instead of making thicker segments that don't blend well.
- What was the issue with "Broken Layers" before? How do I avoid giving the flash artists this problem.
- Winking. How do.


Edit:

So I tried my hand blind. I'm stuck, but I have to say I figured out where to start faster than I expected. At first I tried creating a "Flash Project." That gave me some do nothing box. I couldn't figure out for the life of me how to make the program import the picture. SO, I said screw it and drag-and-dropped a pic in. I started tracing out a path with the pen tool, then realized I was just making an outline on the actual picture. I scrapped that. I tried opening a new "Flash Project" but it continued to open that same old annoying box of mystery.

I ended up saying screw it and dragging a new picture in there, and I'm happy I did cuz I like this picture better anyway =P. So I started this time by making sure there were 2 layers. Background and Trace. Started using the line tool with a pink outline to basically trace until I encompassed all of her hair. But now I'm stuck. I don't know how to cut it up or compile it in a way that it could be useful. I imagine the only way for me to test this is to animate it doing something anyway, so where go from here?

Also, pic of my trace in case I made some terrible mistake
http://tinypic.com/r/e19s83/7

Edit2:

Saw Katsu's tutorial on bouncing boobs and tried to emulate that. Didn't end well. At first I couldn't interact with that outline I made (I'm fairly sure I have to color it in and just get rid of the original background at this point). I still can't actually to a certain degree. I decided to Break Apart the selections and that seemed to allow me to transform. I decided to just play with the concept and followed Katsu's play by play. The tweens started going all over the place so, eh. Yeah. I don't know how that happened and I've scrapped it.

Edit3:
Alright! Making some headway. I started breaking apart and regrouping the lines until eventually I noticed a "Smooth" option. It did minimal changes to the lines and allowed me to fill (Though I still don't understand why the "Close large gaps" wouldn't suffice). So I started to then work on the head just for the sake of concept. I figured if this were a serious attempt, I should imagine that her head doesn't end at her hairline and that I should compensate for that with some more filling. Then I ran into a problem. I don't know how to mask that head line. I haven't even gotten to filling but when I try to turn the hair layer into a mask, it just makes everything disappear... As I type this I think I'm realizing the problem. The whole layer is masking, not what's in it... So how do I remedy this? Also I know that my tracing the whole head was a mistake and that I should have made a separate layer for bangs, pigtail, etc. but let's not get carried away. I just need to see how this stuff works first. I'm starting to realize why you guys get so bitter so fast when people rush you. Fucking program making me look stupid and hiding the head line without me realizing it. Twas the order of the layers that I changed while took those screenshots that fixed it.

Progress pics:
http://i52.tinypic.com/11inuyd.png Hair
http://i55.tinypic.com/295ambo.png Head (Decided to not include the ears in the Head layer and I accidentally traced the head into the hair layer by some horrible accident so I deleted that and what's left is a jaw)

Edit4: Good thing no one's replied because i've been making a whole mess of realizations/changes. So I think it's pretty pointless to state that I need to make a whole mess of layers in order to give full functionality to this creation. What was the issue with "Broken" layers before? Is there some sort of way to organize these things so they're better utilized? Also there are times where I want a line to be thicker or thinner to better mimic the trace. At present I don't know how to imitate the trace any better than making a separate thicker segment which really doesn't mesh well with the previous segment.

Edit5: Back to the masking problem. I want to animate a wink just for concept. Can't seem to make a layer that can be anchored at the 2 corners of the eye but still be stretched over the eye (That's how I imagine the wink working.)

[LuftMallow]

If your tweens are messing up in between keyframes, it probably means the transformation point for the symbol has been moved in one of them. To change a transformation point for a symbol without shifting it, group select and move the group's point to the new place you want it. Of course you can't group select one thing, so throw a junk smaller symbol in the layer and select both. Make sure to lock any lower layers you don't want to be manipulated before selecting. Once everything looks good, delete the junk symbol.

[KaTsuO_O]

"The tweens started going all over the place so, eh."

I do understand what LuftMallow means but I don't think someone that is new or even not new to flash would do.

If you select something with the free transform tool (Q) a white round circle will appear in the center (unless you have moved it) and that is the transformation point of your object (The same thing LuftMallow was talking about), if the transformation point is in a different spot on the last keyframe of the tween then the object goes crazy.

[Surskit]

Okay that makes sense. I know I touched the circle just to give it a different kind of shift when testing it. Didn't think it would throw off the the tween.

Right now, though my two biggest issues are:

-Winking
-Line thickness

First off, with the winking I ended up getting something working but it required me to grab way too many segements just to get this flab of flesh over the eye. I tried drawing out a piece of skin the same color as the rest of her head with the bottom being her eyelash so when it closes, it won't just be a giant blob of beige consuming her eye. So it esentially consists of 5 line segments:
2 going the length of her lash (Since the curves the line tool provides aren't the most receptive), 2 beige for the lid with 1 black line in between to signify the upper portion of her eye. When I tried transforming that at the next keyframe I was stuck with having to pull each individual line down over the eye. It ended up working but the point of me doing this is to take some of the burden off the authors and that seems more arduous than anything.

I should also point out I haven't turned anything into a symbol since the last time I tried that I was still having trouble just filling.

Second is the line thickness. It's just annoying to see a fat line end at a skinny line.

http://i51.tinypic.com/25taxj5.jpg eye
http://i52.tinypic.com/j08n5e.jpg everything else

[Mr D]

Okay that makes sense. I know I touched the circle just to give it a different kind of shift when testing it. Didn't think it would throw off the the tween.

Right now, though my two biggest issues are:

-Winking
-Line thickness

Do you want to make somthing like this?

[Surskit]

Lol I hate and love you so much for doing that so easily. Yeah, that's what I'm aiming for. I wanted to make the open eye close just for the sake of practice, but like I said, I've got a whole bunch of segments doing things they shouldn't.


Also, I was at a friends house last night on rule34 pissing ourselves over the Doug pictures and I think another Nick related picture came up signed Mister D. If you're the same guy I'm honored to be getting pointers from you (Was honored before that too but now it's like honor stacked on honor).

[Mr D]

Lol I hate and love you so much for doing that so easily. Yeah, that's what I'm aiming for. I wanted to make the open eye close just for the sake of practice, but like I said, I've got a whole bunch of segments doing things they shouldn't.


Also, I was at a friends house last night on rule34 pissing ourselves over the Doug pictures and I think another Nick related picture came up signed Mister D. If you're the same guy I'm honored to be getting pointers from you (Was honored before that too but now it's like honor stacked on honor).

Lol I am not the same guy that made the picture you saw. I use the nick Mr.D for LoK forum only.

Anyway back on the topic. You have to remember that "lines" and "fill" are 2 seperate things. Below you can see how I made the eye (as an picture) and second how to make it an animation. First you have to make an lines (thinest) around the image and than do the same 1 more time a bit farther away from the first line. Than you fill the space between those lines and it will look like 1 line even if its in fact 2 very thin lines away from each other. Hope that helps.

Oh yea and look up masking in flash. That helps in animations

[Surskit]

I think maybe I'm confusing what a line and fill is now then. I've noticed that there's an option to convert lines into fills.

But I think I understand how you got the varying thickness of the lines. It's the product of the 2 lines (Even though those lines are probably made of like... 20 segments). So once I've got that eye outline, I fill it and then turn it into a symbol of it's own so it's treated like 1 object. The actual iris and retina of the eye are completely different objects I imagine and then when the lids close over it, it masks it so all you see is beige face?

Even though I'm rationalizing it I'm still dreading the attempt at it later. I guess I've gotta start this eye over from scratch then huh? (Not gonna do the hair again, lol, maybe in the future I'll revisit misty.) Also school just started and I'm bracing myself for the workload of one class, hoping the rest aren't as intense.

One question does come up though, did you draw out each frame of the eye closing or is just you transforming/distorting it at each frame?