Post your Edge Animate animations

Adobe Edge Animate has made its way onto my entire site. Every header area has a little animation.

http://www.motioncity.com (Be sure to click on the tickets)

http://www.motioncity.com/contact (Responsive header with some animation)

http://www.motioncity.com/web-development/web-sites

Hi Elaine

I've been working with Edge since its first preview and I just wanted to share this workflow with you and the community.

For my opening page. I wanted to reveal the tree branch with a more organic feel using a scrolling mask-effect, rather than using the clipping tool.

So I devised a technique for this effect.  It is rather lengthy, but it works for what I needed. I am hoping that eventually Edge team can create a tool that will facilitate this work around technique.

I created rectangles and ellipses of various sizes to block out the tree branch, which is on the background layer.

I animated one section at a time and then synced them to flow evenly.

For this to work the rectangles are the same color as the background and their opacity is set to 100%. The artwork is totally covered.

Turn off auto-transition.

Advance one frame, choose the next shape and set its opacity to 0%, which automatically sets a new keyframe.

After the animation is completed, save and export the animated tree branch as a symbol so that it can be used in the composition without so many layers. It's like creating a pre-comp in After Effects."

For an example I created a little video just to show the process. It's crude (my first time creating an instructive video, but its a start:    http://www.liquestudionyc.com/tut/scrollingbranch.mp4

Is there a javascript that wld work better?

Pls share your feedback and suggestions.

Angelique

I quite like this project, so here you go:

http://www.guardian.co.uk/money/interactive/2012/dec/03/where-do-uk-expats-live

Its a bit of a chunky file. I'm looking forward to vectors

This is one of my first compositions:

http://mjpagedesign.com/testing2/

What do you think about this scene?

http://www.cavit.ro/index.php

Everything is made in Edge, starting with Edge Preview 6.

There are 5 animations if you click on objects marked as links.

Tomorrow I will add some nice tooltips and a new animation.

Sound is added using Soundmanager 2 library.

These 2 little games could be made also in Edge, I think, but we preffer to use just Java Script:

http://www.cavit.ro/joc-sesiune-foto.php

http://www.cavit.ro/joc-amintirile-lui-cavi.php

Bogdan

Love the games especially the last one. Really cute.

Thank you!

If you take a look on the JS source file it's very small and very modular. We can add in a minute new levels and background pictures. But this is not Edge so maybe this reference is useful here just as suggestion for somebody to implement them in Edge.

We want in the near future to make these games available for mobile devices and I think clean JS will be easy to integrate with platforms like Sencha Touch or jQuery Mobile.

Hi,

I like your games a lot. Very simple and fun. I'm working on something similar that has objects that animate if you click on them. Edge works on a timeline, so I was wondering, say for the facial hair game, if you were doing it in one Edge composition, would you need to create all of the combinations of facial hair arangments, and bring them in as PNGs? Or would you make 8 different Edge compositions for each part of the face? I'm kind of new without knowledge of code, and trying to do something simple and fun.

I'd like to incorporate audio too, but this will be going to InDesign 6 then to the IPAD. I'm guessing Soundmanager is just for HTML?

Jackson

Thank you Jackson. We are a team of four people who worked on this project, I am not alone.

We used PNG24 with transparency for each element of the facial arrangements, all images with the same width and height, like this.

You don't need to create combinations in Photoshop and then just change the image.

It's a hard work, maybe impossible, depends on the number of combinations.

If I would recreate the game in Edge I would use the same programming logic.

Some arrays with possible items for each layer over the blank face and keep the current idem, them cycle through them.

And from the right buttons I would change the source of the image on each Symbol.

Maybe each layer could be a Symbol or just an Element on Scene.

I have no experience with iPad app creation in InDesign 6.

I made some magazines in InDesign, but without sound or events based programming.

Regards,

Bogdan

Hi Edge Animate people - Happy new year !

http://houltonsmets.com/2013/

made this on Edge Animate

Cheers !!

Hi! We are working on presentation for our client using Adobe Edge Animate. You can check beta version here http://aiac.pl/kkg

Greetings from Poland :-)

OK, I don't know if I would call thi an "Inspiration" but here is the current project I've been working on.  It is almost complete!

The idea was to create a web banner for our new site that could almost "stand alone" as a way to describe ourselves.  The entire page was done in Edge, with most of the effort being put into the banner.

With the exception of fixing the end (to go back to the original image with a "Play again" button and some text and font changes), it is just about ready to go!

Then it's on to the rest of the website, also being designed within Edge!

http://higherpowered.com/edge/index.html

madumatt, I Love it!

Madumat, that animation is fun.

Plus, I won everytime I played so you have convinced me I need to gou to Las Vegas.

Hi,

Recently, I had to create a online portfolio website for my design business. At first I thought I would do just portions of it in Edge, and do the main job Dreamweaver... It worked the other way around -- Dreamweaver was used only to edit text boxes and few other minor things... Some of the effects surprised me... I did not expect that video and 3D rotate script will work this well when tagged in iframes. I tested it on Droid and iPad tablet -- no problems except for the moronic iPad not liking to input the code on Contact page (very minor issue and not related to Edge, but the general problem with Apple -- well know issue that Apple does not fix)

So, why is it that people are still using Dreamweaver, or Flash? I don't think I'll go back anytime soon...

http://www.bodytko.com/

I have been working with Edge Animate for a year now. I create birthday cards for friends and this is my latest one

http://www.liquestudionyc.com/Cards/bday/happyBday.html

Nice job, Pawel and madumatt!

http://infografika.aiac.pl

http://aiac.pl/kkg3

How about this? its for use in DPS, so tapping the ladybird, then the balloon goes to another DPS article (Thanks to Piotr Walczyszyn)

http://www.aq2.info/Top100/flowers_infographic.html

Hi, im working with EA and interactive graphics, and im new for this forums. Im learning js and EA day after day, so i want to show some little projects:

http://kikefrutas.com/kikefrutas_web/work/12paises/contaminacion.html

http://kikefrutas.com/kikefrutas_web/work/efecto_invernadero/index.html

and a little game (im working it)--> http://kikefrutas.com/kikefrutas_web/work/guacamole/guacamole.html

P.D. sorry for my english..

Hey everyone,

I recently finished my first Adobe Edge project 'Zero to Triathlete' - a side scrolling, interactive infographics site about the sport of triathlon. Check it out and let me know what you think!!

www.zerototriathlete.com

REALLY nice work, Jack. I went through the entire Zero to Triathlete presentation and never felt a lag, even on my slow home connection. Nice graphics too.