Learning Adobe Edge Animate CC

Navigate the Edge Animate interface from the splash screen to file creation, and explore the stage, elements, properties, tools, timeline, elements window, library, and code windows.

Customize the Adobe Edge Animate CC workspace by closing the lessons panel, repositioning the code window beneath the library, and saving a new workspace like Tony 01.

Explore how the properties window controls stage size, overflow, responsive scaling, and preload settings, and how selecting elements updates property information.

Place elements on the stage, control their size, and hide off-stage items with the default hidden overflow. Test visibility, center the stage, and add interactions such as buttons and animations.

Explore how to import and animate elements in Adobe Edge Animate CC, and master the selection, transform, clipping, rectangle, ellipse, and text tools to create and manipulate objects on stage.

Master the Edge Animate CC timeline by learning time increments, keyframes, labels, triggers, and scripts, with easing, auto transition, pin mode, and color-coded layers.

Explore the elements window, where objects on the stage like the penny and dime can be scripted and moved, with layering and color codes affecting the timeline.

Discover how the edge animate library organizes images, symbols, fonts, audio, and scripts, and how to add, edit, and call assets for the stage.

Access the code panel to view prewritten actions, toggle animation with mouse over and mouse out, and explore full or shorthand JavaScript code—no coding from scratch required.

Explore CSSA filters in edge animate by applying and mixing contrast and saturation, adding shadows to Penni PMG and dime PMG, animating them with keyframes, and managing browser compatibility warnings.

Master common shortcuts that work across programs, including cut, copy, and paste, using command or control keys to duplicate items on the timeline and in the elements, saving time.

Master stage shortcuts in adobe edge animate cc to zoom, arrange front and back, use rulers and smart guides, toggle guides, and align items on the stage with bracket keys.

Master the edge animate timeline with shortcuts for auto keyframe and transition, toggle pin, and duplicate items. Use levels for labels and command T to trigger playback.

Learn how to import images into Edge Animate CC using the library, file menu, or drag from Finder, supporting PNG, JPEG, GIF, and SVG formats.

Learn how to bring Photoshop images into Edge Animate using Photoshop CC image assets. Save layers as web-friendly formats like PNG with transparency and place them on the stage.

Save each Illustrator layer as an svg and import into Edge Animate as scalable vector graphics; arrange assets on the stage and edit via Illustrator to preserve vector fidelity.

Import images at the exact size needed to minimize file weight, and keep dimensions under 1024 by 1024, such as 1000 by 1000; ensure spg files have proper mime types.

Learn to control Adobe Edge Animate CC animations with timeline triggers to stop at specific points, such as the beginning or end, and even play in reverse, without writing code.

Learn to use element actions in edge animate to turn a stage element into a clickable button that plays an animation in reverse, with cursor changes.

View the full code behind triggers and element actions in Adobe Edge Animate CC, then change the click to mouseover to make the main timeline play in reverse on rollover.

Learn to type and place text on the stage in Edge Animate CC, edit text via double-click, and adjust font, alignment, and spacing using CSS-based properties.

Apply text properties and animation in Adobe Edge Animate CC by pasting text, selecting web-friendly fonts, and adjusting size, letter spacing, and line height. Edit text easily with double-click.

Utilize Adobe Edge Animate CC web fonts to enhance text by adding fonts from the edge web fonts collection, select 'Waiting for the sunrise,' and adjust spacing.

Learn to add a custom font in Adobe Edge Animate CC by using Edge Web Fonts or Google Fonts, copying the embed code, and applying it to text.

Set up keyframes to animate movement and transitions in Edge Animate CC. Create manual keyframes for cloud 1 and use auto keyframes with auto transitions for cloud 2.

Learn to animate text in Edge Animate by adjusting letter spacing (kerning), changing color for contrast, and moving text across the stage with keyframes and auto keyframe.

Learn to animate clipping masks to reveal city buildings from a solid line, using auto keyframe mode, keyframes for width, height, and transform, and final scaling for dramatic reveal.

Explore nested animations by animating items on the main timeline and inside symbols, using a sunburst background as an example. Convert graphics to a symbol and keyframe transforms and opacity.

Learn to create and control loops in Adobe Edge Animate CC by placing loops inside symbols, using JavaScript actions to play, and testing animations in the browser for smooth looping.

Learn how to create organic animations with motion path in Edge Animate, enabling auto orient, anchor points, and dynamic scaling of objects along a curved path.

Apply easing in and out to the bird animation using the Kubic preset to create slow-start, fast-end motion (and vice versa), test the animation, and expand beyond fixed keyframes.

Use the toggle pin in Adobe Edge Animate CC to set start and end keyframes, then preview by moving the playhead and fine-tuning with shift and arrow keys.

Animate CSS filters in Edge Animate CC by applying a grayscale filter with keyframes, transitioning from 100 percent grayscale to full color, and test browser support with Can I Use.

Use symbols with timelines to build complex animations, and learn to target symbol timelines from the main timeline; create a clock to refine rotation and pivots and reuse instances.

Enter symbol edit mode by double-clicking the clock symbol, turn on playback, adjust rotation from 0 to 180 degrees to reach 3:59, and test the 720-degree animation on stage.

Nest symbols to build a clock-based animation by duplicating clocks into a four-block symbol and editing each nested timeline to stop at different times, with auto play turned off.

Learn how to rename symbol instances to manage multiple clocks on the stage and call them individually in code using instance names.

Create a color themed interactive site by setting up color buttons, labels, and simple coding in Adobe Edge Animate, then apply basic navigation principles.

Create labels in Edge Animate CC to control the playhead and navigation without recoding, by tagging key moments like home and timing anchors, then you can move labels as needed.

Set a rectangle as a visual indicator by animating its color with auto keyframes to switch between gray for home and red, yellow, and blue for each label.

Create navigation buttons in Edge Animate CC, assign colors and labels, attach actions to control playback and jump to the read label, then duplicate for yellow, blue, and home.

Learn to program stage buttons in Adobe Edge Animate CC using the code window and javascript. Copy and paste actions to configure yellow, blue, and red buttons and test movie.

Change the cursor to indicate interactivity by selecting the red button and setting the cursor to pointer in the properties, then test the movie to confirm elements are clickable.

Create a multi-state button in Edge Animate by converting a shape to a symbol, defining up, over, and down states with color changes, and wiring timeline coding to switch states.

Create a multi-state button by defining an invisible active controller and adding mouse down, over, and out actions to switch to down, over, and up states, with a pointer cursor.

Learn to import bitmap images to create multistate arcade button symbols in Adobe Edge Animate CC, using visibility states and mouse actions (down, over, up, out) and test your movie.

Use the text tool to type labels like 'Facebook' on a button, then arrange the text behind the button and lower the button's opacity to about 80% to preserve interactivity.

Create multiple navigation buttons in Edge Animate CC by linking to Facebook and Google, duplicating buttons with option-drag, wiring actions to move along the timeline, and selecting about us.

Explore text in Adobe Edge Animate CC by placing text in front of a button or behind transparent one, then drive hover, down, up, and out actions with text element.