Particle effects in Edge Animate

One of the most exciting perks of using Adobe’s Edge Animate is the seamless integration with new, exciting CSS features that I didn’t even know existed until exploring Edge Animate further. This tutorial shows you how to make a 3D particle effect, using just a few ellipses, no additional plugins and a special “blur” filter made accessible in Edge Animate and CSS3.

This tutorial explains how to utilise a number of features in Edge Animate, from creating shapes and manipulating them using filters, to grouping them as Symbols to move multiple elements quickly and efficiently, rather than tweening individual particles.

Once you’re done, you can use this as a background for a web-based gallery banner, and perhaps layer content between your new particles; or even as a full-screen background for your website, constantly moving slowly to give your design a really subtle yet dynamic feel!

What effects have you created in Edge Animate? What would you like to be able to build? Let us know in the comments.

Featured image/thumbnail, particle image via Shutterstock.

  • Ivo Mynttinen

    Edge is kinda nice for trying out something really quickly or to showcase a simple animation but everyone who cares about clean code should avoid using it. The output is worse than Word 95 html export.

    • FartAtTheMoon

      But, it’s got to be easier and quicker, right? I’m pretty anti-Adobe these days, but if this allows quick, easy motion graphics, then it would probably solve some specific needs. Is there so much extra code that it loads really, really slow like old-school Flash sites? Or just a wee bit slow?

      • Ivo Mynttinen

        If you are used to the app it’s absolutely faster than coding animations by hand. The code is seriously horrible, it’s not just some extra code, it’s MEGABYTES of extra code. If you are a professional you shouldn’t use this tool for live sites, only for presenting internal animations. If you want to use one of the animations on a live site, you should code them manually.

      • JS

        Have you even looked at the application? There’s not megabytes of code. If you’re adding megabytes of IMAGES that’s on you.

      • Ivo Mynttinen

        No it’s not images. It’s the usual crap code that is generated by wysiwyg editor.

      • LH

        You’re making assumptions; I’ve never seen megabytes of code generated by Edge Animate. Of course coding from scratch is much more efficient but your comments are not correct. I’m a professional code too but making comments based on the fact it’s a wysiwyg product, without clearly using it, is just going to make you look silly.

        I would much rather code from scratch too but I would not make comments to make me ‘look’ smart which actually make me look stupid and unreliable… Would love to see what project you’ve seen that kicks out megabytes of code alone.

  • j4kp07

    I feel like it’s 1995 and I just watched a video on “Flash and Sprites”.