Adobe Edge: Working With an Existing Web Page
basixvideos

Adobe Edge: Working With an Existing Web Page

on Aug 24th 2011 with 7 comments
Tutorial Details

One aspect of Adobe Edge to have so far been overlooked is its ability to take elements on an existing web page and put them into motion. We’re going to look at doing just that, using a Themeforest template as our guinea pig.

Watch Screencast

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.croftmedia.co.uk/ Greg

    Great tut. Really cool to see that Edge can interact so well with a webpage.

  • http://twitter.com/drale2k Drazen Mokic

    Edge looks very promising, i am curious how the outputted code does look like?

    • http://www.snaptin.com Ian Yates

      If you check out Tom’s Introduction to Edge, or Siddharth’s introduction over on Nettuts+, you’ll get a fair idea :)

    • Techeese

      not very pretty for sure

  • Pingback: Adobe Edge: Working With an Existing Web Page | Shadowtek | Hosting and Design Solutions

  • http://heroicpixel.com Al

    Do the element you plan on animating need to be initially set as position absolute in css for edge to be able to work? He is animating in this tut by manipulating the x and y axis and mentions its because its set in the css.

    How would this work if you just floated your objects to position them?

  • Pingback: Adam Krone | Musings on Graphic, Web, and Sound Design

  • Entry

    Thanks for the preview of edge. This is a cool way to easyly animate things without programming.

  • http://alldesignstudio.com Eva

    Thank you for great tutorials, I was able to take an existing page and animate a few elements easily . However I already have some jQuery script on my page and the additional animations are not smooth, not sure if there is a loading/stacking order of the javascript that would help the animations to be smoother? The animations seem to get stuck stop then start again. I really hope this project goes further, I really like the interface it’s easy and I would love to be able to use on my clients websites.