10 Replies Latest reply on Sep 14, 2014 9:25 AM by robdillon

    How to use imported paths from Photoshop/Illustrator as motion guides

    ToddAndChips

      Hi folks,

       

      I've been raking the internet with no success for an answer to my question, but I've had no luck so far.

       

      What I'm hoping to achieve animation wise is to have a shape move around a set path that was created in Photoshop. The reason being, it's a very specific shape (near enough a square but with curved corners and a chunk missing out of one of the sides), and I used the paths feature in Photoshop to create it and stroke the path for the smoothest possible effect. What I'd ideally like to do is import the same path I used to create the shape into Flash Professional CS6 and then use that same path to guide a small symbol around the edge of the square.

       

      So far, I've worked out how to apply motion to a symbol through basic tweens, and then I can draw out a line using the pencil tool and apply that to the tween so it follows the pencil line instead of just going from point A to point B. The problem is, this looks awful...I'm not good enough with a mouse to create absolutely perfect shapes freehand, so I just want to be able to use the Photoshop path as my motion guide instead of having to make another one from scratch.

       

      I've looked around for various importing methods, the most success I've had is exporting the paths to an Illustrator file, and then importing the Illustrator file into Flash directly. However, I have NO idea where these paths go when they're imported, or how to access them. If I import them to the stage, they seemingly disappear before I've even seen them, and if I import them to the library they just aren't there.

       

      I could also do with a brief description of how paths work in Flash - I'm familiar with the Photoshop layout, what with the paths appearing in a panel next to the layers one (makes perfect sense to me, as you can just switch between the two panels to view whatever you want). I just don't understand how they work in Flash and what I should be looking for....

       

      Many thanks in advance for any help!

       

       

      Todd

        • 1. Re: How to use imported paths from Photoshop/Illustrator as motion guides
          robdillon Most Valuable Participant

          1. In Photoshop, select the path in the Paths tab. Use the "Load Path as Selection" option at the bottom of the window.

          2. Go to the Layers tab and stroke the selection that you've made from your path.

          3. Create the rest of the illustration in Photoshop with each element in its own layer.

          4. Save the Photoshop file as a .ps file.

          5. In Flash, import the Photoshop file. You will get a new window with some options. DO NOT select "Flatten Photoshop layers...". In Layer conversion, select "Maintain editable paths and effects". In Text conversion, select "Editable Text". In Convert layers to, select "Flash layers.

          6. In the Flash timeline window you should see each of the objects from Photoshop in individual layers as it was in Photoshop. In the Library panel you will see a folder that contains all of the Photoshop elements.

           

          Here is a simple introduction to path animation: How to Animate along a Path in Adobe Flash CS6 - For Dummies

          1 person found this helpful
          • 2. Re: How to use imported paths from Photoshop/Illustrator as motion guides
            ToddAndChips Level 1

            Hi Rob! Thanks for the reply. I gave that a go but it's more or less what I was doing anyway, I'm still not sure where to find the equivalent of Photoshop paths when I'm in Flash though, and I think this might be part of the overall issue.

             

            Let me rephrase my situation, I think I could do a better job this time around:

             

            - I created a background in Photoshop with multiple layers, using a path to create a shape similar to a square with curved corners. I then used the "stroke path" option on a new layer to essentially cover the lines in the path layer with ink.

            - I imported the Photoshop document into Flash Professional CS6 - I kept all the layers separate, so I have the background fill colour, a few other decorations, some text, and the layer with the curved corners square on it in my Flash timeline.

            - I want to create a symbol in Flash and animate it so it follows the curved corners square around accurately, but without having to freehand draw in the guide on Flash using the pencil tool, because it's not accurate enough.

             

            Basically, I don't want to create a guide from scratch to animate my symbol around the set route...I want to use the same path that was created in Photoshop, import it to Flash, and apply that path to the guide function on Flash. I just can't work out where paths appear in Flash or what they're called in that program.

             

            I have Illustrator if that helps with the compatibility, I just need to get that path out of Photoshop and onto a layer in Flash which I can then use as a guide for animating my symbol.

             

            Thanks!

            • 3. Re: How to use imported paths from Photoshop/Illustrator as motion guides
              robdillon Most Valuable Participant

              Illustrator won't help. A path in Photoshop, a line that you draw with the pen tool, doesn't really have a corollary in Flash. In Flash the pen tool draws a line. The operation of the pen tool is very similar to Photoshop, but the output is treated differently.

               

              A guide in Flash is usually a line of some sort that has a beginning and an end. So a circle won't really work as a guide line because it has no ends. If you erase a part of the line, then it will work.

               

              So, if your existing path from Photoshop is a continuous shape, you'll have to cut out a small section.

               

              Does that help to explain the path in Flash?

              1 person found this helpful
              • 4. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                ToddAndChips Level 1

                Right, I think I'm starting to understand. So if I went into the Photoshop file and deleted one of the points, it would become a path from point A (the start) to point B (the end). Would this mean I could export that path from Photoshop and import it directly into Flash as a motion guide?

                 

                Do you happen to know what makes a motion path work? For example, does it have to be a shape or a symbol or something? I'm not sure how to convert symbols back into shapes (assuming shape is the correct term in Flash). I'm thinking I could duplicate the curved corner square in Flash, erase a part of it, then use that as my motion guide layer or something.

                 

                Sorry if it's frustratingly simple stuff but I taught myself as much as I could on Flash so there are some bits I missed along the way. Thanks very much for your help so far though!

                • 5. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                  Amy Blankenship Level 4
                  • I'm not sure what the nature of photoshop paths is (I can't comprehend the idea that anyone would find it useful as a vector tool), but even if you wind up with a Shape, you can use the ink bottle tool (in the same menu item as the fill tool) to put a line around it. Then you can delete the bits you don't want or edit it further with the pen, selection, and direct selection tools. You may also want to get familiar with Flash's other vector tools, which are pretty good once you understand them. For example, making a rounded rectangle in Flash is dead simple.
                  • It has to be a shape. If you have a symbol, break it apart (Ctrl-B). If there's another symbol inside, repeat and repeat until it's just a Shape. For more on creating and using Motion paths, see Animation Learning Guide for Flash: Motion paths | Adobe Developer Connection
                  • 6. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                    robdillon Most Valuable Participant

                    I just did a quick test to see where the problem might be. It seems that importing an outline from Photoshop into Flash gets converted to a movieClip. If I break apart the movieClip I just get a fill with no line. Unfortunately, that fill will not work as a guide. I could use the pen tool in Flash and draw a new line in a new layer, but that's what you're trying to avoid having to do.

                     

                    If I take a path in a saved Photoshop file into Illustrator, I can then stroke the path and then save that as an .ai file. Then I can import this into Flash. This imported stroked path is recognized as a line in Flash and will work as a path. You may have to do some cleanup of the line. My quick sample had way too many points in it.

                     

                    The guide path should be made of a line element in Flash. A movieClip cannot be a path. Most commonly, the path is drawn directly to the state using the pencil tool.

                    • 7. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                      Amy Blankenship Level 4

                      Rob Dillon wrote:

                       

                      I just did a quick test to see where the problem might be. It seems that importing an outline from Photoshop into Flash gets converted to a movieClip. If I break apart the movieClip I just get a fill with no line. Unfortunately, that fill will not work as a guide. I could use the pen tool in Flash and draw a new line in a new layer, but that's what you're trying to avoid having to do.

                      As I said in my reply, you can use the ink bottle tool to add an outline, then delete the fill and edit the remaining line. Maybe I typed too quietly

                      1 person found this helpful
                      • 8. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                        ToddAndChips Level 1

                        Awesome stuff, Rob, thanks a lot for the help mate! Much appreciated. Is there a way I can give you reputation points or anything for your assistance? I'm fairly new to this forum so I'm still learning my way around.


                        Amy, I appreciate your replies and opinion sharing, though we don't all have time to dilly dally around with various Adobe programs in an effort to find out which one has the best vector tool functionality. I use Photoshop because it's what I know, unfortunately talking in a smarmy manner won't change that for the time being. I didn't understand quite what you meant in a few cases, hopefully someone with more experience will benefit from this post, but I am new to Flash so a large chunk of it was just technical terms that went right over my head. I did hint rather massively early on that I was new to Flash, though maybe I typed too quietly. Smiley face.

                        • 9. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                          ToddAndChips Level 1

                          I had a play around with some variations of this. What I can't grasp is why Flash won't recognise my shape layer as a motion path. I've tried breaking it down, that doesn't work... I traced it narrowly in Photoshop and imported it as a thin line with a gap (so essentially a line with two ends), and it comes into Flash as a bitmap or something of that sort. I found an option that traces the bitmap, and appears to convert it into a shape layer...I've managed to find the optimal settings so the line is joined all the way through apart from the start and end points. The only thing is, Flash seems to not even notice this as a guide layer when I apply it to the symbol I'm trying to animate. It just doesn't even notice it's there. The object moves straight from point A to point B in a straight line, the guide layer does nothing to adjust the motion... Is it not possible for the traced line to act as a motion guide? It's a shape, it is a single line with a start point and an end point, and there are no other instances of anything else in the layer - just the line and nothing else.

                           

                          This seems way more difficult than it should be...I'm sure Adobe could have integrated a MUCH easier system for importing paths from Photoshop that actually exist in Flash rather than disappearing into some abyss instead!

                           

                          Here is a screenshot of what I'm working with: http://gyazo.com/4c1046767e1ee8bf99f65751b9ba81b8

                           

                          The long black oval is the shape I'm trying to animate. I've tried applying tweens to it while it's in shape form and while it's in every different symbol form, all to no avail.

                          The black line is what I'm trying to use as the guide. Having looked online, people seem to be able to just use the "paste in place" option and it somehow knows exactly what they mean and animates around the line perfectly. I tried that and it didn't work (no surprise there), and then I tried the motion guide layer setup and it also didn't work. I'm not sure if tracing a bitmap into a shape layer somehow removes any possibility of the line being recognisable as a line or something...could that be the case?

                           

                          Is there a simple way to turn a shape layer (in this case the black line) into a motion guide that I'm missing? I thought just turning the layer into a guide layer would do the trick, but obviously not :/

                          • 10. Re: How to use imported paths from Photoshop/Illustrator as motion guides
                            robdillon Most Valuable Participant

                            I sympathize completely with your frustration to get a seemingly simple thing to work as you expect. Flash at its base is a vector tool, something like Illustrator, but not the same. Flash would like to see any illustration as a succession of points connected by lines. Photoshop is a raster tool. It uses pixels to draw with. So, when you have a line or a fully shaded object in a layer in Photoshop and then import that into Flash, Flash sees only the pixels, it has no way to convert that back into points and lines. So to Flash this imported information is treated as a fill with no line information.

                             

                            The result is that there is no simple way to get Flash to recognize a raster line as a guide line. You can import Illustrator lines into Flash and they will work, usually. As I said earlier, you can take the Photoshop line into Illustrator and then stroke that, and import that .ai file into Flash.

                             

                            In looking at your line, I think that it will be simpler to just use the pen tool in Flash redraw the line that you have, and then use that.