Meeting Report: Animation for the Mobile Web

MarchUGMeetingIona Walters, Senior Solutions Consultant at Adobe, brought Animation for the Mobile Web to the March meeting and talked about Adobe Muse, the Adobe Edge family of applications and some of the complementary features recently added to Photoshop.

Introducing the Adobe Edge family Iona visited each of the five tools and two services. Starting with Edge Animate, which enables you to create standards compliant interactive and animated content using HTML, CSS, and JavaScript.

Edge Reflow creates responsive designs and high-fidelity prototypes through media query breakpoints, allowing easy importing of design and assets from Photoshop.

Code content and applications with HTML, CSS, and JavaScript using Edge Code preview, a code editor is specifically designed to work with other Edge Tools & Services. Edge Inspect, allows developers to preview and inspect web designs on mobile devices using synchronous browsing and remote inspection, to grab screenshots from all connected devices with a single button click.

PhoneGap Build builds mobile apps with HTML, CSS, and JavaScript in the cloud targeting iOS, Android, Windows Phone, Blackberry, and webOS devices building apps with web technologies. It enables easy compilation, access to native APIs, support for multiple platforms, quick deployment cycles, direct app installation, web inspector remote (weinre) integration, collaborative projects, support channels, documentation and tool integration.

Completing the Edge family of applications and services are the free web fonts provided by Edge Web Fonts, and the premium font service of Typekit.

Iona demonstrated the Photoshop Generator feature which creates image assets in real time, eliminating the tedious steps of copying, slicing and exporting each layer manually, saving hours of time.

Presenting Adobe Edge Animate Iona showed how quick and easy it is to create animations from multiple image and sound assets, publishing settings in HTML, CSS, and JavaScript and/or exporting to InDesign or Adobe Muse. During this demonstration Iona showed how to make an image move along a motion path with the orientation of the image following the path.

Using perspective warp in Photoshop, including other images from Photoshop and a sound track Iona created an animation of a train moving into the scene toward the viewer, growing in size and correct perspective, with audio to enhance the overall effect – in just a very few minutes.

Iona’s tutorials on Adobe Edge tools, Photoshop Generator, Adobe Muse and Kuler can be found at