logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

Join us in the Animation forum. | Join us in the Digital Art forum.

|



Add Adobe+Edge+Creative+Cloud+Apps to Twitter Add Adobe+Edge+Creative+Cloud+Apps to Facebook Add Adobe+Edge+Creative+Cloud+Apps to MySpace Add Adobe+Edge+Creative+Cloud+Apps to Del.icio.us Digg Adobe+Edge+Creative+Cloud+Apps Add Adobe+Edge+Creative+Cloud+Apps to Yahoo My Web Add Adobe+Edge+Creative+Cloud+Apps to Google Bookmarks Add Adobe+Edge+Creative+Cloud+Apps to Stumbleupon Add Adobe+Edge+Creative+Cloud+Apps to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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.

g


g features
Duplicate Background Layers in Motion 5

Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor