Tag Archives: Edge Animate

Using Edge Animate to Create a Reusable Component Set

speaking

Presented at Adobe MAX in Los Angeles, CA on May 6th, 2013.

This session will examine the Adobe Edge Animate Symbol structure and demonstrate a number of ways to achieve functional results similar to ActionScript using jQuery and JavaScript APIs. Learn these valuable techniques from Joseph Labrecque, senior interactive software engineer at the University of Denver.

In this session, we will:

  • Provide an overview of the Edge Animate Symbol structure
  • Demonstrate how to accomplish “component” creation
  • Show how to reuse these components in projects

Slides:

Recording:

Adobe MAX is almost here… I’m Speaking on Edge Animate!

I’ll be happily speaking at Adobe MAX again this year on one of my favorite new topics: Edge Animate! Specifically: Using Edge Animate to Create a Reusable Component Set.


Title: Using Edge Animate to Create a Reusable Component Set

Description: This session will examine the Adobe Edge Animate Symbol structure and demonstrate a number of ways to achieve functional results similar to ActionScript using jQuery and JavaScript APIs. Learn these valuable techniques from Joseph Labrecque, senior interactive software engineer at the University of Denver.

In this session, we will:
• Provide an overview of the Edge Animate Symbol structure
• Demonstrate how to accomplish “component” creation
• Show how to reuse these components in projects

Location: Monday 3:30 PM – 511B

Track: Design and Creativity

Audience Type: Application Developer, Educator, Graphic Designer, Motion Graphics/Visual Effects Artist, Web Designer, Web Developer

Product Type: CSS, Creative Cloud, Edge Animate, Flash Professional, HTML5, JavaScript, jQuery

Register for Adobe MAX 2013

 

And be sure to check out my latest book – Learning Adobe Edge Animate!
Learning Adobe Edge Animate

Adobe Edge Tools Update

Adobe has released some pretty major updates to the Edge Tools and Services offering (as part of the Creative Cloud). This includes an update to Edge Animate, the first preview of Edge Reflow, and an updated Edge Code preview.

Edge Animate
Animate
In Animate, users will now be able to style and animate elements using radial or linear gradients using a totally redesigned color panel which allows the preservation of swatches within a project.  While the last update brought the ability to use Edge Web Fonts, we now have a new fonts panel which provides previews of any selected web font from the Edge Web Fonts service. Perhaps the most exciting new feature is the ability to use CSS filters within an Animate composition; blur, greyscale, sepia, brightness, contrast, hue-rotate, invert and saturate filters can now be added though a special panel.

I’ve recorded a short video demonstrating many of these features:

Edge Reflow
ReflowI first saw Reflow in action shortly before the Create the Web event last year. Being able to visually design responsive elements across custom breakpoints is not only extremely useful – but also quite fun. What I didn’t expect was how much I’d be using Reflow for non-responsive elements! When working with the application over the past few months – I’ve used it a lot in generating stylistic CSS code when taking advantage of gradients, rounded corners, box shadows, and other properties. Reflow provides a great little UI for designing such things whether using responsive layout or not. I’d be remiss to mention that it also has full integration with Adobe Edge Inspect as well!

I also have some Reflow video training which will be up on Creative Cloud shortly.

Edge Code
Edge Code is the Adobe-branded version of the Brackets project. New features in this updated preview include CSS code hinting, native menus, and core editor improvements for improved performance and usability.

I haven’t used this preview of Edge Code so do not have any resources to share :)

Speaking on Edge Animate at Adobe MAX!

I’ll be happily speaking at Adobe MAX again this year on one of my favorite new topics: Edge Animate! Specifically: Using Edge Animate to Create a Reusable Component Set.


Title: Using Edge Animate to Create a Reusable Component Set

Description: This session will examine the Adobe Edge Animate Symbol structure and demonstrate a number of ways to achieve functional results similar to ActionScript using jQuery and JavaScript APIs. Learn these valuable techniques from Joseph Labrecque, senior interactive software engineer at the University of Denver.

In this session, we will:
• Provide an overview of the Edge Animate Symbol structure
• Demonstrate how to accomplish “component” creation
• Show how to reuse these components in projects

Location: Monday 3:30 PM – 511B

Track: Design and Creativity

Audience Type: Application Developer, Educator, Graphic Designer, Motion Graphics/Visual Effects Artist, Web Designer, Web Developer

Product Type: CSS, Creative Cloud, Edge Animate, Flash Professional, HTML5, JavaScript, jQuery

Register for Adobe MAX 2013

Edge Animate Power Workshop – Free Videos

As with all of my publications with video2brain, there are a number of free videos that are made available through a number of distribution channels, including the video2brain website and YouTube. I have added all of these to my Edge Animate playlist for easy access. In all; 25 videos at nearly 2 hours of free Edge Animate content. Not a bad little resource.

Oh, and if you want the full 4.5 hour Edge Animate Power Workshop course; I have a 20% discount code for you! Coupon Code: EDGE20 is good through the 25th of January, 2013!

Included Videos:
Edge Animate Power Workshop Trailer
What Is Edge Animate?
Building the Composition Elements
Setting Up Symbol States
Constructing the Slideshow
Working with Edge Inspect