8 Replies Latest reply: Aug 16, 2014 9:25 PM by resdesign

Using After Effects PNG sequence in Edge Animate

RoRK2005 Jan 27, 2014 10:53 PM

I would like to incorporate an animation that I created in Adobe After Effects. I have rendered my work as a PNG sequence.

I have imported the sequence into Edge Animate.

I believe that the trick to making the PNG sequence play as intended, is to code the stage such that each element in Edge Animate plays for a specific duration, disappears and then the next element appears. This continues until the last element is played and then the stage holds this last element on the screen.

The big Q is - what's the code? Any help will be greatly appreciated.

- Roland

1. Re: Using After Effects PNG sequence in Edge Animate

resdesign Jan 28, 2014 5:06 AM (in response to RoRK2005)

You can use display on/off to get your sequence to work.
You could maybe import your png files into fireworks and then use the FW pluggin to insert into Animate.
http://johndunning.com/fireworks/about/EdgeAnimate
Like Show 0 Likes (0)

Actions
2. Re: Using After Effects PNG sequence in Edge Animate

darsh136 Jan 28, 2014 5:19 AM (in response to RoRK2005)

Like Resdesign said, the Fireworks plugin is a solution. I use it sometimes and it works great.
Like Show 0 Likes (0)

Actions
3. Re: Using After Effects PNG sequence in Edge Animate

RoRK2005 Jan 28, 2014 7:21 PM (in response to darsh136)

Thanks everyone - I ended up doing the sequencing, manually, in Edge Animate. It was pretty quick; using 'hold' keyframes for Opacityand then lots of copy-paste routines.

I'll certainly look at the options provided.

Bestest
- Roland
Like Show 0 Likes (0)

Actions
4. Re: Using After Effects PNG sequence in Edge Animate

resdesign Jan 29, 2014 7:12 AM (in response to RoRK2005)

Hey Roland,
Using opacity for sequencing is not the best way in my opinion. Display on/off is the better practice.

Another way is using a sprite sheet. See several tutorials:
http://www.youtube.com/watch?v=WH56K9r84-U
http://www.youtube.com/watch?v=rr-wt8-a_ec
http://www.youtube.com/watch?v=EMXLD_-8j5s
Like Show 0 Likes (0)

Actions
5. Re: Using After Effects PNG sequence in Edge Animate

RoRK2005 Jan 29, 2014 8:06 AM (in response to resdesign)

Thanks resdesign, I just tried it out - the result is identical with what I've done using Opacity KFs. Can I presume that using Display on/off results in smaller files sizes?

BTW, I'm having bringing my Muse page, with Edge Animate assets live. There's a huge disparity between what Chrome and FIrefox shows. Here's my work-in-progress page - http://www.broadcastgems.com/MoGraphIntensity_ShapesText_PreLoad/

Thanks
- Roland
Like Show 0 Likes (0)

Actions
6. Re: Using After Effects PNG sequence in Edge Animate

resdesign Jan 29, 2014 8:30 AM (in response to RoRK2005)

Awesome site! You should submit it for edgehero.com best of!

Works fine on Chrome, FF, Safari, and IE though I see a little difference in Chrome where last tab appears on the previous on a little.
Like Show 0 Likes (0)

Actions
7. Re: Using After Effects PNG sequence in Edge Animate

papas78 Aug 16, 2014 2:33 PM (in response to RoRK2005)

"You can use display on/off to get your sequence to work." Could you explain this in more detail?
thanks
-vagelis
Like Show 0 Likes (0)

Actions
8. Re: Using After Effects PNG sequence in Edge Animate

resdesign Aug 16, 2014 9:25 PM (in response to papas78)

Insert all your png files. Select the top image. In the left panel select display/on move the play-head to the right. Select display off. Keep the play-head at the same place. copy the 2 key-frames for the first image (on and off). Select the next image and do ctrl-v. This will copy the on/off frames for the second image and move the play-head. select the next image and do ctrl-v again. Do the same until all images have on/off. This should complete the animation. See second screen-shot where all the key-frames are shown.
Hopet this makes sense.
Like Show 0 Likes (0)

Actions