CS6 Sprite Sheet animation alignment puzzle

Hey all, I greatly enjoy using Flash CS6's Generate Sprite Sheet tool since it's much much quicker than exporting all the sprites and using TexturePacker (though I wager TP would provide far better optimization). One problem I seem to have is aligning different animations to the same origin - which isn't the origin of the sprite (top left corner).
Say my character Jim has two animations:
Run (small sprites, as he runs in place)
Jump (short and tall sprites, and a bit wider than the Run)
I currently generate a sprite sheet by highlighting both clips and right clicking. This gets me a perfect Sprite Sheet with both animations and their respective names (based on MC name). The Run and Jump frame sizes are different, because the Jump sprites are taller than the Run sprites -- this all makes sense.
What doesn't is that there's zero information on how those two animations should be placed such that Jim can go from playing his run animation and then his jump animation with his feet in the same place, despite the fact that if you inspect either of those clips Jim is standing right at Flash's little origin point at the start of both.
Sure, the data file (JSON in my case) has all the offsets for placing the individual frames in the right place, but how do I align Jim's feet from one set of frames to the next without having to do it all by hand? To date the only workaround I've found is to dump all the animations into a single timeline such that they all take the same frame size, but this is TERRIBLE for managing sprites and animations since it gives all the frames the same name as the combined timeline.
What I really need is another set of numbers in the Sprite Sheet data file that tells me the frame x & y offset from Flash's movieclip origin. I have a suspicion this doesn't exist and is impossible.
At a loss here other than aligning each animation's frame by hand, which may have to be done every time an interal sprite changes size.
Thanks for any insight, none of the Adobe pages or demos go into any depth other than creating a sprite sheet of a single image or animation.

