Adobe Presentation

Joseph Labrecque | Using Edge Animate to Create a Reusable Component Set

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Joseph Labrecque
Senior Interactive Software Engineer | Adjunct Faculty University of Denver Proprietor | Owner Fractured Vision Media, LLC Adobe Community Professional Adobe Education Leader Adobe Certified Expert Adobe Certified Educator Adobe Influencer Author Packt Publishing | OReilly Media | Lynda.com | video2brain | Adobe Press | Peachpit Artist An Early Morning Letter, Displaced | shivervein
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Josephs Edge Animate Publications

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

What well be covering today

Edge Animate Overview Historical Component Creation Animate Composition Anatomy Creating Simple Components Advanced Components Component Libraries Resources

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

EDGE ANIMATE

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Edge Tools and Services

Free to use at some level Part of the Adobe Creative Cloud Built from scratch for creative HTML, CSS, and JavaScript Includes the following:

Edge Animate Edge Code Edge Inspect Edge Reflow Edge Web Fonts / Typekit PhoneGap Build

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Edge Animate

New tool for motion and interactivity Based upon standard web technologies Precise animation tools Web font integration CSS Filters and Gradients Motion Paths Symbols Mobile friendly

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

COMPONENT CREATION
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Components?

Components are self-contained bits of code and assets which enable specific functionality across an application.

Buttons Lists Sliders Inputs Widgets

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Notable Component Structures

Many, many, many Flash Libraries Web Templates Adobe TopCoat Twitter Bootstrap Foundation Flat UI Apache Flex The Shadow DOM

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

10

Component Creation in Animate

Components are just Symbols! How you think about them and how you wire them up matters a great deal. They can be as simple or as complex as you want.

Could be a simple button. Could be a complex nested widget.

Fully sharable via Animate Symbol Libraries and Templating.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

11

Component Creation Overview

Major steps to component creation:
1. 2. 3. 4. 5. 6. 7. 8.

Plan out functionality Plan design in support of that functionality Asset creation Edge Animate Symbol creation Wire up assets with interactivity Expose variables for customization Optionally integrate external data Distribution

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12

Familiar Component Creation Example

Flash Platform Tooling:

Component creation in Flash Professional is very similar to approaches in Edge Animate :) Skills are easily transferable.

We will:

Create a Button with 3 states and the ability to set a custom label. Examples using Flash Professional first then transfer this modal to Edge Animate. Also see a complex component in Edge Animate.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

13

Authoring Component Parts

MovieClip Symbol

Button skin

Up Hover Down

Dynamic label text object Actions Layer to stop() the Timeline Labels Layer to set state

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

14

Wiring Up Interactivity
Force familiar button behavior:

Set buttonMode and useHandCursor to true Set mouseChildren to false

Event listeners for Up, Over Out, and Down

Corresponding functions to handle each event and jump to a specific label for each:
this.gotoAndStop(Hover);

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

15

LIVE DEMO: FLASH PROFESSIONAL

2013 16 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

EDGE ANIMATE COMPOSITIONS

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

About Animate Compositions

Much like Flash content, Animate compositions can be used to create any number of projects:

Web Animations Web Banners Web Interactives Mobile Assets (PhoneGap) Simple Games Widgets

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

18

Composition Symbol Structure

Symbols in Animate have their own Stage and Timeline. Similar to How Flash Professional MovieClip Symbols have their own Timeline. Symbols can have nested logic and assets.

Animate Symbol Stage Events:

creationComplete() beforeDeletion()

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

19

Composition Symbol Properties

Width / Height Overflow:

Visible Hidden Scroll Auto

Autoplay Instance:

Scale Resize

Min / Max Width

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

20

LIVE DEMO: ANIMATE SYMBOLS

2013 21 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

CREATING COMPONENTS
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Creating a Simple Button Component

Simple Button* has:

3 different button states

Up, Hover, Down

Label which can be changed per-instance Will scale upon resize

*of course you may define as many states as desired

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

23

Generate Component Parts

Components almost always include the following parts:

Skins / Image Assets Layout / Motion Interaction Logic

Can also include:

Sound External Data Property Exposure

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

24

Exposing Parts for Manipulation

Simple Button States:

Timeline Labels: Up, Hover, Down Map to Mouse Events:

mouseup, mouseout, mousedown, mouseover

Jump to Timeline Labels to switch state. label is a Text Box exposed within the Symbol for outside manipulation. Easy!

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

25

Using Custom Components

