Try Tuts+ Premium, Get Cash Back!
Animating the Webdesigntuts+ Logo With Adobe Edge
basixvideos

Animating the Webdesigntuts+ Logo With Adobe Edge

on Aug 11th 2011 with 16 comments
Tutorial Details
  • Difficulty: Basix
  • Topic: Adobe Edge
  • Screencast duration: 13 mins
Download Source Files
Demo View It Online

Welcome back to another screencast featuring Adobe Edge, this time diving further into its animation capabilities. Read on to see what’s covered..

During these videos we’re going to look at migrating vector graphics from other applications, a couple of the tools, auto-keyframing, easing and various other UI elements. Having completed our animation we’ll then export it and take a look at the resultant code in Dreamweaver.

1. Animating the Webdesigntuts+ Logo

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

2. Wrapping Things Up

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://edwinhollen.com edwinhollen

    That is really neat. Edge looks promising and will, hopefully, allow developers to rely less on Flash.

  • http://jordanforeman.com/blog Jordan Foreman

    Great tutorial! I’m still not 100% sure about the div based animation, but it seems like a step in the right direction with the exodus away from flash that seems to be occurring in modern web development. I’ve been meaning to toy around with Edge a bit ever since it’s release, and now I have a good place to start!

  • http://www.croftmedia.co.uk/ Greg

    Cool tut, but I’m a bit confused at the generated Edge source. A lot of the animations seem to make no change (eg: moving an object from 242px to 242px) and the “eid”s (I assume “event id”) are out of order and missing loads of entries (there are eid5-7 but no eid1 or 2). Nothing to do with your animation, I just wonder what the Edge compiler is doing there.

    Also, is there a way of exporting Edge without it giving you all the HTML and JS files? Obviously, it’s pretty straightforward to just grab that animation JS, but does Edge provide any help?

    • Tom Green
      Author

      This is the way the app works and if you have issues with the files then do post your concerns at the Labs site.

      Also, there is no way of stopping the JS and CSS from being created. They are what makes the .edge file work and are kicked out when you save the file. Again, use the forum to voice your concerns.

  • Alan Gruskoff

    This demo url works fine in the iPad/Safari browser but only shows the background in my Android 2.2 phone browser.

    • http://larzconwell.com Larz Conwell

      And? HTML5 is still pretty new, not ALL browsers/devices are gonna support it right away. Also i think doing animations like this on a mobile browser would be a bad idea anyway.

      Also i find it kinda childish to play the iOS vs. Android game.

  • Pingback: Animating the Webdesigntuts+ Logo With Adobe Edge | Shadowtek | Hosting and Design Solutions

  • Tobias

    If you use PNG files instead of SVG it works much better across older browsers. I just ran into this and have to go back and replace all the imported vector files.

  • Brad

    Excellent tut. A good base to work from

  • http://efekphotoshop.com renra cikatos

    wow .. This is a design inspiration that is very wonderful for me. thanks a lot.

  • http://blog.info-betrained.fr betrained

    Good job and tutorial ! You first prepared the exercice in Illustrator : is there a way to export from AI and save the layouts ? (Like for instance PSD & AI with Flash CATALYST)

    Thanks.

    BEtrained

    • Tobias

      This is all beta, so you have to import individual elements. It’s a bit of a pain to use, it should get much better/easier in the upcoming revisions.

  • http://antriver.com Dinesh

    Loved it, opens wide range of opportunities for creating css3 animations. TFS

  • http://www.parallaq.com Parallaq

    Adobe Edge looks very promising. Great tutorial, but code is a little bit messy

  • Pingback: Pequeño tutorial para animar el logo de tu website! « DX – Town

  • http://www.webaddict.gr Emmanuel

    Very nice job,well done.
    I was wondering, if the graphics (logo or whatever else) are made in Photoshop do you have to use one layer for each letter of the typeface and export them one by one in Jpegs? Or only the SVG file type works?

    • Tom Green
      Author

      Actually it is your call. If I need transparency the 32-bit PNG or an SVG is the way to go. Just be aware that some mobile devices may have issues with SVG graphics.

      Unfortunately you can’t export a file and expect the layers to show up so exporting each letter is the only option. Fireworks makes this super easy thanks to its Export Layers as Files option.

  • Pingback: My Stream » Animating the Webdesigntuts+ Logo With Adobe Edge

  • explosionshurt

    I would prefer it if the timeline was more like Flash and less like After Effects, but it’s still good I guess.