Yes, I understand how to make animations blend together, but my question relates to the technical side of how sprite sheets are generated.
When I generate a sprite sheet from multiple animation movieclips each animation has a unique frame size that Flash calculates and codes into the data file, and that frame size is not the size of document but the size of the smallest frame that can fit all of the sprites in the animation. I can't control this frame size or define a region within the document that is the frame size. Each animation within the sprite sheet could have a different frame size.
I'm interested to know if there is a way to view, generate, or export the data that would relate one animation frame to another so that a character (Jim) could be standing at the movieclip origin in the Run animation which is size A and also be standing at the movieclip origin in the Jump animation which is size B, and not only are A and B different sized frames, but none of the corners are coincident. Since it doesn't do this currently I'd have to manually code the offsets of each animation to a common origin instead of being able to use the one that's already in Flash.
I don't see how any of the default data that is exported along with the spritesheet PNG could relate that info and I'm very curious.
(I could do it by putting every animation within the same movieclip, but then the spritesheet tool is pretty useless since it'd all be one animation)

Similar Messages

Sprite Sheet Animation started by Mouse Click

I have a animated fire sprite. It is set to hidden, another button is set to "show" this sprite when it's clicked.
Problem is that the animation runs while hidden so when you click the button that reveals the sprite, the animation cycle may be complete. It's set to loop but I would like the sprite to start on frame 1 and begin play once you click the button, not autoplay.
Any ideas how to do this?

You can uncheck(i.e. disable) the Autoplay for the spritesheet symbol from the property panel (which you will see when you select the stage of the symbol in the symbol editing mode).
hth,
Vivekuma

Why are my sprites sheets not sizing/aligning properly?

I'm trying to export my Flash animations as sprite sheets to import into the Unreal Engine. But I keep running into issues where the reported sprite size/locations reported by Flash aren't quite right.
My example generated sprite sheet, it was generated with no border/shape padding:
The first bit of the sun.json file it generates, it says every frame is 214 x 214.
{"frames": {
"Sun Spin0000":
    "frame": {"x":0,"y":0,"w":214,"h":214},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":214,"h":214},
    "sourceSize": {"w":214,"h":214}
If I load the sprite sheet into cs6 and shrink the canvas size down to 214 x 214, you'll see the first frame is already starting to show tiny slivers from adjacent frames.
I'm not using padding around the borders or between frames. You can see the there is enough padding already IMO. The problem to me seems to be that Flash
isn't properly outputting the the values into the JSON file, which then I'm using to import into the Unreal engine. If I can't trust these values to be correct,
even if I were to add in padding to alleviate this, I will still have to manually adjust the frame size/locations of every frame of every sprite sheet by hand.

what's the size of your untransformed suns? are they 214x214?
if so how are you loading your spritesheet and displaying the sprites?

Flash Pro CS6 - Exporting Sprite Sheet With EaselJS JSON Data

Hi,
I've imported a png sequence into Flash Pro and have been trying to get the new sprite sheet generation feature to export JSON data in EaselJS format, but when I choose the EaselJS option from the dropdown menu, I only get a window function:
(function(window) {
}(window));
However, when I export as JSON, I do get proper JSON data. Is this a known issue with EaselJS support in CS6, or should I be doing something differently? I'd rather not use Zoe, the SWF to EaselJS AIR utility, because the pngs are fairly large and Zoe seems to have a maximum dimention cap for exporting sprite sheets, I get 12 of them whereas Flash Pro is able to auto detect dimentions, exporting one sprite sheet, which is great, I just need to get it to generate the EaselJS data along with it. Thanks in advance!

Thanks, I was just about to convert the JSON file myself, then I read your reply, tried it and viola. Do you happen to know why EaselJS can only read symbols, even if I labeled my frames?

What good are Sprite sheets in CS6?

In Flash CS6 one can create sprite sheets. What benefit or relationship does this have to direct flash development? What is the primary purpose for Adobe putting this feature in CS6?

The most direct use is if you use the Starling Framework for game development. Starling is an ActionScript version of the popular Sparrow framework. You can use sprite sheets to transfer you assets into Starling-friendly version.
Chris Griffith

Sprite Sheet?

Decided to try using CS6's Sprite sheet exprter and hoping I am missing something - basically I have an animation of a baseball coming to home plate. The ball is a movie clip that is composed of 11 frames, so that the ball rotates as it moves. However when I export to sprite sheet only the movement of the clip is exported, and not the sub-animation contained in the clip - the rotation. Is this just a FOL and the sprite sheet exporter simply doesn't work? That's what I'm thinking... So anyone know of a sprite sheet export that does work properly? Anyone tried Spriter? I know it's standalone, but it looks promising.
Thanks

Thanks again for the leads. Have been looking and will need to look a lot more.
I am not familiar yet with packages/classes to the point where I can initiate them in my current process, but perhaps next revision. I'm trying to put together a children's picturebook app, in some of the areas I use bitmaps(png) to depict fancy text items. At the moment I use individual png's to do each items but m looking to use spritesheets.
Last book there were about 25 MB of images, half being page (30 pages) backround jpgs (set for Smoothing and PNG-lossless) as they get scaled depending on the device.
Perhaps at the moment it will be too much work to change everything so the question: Would there be much advantage in changing to spritesheets or is a picturebook a bit heavy to be of much advantage.

Multiple Movie symbols into one sprite sheet

I have my character split into different symbols. Arms, Head, Body and so on. Each symbol (movie clip) has its own timeline of animation. How do I get all of my symbols into one clip without losing animation? I've tried selecting all of the symbols and and creating a new movie clip out of all of them together but when I try to covert to sprite sheet, it is just my entire character with no other sequences of movement on the sprite sheet.
Thank you in advance

There are a couple of things you could try depending on what exactly you need.
1. Assuming your character has all the different body parts as separate symbols with their own animations within.
     a. Select all the body-part symbols in Library or on Stage, right-click and select 'Generate Sprite Sheet..'
     b. Check the sprite sheet preview - each of the selected symbols are packed one after the other.
2. If you have one Movieclip containing all the body part symbols and you wish to export the animation as it is ==>
     a. Double click on the main movieclip to get inside it.
     b. Select all the body part symbols on stage and change their instance type to Graphic in the Properties panel.
     c. Increase the frames in the main movieclip's timeline (press F5) to cover the entire animation of its children.
     d. Now generate the sprite-sheet for main movieclip from library or stage and check the preview.

Animate 2014 sprite sheet import different than docs

Edge Animate Help | Import sprite sheets
Importing from just an image creates a single symbol. Importing with the help of an .eas file creates individual symbols. The docs say both processes create separate symbols - which isn't really helpful. Under what circumstances would I want separate symbols created for a sprite?
It would be a cool feature to import individual symbols defined in an .eas file if it wasn't sprite data.

Hi Chip,
There are 2 types of SpriteSheet can you can import into Animate CC 2014:
1) Created from Flash Professional
In this case you have a Image File and a corresponding metadata file(.eas) which has information on how the sprites are arranged.
From Flash, you can select multiple symbols(having animations) and export as a single spritesheet. These Flash Pro individual symbols has different sprite sequence names in the .EAS and are therefore imported as individual symbols when they get imported into Animate. You can refer to the SpriteSheet lesson in Animate CC 2014 which has .eas file having these multiple symbols imported.
If you export only one symbol as a SpriteSheet from Flash Pro, then you will get only one symbol animation in Animate too.
While Importing the Import SpriteSheet dialog in Animate will show you the number of sequences that are present in the imported .eas file.
Some cases where you may want this single spritesheet for multiple symbols:
If you encapsulate multiple animations in a single sprite-sheet the number of round trips when you composition is viewed in the browser does get reduced therefore improving the overall performance for your content
But one aspect to note is to not have a very huge spritesheet image size(2k * 2k) which will make it non-performant on mobile devices
Currently there is no option to select the sequence within a .eas file at import time. That is a good suggestion and will be a good enhancement for this feature.
2) Image only SpriteSheet which has same sized images tiled in order
In this case, there is no metadata associated with it and therefore when imported after specifying the row/column/padding options; you always get only a single symbol created in Animate as part of the import process.
Hope this helps
-Sujai

Exporting PSD for Sprite-Sheets

Hi, I have several sprites animated and saved in PSD form, how do I now convert them into Flash Professional so I can turn them into a sprite sheet from there?
I have tried several ways but importing the PSD file doesn't load the layers up, it only loads the top one.

Yes that should be possible using the above script. It generates a png sprite containing images on all the layers and a metadata file (.eas) for importing it into Edge Animate.
If it doesn't work, can you share one of your psd files so that I can try out with it.

What I do after generate sprite sheet?

Hi,
I generated my sprite sheet. I have two files. One png and one xml file. How do I use xml file in Flash? Is it possible to generate sprite sheet and use it in a movieclip?
I want to put my animation on stage with programation (AS3).
Thank you,
Have a nice day.

Please refer the tutorials here
You will get an idea how sprite will use animations.
. http://www.hsharma.com/tutorials/starting-with-starling-ep-1-intro-setup/

Incorrect size of TextureAtlas using "Generate Sprite Sheet..."

1. create a shape of any size. a 4*4 rectangle for example
2. using "Generate Sprite Sheet..." to make a TextureAtlas
3. check the generated config file, the size is wrong: "<SubTexture name="Symbol 1 instance 10000" x="2" y="2" width="5" height="4" pivotX="0" pivotY="0"/>"
width should 4, not 5.
Both Flash Pro CS6 and Flash Pro CC have this bug.

Hi Qizhi
Can you try this. Round of the X and Y position to a whole number on the stage.
Example . Make X = 335 and Y = 54 for the symbol on stage.
Let me know if this helps.
Reagrds
Avinash

Copying one .eas file for multiple sprite sheets.

Hi, I've been googling the web trying to find answer to a problem but haven't found a solution yet. Maybe someone here has an idea.
I'm working on a project with Edge Animate CC where I'm creating a multitude of different animated symbols from sprite sheets. The symbols/sprites, which there are a lot of, come in sets, each with a different character wearing different colour clothes. For example, there's one of a man in a white shirt walking, and then the same man in a blue shirt, a red shirt, and so on, and then the same for several other characters. Because each version of each character is the same except for a colour change, I've been trying to create one sprite sheet from Flash CC, make colour edits to the sprite sheet in Photoshop CC, save it with a new name, then import it into Edge Animate using the same spritesheet.
It seems straightforward enough but what I've learned is you can't use an .eas file with spritesheets other than the one it was created with in Flash. When I try it says the .eas file and the image don't match, and to check the paths for both files. When I copy the .eas file and rename it, giving it the same name as the new sprite sheet I want it to work with, I still get the same message. When I open up that .eas file in TextEdit and change the "image" filename in the "meta" section to correspond to that of the new sprite sheet, it still doesn't work. I don't see anything else within the .eas file that would tie it to any particular spritesheet, so between making that change and changing it's filename I would expect the .eas file would work the new sprite sheet.
I know I could create sprite sheets for each colour scheme of each character through Flash, but since they are all identical other than their colour it would save me a ton of time to just copy and edit the sprite sheets. The colour changes are not something I could do within Edge Animate.
Has anyone had similar issues? Any tips?
-A

Hi Medley, Good to see that you are experimenting with the new SpriteSheet feature available in Animate CC 2014.
Some points:
The EAS file format is currently only supported from Flash Pro CC 2014. There are some meta data tags that is read when you bring in an eas type spritesheet and therefore Animate will be able to import only the sprite sheets created from Flash Pro CC using the EAS route.
If you want to use spritesheets from other applications like photoshop, I would recommend that you don't enable the "load an eas file" check-box. In this case the sprite sheet PNG will be the only input that you need to specify in the Import dialog.
In this case you will need to have a sprite-sheet which has the individual sprites that is stacked out in order from left to right and top to bottom. You can then specify the rows and columns and the padding options in the Spritesheet import dialog in animate.
Let me know if this works for you.
-Sujai

Adobe Edge sprite sheet doesn't show

Hi,
When importing animation from Edge to Muse using sprite sheet, I can see it work when playing automatically the Edge animation.
But when enabling "Advanced 1 second every" feature, sprite sheet objects doesn't function.
Any suggestions how to solve this?
Thanks,
Avi

i did this before i started this thread ("do not download or install updates automatically")... it doesnt change anything.
really, wouldnt be life easier if people would disable auto update on SAME window where updates popup? why we must spend our time for searching something that could be just next to info about new updates waiting for download? then wouldnt be this and thounds of other threads :/

FW CS6 sprites - both class and id selector

Is it possible to output sprites containing both class and id selectors?
I'm generating sprites for an existing web page which contains both class and id CSS. When I export from FW, the Export Options give me the choice of class or id, which makes me think I'm going to have to maintain two or more FW files. Is that right? Is there a way I can force FW CS6 to generate a single sprite file containing both class and id selectors?
John

To make this work, there'd need to be a way to designate ‘class versus id’ for each individual slice; however, writing the selectors for class(.) or id(#) into the slice names themselves seems to be overridden upon export.
I can think of two possible strategies:
Fixing the issue after the fact. During export, simply choose the selector option that's used most frequently, and then open the resulting CSS file in a text editor and switch the incorrect selectors from class(.) to id(#), or vice versa.
Exporting in multiple passes. The Export dialog includes a ‘Selected Slices Only’ option. First use the Pointer tool to select all slices to be output with class(.) selectors, and Export using that option. Then do the same for slices to be output with id(#) selectors. You could also use sublayers within the Web Layer to help you in organizing and selecting slices.
The second strategy will result in two different sprite sheets but would allow you to work within a single FW document, if that's a benefit.

Help: importing PNG's Alphas to make a sprite sheet

Hi All,
I need some help with making PNG sprite sheets with Photoshop CS4 Extended.
The issue is with Photoshop. When I bring in the PNG animation sequence image 1 then 2 I lose the alpha after that.
What is the best way to bring in multpel alphas to make a sprite-sheet? The trick I have used so far has given me
bad results.
* Note: I have rendered out 35 frames of an animation sequence from 3Ds Max 9 as .PNGs & .TGAs with alphas.
Thanks in advance :-)
My curent way of doing this is:
Steps:
1. Launch Photoshop CS4 Extended
2. Set document size to 256X512
3. Set up a grid 32X32 pixles
4. Open Frames 1 to 35 of animation
5. place frames in order on sprite sheets
Note: open "Channels Panel" observe only the 1st frame has an alpha
And my work-around is to do the same steps for the alpha by opening each frame in Photoshop and going in the Channels tab and selecting just the alpha layer. Then copy and pasting it into new photoshop document to make the sprite sheet's alpha. Once
the alpha sprite sheet is done copy and paste it into the original sprite sheet document.
This sounds like a lot of steps and it is...

Hey All,
Thanks for posting :-)
Hi Chris Cox,
The PNG format out of Photoshop does not work in computer game graphics for some reason so the game artist use SuperPNG. To get SuperPNG to work it must have an alpha channel for the transparency to work in game engines like GameMaker & GarageGames.
HI Paul Riggott,
I am using a software tool like File Sticher called GlueIt and it is working great for me. But this is one extra step I am trying to remove to my art pipe-line.
Here is the current result in the GameMaker v7.0
Here is the my current work flow in Photoshop CS4 Extended

CS6 Sprite Sheet animation alignment puzzle

Similar Messages

Maybe you are looking for