8 Replies Latest reply on May 28, 2014 10:01 AM by resdesign

    How to import a png sequence into edge animate

    zontaluma Level 1

      All-

       

      I'm trying to import an image sequence into edge animate, no luck so far.

       

      I saw a plugin for fireworks that exports the sequence but all the comments state buggy results.

       

      I considered creating a sprite sheet but my animation is 800 x 600 so i'm not sure how to do this.

       

      I also imported 360 images but well, that just took too long and it' seems cray cray to put all those images on 360 individual frames.

       

       

      Any suggestions will be welcome

        • 1. Re: How to import a png sequence into edge animate
          joel_pau Level 5

          Hi,

           

          Well, i will use two tools:

          1. one classic a preloader,
          2. the other more recent requestAnimationFrame().
          1 person found this helpful
          • 2. Re: How to import a png sequence into edge animate
            Xoco Level 3

            Can you to share a little example of requestAnimationFrame()? thanks.

            • 3. Re: How to import a png sequence into edge animate
              zontaluma Level 1

              im not sure a preloader would work.  i want to load the png animation within the page when the user clicks a button.  i created a scrub bar for the user to cycle through the animation as well, therefore, it's paramount the animation is interactive.  i'm able to load html files into the site so perhaps i'll try using flash to animate the pngs and then load the html file

               

              btw, feel free to explain/show an example of requestAnimationFrame();

               

              seems like a terrible hack but im still wracking my brain

              • 4. Re: How to import a png sequence into edge animate
                heathrowe Most Valuable Participant

                Maybe a spritesheet sequence may work!

                 

                Here is a sample to create a sprite sheet from Flash Pro CC - Animating with Sprite Sheets in Flash CS6 « Layers Magazine

                And a followup to import that spritesheet into Edge Animate - SpriteSheets in Adobe Edge Animate « Layers Magazine

                 

                On a side note - why 360 images? What exactly are you attempting to do.

                 

                Darrell

                1 person found this helpful
                • 5. Re: How to import a png sequence into edge animate
                  tahneeg Level 1

                  It sounds like you're trying to load the PNG's as soon as a button is clicked, right? No preloading before that?

                  I don't have a lot of experience doing that but I can say that Flash is way less efficient at loading image sequences.

                  I've been experimenting with flash HTML vs Edge Animate and the load times were 10x quicker in EA for an animation sequence.

                  That sounds like a lot of bandwidth to be downloading at the click of a button, so I may suggest a preloader so all the frames are visible when clicked. (Depends on your project's goal, of course).

                   

                  I load in all my images onto the stage, turn off their visibility at frame 0, then one by one make them visible for 1/24th of a second (you can turn timeline snapping) and then off, as the next layer is turned on.

                  Tedious yes! Seems to be effective though.

                  Those are my 2 cents! I'm also curious about requestAnimationFrame().

                  Note: in EA3 for some reason the images do not load in sequence (01, 02, 03 etc) so you need to re-order them under Elements... not really worth it with 300 images o_o

                  1 person found this helpful
                  • 6. Re: How to import a png sequence into edge animate
                    zontaluma Level 1

                    so what im' trying to do is use an animation i created in Cinema 4D. 

                     

                    the animation is 3D and i want it to have a transparent background so i exported it as a png sequence with an alpha channel.  the reason for this is as follows

                     

                    the original idea was to have the 3D model as a interactive environment in Unity 3D but the amount of geometry is way too much to be viewed on the web.  so i created an animation .mp4 of the model rotating 360 degrees.

                     

                    i then imported the mp4 of the mp4 animation in edge via jquery video object. 

                     

                    problem 1- there's no way to render the background video object as transparent (at least i couldn't figure it out)

                    problem 2- the video controls don't allow "Scrubbing" of the video.  It's just play pause rewind fast forward.  My client requested the ability to scrub the animation to give the illusion of controlling the animation in 3D.  You can scrub the video in quicktime player but not in Edge Animate via jquery

                     

                    -importing all the png files into edge and creating and animation to control inside edge is out

                    -using the the jquery video object is out for now cause i can't figure out how to render the background colour transparent and i can't figure out how to simply create a "scrub" control to move the sequence.

                     

                    Right now i'm at a loss.

                     

                    sorry for being as a problem child.

                     

                    lol

                    • 7. Re: How to import a png sequence into edge animate
                      zontaluma Level 1

                      check reply to heathrowe for those who are interested

                      • 8. Re: How to import a png sequence into edge animate
                        resdesign Adobe Community Professional & MVP

                        How many images do you have and how big are they? i would think that you can add the png files in Animate and manually add the display on/off. You can do it for one image and then copy paste the diamonds on the timeline and then when you select the next image just use ctrl-V - since the playhead moves automatically it goes pretty fast.

                        Then you can control the timeline for scrubbing.

                        Hope this make sense.