9-Slice Scaling

I am hoping someone can help me understand the concept of 9-slice scaling in CS5 I have read some tutorials and am still confused. I open a button from the common library, enter symbol edit mode, drag the slice guides so that the vertical ones are only covering the portion of the button that has the text on it and the horizontal guides are directly above and below the button.
1. Does this mean that when I go to the canvas and use the scale tool, that everything else will distort except the portion contained inside the center portion of the guides?
2. Does this work with vector and bitmaps?
Thanks.

The "safe" areas in 9-slice scaling are the areas in the outer four quadrants. Those areas will not be scaled/stretched at all.
The areas in the outer middle of the grid will scale in a specific direction. For example, the outer middle sections on the left and right side of the grid will scale vertically, but not horizontally. I'm attaching a diagram which I hope is helpful. Note that the grid lines do not need to be balanced/even as is hopefully evidnet in the diagram.
9-slice can work on both bitmap and vector, but is more often used on vector objects. And example where it might be used on a bitmap object is to scale  a screen grab of a dialog box.

Similar Messages

  • 9 slice scaling - not working as described

    In order to create a 9 slice scaled object, I have tried
    Flash help and various tutorials on the web and none of them
    produce the result they say they will. All of the instructions say
    basically this:
    Create a movie clip symbol
    Enable 9 slice scaling in its properties
    Open the symbol in symbol editing mode
    Move the guides where you want them to define the
    non-scaleable regions
    Place an instance of the symbol on the stage
    At this point, I am supposed to be able to scale the object
    with the guides taking effect. I have NOT once been able to do
    this, the whole thing always scales and distorts the corners in the
    way the guides are supposed to prevent! One tutorial told me that I
    had to preview the movie and then I could see the result, but that
    was not true either. Is there a step missing? Flash is constantly
    one of the apps where I find tutorials and help often don't produce
    the advertised result.

    Don't know what to tell you. I've never done 9-slice and I
    just looked it up in the help files and it worked both on the stage
    and on publish.
    Do you have Control -> Enable Live Preview checked?
    That is what is needed to see it on stage.
    Are you trying to scale imported bitmap images? They won't
    9-scale.
    Does your clip have nested clips inside it? They won't
    9-scale.
    Can't think of anything else.
    Oddly enough I almost always find the help produces exactly
    the advertised results.

  • 9-slice scaling doesn't work with rotation - bug!

    I have a simple graphic, a rectangle with 3 rounded corners with 9-slice scaling applied. When I scale it non-proportionally, the round corners keep their shape as expected. BUT if I then rotate it the round corners lose their shape and become ellipticaly distorted! If I rotate first and then scale the same thing happens. WT...??

    you're correct.
    it doesn't matter whether the scale9Grid is created in the ide or with actionscript.
    it's probably been reported because i think that's been a problem for a long time:  https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

  • Guides for 9-Slice Scaling?

    I want to import artwork from Illustrator to do simple tweens. One of the options is to select Enable Guides for 9-Slice Scaling. I am not at all familiar with this feature in Flash. What is this used for? I am working with CS5.
    Thanks.

    Hi,
    9-slice scaling allows you to specify how scaling is applied to specific areas of a movie clip. With 9-slice scaling, you can ensure that the movie clip looks correct when scaled. With normal scaling, Flash scales all parts of a movie clip equally, and in both the horizontal and vertical dimensions. For many movie clips, this equal scaling can make the clip’s graphics look strange, especially at the corners and edges of rectangular movie clips. This is often true of movie clips used as user interface elements, such as buttons.
    If you have not used this option in Illustrator while creating/editing movie clip symbols, then you can ignore this option while importing the artwork.
    For more details on 9-slice scaling please go through http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7db9a.html
    Thanks!
    ps: please mark this thread as Answered if this is of help to you.

  • Does 9-slice scaling work for "complex" objects in CS3?

    Hi all,
    I'm having serious trouble getting 9-slice scaling to work at all with symbols consisting of more than one path.
    Basically fireworks will always scale the objects outside of the inner area - which defeats the whole purpose.
    Additionally, gradients will not rotate with the symbol but will stay stationary.
    For reference see attached test project I did.
    Isn't this supposed to work?
    Would be great if somebody could shed some light on this.
    Best regards,
    Mike
    edit: I am talking of vector objects...

    Hi Linda,
    thanks for the reference. Why is it so hard to find those pices of information?
    And btw: given all of these restrictions, can we expect the symbols to be of real practical use? I mean - come on: "Text will not work reliably, stray pixels, no live filters, no rectangle primitives".
    Does anyone know whether we can expect these to be fixed in CS4?
    Thanks again,
    Mike

  • 9-slice scaling and text

    Sorry if this has been asked before, i couldn't find an answer with google and the search function doesn't seem to work today (i see results but there is no link to the post, only a link to the user and subforum )
    I recently discovered 9 slice scaling which is great! However it doesn't seem to work with text.
    Paragraph text (or whatever it's called: text in scalable box) is scaled as if it is point text. I don't want the text to be scaled, but the box that contains the text.
    Even when placed in a corner of the symbol outside of the scalable areas (the 4 corners shouldn't scale at all), type is being scaled anyway...
    Is this normal behaviour?

    That art if I am not mistaken is of a different physical description than the one the OP suggested. In which the box expands in size but not the text I see no real reason to use the nine slice scaling on this when one has better control with the convert shape effect.
    Now you may be correct in that the OP had a more complex group of elements including text and that is a different scenario and could be appropriate.
    But I am not certain nine slice works this way since text works on a matrix and not necessarily proportionally as we apply proportional scaling geometrically.
    I think this is a feature request if it is not a bug.I do not think it is a bug but either and omission or unforeseen use or a good idea the user and you have or something similar.
    I do think that in most cases this can be handled as an effect with perhaps more control.
    The effect was design to work this way that s either expandable to accommodate additional text or scalable without effecting the text.
    I do understand and see hat one might want to work in a more spontaneous way.
    At the moment I do not see nine slice as the option. Or at least i do not see how to make it behave the way the OP desires it to.

  • 9 slice scaling on swf loaded with loadmovie

    If you load a swf into another swf that has a MC on the stage with 9 slice scaling setup, should 9 slice scaling work within that loaded SWF and MC? I've tried it and it doesn't in my case but wanted to be sure that this isn't a bug or limitation?
    Thanks,
    Paul.

    Because realtime non-bitmap rendering is far slower on iPad1 I ended up just bitmapping everything possible. I only draw what's absolutely necessary now. I gave up on 9-slice, there is no way to outline it in any way that's performance friendly on ipad1.
    Chalk it up to a bug.

  • 9-slice scaling problem on symbols

    Hi there.
    If I have a 9-slice scaling guide setup on a symbol, then
    drag it onto the canvas.
    I have an issue.
    When the image is dragged onto the canvas, the bounding box
    is too large, like it doesn't accurately represent the actual image
    data of the symbol.
    So say I had a rounded rectangle that was 100x20 (px), and I
    added 9-slice scaling guides on it.
    When I drag that symbol to the canvas, the symbols' bounding
    box is no longer 100x20, but more like 150x40(px).
    Anyone know why this may be happening?
    I do have layer effects on the symbol in question.

    bcharan wrote:
    > I think I figured out what the problem is, but not how
    to fix it. Here is the
    > png:
    http://www.flickr.com/photos/brijcharan/2243159150/
    So the issue seems
    > to happen when I use photoshop live effects. If I
    disable it, the bounding box
    > is fine. Check the above image and you'll see the
    difference. The left one has
    > the effect, the right one has it disabled. you'll see if
    you select the left
    > symbol, the bounding box looks much larger than the
    image itself.
    >
    Photoshop layer effects use the entire layer, rather than
    just the
    object. Try using native Fireworks effects, or create your
    slice
    manually in the symbol.
    Jim Babbage - .:Community MX:. & .:Adobe Community
    Expert:.
    http://www.communityMX.com/
    CommunityMX - Free Resources:
    http://www.communitymx.com/free.cfm
    .:Adobe Community Expert for Fireworks:.
    Adobe Community Expert
    http://tinyurl.com/2a7dyp
    See my work on Flickr
    http://www.flickr.com/photos/jim_babbage/

  • 9-slice scaling? Help!

    When I open up a CS3 file with my CS5 version I get this error.
    "Illustrator now honers 9 -slice scaling of symbols. Any scaling done on symbol instance with 9-slice scaling option in legacy version will look different now. Do you want to retain the 9-sclice scaling option for symbols?"
    I click on the yes button. But what does this all mean?
    When I do enter in this file it is distorted. How do I change the legacy so that it will reflect the origional file.

    PhantomRoses wrote:
    I did not read the manual on 9 - slice- scaling
    Please do that first.
    http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6221a .html#WSD315BB06-CB18-4b70-BC9C-04E6CA6E64E6a
    It's crucial that you understand what this function is all about.

  • 9 slice scaling effect

    Does anybody know of a way to mak a 9 slice scaling symbol in Edge Animate ?
    What i did here was build a symbol with 3 pngs : one for the top round corners, one for the bottom with the pin (which is positioned 0px from the bottom), and one for the middle, which is a slice of it.
    I can design the middle one to scale up as the placed symbol grows, except, it will never make something nice from percentages.
    Any idea welcome before i start to dig into code
    (and right now, i'm not even thinking of having them scale up as transition, i'm more thinking different bubbles of text which have the right size)
    Attached should be the base folder with Ai.

    Ok, i found the answer by myself
    I just put my top and bottom OUT of the symbol boundaries, and the inside is 100%

  • 9 Slice Scaling & Effects - Incompatible?

    I'm having problems with 9 slice scaling in CS5: Inner glows stretch, drop shadows disappear entirely, etc. Round corners work fine, but other than that it's nothing but a bag of hurt. I've search high and low for answers to this, to no avail. Anyone else seeing this?

    jcarpenterss wrote:
    Terrific. Undocumented limitations to common usages. I ask again:
    It doesn't work with effects
    It doesn't work with nested objects.
    It only seems to work with rounded corners.
    ... ergo, what is nine slice scaling good for? Genuinely curious. It's certainly no good for... user interface production. I can attest to that.
    So what am I doing wrong.
    This one looks like a compromise but I think tat is necessary. How would do it for parts that go off the  slice.Of course you can adjust the slices to accommodate the art better. You know you can adjust the slices? I will do that later and show you how that works. Or you can look at the help files.

  • CS6: Symbol 9-slice scaling question

    I hope someone can help me with the 9-slice scaling of a symbol.  I have a simple frame symbol:
    I want to stretch the symbol vertically while protecting the curved corners. I experimented with the 9-slice scaling feature, but I haven't hit upon the right positioning of the guides.
    I fail every time I try to scale the symbol with the corners protected.  I know I am doing something wrong, but can't figure out what! 
    (By the way, the forum software was doing strange stuff when I authored this post. The images kept appearing at the beginning of the post and not where I inserted them, and the first part of my first sentence kept disappearing.  I re-typed it 3 times and hope the final post appears like I want it to. I can't find a preview function.)

    Thank you, Monika!  Your question led me to the solution!  The original artwork was a glyph from a font that I had purchased.  I simply dragged the glyph to the symbol palette.  I've done this often with fonts that I only needed to re-size as a whole, so I didn't realize that the kind of source object would affect the ability to use the 9-slice scaling on the symbol.
    Creating an outline of the glyph (TYPE - CREATE OUTLINE) before dragging it to the Symbols Palette solved the problem!

  • Scrollbar thumb distortion - 9-slice scaling problem

    Hi friends,
    I have used a skin for scrollbar thumb whose PNG image size is 14x21 but which will be scaled vertically between its present height and extended height 498px. I have been trying to understand the 9 slice scaling parameters to assign to the thumb image so that it does not distort but I'm unable to achieve that. The CSS which has come closest to least distortion is follwing (though UI view of this is also not acceptable) is this:
         thumb-skin: Embed(source="assets/images/scroll_thumb.png",scaleGridLeft="1", scaleGridTop="4", scaleGridRight="13", scaleGridBottom="17");
    Though the thumb looks fine with height 498px but the three horizontal lines in middle of the thumb.PNG become rectangles!!. I tried many combinations with these parameters and read a couple of blogs etc but cant get to the solution.
    Please help.
    Added PNG

    Any help on this guys? Your inputs are welcome

  • 9-Slice scaling not working in FB4?

    I just upgraded my FB3 flash project to FB4.7, and saw that my 9-slice symbols (which I exported from an FLA to a SWC) have stopped working.  That is, the whole graphic is now getting stretched. If I use the exact same SWC and the exact same code in my FB3 environemt all is well.
    The code is really basic:
    var spr:MyRoundedRect = new MyRoundedRect(); // MyRoundedRect comes from the FLA with 9slice scaling
    spr.scaleX = 4;
    spr.scaleY = 3;
    addChild(spr);
    Am I missing something? I this a known bug in Flex Builder 4.7?
    Anyone else ever encounter this?
    Right now, I feel like going back to Flex Builder 3, where the world seemed a better place.

    I'm using Flash Builder 4.7 for a pure flash project (ie, no mxml) & all my graphics objects are in a swc that was exported from an FLA. 
    I've made some progress with that issue. If I explicitly assign the scale9Grid dimensions in the code, it seems to work:
      obj.scale9Grid = new Rectangle(x,y,w,h)
    ...but having to do that is a real productivity killer.  Would be nice to use the 9-slice guide setting in the FLA

  • Not remembering 9-slice guide placement for rich symbols

    Y'all,
    I'm learning to create rich symbols in the new FW CS3, and
    I'm having some difficulty with the 9-slice guides. I create the
    rich symbols, enable 9-slice scaling, save them to the common
    library, and generate the accompanying JSF file. Then I drag the
    new symbol onto the canvas, double-click to edit it, position the
    9-slice scaling guides, and click DONE. The rich symbol now behaves
    properly for all instances in the current document.
    However, when I open a new document and drag the rich symbol
    onto the canvas, the position of the 9-slice guides has reverted to
    the default placement. The positions that I defined for the guides
    in the previous document do not seem to be saved with the master
    rich symbol.
    I've looked at other rich symbols (that come with FW CS3) and
    see that the scaling guides are clearly positioned and that those
    positions are remembered and stored with the master symbol.
    How do I get FW CS3 to remember the placement of the 9-slice
    scaling guides for my custom rich symbols so that I do not need to
    edit and place the guides EVERY time I open a new document? I've
    tried to look through the help documentation, and I've searched
    online and the forums here, but I haven't found any instructions
    for creating rich symbols that remember the 9-slice scaling guide
    placement.
    Any help would be most appreciated. Thanks!

    OK, I figured it out over the weekend:
    When you define the 9-slice guides for the rich symbol, they
    are only applied to the symbol instance(s) in the current document,
    so you need to go to the Assets > Library panel, select the rich
    symbol, then go to the options menu and choose "Save to Common
    Library", then browse to the rich symbol filename. You will be
    asked if you want to overwrite the existing symbol file, and yes,
    you should. The placement of the 9-slice guides defined as defined
    in the current document will now be saved to the rich symbol master
    file, and the placement of the guides will be preserved and used
    for future instances of that rich symbol in new documents.
    Seems kind of odd that there are multiple disjointed steps to
    create a rich symbol: draw it, save it, define the JSF script, save
    it, define 9-slice guide placement, save it. If I check "Enable
    9-slice guides" when I save it initially, shouldn't FW CS3 insert a
    step asking me to define their placement before I save the rich
    symbol to the common library?
    Just a thought.

Maybe you are looking for