1 2 Previous Next 72 Replies Latest reply on Nov 14, 2013 3:40 PM by batson3000

    Animated GIF control?

    Dam4222 Level 1

      Hi,

       

      I have imported an animated GIF into my project and I was wondering if there was a way to control its playback? I dont want it to play upon loading the composition. I want it to play when I tell it to.

       

      Thanks for your help.

        • 1. Re: Animated GIF control?
          TimJaramillo Level 4

          Hi Adam- the short answer is no.

           

          If you want to control playback of an animation in Edge Animate, rather than using a gif animation, you should create a symbol with a nested png sequence, or a symbol with a nested spritesheet. In the current Edge build 1.0, you will have to manually create the keyframes for the playback with these two methods (unless you use John Dunning's nifty Fireworks plugin. Look under "Exporting animations as Edge symbols": http://johndunning.com/fireworks/about/EdgeAnimate.)

           

          Then you can control playback of this symbol as you like.

          • 2. Re: Animated GIF control?
            Dam4222 Level 1

            Hey Tim,

             

            Thanks so much for the quick response. I guess what I really meant to ask was, if I want to bring in an animation I created in lets say After Effects...is there a way to bring it into Adobe Edge Animate and use it. For example, lets say a create a particle explosion using after effects. I could export that as an MOV or a PNG sequence and use is somehow in edge? Let me know if you have an ideal workflow for this.

             

            Adam

            • 3. Re: Animated GIF control?
              TimJaramillo Level 4

              Hey Adam, if you need to control the animation's timeline, I would reccommend this workflow to get an animation from AE to Edge:

               

              1) export png sequence from After Effects

              2) install the mxp for John Dunning's FW->Edge export plugin (http://johndunning.com/fireworks/about/EdgeAnimate)

              3) create a multi-state document in FW with each of your pngs in a different state

              4) export the animation from FW as an Edge symbol (should you export as spritesheet or png sequence? Spritesheets requires less hits on the server, but if the spritesheet is too big, it won't show up on low memory devices like iPad1, iPhone4. Png sequences cost a lot of hits on the server, but if your animation is small, probably won't exceed the device's memory)

              5) import the new symbol into Edge (how to: http://www.youtube.com/watch?v=3O7WGFtmT58)

               

              If you don't have a recent version of FW, you can manually set keyframes for the png sequence (new image each keyframe) or spritesheet (new position each keyframe). In this case, I'd probably run a javascript setTimeout timer, to change the values through code, rather than laboriously setting each keyframe on the timeline.

               

              Here are the instructions from John Dunning's post for the FW/Edge workflow:

               

              Exporting animations as Edge symbols

               

              In addition to exporting a Fireworks document as an Edge project, you can export a multi-state document as an Edge animation symbol. The animations can be exported as either a series of PNGs or a single sprite image.

              When you run the Edge Animate > Export as Edge PNG Animation command, you'll be asked to select a directory where the animation will be saved. Each state in the Fireworks document will then be exported as a 32-bit PNG, as long as its Include when exporting option is checked. The PNGs are added to a timeline, separated from the previous frame by the delay time set in the Fireworks States panel. (To change the delay, double-click the number to the right of the state name and enter a delay in 1/100ths of a second.) The PNGs and the timeline code are then bundled together into an .ansym file, which is what Edge Animate uses to store symbols externally.

              The Edge Animate > Export as Edge Sprite Animation command works similarly, but the animation frames are stacked horizontally in a single wide image. The image is clipped to show a single frame's width of the sprite, and itsbackground-position property is animated to show one frame at a time. The advantage of the sprite export is that the animation makes just one http request when pre-loading the image, vs. one for each frame in the PNG export. But the very wide images that are created might pose problems in some browsers.

              Once the animation is exported, you can click the + button in the Symbols section of Edge Animate's Library panel and select Import Symbols.... In the resulting dialog, select the .ansym file that you exported from Fireworks.

              The looping setting in the States panel controls how the exported animation behaves. The default is Forever, but you can change it to one of the other options in the menu.

              • 4. Re: Animated GIF control?
                Dam4222 Level 1

                Hey Tim,

                 

                Thats fantastic, I think I figured it all out. Cant wait to see how far I can push this using the tools I know so well in After Effects. I will share as soon as its complete.

                 

                Adam

                • 5. Re: Animated GIF control?
                  TimJaramillo Level 4

                  Cool, have fun!

                  • 6. Re: Animated GIF control?
                    Dam4222 Level 1

                    Hey Tim,

                     

                    One last question.

                     

                    I have imported a PNG sequence from After Effects into Fireworks. It started out at 30fps. Now when I export from Fireworks as a PNG Animation, the animation looks choppy. Anyway to improve that?

                     

                    Also, when I tried the spritesheet, i got this error.

                    Screen shot 2012-11-06 at 11.10.37 AM.png

                     

                    Adam

                    • 7. Re: Animated GIF control?
                      heathrowe Most Valuable Participant

                      Regarding the fps, in Fireworks you need to set the frame rate via the States > Panel Options context menu (via properties)

                       

                      See below

                       

                      Darrell

                       

                      capture-0164.jpg

                      • 8. Re: Animated GIF control?
                        Dam4222 Level 1

                        Hey Tim,

                         

                        I followed the steps above and it still plays really choppy inside of Edge and in the Browser. Would a Sprite sheet work better? When I tried to export the spritesheet I got the error in my post above. Thanks so much for all your help.

                         

                        Adam

                        • 9. Re: Animated GIF control?
                          TimJaramillo Level 4

                          Hey Adam, after your png sequence is in Edge, what is the interval between the keyframes for the pngs?

                          • 10. Re: Animated GIF control?
                            Dam4222 Level 1

                            Hey Tim,

                             

                            It looks like its every 00:00.300

                             

                            Adam

                            • 11. Re: Animated GIF control?
                              TimJaramillo Level 4

                              Now we're getting somewhere. That means that in Edge, there's a new png every .3 of a second, so I'd double check the frame rate of your states in FW- check to make sure you didn't put 3, instead of 30 for the frame rate.

                              • 12. Re: Animated GIF control?
                                Dam4222 Level 1

                                Hey Tim,

                                 

                                So I checked Fireworks and it correctly displays 30/100 sec. But that makes me think.... If 30/100 is .3 wouldnt I want to plug in 3000/100 = 30? Let me know if that makes any sense at all?

                                 

                                Adam

                                • 13. Re: Animated GIF control?
                                  TimJaramillo Level 4

                                  Wow, that's pretty confusing- I'd prefer the good old "30fps"!

                                   

                                  I'd try 300/100, since you want 10x more frequency than you currently have.

                                  • 14. Re: Animated GIF control?
                                    Dam4222 Level 1

                                    Hey Tim,

                                     

                                    I thought about that more. The way Fireworks seems to be treating it is the duration of each frame = .3 when set to 30/100 secs. When it plays back in edge it plays at one frame ever .3 seconds. We need it to play 30 of those frames in 1 sec.

                                     

                                    So we actually need to speed this up. Maybe if I do .3/100 (fireworks doesnt let that happen)...

                                     

                                    Maybe, Sara can chime in?

                                     

                                    Adam

                                    • 15. Re: Animated GIF control?
                                      TimJaramillo Level 4

                                      Hey Adam, this page has some good info on frame rate in FW:

                                      http://www.dummies.com/how-to/content/how-to-adjust-animation-playback-in-fireworks-cs5.ht ml

                                       

                                      You can preview the animation in FW- try tweaking the frame rate until it looks good when previewing in FW.

                                      • 16. Re: Animated GIF control?
                                        Dam4222 Level 1

                                        Hey Tim,

                                         

                                        So it looks like setting it to 1 is that best I could do. Its still not perfect. Do you think using the Sprite sheet is a better solution? have you seen the error I spoke about before?

                                         

                                        Adam

                                        • 17. Re: Animated GIF control?
                                          Dam4222 Level 1

                                          Hey Tim,

                                           

                                          I was playing around with this a little more and here is what I figured out...

                                           

                                          Edge has alot of trouble processing frames at 30fps as does the browser. Im not sure about the technical reason why it has such a hard time. But I did figure out a solution to my problem regarding choppy playback. In After Effects, instead of rendering out my animation at 30fps, I did it at 60fps (I would even try at high as 120fps), this allowed edge the opportunity to process more of the frames and create a smoother animation.

                                           

                                          Here is the workflow:

                                           

                                          1) From After Effects render out your PNG Sequence at 60fps or higher.

                                          2) Load PNG sequence into Fireworks.

                                          3) Set the States delay for all images to about 3.

                                          4) Export PNG Animation using John Dunnings Plugin.

                                          5) Import Symbol into Edge. Edge may say that it crashed, just save and then reload. Your symbol should appear in your library ready to use and smoothly animating.

                                           

                                          Adam

                                          • 18. Re: Animated GIF control?
                                            TimJaramillo Level 4

                                            Nice, thanks for sharing Adam!

                                             

                                            I'm curious- with the FW states delay set to 3, what does that translate to in terms of keyframe frequency in Edge?

                                            • 19. Re: Animated GIF control?
                                              Dam4222 Level 1

                                              If the state delay is set to 3/100 secs then the keyframe frequency is 1 frame every .3 seconds.

                                               

                                              Adam

                                              • 20. Re: Animated GIF control?
                                                Dam4222 Level 1

                                                Hey Tim,

                                                 

                                                I wanted to post one more time on this subject. Overall it seems edge has alot of trouble with PNG sequences. I cant get anything to play as smooth as I see it in After Effects. Not sure what will be one about this in the future but for now, the complexity of what Flash was able to accomplish in terms of animation seems to surpass what Edge currently has available.

                                                 

                                                Adam

                                                • 21. Re: Animated GIF control?
                                                  TimJaramillo Level 4

                                                  Hey Adam, what is the pixel dimension of your pngs? And how long is your sequence?

                                                  • 22. Re: Animated GIF control?
                                                    Harvid 22

                                                    Hey Adam

                                                     

                                                    How do you "Load PNG sequence into Fireworks."

                                                    • 23. Re: Animated GIF control?
                                                      Dam4222 Level 1

                                                      Hey Tim,

                                                       

                                                      The dimensions were 1920 x 1080. I assume that is too big?

                                                       

                                                      Adam

                                                      • 24. Re: Animated GIF control?
                                                        Dam4222 Level 1

                                                        Hey Havid,

                                                         

                                                        You need to to open Fireworks click File> Open> select all the PNGs > at the bottom of the dialog box chang it to Animation. It should load all the images in the sequence for you. Be sure to change the state length to something around 3. Though I have not found a perfect way to import this all into Edge yet. It seems to lose frames in the animation and it looks choppy.

                                                         

                                                        Adam

                                                        • 25. Re: Animated GIF control?
                                                          TimJaramillo Level 4

                                                          Hey Adam,

                                                           

                                                          What are your target devices for this project? Desktop, tablet and mobile?

                                                           

                                                          If you're targetting mobile and tablet, png sequences at 1920x1080 are definitely way too big for any mobile and most tablets. This has to do with memory of the device, see this post: http://stackoverflow.com/questions/6725851/image-size-limitations-in-mobile-safari

                                                           

                                                          It might be ok on desktop, but your file size is going to go through the roof.

                                                           

                                                          If your'r targetting desktop only, you might also want to look at using the video tag, and using video instead. Your file size will be much smaller. (Though video doesn't play nice on iOS- I think by default it goes fullscreen).

                                                          • 26. Re: Animated GIF control?
                                                            Dam4222 Level 1

                                                            Hey Tim,

                                                             

                                                            Yea this is for a project that requires a 1080 x 1920 screen. Basically a vertically positioned television screen. I am creating a "touch like" interface using the browser.

                                                             

                                                            Adam

                                                            • 27. Re: Animated GIF control?
                                                              TimJaramillo Level 4

                                                              Hey Adam, sounds like you're building a kiosk-type experience? If so, I would look into video and the <video> tag.

                                                               

                                                              Check out Schrene's post on embedding video at this link:

                                                              http://forums.adobe.com/message/4352262

                                                              • 28. Re: Animated GIF control?
                                                                Dam4222 Level 1

                                                                Hey Tim,

                                                                 

                                                                Thanks alot. Sounds like a great option for me. Do you think load times will be really bad?

                                                                 

                                                                Adam

                                                                • 29. Re: Animated GIF control?
                                                                  TimJaramillo Level 4

                                                                  Your load time will be a lot smaller using compressed video, rather than png sequences. This is thanks to video compression, which carries over pixels that don't change from frame to frame. With png sequences, you don't benefit from that optimization.

                                                                   

                                                                  That being said, 1080x1920 is very large, so the file size will be relatively large. You also might run into processor chugging issues with video that large. One option may be to save/target the video at half size, then scale up the video object 2X with code, (I used to do this when importing video to timeline of Flash all the time, for the same reason- smaller file size, less processor drain).

                                                                  • 30. Re: Animated GIF control?
                                                                    Dam4222 Level 1

                                                                    Thanks Tim I will try it an let you know!

                                                                    • 31. Re: Animated GIF control?
                                                                      Dam4222 Level 1

                                                                      Hey Tim,

                                                                       

                                                                      So I tried the technique you suggested. I cant seem to figure out how to drop is into the background though. Can you have a look at my project and let me know what you think?

                                                                       

                                                                      See here: https://dl.dropbox.com/u/9159616/web.zip

                                                                       

                                                                      Adam

                                                                      • 32. Re: Animated GIF control?
                                                                        TimJaramillo Level 4

                                                                        Hey Adam, when I test your file in-browser, I'm getting 2 errors:

                                                                        1. Uncaught TypeError: Cannot read property 'tween' of undefined

                                                                        2. Uncaught TypeError: Cannot read property 'symbolData' of undefined

                                                                        These errors are fired even when I remove the video code you added. Are you seeing these errors in your browser's js console?

                                                                         

                                                                        Regarding the video z-index, if you're having trouble setting it via javascript, you can also create a symbol in Edge at the bottom of the stack, and append your video to that bottom symbol. Heathrowe posted a good example of appending a video object to an existing Edge symbol:

                                                                        http://forums.adobe.com/message/4157203

                                                                        • 33. Re: Animated GIF control?
                                                                          Dam4222 Level 1

                                                                          Hey Tim,

                                                                           

                                                                          Got it working! Thanks so much for your help. If I want a video to play on button click instead of load is there a good may to do that? Can it also carry transparency?

                                                                           

                                                                          Adam

                                                                          • 34. Re: Animated GIF control?
                                                                            TimJaramillo Level 4

                                                                            Hey Adam,

                                                                             

                                                                            I don't think any current html5 video codec supports alpha transparency for video.

                                                                             

                                                                            To control video playback  with a custom button, you can paste the below click function into your compositionReady event (assuming you have a button called "btnPlay":

                                                                             

                                                                            sym.$("btnPlay").click(function() {

                                                                                 var v = document.getElementsByTagName("video")[0];

                                                                                 v.play();

                                                                            });

                                                                             

                                                                            Reference:

                                                                            https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video

                                                                             

                                                                            Here's the vid embed code I'm using, based off heathrowe's example I posted earlier. Note that I removed the autoplay attribute, as well as the conrols attribute.

                                                                             

                                                                            var vid = $("<video width='352' height='155'>" +

                                                                               "<source src='http://www.w3schools.com/html5/movie.mp4' type='video/mp4' />" +

                                                                               "<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +

                                                                               "This browser is not compatible with HTML 5" +

                                                                            "</video>");

                                                                             

                                                                            // stage symbol lookup, and append the above vid object to it;

                                                                            // in other words, get the div called 'vidHolder' and attach the video control to it;

                                                                            sym.$("vidHolder").append(vid);

                                                                            vid.attr('preload','auto');

                                                                            • 35. Re: Animated GIF control?
                                                                              Dam4222 Level 1

                                                                              Hey Tim,

                                                                               

                                                                              Thanks again for your help with this. If I cant use transparency then this probably wont work. One last question...how do I get rid of the video controls that overlay the screen when I move the mouse on top of it? See the image below at the very bottom.

                                                                               

                                                                              Screen shot 2012-11-27 at 6.53.49 PM.png

                                                                              • 36. Re: Animated GIF control?
                                                                                TimJaramillo Level 4

                                                                                Hey Adam, remove the "controls" attribute from the video tag embed, and it should remove the controls on rollover.

                                                                                • 37. Re: Animated GIF control?
                                                                                  Dam4222 Level 1

                                                                                  Hey Tim,

                                                                                   

                                                                                  When I do that, the background starts as Black. Its not until I press one of my buttons that the Background activates. Anyway to autoplay without having to do that?

                                                                                   

                                                                                  Adam

                                                                                  • 38. Re: Animated GIF control?
                                                                                    TimJaramillo Level 4

                                                                                    Ya, I removed the "autoplay" attribute in my example, since you wanted a button to initiate play. If you want the vid to autoplay, you can put the autoplay attribute back in.

                                                                                     

                                                                                    In my example above, you can add it here:

                                                                                     

                                                                                    // stage symbol lookup, and append the above vid object to it;

                                                                                    // in other words, get the div called 'vidHolder' and attach the video control to it;

                                                                                    sym.$("vidHolder").append(vid);

                                                                                    vid.attr('preload','auto');

                                                                                    vid.attr('autoplay','true');

                                                                                    • 39. Re: Animated GIF control?
                                                                                      Dam4222 Level 1

                                                                                      Hey Tim,

                                                                                       

                                                                                      I tried to do that and here is what the code looks like:

                                                                                       

                                                                                      var background = $("<video width='1080' height='1920'>" +

                                                                                         "<source src='/Users/adamperlis/Documents/PROJECTS/Lab/ANIMATIONS/BG.mp4' />" +

                                                                                         "This browser is not compatible with HTML 5" +

                                                                                      "</video>");

                                                                                       

                                                                                       

                                                                                      // stage symbol lookup, and append the above vid object to it;

                                                                                      // in other words, get the div called 'vcontainer' and attach the video control to it;

                                                                                      sym.$("vcontainer").append(background);

                                                                                       

                                                                                       

                                                                                      // additional options for the video object

                                                                                      background.attr('autoplay','true');

                                                                                      background.attr('preload','auto');

                                                                                      background.attr('loop','true');

                                                                                       

                                                                                      I end up getting a screen that looks like this and only once I click on one of the buttons will the animation begin.

                                                                                       

                                                                                      Screen shot 2012-11-28 at 11.56.51 AM.png

                                                                                      1 2 Previous Next