6 Replies Latest reply on Sep 7, 2010 4:32 PM by Sean Saratoga

    After Effects animations to web page workflow?

    Sean Saratoga

      Up Front Disclaimer: This is a newbie question.

      I work with video in Premiere and AE, and have a short form web serial I'm developing that is pretty heavy on the effects. I want to put up a teaser webpage that is animated and interactive, and am looking for resources that can help translate some of what I do in AE to a form I can upload on to a webpage.

      My brother will be helping me on this, and he has a decent understanding of most of the coding (css, html, javascript, etc.) that will be needed, however he is a bit out of practice.  And this site I want is not a straightforward project.  So, I am hoping someone can give me a realistic assessment of the work ahead, and suggestions of where to look for any resources available to help us get there.  (Are there equivalent Dreamweaver websites to all the great After Effects tutorial and resource sites?)

      I've uploaded a video mock-up on to Vimeo:  http://vimeo.com/14656631


      Viewed full screen is close to want I am after for the webpage.  So, I am trying to achieve the following.

      1.  A full screen background of stars drifting across a night sky.  This should loop as well.

      2.  Transparent text that reacts as the stars flow behind it.  Right now the background casts a bluish glow, flickers some, and the stars glow a bit brighter under the text.

      3.  The same text will burst into flames when touched by the mouse (mouse-over)  and wipe on from point of contact.  I've wiped the bottom from one side, the top from the other direction in the video as an example.

      4.  The bottom text (numbers) will be a countdown clock (days, hours, minutes, seconds) and would like the effects to continue even as the numbers scroll down.

      5.  The blue star or atom in the middle should react as the mouse closes in on it, expanding outward and larger the closer the mouse gets to it.

      6.  There will be a couple static images or animations that will materialize prompting a click-through to our secondary page, but the above is our main and first focus.

      7.  Is this possible?


      Easy for a pro, difficult for an amateur?

      Can the filters and effects be used live on the page, or will it all have to be rendered out and timed in?

      Should the design be simplified because the above will be impossible or too resource intensive?


      Okay, hopefully some of you can answer a few of these questions, point us in the right direction, and/or give us advice on this project!

      Thanks, Sean

        • 1. Re: After Effects animations to web page workflow?
          bemdesign Level 4

          This seems like a perfect project for Flash. But you'll want someone with I'd say 5+ years of Flash design/development with lots of Actiosncript 3 knowledge and a good understanding of animation/tweening classes. Easy for a Pro, extremely difficult for an amateur.

          • 2. Re: After Effects animations to web page workflow?
            Sean Saratoga Level 1

            Thanks for the feedback, bemdesign.


            It looks like we will be seeing what we can do to get close to what I want without needing all the elements to behave like a layered AE project.


            We'll see if anyone chimes in with some ideas.



            • 3. Re: After Effects animations to web page workflow?
              pziecina Level 6



              What you wish to do can be done, but as you said -

              Easy for a Pro, impossible for an amateur! (and quite possibly very difficult for many pros).


              The other problem is that you would require the latest versions of all browsers, (and the adobe svg plug-in for IE < 9, which unfortunately I think has been withdrawn).


              As I have indicated this could be done using svg, but as IE < 9, does not support svg, these browser would be a problem. If it was just an animation it could be done using javascript, but you indicate that you wish this to be a background, which means that you would be placing 'content' on top of this?


              Another possibility is to use css3 transitions or canvas, but again these are not supported by IE < 9, and would require a javascript or flash 'fall-back'.


              All that taken into consideration, flash, (as previously suggested) may be a better option but as also previously said this would also require a good working knowledge of actionscript. However it IS much easier to incorporate your current affter effects animations into flash than it would be to 'recode' into svg or javascript. The main problems with using flash are seo and accessibility.


              No matter which you choose, it will not be easy, but with flash you would be able to use much of the affter effects animations, and with svg many examples are now available to help, (some I have seen over the last few months even have similar effects to what you wish).



              • 4. Re: After Effects animations to web page workflow?
                Sean Saratoga Level 1

                Thanks PZ!


                I'll forward all suggestions and ideas to my brother.  He's trying to get caught up, so I appreciate having a few areas to point him to.  I am drafting several levels of ambition with this project, so also good to know what the upper limits are.


                We are having some luck with the starfield background.  I think the other compenents, and their interactivity, will rise (or drop) according to what we can get to work for us.  As we move forward I will probably have some more specific questions to problems that pop up.


                Thanks again,


                • 5. Re: After Effects animations to web page workflow?
                  akribie Level 2

                  Exporting in swf from AE and then building interactivity on top in Flash is probably the most productive way ahead.  Being able to set Flash to scale automatically to full screen can also be useful for your sort of application.


                  What you want can probably be done without serious scripting, so the learning curve should be short and easy.


                  Probably best to post queries in the Flash forum for further detail in that area.


                  You might also want to look at Universe from http://www.diardsoftware.com/ to make background star fields easily.

                  • 6. Re: After Effects animations to web page workflow?
                    Sean Saratoga Level 1

                    Thanks, akribie.


                    We are heading towards Flash for the project.  Luckily there are lots of resources for us on here and elsewhere.  We are cautiously optimistic that we can build something that is simple, cool, and can serve our purposes.  Then we can build from there as needed.


                    I appreciate the responses.