WHAT IS IT?
Normally, I would start by explaining what 9-slice scaling actually is, but I think that as we discuss it, it will become very clear what it does. The generic way to describe it is that it's a way to intelligently scale objects (very descriptive, right?).
9-slice scaling is an attribute found in the Flash Player. Basically, you can "program" a Movie Clip symbol to scale in a certain way when that symbol is displayed with the Flash Player (think of it as a run-time effect). This certain way of scaling is only applied in the Flash Player -- and this point is significant for two reasons:
1. 9-slice scaling is useful only when applied to symbols that will be viewed with the Flash Player (as SWF).
2. Since it's an effect applied in the Flash Player, you won't be able to preview the result of a 9-slice scale unless you're viewing your art in the Flash Player.
If you haven't figured it out by now, 9-slice scaling is useful only when you're creating SWF files from Illustrator or when you're moving art from Illustrator into Flash. 9-slice scaling (unfortunately) has no use at all in the world of print. Hopefully this changes in a future version of Illustrator.
HOW DO I USE IT?
In order to use 9-slice scaling, you must first define a symbol (F8). In the Symbol Options dialog box, check Enable Guides for 9-slice scaling. The symbol must be defined as a Movie Clip.
Next, double-click on the Symbol (either on the artboard or in the Symbols panel), and you'll see two horizontal guides, and two vertical guides. You can position the guides to determine how the artwork will scale. Refer to the image below to understand what each section represents.
Double click on a blank area of the artboard to save the symbol.
Oh, BTW, after performing this action, I think I figured out WHY Illustrator CS3 has guides UNLOCKED by default (read here), because if guides are locked, you can't position the 9-slice scale guides. So to prevent users from thinking the feature was broken, they unlocked guides so that you can just edit a symbol, edit the guides, and get out. Nice if you care about 9-slice scaling and Flash workflows, but I can't imagine that the majority of Illustrator users (who don't currently use Flash) are happy about this. But I digress...
OK, so now that you've specified the 9-slice scaling, you're done, and you can scale the object.
HOW DO I SEE THE RESULT?
So now you scale your symbol on your artboard in Illustrator, but you don't get the result you expect. The entire artwork is scaled, without any difference in appearance than you would get with a normal scale.
Well, remember that earlier we discussed that you can only preview the result of 9-slice scaling in the Flash Player, so you won't see the result on your artboard in Illustrator. The easiest way to see what your artwork will really look like when played back in the Flash Player is to choose File > Save for Web & Devices and to choose SWF for the file format -- the file will correctly display with the 9-slice scaling in the preview there.
Alternatively, you can export a SWF and view it in your Web browser.
If you're bringing your symbol into Flash CS3, (either by copying and pasting the symbol into Flash or by importing a native Illustrator file onto your stage), you can preview the proper 9-slice scale result by checking Enable Live Preview from the Control menu (it's on by default from what I can tell).
WHAT ABOUT FIREWORKS?
FireWorks CS3 also has a 9-slice scale feature for Symbols, but unfortunately, there's no way to bring an Illustrator symbol into FireWorks (you can import Illustrator files, but the Symbol attributes aren't preserved). It seems that FireWorks CS3 treats 9-slice scaling just a tad bit differently than Illustrator and Flash. First, FireWorks CS3 can display the result of 9-slice scaling right on your screen (no need for previews or anything -- it just works as you would expect). Also, FireWorks CS3 seems to treat text differently. If you have text that is fully contained within the center area, then the text itself does NOT scale at all. Which is cool when creating and resizing buttons and tabs in web navigation elements and user interface designs. You CAN bring symbols from FireWorks CS3 into Flash CS3, at which time the 9-slice scaling behaves according to Flash's way of doing things.
7 comments:
I'll have to play with it after I install CS3 when it arrives, so I ask the question while my CS upgrade is in transit on the fedex truck...
Anyways, does the scaling automatically understand the stroke/border on the shape? I am having a bit of difficulty imagining how to figure which part will scale "intelligently" and which part will stretch after the scaling is complete. How does it deal with rounded corners if they are large?
Sort of unrelated, do you know if while using flash, is the free transform more intuitive (like in AI). I've had problems having the shape scale relative to the center point, it never seemed to work consistanty (probably user error on my part...) It seems easy inside AI to hold option/alt as you drag, but that never seemed to work in flash right.
mleavitt,
The scaling doesn't automatically understand anything. YOU define what parts of an object scale and how by positioning the 4 guides. Take a close look at the screenshot when I describe what each section of the "grid" represents. Basically, if you have rounded corners, you just want to make sure that the entire corner falls within the "does not scale" area.
As for the Free Transform tool in FL, I'll admit I dont use it much (I prefer to rotate objects numerically from the Properties panel), but from my limited use, it appears to act the same as with Illustrator.
Good explanation—it makes perfect sense to me. It does leave me with another question though. If a symbol is a movie clip, I assume this means it contains multiple frames. Is this true? Can you build a multi-frame movie clip symbol directly within Illustrator?
John,
While "Movie Clip" symbols inside Flash can contain multiple frames and their own nested timelines, they do not have to, and in practice many of them do not.
A "Movie Clip" symbol in Flash is one that you can control via an ActionScript. It has many more attributes than a Graphic Symbol does.
Here are some online articles about Flash symbol types:
http://www.smartwebby.com/Flash/flash_symbols.asp
http://www.smartwebby.com/Flash/movieclip_symbols.asp
http://www.dummies.com/WileyCDA/DummiesArticle/id-1527.html
An important quote from the second link above is "Thus any object that needs to be controlled using flash actionscript (no matter how simple or complex it might be) needs to be a movieclip with an instance name that is called in the actionscript code."
For example, suppose you wanted to make an animation of rain clouds moving across a sky with raindrops falling out of the clouds. You might create a symbol of a single raindrop, then a compound symbol of a single slanted line of those raindrops moving downward, then a symbol of a single cloud (with no raindrops), then a symbol of a cloud getting darker with multiple raindrop lines below it, then put them all together into a movie where multiple clouds moved across the stage and started raining. The "raining cloud" symbol and the "line of falling raindrops" symbol would each have multiple frames. The single raindrop symbol and the single non-raining cloud symbol would not. But they would still need to be Movie Clip symbols so that your scripts for the complex symbols could pass instructions to them for the instances to change their state.
So if a symbol either contains multiple frames, or can potentially change its state within another symbol that does have multiple frames, then it must be a Movie Clip symbol. (In my opinion "Movie Actor" would have been a better name for them, because the name Movie Clip misleads users into thinking that their symbols don't need to be movie clips unless they have multiple frames. "Actor" also gets across the notion of being something that a script can give directions to.)
Symbols inside Illustrator still cannot have multiple frames or multiple states. So the Movie Clip attribute, like the 9-Slice attribute, is stored only on behalf of Flash, and is not meaningful until it gets imported.
Simple question here - maybe related somewhat to this topic posting. I came across a simple tutorial (on Illustrator World) on making a 3D box from which I ended up making a nice box image (using drawing, rotate and shear tools). Problem is it talked about applying the box art by using the term masking and masking for each side "to the actual size of the panel" without going into sufficient detail. Is this something you could cover quickly - maybe a Rubber Cement topic? Applying artwork to a 3D box via Masking/resizing instead of through the 3D filter?
Yes! I'm starting in Illustrator world. I used to do my job on FreeHand, and use Corel too.
In Freehand when you creat a Rounded Corner Rectangle, you can scale and the "round" is keeping the original scale.
That not happened neither Corel or Illustrator.
When i see this stuff of 9slice on CS4 i say EUREKA!
But... D: Really bad, only is usefull for Flash.
In your post you talking about CS3 and youve say that the potencial of 9-slice will be expanded for illustrator... But, what can i see that doesnt happen.
Its Bad luck or i'm doing something wrong?
Thanx a lot for your sharing.
Thank you so much...
Post a Comment