Adobe Edge Animate: Using Web Standards to Create Interactive Websites

Adobe Edge Animate: Using Web Standards to Create Interactive Websites

by Simon Widjaja

Paperback

$39.95

Product Details

ISBN-13: 9781937538255
Publisher: Rocky Nook
Publication date: 12/28/2013
Pages: 232
Product dimensions: 8.00(w) x 10.00(h) x 0.60(d)

About the Author

Simon Widjaja is a creative programmer, author, and IT trainer, as well as an experienced Flash developer and Edge designer. He lives in Cologne, where he works with his team developing new Edge extensions such as sound, CMS integration, and adaptive layouts. Simon regularly publishes news, tutorials, and videos on Adobe Edge at edgedocks.com, Adobe TV, and Weave magazine.

Table of Contents

1 Introduction 4

1.1 What This Book Is About 5

1.2 Moving Target: Open Web Standards 6

1.3 Web Animations: Status Quo 7

2 Authoring Tool Adobe Edge Animate 10

2.1 User Groups 10

2.1.1 (Web) Motion Designers, Interface/Interaction Designers, Web Designers, Former Flash Designers 11

2.1.2 Graphic/Print Designers Who Want to Expand Their Web Design Services 11

2.1.3 E-Publication Producers 11

2.1.4 Web Designers and Developers 12

2.2 Applications and Workflows 13

2.2.1 Edge Animate Banners 13

2.2.2 Edge Animate for Storytelling 13

2.2.3 Edge Animate on Mobile Devices 14

2.2.4 Edge Animate and DPS 14

2.2.5 Embedding Edge Animate in Other Pages or CMS 14

2.3 Download and Installation 15

2.4 User Interface 16

2.4.1 Getting Started Panel 18

2.4.2 Tools Panel 18

2.4.3 The Stage 19

2.4.4 Property Panel 20

2.4.5 Elements Panel 20

2.4.6 Library Panel 21

2.4.7 The Timeline 22

2.4.8 Workspace 25

2.4.9 Keyboard Shortcuts 25

2.5 Hello Edge Animate! 25

2.6 Edge Animate Runtime Basics 27

2.6.1 System Requirements 27

2.6.2 HTML & Co 28

2.6.3 A Solid Foundation: jQuery 29

2.6.4 The Result and Runtime 30

2.6.5 How Code Behaves in Edge Animate 31

27 Supplementary Tools 32

2.7.1 Design Tools and Image Editing 32

2.7.2 Code Editors and IDEs 34

3 Creation 40

3.1 Starting From Scratch (Blank Document) 40

3.2 Elements and the Library 43

3.3 Starting With an HTML Document 45

3.3.1 Animating in Edge Animate 47

3.4 Basic Properties 47

3.4.1 Position, Size, and Opacity 47

3.4.2 Changing Properties With Control Points 49

3.4.3 Display Property 50

3.4.4 Overflow 51

3.4.5 Cursor 53

3.4.6 Shadows 54

3.4.7 CSS Filters 58

3.4.8 Clipping 59

3.4.9 Gradients 60

3.5 Nesting and Symbols 61

3.6 Exporting and Reusing Symbols 63

3.6.1 Templates 64

3.7 Additional Element Properties 67

3.7.1 Stage 67

3.7.2 Basic Shapes 67

3.7.3 Text 69

3.7.4 Image 70

3.7.5 Symbol 71

3.8 Custom Fonts 72

3.8.1 Google Fonts 72

3.8.2 Adobe Typekit 73

3.8.3 Embedding Fonts in Edge Animate 76

3.9 Flexible Layouts 77

3.9.1 Relative Values (Percentages) 78

3.9.2 Minimum and Maximum Width 79

3.9.3 Arranging Elements Flexibly 79

3.9.4 Presets for Flexible Layouts 80

3.10 Lessons 82

3.10.1 Flexible Banners for Different Resolutions 82

3.10.2 Independent Layouts for Different Screen Sizes 85

4 Animation 92

4.1 The Timeline 92

4.1.1 Keyframes 92

4.1.2 Other Timeline Functions 96

4.1.3 Playback 96

4.1.4 Modifying Already-Created Animations 97

4.2 Non-Linear Animation-Easing 97

4.3 Path Animations 100

4.4 Symbols and Their Timelines 102

4.4.1 Symbols 102

4.4.2 Reusing Symbols 104

4.4.3 Independent Timelines 104

4.4.4 Controlling Timelines With Playback Actions 105

4.4.5 Controlling Timelines With Script Statements 107

4.5 Lessons 109

4.5.1 Banner Animation 110

4.5.2 Asynchronous Animation and Playback Actions 111

4.5.3 Symbols and Control Through Script 115

4.5.4 Character Animation With Sprite Sheets 118

5 Interactivity and Scripting 126

5.1 Simple Logging 126

5.2 Events 128

5.2.1 Responding to Events 129

5.2.2 User Events 132

5.2.3 Composition Events 134

5.2.4 Timeline Events 135

5.2.5 Symbol Events 135

5.2.6 System Events 136

5.3 Context of Events 137

5.4 Symbols and Elements 138

5.5 Actions 140

5.5.1 Code Snippets 140

5.5.2 Controlling the Timeline 141

5.5.3 Calling a URL 143

5.5.4 Accessing Symbols 143

5.5.5 Accessing Elements 146

5.5.6 Modifying Elements 148

5.5.7 Dynamically Creating and Deleting Symbols 151

5.5.8 Working with Symbol Variables 152

5.5.9 The sym Argument 153

5.6 Code Panels 154

5.7 Edge Code and Brackets 156

5.8 Lessons 158

5.8.1 Buttons 158

5.8.2 Interval Updates Without Timeline (Edge Clock) 162

6 Publishing 170

6.1 Preparations 170

6.1.1 Posters 170

6.1.2 Down-Level Stage 172

6.1.3 Preloader 173

6.2 Export and Settings 174

6.2.1 Web Profile F 174

6.2.2 Animate Deployment Package Profile 176

6.2.3 iBooks/OS X Profile 177

6.3 Lessons 177

6.3.1 Publishing Compositions With FTP 177

6.3.2 Embedding Compositions in an HTML Website 178

6.3.3 Edge Animate and DPS 179

6.3.4 InDesign (DPS) 183

7 For Advanced Users 188

7.1 External Components 188

7.1.1 yepnope.js 188

7.1.2 Google Maps 190

7.1.3 Videos (YouTube) 191

7.1.4 jQuery UI Components 192

7.2 Wiring Multiple Compositions on One Page 193

7.3 Reusable Components 196

7.4 Edge Commons 199

7.4.1 Edge Docks 199

7.4.2 Loading Edge Commons 200

7.4.3 Logging 201

7.4.4 Spotlight Overlay (YouTube) 203

7.4.5 Parallax Scrolling 205

7.4.6 Composition Loader 205

7.4.7 Sound 208

7.4.8 Data Injection 208

7.5 Gaming 209

7.5.1 Edge Animate Project 210

7.5.2 Game Assets 210

7.5.3 Character Control 212

7.5.4 Hotspots 213

7.5.5 Game Logic 214

7.5.6 Conclusion 216

Index 218

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews