2 Replies Latest reply on Mar 5, 2016 11:25 AM by Nipun Asthana

    Shape Tweened Line into PNG Sequence

    adobesigh

      Ok. I am pretty new to Animate CC. I like all the power I seem to have. A special point of interest to me is the Width tool. I use it a lot in Illustrator, and I am glad to see it is here as well. This is really what my question is about, honestly.

       

      So, I have this line, at frame 1 in a timeline. Now I used the awesome width tool to morph this line into a sword at frame 20. Then at frame 40 I use the same method to morph the line into a hammer. Then a shovel. Then a spoon. Then a [insert other shape name here]. Each of these new shapes is a new keyframe in the timeline. After I have around 5 keyframes, I highlight them all in the timeline, and Convert to Shape Tween. Now when I scrub the timeline, I can see a nice clean morphing effect between all the shapes. Awesome!

       

      Now comes the part I need help on. So I have this blissfully awesome morphing animation, but now I want to put that animation into a PNG sequence, so that I can use it as a sprite in a game (or whatever). Essentially, what I want to do is have a series of PNGs, all of which have a transparent background (since it is a sprite), of just the animated line morph (meaning, I do not want the white stage behind it in every frame). I have tried several things, but I cannot seem to figure out the exact steps to make this happen.

       

      One thing I noticed, from watching a bunch of tutorials, is that in order to create a sprite sheet in the manner I need, the object you are putting in the sprite sheet needs to appear in your 'Library' window. In order for that to happen, it seems that the object has to be a symbol. One thing I tried is converting the line in frame 1 to a symbol, so that it appears in the Library window, hoping that the symbol would inherit all of the morphing frames after frame 1. Unfortunately, this only uses that one frame for the symbol, meaning that the symbol only contains one frame when I try to export it to a PNG sequence. Because of this, I tried converting the entire animation to all keyframes, then converting the line in every frame to a symbol. This, as you probably know, did not achieve what I wanted either, because now each frame of the animation is disassociated with all the other frames. Thus I had the same problem where every symbol only has a single frame, and there is no apparent way to say they are all frames of the same symbol.

       

      I feel like the tools I have here should provide me with a way to export this animated, Shape Tweened line, into that transparent background PNG sequence I am looking for. Perhaps I am just missing the 'Convert Line Animation to Sprite Sheet' tool somewhere. Or maybe I am going about the whole thing wrong. I am totally open to all suggestions if the whole methodology is wrong, and of course I am open to any helpful comments anyone may have to solving my weird problem.

       

      Thanks in advance

        • 1. Re: Shape Tweened Line into PNG Sequence
          adobesigh Level 1

          Hey everyone. I think I found a way to accomplish this. It seems like a bit of a hackish way to accomplish it. It may be the right way, but it does seem a little overly complicated to me. In any event, here are the steps I followed to achieve a PNG sequence from a shape tween animated line that contains all line width animation:

           

          1. create the animation, like I did in my question (create a line, create several key frames on the timeline that have line width changes [like making it a sword or hammer or whatever], then highlight all key frames and make a shape tween animation)
          2. highlight all animated frames in the timeline, even the non-keyframes
          3. right click on the selected frames and choose 'Convert to Key Frames', making all frames key frames. now you have discreet images for each frame of the animation
          4. while all the new key frames are still highlighted (should be one keyframe every frame now), right click the selected frames and choose 'Copy Frames'
          5. insert a new symbol (Insert menu -> New Symbol...)
          6. select type 'Movie Clip', and click OK
          7. in the timeline of the symbol itself, right click the first frame on the first layer, and select 'Paste Frames'
          8. scrub that timeline to verify your pasted frames produce the animation you think it should
          9. if it does, goto your Library window, right click on the symbol you just created, and choose 'Generate Sprite Sheet'
          10. use the sprite sheet creation tool to create and export your PNG sequence, with a transparent background
          11. use your game IDE to import the sprite sheet
          12. profit!

           

          I hope this helps someone. There may be a better way to do it, but hey, this way works. So until I learn of a better way to do it, I will just use this, and you are welcome to as well

           

          Thanks guys

          • 2. Re: Shape Tweened Line into PNG Sequence
            Nipun Asthana Adobe Employee

            You can use: File menu > Export > Export Movie.

            Choose the file type as PNG Sequence and proceed.

            It should export all the frames on your timeline as PNG files in a sequence.