Learn Adobe XD

Learn Adobe XD

Some Resources for learning Adobe Experience Design CC (Beta).
Visit the Adobe XD Learning Centre to view the following tutorial concepts.

GET STARTED
Create designs for web and mobile apps on Mac OS

LEARN ESSENTIALS
Design and prototype apps on Windows 10

KEY TECHNIQUES
Create and share interactive prototypes on Mac OS

NEW FEATURES
Preview your designs and prototypes on actual devices

EXPERIENCE DESIGN HELP
Check out the online user manual for your product

Experience Design CC (Beta) v. 0.6.20 Released

Experience Design CC (Beta) v. 0.6.20 Released

Zoom tool on Windows 10

Zoom in on a specific area of your artboard by selecting the zoom tool from the toolbar or using a keyboard shortcut.  

Photoshop and Illustrator integration on Windows 10

Copy and paste your Adobe Photoshop CC and Illustrator CC assets directly into Adobe XD.

Pixel-perfect layouts on Windows 10

Align items in your layouts to the nearest whole integer with the Align to Pixel Grid command in the context menu.

Improved onboarding on Windows 10

Get up and running faster with a new XD for Windows start experience that makes it easy to create new documents pre-sized for different devices, open recent documents, and access built-in tutorials.

Share Online for enterprise on Windows 10

Enterprises can now share a link to their XD prototypes using the Share Online service.

Resolve comments

Close the loop on comments without deleting them by marking them as “resolved.” Prototype owners can un-resolve comments to bring them back to the main view.

Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Available

Adobe Edge Animate 3.0 Overview

The following overview is certainly not complete, so be sure to check out the following official Edge Animate related resource links.

 

Script Loading

This addition to the Library Panel allows you to integrate remote (CDN) and local scripts into your compositions, loading them at run time into the composition in the preloader. Local scripts are stored in a js/ directory unless included from within the composition directory. Scripts can now be transferred with a composition during Save As and be published into OAM and iBooks packages.

This feature only supports local and remote .js files. If the script you utilizes an associate .css file, then resort to adding the css file as I have captured below. Unfortunately the new Script library does not accommodate loading .css files.

edge-animate-scripts

Here are few example Content Development Network resources to refer to for your next scripted project

Responsive Scaling/Center Stage

You can set responsive scaling in the Stage properties to “width”, “height” or “both” to scale the whole composition proportionally. Aspect ratio will be maintained and is determined by the ratio of stage width to stage height. These must be in pixels.

  • Selecting “width” resizes the composition only when the width of the document window changes.
  • Selecting “height” will scale the composition with height of document.
  • Setting Responsive Scaling “both” resizes the composition in both directions.

Scaling is determined by the size of the Stage’s parent. So if you place the stage into a static page, the stage parent’s height and width must also be set.

Placing these compositions into static files gets easier now: the composition fits into the document flow.

Note: Preloader stage also flows with your proportionate option.

Center Stage

Center Stage comes with three options: Horizontal, Vertical and Both.

When selected the preloader will be centered as well.

edge-animate-responsive-scaling

Audio Support

Edge Animate introduces support for HTML5 audio using the native audio property. With audio you can control audio playback in your compositions and bind audio to touch and mouse events, or with triggers on the timeline.

  • New audio lesson in the Welcome screen or the Wndow > Lessons menu panel;
  • Audio Management control via the Library Panel;
  • Preload Audio option from the Stage;
    Note: Preloading audio is not available on iOS and some Android devices; for widest browser support .mps and .ogg formats.
  • Intuitive Audio Property Controls for the active/selected audio element;
    Note: Default audio control visibility is ‘off’; set to ‘on’ to see the onscreen audio control bar. Volume control allows for keyframing – ideal for intro, exit or cross-fading.
  • Audio Muting Timeline icon and command option: mute audio during playback when it is set to autoplay;
  • New audio Code Snippets to the Actions popup and Code editor;

eadge-animate-audio

Supported audio formats include

  • ACC (.m4a, .acc)
  • MP3 (.mps)
  • Wav (.wav)
  • Ogg (.ogg, .oga)

Add any of the above audio format types via

  • File > Import menu command option;
  • Drag and Drop from the file system;
  • Library Panel > Audio (+) subsection;

Note: audio files, like other Edge Animate asset and Elements, adhere to strict naming convention- in other words, avoid special characters, spaces and numeral file names to avoid element ID conflicts.

Motion Path Improvements

Scale and rotate a motion path for easier editing with the following commands:

  • Hover + Alt/Option: Rotate the motion path based on the transform origin of the element;
  • Hover + Cmd/Ctrl + Option: Scale the motion path based on the transform origin of the path;
  • New tooltip overlays when mouse over any given path;

edge-animate-motion-paths

Other 3.0 Improvements

Enhancement to Distribute Command

Two new menu items have been added to the Modify > Distribute menu, “Horizontal Space” and “Vertical Space”. These commands will evenly space objects of different sizes vertically or horizontally.

Publishing improvements for OAM

The Publish Settings for the Animate Deployment Package (.oam) include two new options:

Transparent poster: Poster image for OAM files now respect transparency making it easier to layout the published OAM file with other content in apps like Muse or InDesign.

