15 Replies Latest reply on Apr 14, 2015 3:12 PM by AshrafAziz

    Animate a Still

    AshrafAziz Level 1

      Hi everyone,

      Please find attached below a still which I would like to insert in my premiere pro cc 2014  project over a shot of a desert and the camera pans from left to right to give an effect of movement for the objects in the still. My question is how do I animate the objects in the still to appear as if they are walking and moving normally? Is Flash Pro CC 2014 the right application to accomplish this, would you help me please with the steps to animate it successfully?



      001b-1920x1080c_Saints Lights-3.jpg

        • 1. Re: Animate a Still
          Ned Murphy Adobe Community Professional & MVP

          You would need to do some detailed breaking up and editing to turn the still image into an animation of the characters walking along.  Each moving part has to be isolated as an animate-able object on its own timeline and they all have to be coordinated both individually and with each other to simulate walking.  You could create just one sequence of steps and repeat that sequence.

          • 2. Re: Animate a Still
            AshrafAziz Level 1

            Thank you Ned for your help. I would be grateful if you can mention the steps I should take to isolate the moving parts to turn them to animate able objects, and the coordination is very important as you mentioned. Unfortunately I know Premiere Pro much better than Flash. Thank you anyway for taking the time to respond to my inquiry. God bless.

            • 3. Re: Animate a Still
              Asymetrical Adobe Community Professional

              It's pretty complicated... you would have to redraw the character so the shepherd's foot was separate from his calf and calf separate from his thigh and bicep separate from his forearm and forearm separate from his hand. The torso would be separate form the neck and the head.


              Then all those assets would be placed on separate layers and you would rotate them using Tweens to simulate a walk which should be about 20 frames. Then you'd place ALL those layers inside a symbol called Shepherd and have it cycle on the time line.


              THEN, finally you would tween that symbol across the screen so it appears they're walking across it.You'd do the same for the camel and also for Mary. Honestly for something like this, it's far easier to just hand draw out all the poses needed.


              I attached an example of what I mean as well as another file of that same character with all his pieces separated.

              Dropbox - Woodrow-walk.fla

              Dropbox - Woodrow-puppet-seperated.fla

              1 person found this helpful
              • 4. Re: Animate a Still
                AshrafAziz Level 1

                Thank you very much Asymetrical, you are great. I appreciate your time in preparing and sending those files. I found after a lot of search a talented italian woman who explained the process in a very wonderful way divided by several videos such as this one: Flash Tutorial Easy: lesson 5 - Walk Cycle (ENG) - YouTube , I'll be able to do it with the help of the Lord.  "Where is a will, there is a way" Thank you once more.

                • 5. Re: Animate a Still
                  Ned Murphy Adobe Community Professional & MVP

                  There are a couple of ways to go about generating the individual parts - both could/will end up being time consuming. 


                  1 .Drag the still image on stage and with it selected choose Modify -> Break Apart.  If you click on it at this point you will see the whole image is selected as if it were a single fill area.  You can now either take the eraser tool and start erasing around the parts, or you could use the lasso/selection tools to outline the parts, and then with the part isolated/selected choose Modify -> Convert to Symbol (choosing graphic or movieclip).


                  2. Drag the still image on stage and with it selected choose Modify -> Bitmap -> Trace Bitmap... there are setting for this that you will need to fiddle with.  What it will do it redraw the image as a vector image where if you click on it you will see that only the colored section you click on is selected.... so select the color areas that make up a specific part and choose Modify -> Convert to Symbol (choosing graphic or movieclip)


                  The second approach is usually better for images with large distinct color areas, such as a GIF  I have a feeling you might want to try the first approach with the image you show.


                  Another approach to this would be to recreate the graphic using Flash drawing tools, drawing directly over the image on separate layers.  You end up with a somewhat different looking image due to the vector drawing but the individual moving parts are clearly defined as because you can recreate each one separately.

                  • 6. Re: Animate a Still
                    AshrafAziz Level 1

                    You guys are great, thank you Ned.

                    • 7. Re: Animate a Still
                      AshrafAziz Level 1

                      Hi Ned and Asymetrical,

                      I tried the following based on your valuable thoughts and explanations :

                      I used the lasso tool in photoshop to define and  isolate each part of the characters in the picture and placed them in a newly opened photoshop Gif

                      For each part mentioned above I created a new layer in my new photoshop Gif

                      Now my picture is composed of 20 layers

                      I imported those layers to Flash

                      I am starting from here to build the animation

                      But I am facing some problems in changing the center of each symbol according to the movement which I want to create, also it is difficult to coordinate the ups and downs of the donkey's (front and back) with the natural movement of the St.Mary and our Lord riding the animal.

                      Do you have something to say to  help me regarding the smooth coordination of all the characters movements together?

                      Thank you very much.

                      • 8. Re: Animate a Still
                        Ned Murphy Adobe Community Professional & MVP

                        I can only say forge ahead brave soul.  The more realistic you try to make this the more intricate it will be to realize.

                        • 9. Re: Animate a Still
                          Asymetrical Adobe Community Professional

                          When changing the center pivot you have to change it on the first frame of a symbol and then it will stay where you placed it. It does NOT remember it's location on straight art on the stage. You need to place the art in a symbol for that to happen. Setting up a character for animation is tricky for sure. I don't think you'd need to separate Mary and the donkey because since she's riding ON him , she should move with him instead of on her own. All you really need to separate is Joseph's head, body and arms, from his legs which can be under his tunic, and the the donkey's legs from it's body. That's about it.

                          • 10. Re: Animate a Still
                            AshrafAziz Level 1

                            Thank you Asymetriacal for your advice, I discovered by trial and error during the last few days many interesting things regarding the separation process. First, I had to study the walk cycle pattern of a donkey (or a horse) and I found a very helpful video: Animating Horse Walk Cycle - YouTube then I had to recolour the characters to match the tone of my cinematic shot in the desert (which after animation I have to overlay the Flash file over that PrPro footage and rescale it) also I had to solve the problem of Joseph legs under his tunic and the question was how to make it appear as a normal human walk, I drew it again, and I am currently working on it. The challenge of this special clothing made it harder to animate similar to a walk of a man who wear modern cloths.

                            I am happy that you and Ned showed a lot of concern God bless you.

                            • 11. Re: Animate a Still
                              AshrafAziz Level 1

                              Hello again,


                              I could make some improvements (as per the attached reduced size file), the animation is not very accurate but I believe I can manage to do it with some more practice. The problem now, I couldn't find a way to transfer all symbols into one symbol so that I can place that single symbol over a jpeg, rescale and make it move from right to left. Is there an easier way to transfer this animation to move over a .jpeg or to be over-layed with Premiere pro cc 2014??

                              Many thanks in advance.





                              • 12. Re: Animate a Still
                                Asymetrical Adobe Community Professional

                                Hey I saw this on the beta forums and thought you might be able to use this piece of software but it looks like you figured it out yourself! Nice job! here's the link anyway.

                                Creature Animation: Automated 2D Skeletal Animation Tool

                                As for copying and pasting the work you did into a symbol you can click drag over your entire timeline and select all the key frames and layers, then right click on them and select copy frames. then create a new symbol and once it's open right click on the timeline again and select paste frames. you now have all the frames inside a symbol and you can go back out to your main stage and delete the layers there. then go to your Library and drag the new symbol onto the stage.. it will loop after you go up to the Control menu and select Loop Playback.

                                • 13. Re: Animate a Still
                                  AshrafAziz Level 1

                                  Thanks God. I finished the job successfully from A to Z.

                                  Asymetrical, thank you anyway, I figured out by myself the answer to every question I posted the other day. 

                                  • 14. Re: Animate a Still
                                    Ned Murphy Adobe Community Professional & MVP

                                    I saw your animation that you posted and you did an excellent job with it.

                                    • 15. Re: Animate a Still
                                      AshrafAziz Level 1

                                      Thanks Ned.