Timeline animation is still the most popular way to animate and Adobe has made it easier with the new Edge Animate motion paths, which can mimic real world movements and with built-in easing. You can easily add animation along the timeline with the Pin button which adds animation markers to the timeline or by drag and drop positioning of objects on the stage which Edge Animate automatically converts to motion paths. You can even use the Record button which records changes you make to the objects on the stage and converts these changes into keyframe animation. Edge also has its own version of the Actions panel, which is uncluttered with each action having its own tab in the panel. Testing your animations is easy with a combination of Adobe Edge and the Google Chrome browser.
Animation is only part of what you can do with the Edge group of apps. One of the most important aspects of web design is creating a website that is responsive or flexible for all type of screens from desktop to mobile phones. This is done with media queries and fluid, percentage-based grid layouts, both of which are part of the tools found in Edge Reflow. Edge Reflow is a WYSIWYG work environment that generates the code for your project. This code is up to date for the latest web standards, especially WebKit which is increasingly supported by everything from webpages to ebook readers.
Building a layout in Edge Reflow is as easy as drawing HTML div containers onto the grid with the Box tool and absolute positioning of these divs allows them to resize or transform as needed for each screen size. How does this work? The secret is Media Queries which you can customize within the Media Query Manager by setting the minimum and maximum parameters for three or more screen resolutions. These parameters will determine when the design will transform up or down for the nearest screen size. I really like the color-coded visual markers for each screen size at the top of the workspace which help you visualize when these changes will occur.
One of the most time-saving Edge features is how you can easily reuse your custom CSS3 styles over several projects and thus maintain consistent styles. This also makes updating almost automatic. Adobe has made this a part of your workflow with the Edge Reflow Styling panel. To keep things uncluttered, each style, such as backgrounds or borders, has its own individual section. You can control the color and other parameters, as well as the hierarchy of layers, directly from within these tabs. These customized styles are automatically converted into CSS style rules, which then can be copy/pasted for reuse.
In the past, to preview your webpage, you needed to save the changes, switch to a web browser and refresh the page. Adobe has reduced the number of these steps by using a combination of Edge Inspect and the Chrome browser. Now you can preview just how your project will display on multiple devices from desktop, tablet to mobile phone. One feature I really like is the ability to take a screenshot of these previews to email to clients and team members or use on Creative Cloud for collaboration.
Finally, for those of us who still like to work with raw code, Adobe has Edge Code. The code window is uncluttered with just a few controls on the left and Edge Code integrates with Google Chrome to give you a live preview. When your code becomes long and unwieldily, you can drill down to the individual element level by using the Quick Edit feature which lists all the styles attached to an element in a overlay window. Because the Edge apps are part of the Creative Cloud, you can use the Adobe Edge Web Fonts, Google Web Fonts and Typekit fonts directly from within Edge Code. Edge Code will generate the header script tag that pulls in the external font.
Disclosure: I was not financially compensated for this article. Adobe supplied a Creative Cloud membership for the purpose of this review. The opinions are completely my own based on my experience.
Join us in the Animation forum. | Join us in the Digital Art forum.