Scribd Logo
Upload

Welcome to Scribd!

  • 213 views

    Real World Illustrator - Understanding 9-Slice Scaling

    Uploaded by

    Larry Boggs
    9-slice scaling is a feature in Illustrator CS3 that allows for intelligent scaling of symbols when exported to and viewed in Flash. It works by defining scaling guides within a symbol that determine which parts of the symbol scale and which parts remain proportional. The scaling effect only works when viewing the symbol as a SWF in Flash, as that is where the scaling is applied at runtime. Fireworks CS3 also supports 9-slice scaling within symbols and allows previewing the effect without exporting to Flash.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Real World Illustrator - Understanding 9-Slice Scaling

    Uploaded by

    Larry Boggs
    213 views5 pages
    9-slice scaling is a feature in Illustrator CS3 that allows for intelligent scaling of symbols when exported to and viewed in Flash. It works by defining scaling guides within a symbol that determine which parts of the symbol scale and which parts remain proportional. The scaling effect only works when viewing the symbol as a SWF in Flash, as that is where the scaling is applied at runtime. Fireworks CS3 also supports 9-slice scaling within symbols and allows previewing the effect without exporting to Flash.

    Original Title

    Real World Illustrator_ Understanding 9-Slice Scaling

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    9-slice scaling is a feature in Illustrator CS3 that allows for intelligent scaling of symbols when exported to and viewed in Flash. It works by defining scaling guides within a symbol that determine which parts of the symbol scale and which parts remain proportional. The scaling effect only works when viewing the symbol as a SWF in Flash, as that is where the scaling is applied at runtime. Fireworks CS3 also supports 9-slice scaling within symbols and allows previewing the effect without exporting to Flash.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    213 views5 pages

    Real World Illustrator - Understanding 9-Slice Scaling

    Uploaded by

    Larry Boggs
    9-slice scaling is a feature in Illustrator CS3 that allows for intelligent scaling of symbols when exported to and viewed in Flash. It works by defining scaling guides within a symbol that determine which parts of the symbol scale and which parts remain proportional. The scaling effect only works when viewing the symbol as a SWF in Flash, as that is where the scaling is applied at runtime. Fireworks CS3 also supports 9-slice scaling within symbols and allows previewing the effect without exporting to Flash.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    5/23/12

    Share

    Real World Illustrator: Understanding 9-Slice Scaling


    Report Abuse Next Blog Create Blog Sign In

    Blog

    Videos

    Books

    Fridays with Mordy

    About this Blog

    Blog Index

    April 27, 2007

    Understanding 9-Slice Scaling


    9-slice scaling is a new feature that has been added to Illustrator CS3. However, the feature is a bit misleading on several points, and I thought I'd take a few moments to clarify exactly what 9slice scaling is, and what it isn't. 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 9slice 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. Order your copy of Real World Illustrator CS5! Email your questions/comments Make a donation to the Blog Subscribe to the Blog RSS feed

    Mordy's Twitter Feed


    @MrCairney It's a "bug" :) pretty cool, eh? about 18 hours
    ago

    YES! IT'S OUT! Foundations of Programming: Object Oriented Design with @allardice http://t.co/dkMObiuE
    about 18 hours ago

    follow me on Twitter

    TABLE OF CONTENTS Illustrator Techniques Ask Mordy 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. Rubber Cement Resources Teri's Wisdom Op-Ed Illustrator Interviews Links

    rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    1/5

    5/23/12

    Real World Illustrator: Understanding 9-Slice Scaling

    Search by Keyword
    9-slice scaling ACE Acrobat actions align anchor points apparel

    appearance Bleed blend Color convert to shape crop distribute Document Setup drop shadow flash Freehand
    Graph

    graphic styles Guides

    Illustrator

    Images

    InDesign kuler

    layers live color live effect live paint

    metadata multiple artboards new document profiles Opacity Masks Overprint Preview Pantone pathfinder patterns PDF pen tool Photoshop round corners Save for Web slices Smart Guides Snapping type web web graphics

    To receive new posts daily, enter your email: Double click on a blank area of the artboard to save the symbol. Subscribe me! Powered 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. This work is licensed under a Creative Commons Attribution-NonCommercialNoDerivs 3.0 Unported License. by FeedBlitz

    Blog Archive
    Blog Archive

    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).

    rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    2/5

    5/23/12

    Real World Illustrator: Understanding 9-Slice Scaling

    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.
    +1 Recommend this on

    7 responses:
    mleavitt said... 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. 4/27/2007 1:42 PM Mordy Golding said... 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. 4/27/2007 4:05 PM

    rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    3/5

    5/23/12
    john seckman said...

    Real World Illustrator: Understanding 9-Slice Scaling


    Good explanationit 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? 4/27/2007 9:56 PM Teri Pettit said... 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. 4/29/2007 2:26 PM Gary Spedding, Ph.D. said... 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? 4/29/2007 8:57 PM Kelek said... 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.

    rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    4/5

    5/23/12

    Real World Illustrator: Understanding 9-Slice Scaling


    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. 6/12/2009 5:09 AM Anonymous said... Thank you so much... 8/12/2009 8:45 AM Post a Comment

    Newer Post

    Home Subscribe to: Post Comments (Atom)

    Older Post

    Electronics Distributor
    Search Our Huge Selection of Quality Electronic Components Today
    www.digikey.com

    Ethereal template. Powered by Blogger.

    This ad is supporting your extension Sexy Undo: More info | Privacy Policy | Hide on this page

    rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    5/5

    You might also like