Master Adobe Edge Animate CC - Edge Animate Made Easy

Explore the Edge Animate interface from the splash screen to creating and opening files, mastering the properties panel, stage, elements and their stacking order, timeline, library assets, and code windows.

Arrange your Edge Animate workspace by resizing and positioning windows, adding the code panel beneath the library, and saving a custom workspace named Tony for efficient, personalized work.

Master the properties window in Edge Animate to control stage details, element attributes, and library placement, editing settings directly as you click different items.

Control the stage in Edge Animate by adjusting element size, visibility, and overflow; test interactions with on-stage buttons and animations, while hidden elements off-stage stay out of view.

Master Adobe Edge Animate CC by using the selection, transform, clipping, rectangle, rounded rectangle, ellipse, and text tools to create and manipulate elements on stage and reflect changes in timeline.

Adobe Edge Animate CC teaches using the timeline with time-based increments, autokeyframes, easing, labels, and triggers, plus scripting and color-coding to control layered elements.

The elements window shows stage objects like the penny and dime, which can be scripted, moved from elements area, and arranged with color code in front of or behind others.

Explore how the Edge Animate library now includes images, symbols, fonts, audio, and scripts with preload, showing how assets are organized and ready to call up when needed.

Explore the edge animate code panel in this intro course, using pre-written scripts to control penny and dime interactions, and test mouseover and mouseout actions.

Learn to apply and animate CSS filters in Edge Animate CC, mix contrast and saturation, add shadows via filter and box shadows, and note browser compatibility warnings.

Learn common keyboard shortcuts across programs, including cut, copy, and paste, and apply Ctrl/Cmd shortcuts in Edge Animate to duplicate items on the timeline and in elements, saving time.

Master stage shortcuts in edge animate cc, including zoom via cmd/ctrl +/-, using rulers and smart guides for alignment, and moving objects forward or backward with bracket keys.

Explore the Edge Animate CC timeline: use auto keyframe and auto transition modes, toggle with K and X, duplicate with Command-D, and trigger play, pause, or stop with Command-T.

Learn ways to import images into Edge Animate: use the library, drag from finder, or file, import images (png, jpeg, gif, vector), and place them on the stage at 0,0.

Learn to bring Photoshop images into Edge Animate via two methods: traditional export and Photoshop CC image assets, saving for web as PNG with transparency and organizing layers.

Learn how to integrate Illustrator vector graphics with Edge Animate by saving layered files as SVGs, importing them, organizing assets, and editing back in Illustrator for clean animations.

Import and animate images with stage needs in mind; crop to 1024 by 1024 max to save weight, and ensure svg files have the correct mime type on the host.

Explore timeline triggers in Edge Animate to control playback, stop at the beginning, reverse at the end, and replace auto play with timeline-driven actions.

Attach element actions to stage items in Edge Animate to trigger reverse playback on click, timeline actions or right-click menus, and set a pointer cursor to indicate a clickable button.

Explore how Edge Animate CC reveals the full code for element actions, showing on click plays animation in reverse, with access to full and short code and editable JavaScript.

Master the text tool in Edge Animate to create, place, and edit text on stage, then customize font, alignment, and spacing using CSS-driven properties.

Explore text properties in Edge Animate with a wysiwyg workflow, using web-friendly fonts, adjusting size, letter spacing, line height, and indentation, while editing inline and animating changes.

Explore using Edge web fonts to replace standard fonts, select creative type from a free web font collection, adjust letter spacing, and apply text styles without image assets.

Explore adding custom web fonts to edge animate cc by selecting a font, using google fonts embed code, and applying it via the font area and fallback list.

Animate text properties by adding keyframes to adjust size, line height, spacing, and color over time, with auto keyframes capturing changes and easing for smoother motion.

Master setting up keyframes in edge animate cc by manually keyframing cloud positions and using auto keyframe and auto transition tools to create smooth transitions.

Animate text in Edge Animate by adjusting letter spacing (kerning), color, and motion with keyframes. Create visibility transitions from transparent to opaque and move text across the stage.

Explore animating clipping in Edge Animate to reveal city buildings from a solid gold line, using auto keyframes, clipping properties, and transform scaling over time.

Animate inside symbols to create nested animations, then animate a sunburst in the background using symbol timelines, transforms, and opacity. Invert the motion with paste special and test in browser.

Create loops by placing them inside symbols to gain more control, and use javascript actions to play the main timeline loops, then test in the browser to see sunburst animations.

Explore motion path in Edge Animate to create organic animations with auto orient, adjustable pivot points, keyframes, anchor points and direction handles along a path, including scaling along the route.

Master Adobe Edge Animate CC teaches how to apply easing to animation, using ease in and ease out to create natural motion from keyframes, with presets like Kubic.

Learn to use the toggle pin to set both the start and end keyframes exactly, then preview with spacebar, while nudging clouds and sunburst for precise final-frame animation.

Animate CSS filters such as grayscale with keyframes in Edge Animate to transition a fruit crate label from color to grayscale and back, while checking browser support.

Learn to create and reuse symbols in Edge Animate CC, building a clock with individual timelines, pivot adjustments, and reusable instances to clean up the main timeline.

Edit a clock symbol in Edge Animate CC by entering the symbol timeline. Rotate to 3:59, test on stage, and learn to toggle auto play and set stop points.

Master nesting symbols to create complex animations by placing symbol instances inside another symbol, then editing each inner clock’s timeline to stop at different times and disable auto play.

Learn to assign instance names to multiple symbol instances in the timeline, rename clocks to clear labels like 3 o'clock, and reference them in code for precise control.

Create a simple color site demonstrating basic interactivity with buttons and basic coding in Edge Animate. Set up labels and color buttons (red, yellow, blue, green) for navigation.

Set up labels to control the play head and jump to points like 0, 0.5, 1, or 1.5 seconds; move labels later to adjust timing without reprogramming.

Set up a rectangle as a color indicator that changes from gray to red, yellow, and blue using auto keyframe color animation to reflect the current label or section.

Learn to create and code color-coded buttons in Edge Animate, using eyedropper colors, duplicating buttons, and setting actions to go to labels and stop, then test and refine.

Master the code window in Edge Animate to assign mouse click actions to stage elements—yellow, home, blue, red buttons—and test your movie with code snippets or open actions.

Change the cursor to pointer on interactive elements by selecting them, applying the pointer in the properties cursor, then test the movie to confirm the cursor signals clickability.

Create a multi-state button in Edge Animate CC by converting a rounded rectangle into a symbol and labeling up, over, and down, then apply colors and keyframes.

Learn to implement multi-state button interactions in Edge Animate by adding an active hit zone, wiring mouse over, down, up, and out actions, and testing cursor changes.

Learn to import button images into Edge Animate, convert them into a symbol, and build interactive button states with a timeline, labels, and mouse events for an arcade button.

Learn how to add text to buttons in Edge Animate by placing the text behind the button, adjusting opacity, and testing interactivity to keep text visible without blocking clicks.

Learn to add navigation to buttons in Edge Animate by assigning URLs such as Facebook and Google, duplicating buttons, renaming assets, and linking to timeline sections like about us.

Duplicate and rename the button symbol, remove its actions, and attach text that controls the button via a symbol object, enabling mouseover, mouseout, mouse down, and mouse up.