Learning Adobe Edge Animate

Learning Adobe Edge Animate
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Master the Edge Animate interface and unleash your creativity through standard HTML, CSS, and JavaScript
  • Packed with an abundance of information regarding the Edge Animate application and related toolsets
  • Robust motion and interactivity through web standards
  • Those approaching Edge Animate from Adobe Flash Professional will find many references and tips for a smooth transition
  • A comprehensive guide for creating engaging content with Adobe Edge Animate.

Book Details

Language : English
Paperback : 368 pages [ 235mm x 191mm ]
Release Date : October 2012
ISBN : 1849692424
ISBN 13 : 9781849692427
Author(s) : Joseph Labrecque
Topics and Technologies : All Books, Other, Mobile, Web Development

Table of Contents

Chapter 1: Introducing Adobe Edge Animate
Chapter 2: Drawing and Adjusting Composition Elements
Chapter 3: Selecting and Transforming Elements
Chapter 4: Using Text and Web Fonts
Chapter 5: Importing External Assets
Chapter 6: Creating Motion Through the Timeline
Chapter 7: Interactivity with Actions, Triggers, and Labels
Chapter 8: Making Use of Symbols, Nested Elements, and Grouping
Chapter 9: Advanced Animation Techniques
Chapter 10: Publishing Edge Animate Compositions
Chapter 11: Further Explorations with Adobe Edge Animate
  • Chapter 1: Introducing Adobe Edge Animate
    • The history of Adobe Edge Animate
    • The inner workings of Edge Animate
      • HTML, CSS, and JavaScript
        • HTML
        • CSS
        • JavaScript
      • How jQuery is used in Edge Animate
      • JSON
      • The Adobe Edge Animate Runtime
    • Adobe Edge Animate and Adobe Flash Professional
      • Is Edge Animate a competing product to Flash Professional?
      • Comparisons with Flash Professional
        • Stage
        • Timeline
        • Keyframes
        • Labels
        • Symbols
        • Library
        • Actions
    • Installing Adobe Edge Animate and getting started
      • Installing Edge Animate
      • The Edge Animate welcome screen
      • Creating a new Edge Animate project
        • Save
        • Save As…
      • File structure in the Edge Animate project
        • Edge includes
      • Application interface overview
        • The application window
        • Customizing the Edge Animate panel layout
        • Managing workspaces
        • The Edge Animate application menu
        • The Edge Animate toolbar
        • Panels in Edge Animate
      • Adobe Edge Animate keyboard shortcuts
        • Keyboard Shortcuts dialog
      • Adobe Edge Animate menu items
        • File
        • Window
        • Help
    • Summary
    • Chapter 2: Drawing and Adjusting Composition Elements
      • Adobe Edge Animate drawing tools
        • Background Color and Border Color
        • Rectangle tool
        • Rounded Rectangle tool
        • Ellipse tool
      • Drawing elements upon the Stage
        • The Selection tool
        • Working with the Rectangle tool
          • Using the Rectangle tool
        • Working with the Rounded Rectangle tool
          • Using the Rounded Rectangle tool
        • Working with the Ellipse tool
          • Using the Ellipse tool
      • Properties unique to rectangle and ellipse elements
        • Properties of elements
          • Background Color
          • Border Color
          • Border Thickness
          • Border Style
          • Border Radii
          • Border Radii units
        • Modifying rectangle elements
          • Modifying properties of rectangle elements
        • Duplicating drawing elements
          • Copying a rectangle element with the Selection tool
        • Layout and guidance tools
          • Layout Preferences tool
          • Rulers
          • Guides
          • Smart Guides
      • Adobe Edge Animate menu items
        • Edit
        • View
        • Modify
      • Summary
      • Chapter 3: Selecting and Transforming Elements
        • Locating the Selection and Transform tools
        • The Selection tool
          • Using the Selection tool
        • The Transform tool
          • Using the Transform tool
          • Manipulating the Transform Point
        • The Edge Animate Stage
          • Manipulating the Stage
            • Rulers and Guides
            • Center the Stage
            • Zoom controls
        • Building responsive compositions
          • Making a document responsive
          • Making elements responsive
            • Global versus Applied
            • Responsive presets
          • Simulating various screen sizes
        • The Elements panel
          • Element visibility
          • Locking elements
          • Managed versus unmanaged elements
            • Managed
            • Static
          • Reordering elements
          • Renaming elements
          • Grouping elements
        • Properties shared by all element types
          • Element properties
            • ID
            • Class
            • Actions
            • Visibility
            • Overflow
            • Opacity
          • Position and Size properties
            • Position
            • Size
          • Transform properties
            • Scale
            • Skew
            • Transform Origin
            • Rotate
          • Cursor properties
            • Cursor
          • Shadow properties
            • Shadow type
            • Shadow color
            • Shadow horizontal offset
            • Shadow vertical offset
            • Blur radius
            • Spread
          • Clip properties
            • Clip
          • Accessibility properties
            • Title
            • Tab Index
          • Stage properties
            • Document title
            • Width
            • Height
            • Background color
            • Overflow
            • Autoplay
            • Composition ID
            • Poster
            • Down-level Stage
            • Preloader
        • Adobe Edge Animate menu items
          • View
        • Summary
        • Chapter 4: Using Text and Web Fonts
          • Locating the Text tool
          • The Text tool
            • Text element types
          • Creating text elements on the Stage
            • Creating text elements
            • Point text versus Paragraph text
              • Point text
              • Paragraph text
            • Text property retention
          • Properties unique to text elements
            • Main text element properties
            • Secondary text element properties
          • Text shadows
          • Using web fonts in Adobe Edge Animate
            • About web fonts
              • Generic font definitions
              • Microsoft's core fonts for the Web
              • Hosted web font services
            • Applying web fonts to an Edge Animate project
            • Using local fonts from your collection
          • Managing fonts in the Edge Animate Library
            • Viewing fonts within {projectname}_edge.js
          • Summary
          • Chapter 5: Importing External Assets
            • Importing external assets
              • Image element types
              • Properties unique to image elements
                • Image Source
                • Swap Image
                • Background Position Offset X
                • Background Position Offset Y
                • Background Position Units
                • Background Size Width
                • Background Size Height
                • Background Size Units
              • More about image elements
                • Reveal in Finder/Explorer
                • The alt attribute
            • Scalable Vector Graphics
              • Importing SVG images
                • SVG notifications
            • Bitmap images
              • Types of bitmap images
                • Portable Network Graphics
                • Joint Photographic Experts Group
                • Graphics Interchange Format
              • Importing bitmap images
              • Using animated GIFs
            • Working with imported assets
              • Considerations when working with imported assets
              • Managing assets within the Library
                • Asset instance creation
                • Swapping assets
            • Importing Symbol Libraries
            • Exporting assets from other Creative Suite applications
              • Exporting from Illustrator
              • Exporting from Adobe Photoshop
              • Exporting from Fireworks
                • Using the Edge Animate extension for Fireworks
                • Using the extension
              • Exporting from Flash Professional
            • Summary
            • Chapter 6: Creating Motion Through the Timeline
              • Animation within Edge Animate
              • The Edge Animate Timeline
                • Playback controls
                  • Time
                  • Timeline options
                  • More about the Show Grid control
                • Timeline controls
                  • The Playhead
                  • The Pin
                  • Zoom controls
                • Keyframes
                  • Keyframe navigation
              • Creating motion
                • Inserting keyframes
                  • Adding keyframes through the Properties panel
                  • Adding keyframes through the application menu
                  • Using the Timeline keyframe buttons
                  • Using right-click for keyframe insertion
                • Animating with the Playhead
                • Animating with the Pin
              • Editing transitions
                • Transition delay
                • Transition duration
                • Transition end
                • Modifying element properties based on transition
                • Transition easing controls
                • Transition easing types
                • Shifting transitions
                • Changing transition duration
                • Selecting transition keyframes
                • Selecting multiple transitions
                • Copy and paste keyframes
                • Generating transitions through keyframes
                • Expanding and contracting composition duration
              • Animating a website header
                • Project setup, asset import, and general layout
                • Performing the animation of elements
                  • Animating the background
                  • Animating the cover art (do this for each cover art image)
                  • Animating the title text
                  • Finishing up!
              • Automated animation techniques
                • Pasting motion
                  • Paste Transitions To Location
                  • Paste Transitions From Location
                  • Paste Inverted
                  • Paste Actions
                  • Paste All
                • Automation example
                  • Initial state
                  • Transition begin state
                  • Transition end state
              • Adobe Edge Animate menu items
                • Edit
                • Timeline
              • Summary
              • Chapter 7: Interactivity with Actions, Triggers, and Labels
                • Working with Edge Animate actions
                  • The Actions panel
                    • Preferences in Actions panel
                  • Applying actions to the Stage
                  • Applying actions to individual elements
                • Changing the mouse cursor
                  • Cursor types
                • Triggers
                  • The Timeline Actions layer
                  • Working with triggers
                  • Working with labels
                  • Jumping to labels
                • The Code panel
                  • Full Code view
                  • Code Error warnings
                • Action and trigger breakdown
                  • Composition actions
                  • Mouse actions
                  • Touch actions
                  • jQuery actions
                  • Action and trigger events
                • Adding interactivity to a website header
                  • Creating the text element
                  • Adding interactivity to the title
                  • Adding interactivity to the album art
                  • Completing the final website header composition
                • Using touch actions for mobile devices
                • Adobe Edge Animate menu items
                  • Edit
                • Summary
                • Chapter 8: Making Use of Symbols, Nested Elements, and Grouping
                  • What are Symbols in Edge Animate?
                    • Differences between Symbols and other elements
                      • Symbols are self-contained
                      • Symbols exist within the Library panel
                      • Symbols are instantiated upon the Stage
                      • Symbols have their own Timeline
                      • Symbols can employ Playback Actions
                    • Comparison of Symbols in Edge Animate with Symbols in Flash Professional
                      • Similarities
                      • Differences
                  • Creating and managing Symbols
                    • Converting assets into Symbols
                    • Managing Symbols through the Library panel
                      • Edit
                      • Delete
                      • Rename
                      • Duplicate
                      • Export…
                  • Sharing Symbols across Edge Animate compositions
                    • Exporting a Symbol
                    • Importing a Symbol
                  • Properties unique to Symbol instances
                    • Instance ID
                    • Symbol name
                    • Scrub toggle
                    • Playback Actions
                      • Using Playback Actions to control Symbol playback
                      • Available Playback Commands
                    • Internal Symbol properties
                    • Symbol-level events
                  • Nesting elements
                    • How nesting works
                      • Nesting assets
                      • Nesting text
                    • Controlling nested content
                    • Grouping and ungrouping within Edge Animate
                  • Adobe Edge Animate menu items
                    • Modify
                  • Summary
                  • Chapter 9: Advanced Animation Techniques
                    • Clipping
                      • Clip properties
                      • The Clipping tool
                        • Image elements and the Clipping tool
                        • Revealing image and text elements through clipping
                    • Animating with sprite sheets
                      • Generating sprite sheets from Flash Professional CS6
                      • Using a sprite sheet within Edge Animate
                    • Animating with PNG sequences
                      • Generating PNG sequences from Flash Professional CS6
                      • Using PNG sequences in Edge Animate
                    • Summary
                    • Chapter 10: Publishing Edge Animate Compositions
                      • Publishing an Edge Animate composition
                      • Publish Settings
                        • Targeting the Web / Optimized HTML
                          • Using the Frameworks via CDN option
                          • Using the Google Chrome Frame for IE 6, 7, and 8 option
                          • Using the Publish content as static HTML option
                        • Targeting InDesign/DPS/Muse
                        • Targeting iBooks / OS X
                      • Capturing a poster image
                        • Saving a poster image
                      • Down-level Stage
                        • Editing the Down-level Stage panel
                        • Using a poster image
                          • Image properties
                          • Text properties
                        • Creating custom Down-level Stage
                      • Using project preloaders
                        • Using a built-in preloader
                        • Creating a custom preloader
                      • Publishing a composition
                        • Before publishing
                        • After publishing
                      • Summary
                      • Chapter 11: Further Explorations with Adobe Edge Animate
                        • The Adobe Edge Animate Runtime API
                        • Modifying existing web content in Edge Animate
                          • Animating existing web content
                        • Integrating Edge Animate content into existing websites
                          • Embedding a composition
                            • Embedding content
                            • Embedding with static content
                            • Packaging with <iframe>
                        • Embedding more than one Edge Animate composition within a web page
                        • Measuring page load through Chrome Developer tools
                          • Network
                          • Audits
                          • Other development tools
                        • Advanced CSS treatments in Edge Animate
                        • Video support in Adobe Edge Animate
                          • The HTML5 <video> tag
                            • MP4
                            • WebM
                            • OGG
                          • Adobe Flash Player
                          • Embedding a YouTube video within an Edge Animate composition
                        • Compositional audio integration
                          • The HTML5 audio tag
                          • Working with audio
                        • Using Adobe Edge Inspect with Edge Animate
                        • Summary

                        Joseph Labrecque

                        Joseph Labrecque is primarily employed by the University of Denver as Senior Interactive Software Engineer specializing in the Adobe Flash Platform, where he produces innovative academic toolsets for both traditional desktop environments and emerging mobile spaces. Alongside this principal role, he often serves as adjunct faculty communicating upon a variety of Flash Platform solutions and general web design and development subjects. In addition to his accomplishments in higher education, Joseph is the Proprietor of Fractured Vision Media, LLC, a digital media production company, technical consultancy, and distribution vehicle for his creative works. He is founder and sole abiding member of the dark ambient recording project An Early Morning Letter, Displaced, whose releases have received international award nominations and underground acclaim. Joseph has contributed to a number of respected community publications as an article writer and video tutorialist. He is also the author of Flash Development for Android Cookbook, Packt Publishing (2011), What's New in Adobe AIR 3, O'Reilly Media (2011), What's New in Flash Player 11, O'Reilly Media (2011), Adobe Edge Quickstart Guide, Packt Publishing (2012) and co-author of Mobile Development with Flash Professional CS5.5 and Flash Builder 4.5: Learn by Video, Adobe Press (2011). He also serves as author on a number of video training publications through video2brain, Adobe Press, and Peachpit Press. He regularly speaks at user group meetings and industry conferences such as Adobe MAX, FITC, D2W, 360|Flex, and a variety of other educational and technical conferences. In 2010, he received an Adobe Impact Award in recognition of his outstanding contribution to the education community. He has served as an Adobe Education Leader since 2008 and is also an Adobe Community Professional. Visit him on the Web at http://josephlabrecque.com/.
                        Sorry, we don't have any reviews for this title yet.

                        Code Downloads

                        Download the code and support files for this book.

                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        - 1 submitted: last submission 22 Apr 2013

                        Errata type: Others

                        The colored images PDF is present in the downloadable code bundle of the book and is also available at the following link:
                        Colored Images PDF


                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        Learning Adobe Edge Animate +    Oracle Business Intelligence 11g R1 Cookbook =
                        50% Off
                        the second eBook
                        Price for both: $41.55

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • Gain an understanding of the shifting Web landscape
                        • Effectively compare Adobe Edge Animate to Adobe Flash Professional motion tools
                        • Become familiar with all elements of the Edge Animate application interface
                        • Use the drawing tools in Edge Animate to create and manipulate elements on the Stage
                        • Import rich graphics for use in Adobe Edge Animate compositions
                        • Animate a range of elements with full transitioning through timeline keyframes
                        • Employ JavaScript to add interactivity to your project through Actions and Triggers
                        • Author a range of expressive compositions using nothing but web standards
                        • Become familiar with the Adobe Edge Animate Runtime APIs for deep manipulation of on-screen elements
                        • Apply other Adobe Creative Suite tools in your workflow to get the most out of Edge Animate

                        In Detail

                        With the advent of HTML5 and CSS3, web designers can now create sophisticated animations without the need of additional plugins such as Flash. However, there hasn't been an easy way for creating animations with web standards until now. This book enables even those with little knowledge of HTML or programming web content to freely create a variety of rich compositions involving motion and interactivity.

                        Learning Adobe Edge Animate will detail how to use this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge Animate does not rely on a plugin – so it can be run within any standard browser– even on mobile.

                        Learning Adobe Edge Animate begins with providing a complete overview of the shifting web landscape and the Edge Animate application. We then move on through the variety of panels and toolsets available, and explore the many options we have when creating motion and interactivity using Edge Animate.

                        The book presents the reasoning behind engaging, standards-based web content and how Edge Animate fills the need for professional tooling in this area. In the book, we’ll examine content creation, the importing of external assets, how to achieve fluid animation and advanced transitioning through the Edge Animate timeline. The book also covers some cool topics such as interactivity through Actions and Triggers, and it examines workflow options across Adobe Creative Suite applications. Sprinkled throughout the book are tips and references for those coming to Edge Animate from a background in Flash Professional. Towards the end of the book, the reader will explore a variety of more advanced topics such as the Edge Animate Runtime APIs and how Edge Animate can interface with other Creative Suite applications for a full workflow.

                        Whether the reader is coming to Edge Animate from Flash Professional or is totally new to motion graphics on the web, Learning Adobe Edge Animate will provide a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon. In the end, you’ll have a firm grasp of what it takes to create engaging content for the web and the familiarity with Edge Animate to actually get it done!


                        Learning Adobe Edge Animate is a practical, step-by-step tutorial on creating engaging content for the Web with Adobe's newest HTML5 tool. By taking a chapter-by-chapter look at each major aspect of Adobe Edge Animate, the book lets you digest the available features in small, easily understandable chunks, allowing you to start using Adobe Edge Animate for your web design needs immediately.

                        Who this book is for

                        If you are interested in creating engaging motion and interactive compositions using web standards with professional tooling, then this book is for you. Those with a background in Flash Professional wanting to get started quickly with Adobe Edge Animate will also find this book useful.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software