1. 2. 3. 4.

Drag an instance onto the Stage Give it an instance id Invoke sym.getSymbol(id) From here you can Invoke functions Modify variables Target elements

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

26

LIVE DEMO: CREATE A BUTTON

2013 27 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

ADVANCED COMPONENTS
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Creating an Advanced Component

Going beyond things like; Button, List, Scroller, Accordion, ToggleButton, et cetera.

Nested parts with isolated events Presentation of many data pieces Communication between Symbol instances Data injection from the parent Stage Tap into remote data APIs

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

29

Composition Setup
Important considerations before getting too far in the development of our component

Will this be a responsive layout? Is it better to resize, or scale? Set defaults for layout When should the component initialize? What properties/methods may be exposed?

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

30

Component Parts
When building a small widget in Animate we will want all of these tasks to occur internal to that component Symbol.

Makes it easily accessible. Makes it infinitely distributable. Contains all aspects of the component within itself.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

31

Using jQuery in a Component

jQuery is already part of Edge Animate!*

Why use jQuery?

Already available within the composition Mature library Familiarity Cross-browser support Great JSON support via AJAX!

(Using Twitter JSON results)

*jQuery 1.x not the new 2.x

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

32

Integrating External Data

Load in data using

JSON XML Other data transport formats

Twitter Public Search APIs

Lots of web services have nice APIs to tap into which server as JSON or XML We are going to use Twitter Pull @ mentions into a component!

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

33

Load up the JSON

1.

Expose a method to the parent Stage which allows method invocation (and passing of args):
loadTweets("@EdgeAnimate", 7);

2.

Use jQuery to import the JSON via the getJSON() method:

$.getJSON(dataURL + '&callback=?', function(data) {}

3.

We can easily view the results in Chrome:

console.log(tweetArray);

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

34

Parse and store the JSON

1.

Instantiate a container array to store our data:

var tweetArray = new Array();

2.

Create a function to loop over the results and build up internal data structures based upon these results. Once finished, manipulate the component in such a way that it is fed the ingested data and exposes it through the Animate composition.

3.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

35

Generate Objects/Styles/Content from Data

We can do this in a number of ways

Change the text within a Text element Adjust CSS properties w/ jQuery Adjust Animate properties like location, scale, and transform. Even generate additional instances of component parts through nested symbol duplication.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

36

Dont forget to ANIMATE!

Hey! We are building these things in an animation program, after all

Animation adds life into what might otherwise be a dull experience. Subtle animation is often the best animation.

but sometimes crazy stuff is what catches attention.*

It all depends upon the project and the intended audience.

*Just as with Flash content be careful when doing crazy stuff a lot of power here

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

37

LIVE DEMO: ADVANCED EXAMPLES

2013 38 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

COMPONENT LIBRARIES
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Edge Animate Libraries and Symbol Files

Animate Symbols can be exported from the Library via right-click menu. These .ansym files can be imported into additional projects. When imported, they retain Symbol structure and contents. Anything on the main composition Stage is not carried over with Animate Symbol files.

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

40

Edge Animate Templates

Templates are persistent across projects. Templates, much like Animate Symbol Libraries, are distributable. We can include any amount of functionality we desire within a Template.

Templates with a formed Stage. Templates with basic Library exposed. Templates which demonstrate component usage :)

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

41

Sharing Component Sets

There are a number of ways to share these components once they have been created and tested:

Zip up the Animate project Save the entire composition as a Template Save individual Symbol components as Animate Symbol Libraries

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

42

Distribution Platforms
There are many private and public platforms which can be used to distribute these component sets:

GitHub BitBucket DropBox SkyDrive Google Drive Adobe Creative Cloud Local Network

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

43

FURTHER EXPLORATIONS
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Resources and Links

Edge Animate Component Library
https://github.com/josephlabrecque/EdgeAnimateCo mponentLibrary

Josephs Books & Videos http://josephlabrecque.com/books/ Lynda.com

http://www.lynda.com/

EdgeCommons
https://github.com/simonwidjaja/EdgeCommons

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

45

Thank You
Get in touch Twitter: Email: Web: @JosephLabrecque Joseph.Labrecque@du.edu http://JosephLabrecque.com/

Flash HTML5 either way votre sant!

2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

46

Take the SESSION

SURVEY on the MAX COMPANION app

for your chance to WIN one of these e-books from Adobe Press

Every survey you submit enters your name to win the daily grand prize an Apple iPod Nano.
2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

47