using edge animate to create a reusable component set

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

Adobe PresentationJoseph Labrecque | Using Edge Animate to Create a Reusable Component Set

1


Joseph Labrecque

Senior Interactive Software Engineer | Adjunct FacultyUniversity of Denver

Proprietor | OwnerFractured Vision Media, LLC

Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer

Author Packt Publishing | O’Reilly Media | Lynda.com | video2brain | Adobe Press | Peachpit

ArtistAn Early Morning Letter, Displaced | shivervein

2


Joseph’s Edge Animate Publications

3


What we’ll be covering today

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

4


EDGE ANIMATE


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

6


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

7


COMPONENTCREATION


Components?

Components are self-contained bits of code and assets which enable specific functionality across an application. Buttons Lists Sliders Inputs Widgets

9


Notable Component Structures

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

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.

11


Component Creation Overview

Major steps to component creation:1. Plan out functionality2. Plan design in support of that functionality3. Asset creation4. Edge Animate Symbol creation5. Wire up assets with interactivity6. Expose variables for customization7. Optionally integrate external data8. Distribution

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.

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

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”);

15


LIVE DEMO:FLASH PROFESSIONAL

16


EDGE ANIMATECOMPOSITIONS


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

18


Composition Symbol Structure

Symbols in Animate have their own Stage and Timeline.

Similar to How Flash Professional MovieClipSymbols have their own Timeline.

Symbols can have nested logic and assets.

Animate Symbol Stage Events: creationComplete() beforeDeletion()

19


Composition Symbol Properties

Width / Height Overflow: Visible Hidden Scroll Auto

Autoplay Instance: Scale Resize

Min / Max Width

20


LIVE DEMO:ANIMATE SYMBOLS

21


CREATINGCOMPONENTS


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…

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

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!

25


Using Custom Components

1. Drag an instance onto the Stage2. Give it an instance id3. Invoke sym.getSymbol(‘id’)4. From here… you can… Invoke functions Modify variables Target elements

26


LIVE DEMO:CREATE A BUTTON

27


ADVANCEDCOMPONENTS


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

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?

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.

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

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!

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);

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.

3. Once finished, manipulate the component in such a way that it is fed the ingested data and exposes it through the Animate composition.

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.

36


Don’t 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…

37


LIVE DEMO:ADVANCED EXAMPLES

38


COMPONENTLIBRARIES


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.

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 :)

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

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

43


FURTHEREXPLORATIONS


Resources and Links

Edge Animate Component Libraryhttps://github.com/josephlabrecque/EdgeAnimateComponentLibrary

Joseph’s Books & Videoshttp://josephlabrecque.com/books/

Lynda.comhttp://www.lynda.com/

EdgeCommonshttps://github.com/simonwidjaja/EdgeCommons

45

https://github.com/josephlabrecque/EdgeAnimateComponentLibrary

http://josephlabrecque.com/books/

http://www.lynda.com/

https://github.com/simonwidjaja/EdgeCommons


Thank You

Get in touch…

Twitter: @JosephLabrecqueEmail: [email protected]: http://JosephLabrecque.com/

Flash… HTML5… either way…À votre santé!

46

http://josephlabrecque.com/


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.

47

using edge animate to create a reusable component set

Technology

adobe confidential

adobe systems incorporated

adobe creative cloud

edge animate compositions

animate components

edge code edge

edge tools

animate symbol libraries