CDN Runtime: Reduce the size and load time of your .oam file by loading the runtime from an Adobe hosted CDN.

jQuery Updated to 2.0.3: Animate is now shipping with jQuery 2.0.3 (previously we were using 1.7).

MacOS X 10.6 Support: Issues around 10.6 support and this build is now compatible with MacOS X 10.6.

Best of Edge Animate Workflow Samples

Best of Edge Animate Workflow Samples

The following is a compilation of the best Edge Animate workflow examples.


Adobe Edge Animate Portal

The first stop before venturing into Edge Animate is to visit the official portal website by Adobe aptly named Adobe and HTML. Edge Animate is one of many Edge Tools and Services that compliment the Web Platform.

edge-animate1

Edge Animate Samples | Edge Animate API | Edge Animate Help Docs

For a comprehensive walkthrough about Adobe Edge Animate follow through with Paul Trani in the Learn Edge Animate, Adobe TV video series.

Edge Animate Integration with Adobe Dreamweaver, Adobe Muse, Adobe InDesign

Edge Animate leverages its workflow management with other applications by packaging its output files to .oam. You then ‘import’, ‘place’ or ‘insert’ the .oam package and the host application handles the rest. Consult the following host application workflows that best suit your needs.

an-to-dw
Import Edge Animate Composition into Dreamweaver

an-to-mu

Import Edge Animate Composition into Adobe Muse

an-to-id

Import Edge Animate Composition into Adobe InDesign

DPS Integration

A Step-by-step guide to create an Interactive eBook

an-to-rf

Edge Animate to Edge Reflow

an-to-fw

Fireworks to Edge Animate

an-to-fl

Export Flash Symbols as Sprite Sheet to Edge Symbols: Part 1 | Part 2 | Part 3


Working with Edge Animate Compositions

There is no ‘paging’ system inside Edge Animate but there is a workflow where you can bind individual compositions into a single html wrapper.

edge-animate5

An alternative approach is to use the Edge Commons ‘Composition Loader’. It is pretty straightforward and the following video demonstrations makes it look easy to set up.

edge-animate6


Working with Video/Audio

edge-animate7

Adding youtube video using an iFrame

edge-animate10

Adding Video using the Edge Hero ‘class’ reference

edge-animate11

Add Audio using Buzz.js


Scale to Fit Compositions

Learn how to make your Edge compositions adjust to the screen and a variety of devices.

edge-animate2

Scale to Fit Compositions, by Sarah Hunt, Adobe Edge Product Manager

edge-animate4

Creating Flexible Layouts, Paul Trani


Edge Animate with Drupal & WordPress

edge-animate3

Edge Animate with Drupal, by Timm Jansen

edge-animate12

Add Edge Animate to a WordPress Installation with the Edge Suite Plugin


Miscellaneous

edge-animate8

Create 360 View

edge-animate9

Enabling Gestures in Edge Animate Compositions

edge-animate13

Interactivity with Edge Animate

edge-animate14

How to build a web banner in Edge Animate

edge-animate15

How to Create a Dynamic Slideshow in Edge Animate

edge-animate16

Parallax Scrolling Made Easy with Edge Commons Library

edge-animate17

Constructing a Dynamic Slideshow with Timeline Triggers

edge-animate18

Binding Clicks to Dynamic Symbols

edge-animate19

3D Cubes, Leap Motion, Edge Animate and Greensock

edge-animate20

Using Symbols and JSON data in Adobe Edge (an older reference but the context is still relevant to the latest Edge Animate version)

edge-animate21

Creating Variables and Conditional Statements in Edge Animate

edge-animate22

Loading XML via AJAX into Adobe Edge

Edge Hero Community Portal

Edge Hero Community Portal

edge-hero

The Edge Hero community portal has released version 2 of its extension library. Its aim is to simplify and improve the workflow while working with Adobe Edge Animate by eliminating the grunt work when dealing with code. Edge Hero operates by simply adding the appropriate ‘class’ selector to the Edge Animate element.

Edge Hero offers solutions for these common Edge Animate workflow scenarios:

  • element centering;
  • forms/inputs;
  • html5 video;
  • menus;
  • canvas;
  • youtube/vimeo embedding;
  • 3D rotate including 3dcubes;
  • and much more…

Visit Edge Hero for a complete list of API class options | Edge Hero Website | Edge Hero Tutorials

Edge Animate Adds Support for Edge Web Fonts

Edge Animate Adds Support for Edge Web Fonts

Edge Animate 1.01 is now available for download, containing several bug fixes and performance improvements. This download is recommended for all users.

This update includes:

  • Added support for Edge Web Fonts
  • Performance improvements on published content
  • iOS 6 fix for multiple compositions embedded via iFrame and Adobe DPS
  • Various fixes to improve application stability

For update instructions and release notes, please visit http://helpx.adobe.com/edge-animate/release-note/release-notes-edge-animate.html.

[divider_top]

To Add An Edge Web Font Reference to a Project

  1. Open an existing project file (File > Open: .an or .html) or Create (File > New).
  2. Open your preferred web browser and visit the following Edge Web Font resource library: http://html.adobe.com/edge/webfonts/
  3. The follow the below A, B, C routine detailed below.

Edge Web Fonts

[divider_top]