Upload
joseph-labrecque
View
4.002
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Adobe MAX 2013
Citation preview
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe PresentationJoseph Labrecque | Using Edge Animate to Create a Reusable Component Set
1
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Joseph’s Edge Animate Publications
3
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What we’ll be covering today
Edge Animate Overview Historical Component Creation Animate Composition Anatomy Creating Simple Components Advanced Components Component Libraries Resources
4
© 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
6
© 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
7
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENTCREATION
© 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
9
© 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”
10
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:FLASH PROFESSIONAL
16
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EDGE ANIMATECOMPOSITIONS
© 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
18
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Composition Symbol Properties
Width / Height Overflow: Visible Hidden Scroll Auto
Autoplay Instance: Scale Resize
Min / Max Width
20
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:ANIMATE SYMBOLS
21
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CREATINGCOMPONENTS
© 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…
23
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:CREATE A BUTTON
27
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ADVANCEDCOMPONENTS
© 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
29
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:ADVANCED EXAMPLES
38
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENTLIBRARIES
© 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.
40
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FURTHEREXPLORATIONS
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thank You
Get in touch…
Twitter: @JosephLabrecqueEmail: [email protected]: http://JosephLabrecque.com/
Flash… HTML5… either way…À votre santé!
46
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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