Using Edge Animate to Create a Reusable Component Set

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe Presentation
Joseph Labrecque | Using Edge Animate to Create a Reusable Component Set
1

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 | O’Reilly Media | Lynda.com | video2brain | Adobe Press | Peachpit
Artist
An 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

COMPONENT
CREATION

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 functionality
2. Plan design in support of that functionality
3. Asset creation
4. Edge Animate Symbol creation
5. Wire up assets with interactivity
6. Expose variables for customization
7. Optionally integrate external data
8. 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 ANIMATE
COMPOSITIONS

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 MovieClip
Symbols 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

CREATING
COMPONENTS

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 Stage
2. Give it an instance id
3. Invoke sym.getSymbol(‘id’)
4. From here… you can…
 Invoke functions
 Modify variables
 Target elements
26

LIVE DEMO:
CREATE A BUTTON
27

ADVANCED
COMPONENTS

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

COMPONENT
LIBRARIES

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

FURTHER
EXPLORATIONS

Resources and Links
Edge Animate Component Library
https://github.com/josephlabrecque/EdgeAnimateCo
mponentLibrary
Joseph’s Books & Videos
http://josephlabrecque.com/books/
Lynda.com
http://www.lynda.com/
EdgeCommons
https://github.com/simonwidjaja/EdgeCommons
45

Thank You
Get in touch…
Twitter: @JosephLabrecque
Email: Joseph.Labrecque@du.edu
Web: http://JosephLabrecque.com/
Flash… HTML5… either way…
À votre santé!
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. 47

Using Edge Animate to Create a Reusable Component Set

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Using Edge Animate to Create a Reusable Component Set

Similar to Using Edge Animate to Create a Reusable Component Set (20)

More from Joseph Labrecque

More from Joseph Labrecque (20)

Recently uploaded

Recently uploaded (20)

Using Edge Animate to Create a Reusable Component Set