You are previewing Learning Adobe Edge Animate.
O'Reilly logo
Learning Adobe Edge Animate

Book Description

Create engaging motion and rich interactivity with Adobe Edge Animate

  • 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.

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!

Table of Contents

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