Learning Adobe Edge Animate -- Table of Contents -- Learning Adobe Edge Animate -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- Why do we need Adobe Edge Animate? -- Adobe Flash Player restrictions -- HTML technology maturity -- Shifting roles -- Mobile deployment -- What can Adobe Edge Animate be used for? -- Web animation -- Interactive content -- Is Adobe Edge Animate for me? -- Let's get started! -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 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 -- Stage -- Timeline -- Panels in Edge Animate -- Lessons -- Elements -- Library -- Properties -- Actions -- Code -- Adobe Edge Animate keyboard shortcuts -- Keyboard Shortcuts dialog -- Adobe Edge Animate menu items.

File -- Window -- Help -- Summary -- 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 -- 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 -- Scale Position -- Scale Size -- 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 -- 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 -- 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 -- 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 -- 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 -- 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.