Adobe Edge Creative Cloud Apps
HTML5, JavaScript and CSS3 have become almost as popular as Flash for creating interactive animation for the web, tablets and phones. AdobeR Edge Animate and the other Edge apps are very user friendly software with many presets to make your work easier.
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.
If you are familiar with Flash animation, you will notice that adding interactivity in Edge resembles the Flash workflow in that you can use nested timelines for each animation element and apply preinstalled code snippets for the most common interactions and animations. These code snippets handle both playback animation such as play, pause, resume and stop as well as create hot areas for the basic button actions such as click, hover and even hyperlinks. To add custom code to these code snippets, you can type directly into the Actions panel. Of course, you can hand-code your own HTML5, JavaScript and CSS3 in the Actions panel. Because this type of web and animation programming often relies on external JavaScript Libraries, you can even add links to these external sources.
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.
As HTML5, JavaScript and CSS3 are quickly replacing older animation techniques because of the popularity of mobile devices, these integrated Edge apps as well as their integration with the other Adobe apps are the next generation of the multiple device design and development workflow.
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.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
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.
If you are familiar with Flash animation, you will notice that adding interactivity in Edge resembles the Flash workflow in that you can use nested timelines for each animation element and apply preinstalled code snippets for the most common interactions and animations. These code snippets handle both playback animation such as play, pause, resume and stop as well as create hot areas for the basic button actions such as click, hover and even hyperlinks. To add custom code to these code snippets, you can type directly into the Actions panel. Of course, you can hand-code your own HTML5, JavaScript and CSS3 in the Actions panel. Because this type of web and animation programming often relies on external JavaScript Libraries, you can even add links to these external sources.
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.
As HTML5, JavaScript and CSS3 are quickly replacing older animation techniques because of the popularity of mobile devices, these integrated Edge apps as well as their integration with the other Adobe apps are the next generation of the multiple device design and development workflow.
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.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
