Tag Archives: Edge

Getting Started With Adobe Edge Web Fonts

Adobe’s MAX Announcements – A Major Update To Creative Cloud

Major Update to Creative Cloud

Basically, just about everything in the keynote is related to the major updates for Creative Cloud. This includes the vision and direction of Creative Cloud, and all of the tools and services that you are able to take advantage of with your Creative Cloud membership.

First and foremost, Adobe is shifting emphasis from packaged software releases to focusing on the Creative Cloud. From the press release:

Adobe also announced that the company will focus creative software development efforts on its Creative Cloud offering moving forward. While Adobe Creative Suite® 6 products will continue to be supported and available for purchase, the company has no plans for future releases of Creative Suite or other CS products. Focusing development on Creative Cloud will not only accelerate the rate at which Adobe can innovate but also broaden the type of innovation the company can offer the creative community.

The shift to Creative Cloud is great for more reasons than I could possibly list in one post. To start:

Creative Cloud membership gives you the latest and greatest updates from Adobe, without an upgrade cost, and without having to wait for a boxed release cycle. As soon as updates to the tools are ready, you receive them.
Creative Cloud gives you the ability to have your content everywhere. Not only do you get a shared file space in the cloud that automatically synchs across your computers (complete with private folders and versioning), but you can also have creative applications on multiple computers, you can access your files on Creative Cloud from any device (including your phones and/or tablets), and your application settings can be synched with the cloud.
Creative Cloud membership makes it easy to share your work. You can share your work with the public (either through Creative Cloud sharing, or through Behance integration).

I strongly suggest reading more about Creative Cloud update here, and learning about the vision for Creative Cloud. There is a lot of rumor and misinformation also floating around, so please, please, please read 5 Myths About Creative Cloud, and be sure to check the FAQ if you have any additional questions. Or, just watch the video below, where fellow Adobe evangelist Paul Trani debunks myths about Creative Cloud:

Contrary to FUD that is floating around the Internet, Creative Cloud is not about anti-piracy, it is not about price gouging, it is not about trying to control you. Creative Cloud is about providing you with the best tools and services to produce creative experiences, collaboration, and adding value to your workflow.

For an external (non-Adobe) viewpoint, check out what others have had to say:

I’ll cover more product specific updates in Creative Cloud tools later in this post, but check out the “new features” details to get an idea of what is now available. Or check out fellow evangelist Terry White’s videos on “What’s New In Photoshop CC, Illustrator CC, InDesign CC and Muse CC“.

Improved Desktop Presence

In addition to product updates, the Creative Cloud update also features an improved desktop presence for managing your tools and files.

From the Creative Cloud team blog, this desktop update will allow you to:

Manage your files and sync them to the Cloud
Install and update your desktop software
Install and manage your Typekit desktop fonts
Keep track of everything in your creative work, from Behance notifications, to collaboration invitations, and even updates to your CC apps — all in a single activity stream.

Behance Integration

It’s now easier than ever to showcase your work and gather feedback. You can now publish to Behance directly from within Creative Cloud. You can learn more about Creative Cloud and Behance community integration on adobe.com, but here’s a sampling:

Share a work in progress from your Creative Cloud files or within Adobe® Photoshop® and get immediate feedback from the creative community.
As you perfect your work, upload new versions to Behance. The community can follow the evolution of your project and post comments along the way.
Broadcast your work on Twitter, LinkedIn, and Facebook from within your Creative Cloud tools, all powered by Behance. All in just a few clicks.
Creative Cloud keeps track of who’s following you, who appreciates your work, what’s happening with the creatives you’re following, and more — all in a single activity stream.

Creative Cloud membership also comes with the pro features of Behance, including ProSite:

ProSite — a fully customizable professional portfolio with your own unique URL. And with Creative Cloud integration, keeping your portfolio up to date simply becomes part of your usual workflow.

TypeKit Fonts on the Desktop

As part of your Creative Cloud membership, you get access to 175 TypeKit fonts, which can be easily installed through the Creative Cloud desktop application, and are available to your entire desktop. If you were to license each of these fonts individually, it would cost you roughly $25,000. With Creative Cloud membership, you get these with no additional cost. You can read more about TypeKit and desktop font synching on the typekit blog, and see a preview of it in action in the video below:

Product Updates

There are hundreds of new or updated features to Adobe’s desktop applications and services with the latest Creative Cloud update. Here are just a few highlights from the Creative Cloud Team Blog:

Camera Shake Reduction in Photoshop CC “deblurs” an image by restoring sharpness to images blurred by camera shake
ACR8 is now available as a filter in Photoshop CC; you can apply Adobe Camera Raw processing to any of the layers in your document
Touch Type tool in Illustrator CC allows you to design with type in a powerful new way by manipulating characters like individual objects. You can also use multitouch devices as well as a mouse or stylus
CSS Designer in Dreamweaver CC provides the most up-to-date CSS and properties available via an intuitive visual editing tool
Editing Finesse in Premiere Pro CC focuses on sleek design and customization capabilities, combined with new editing features and keyboard-driven editing improvements
Live 3D Pipeline with Cinema4D in After Effects CC lets you add 3D objects to scenes and eliminate intermediate rendering between applications
Parallax Scrolling in Muse CC allows you to create stunning effects with just a few mouse clicks—images and elements move in different directions at different speeds when scrolling
Motion Paths in Edge Animate allows you to animate elements along totally customizable paths
A completely modernized architecture in InDesign and Flash Pro has been rebuilt from the ground up to be faster and more reliable, with a streamlined UI
InDesign has a great new QR code creator
Flash Pro has real-time drawing and live preview

Check out the links below to see all of the new features for each one of the Creative Cloud tools that will be available in June (there are too many for me to list individually on this post):

In addition to Creative Cloud tools, there have also been updates to the Edge Tools and Services. Adobe Edge Web Fonts has an updated interface on online presence available now, and other Edge Tools have updates that will arrive in June. You can read more about these tools below:

And there have been updates to Adobe’s touch apps:

Adobe Ideas
Adobe Kuler (coming soon)

Creative Cloud

You can always stay on top of the latest updates to Creative Cloud on the Creative Cloud Team blog. If you’re not already a member of Creative Cloud, you really should check it out at creative.adobe.com

Enabling Gestures in Edge Animate Compositions

4 Replies

As I mentioned in my last post, I’ve been working a lot lately with Adobe Edge Animate, Adobe InDesign, and Adobe DPS. Here’s another post on that same subject.

Another request that I have gotten from some of our DPS customers is that they’d like to be able to implement gestures inside of the Edge Animate compositions that they are building for DPS publications. This includes double-tap gestures, swipe gestures, etc… Out of the box, these gestures aren’t supported, but you can add them to any Edge Animate composition without too great of an effort.

Below is a quick video showing Edge Animate Compositions that are taking advantage of both double-tap and swipe gestures. Note: I intended these to be used inside of DPS, but I show them in Safari on iOS. These gestures override the default mobile browser behaviors.

As I mentioned above, this isn’t something that is supported out of the box, but it is possible to add gesture features manually.

The links below are for the basic examples that I put in the video. Both should work in desktop and mobile browsers:

For the double tap example, just perform a double tap/click gesture anywhere on the stage (the image area), and the animation will start again from the beginning. For the swipe gesture, just perform a horizontal swipe in either direction with either your finger, or the mouse.

Gestures With Hammer.js

I leveraged the hammer.js JavaScript library to handle gesture detection since these gestures aren’t supported by default. Hammer.js also enables other gestures, like long taps, pinch, rotate, etc… However, I’m only showing double tap and swipe. You can read more about hammer.js using the following links:

I used this exact setup procedure in both the double-tap and swipe examples.

To include this library, I first downloaded the hammer.js file, and saved it inside of the “edge_includes” folder.

Next, you have to disable the web view/browser default double tap behavior, which is to zoom in when double tapped. You can disable the zoom on double tap by adding a viewport metadata tag inside of the Edge Animate project’s html file. Open your project’s .html file (in this case “DoubleTap.html”, and add the following line to the <head>

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Example:

Next, we have to add the code inside of the Edge Animate composition to enable the gesture behavior. The first thing you have to do is include the hammer.js library. In this case, I wanted to add the gestures to the composition’s stage, instead of a particular element. So, right-click on the stage in the Edge Animate Editor, then select the “Open Actions for Stage” menu option.

This will open the actions for the Stage instance. Next, click on the “+” icon and select “creationcomplete”. This will create a function that gets invoked once the Stage instance has been created at runtime.

In that function, first we need to import the hammer.js library. Edge Animate compositions include the yepnope.js library, which is originally intended to detect if a browser includes a specific piece of functionality. If not, then include a JS library so substitute that missing feature. In this case, I am passing it a blank test to force it to include the hammer.js library. The following function forces loading of the hammer.js library. Once the library has been loaded into memory, it triggers the “init” function:

In the init function, we grab a reference to the stage’s element (div), then use hammer.js to add our gesture event handlers:

Now, we need to start looking at the individual examples…

Double Tap Gestures

In the double tap example, we have a simple timeline animation that plays sequentially. At the end of the sequence the animation is stopped by a simple sym.stop() function call. Here’s a quick preview of the setup in Edge Animate:

To add the double tap gesture, all you have to do is add a hammer.js event for “doubletap”. In that event handler, we’re just calling sym.play(0), which restarts playback from the beginning of the composition. The full code for the creationcomplete event is shown below. This is all that is needed to add the double-tap gesture to the composition stage instance:

yepnope({
	nope:['edge_includes/hammer.js'] ,
	complete: init
});

function init (){

   var element = sym.element[0];
   var hammer = Hammer(element);

   hammer.on("doubletap", function(event) {
        sym.play(0);
   });
}

Swipe Gestures

In the swipe gestures example, we have a simple timeline animation that plays sequentially. However, at the end of each slide transition, playback is stopped by a simple sym.stop() function call. Whenever we perform a swipe action, we’re either just playing forward, or playing in reverse until the next slide animation stops. Here’s a quick preview of the setup in Edge Animate, note the stop points highlighted by the arrows:

To add the swipe gestures, all you have to do is add a hammer.js event for “swipeleft” or “swiperight”. In those event handlers, we’re just calling sym.play() or sym.playReverse(), depending whether it was a left or right swipe. These play actions progress to the next animation sequence. The full code for the creationcomplete event is shown below. This is all that is needed to add the swipe gesture to the composition stage instance:

yepnope({
	nope:['edge_includes/hammer.js'] ,
	complete: init
});

function init (){

	var element = sym.element[0];
	var hammer = Hammer(element);

	hammer.on("swipeleft", function(event) {
		  sym.play();
	});

	hammer.on("swiperight", function(event) {
		  sym.playReverse();
	});
}

With the swipe gestures, you can get some drag event conflicts on mobile devices. If you run into this and you do not want the page to scroll, the scroll action can be prevented by capturing the touchstart event, and canceling the default behavior. I didn’t add this, just because I wanted to keep this example very simple.

Source

Full source for each example can be downloaded from the links below:

Artwork used in these examples is from the Adobe MAX web site. You should attend MAX, it’s going to be awesome.

Publishing

When you publish the composition from Edge Animate, the “hammer.js” file won’t be copied automatically, so make sure that you copy it to your publish directory before distributing the composition.

Adding Dimensionality To An Edge Animate Composition

1 Reply

Lately I’ve been spending a lot more time working with Adobe Edge Animate, Adobe InDesign, and Adobe DPS. If you aren’t familiar with these tools, Adobe Edge Animate is a tool that enables the creation of animated or interactive HTML content, Adobe InDesign is a desktop publishing design tool, and Adobe DPS is Adobe’s Digital Publishing Suite, which is used for creating digital publications from InDesign – everything from digital magazines, catalogs, corporate publications, education, and more.

In DPS publications, you can add interactive content inside of your digital publications by leveraging web content overlays. Web content overlays enable the embedding of HTML content directly inside of DPS pages.

So, you might be wondering, how does Edge Animate fall into this grouping? Well… From Edge Animate you can export compositions into a .oam package, which can be imported directly into InDesign for use with a web content overlay. You can read more about this process on Adobe Developer Connection.

I was recently asked by a customer “does Edge Animate support 3D transforms?”. Unfortunately, at this time 3D transforms are not supported in the timeline editor. However, you can add 3D transformations programmatically with JavaScript. Here are some examples showing how to integrate CSS3 3D transforms with Edge Animate compositions:

These can be great additions to the interactive experience, but I also wanted to share that you don’t always need 3D transforms to add dimensionality to an interactive experience. By leveraging 2D translation, scaling, and opacity you can easily create interactive experiences that have a feeling of depth.

Let’s take a look at a quick example. The image below is from screenshots of an Edge Animate Composition that I put together. On the left-hand side there is an anatomical illustration. On the right-hand side, that illustration has been broken out into separate layers, with emphasis placed on the topmost layer.

Edge Animate Composition With 2D Depth

Images borrowed from Ely Greenfield’s awesome FlexBook anatomy demo.

Now, let’s look at that animation in action. Just click the link below to preview this animation in a new window.

http://tricedesigns.com/portfolio/anatomy/

Just click or tap on the image to see an animation that transforms the illustration on the left to multi-layered cutaway on the right hand side.

So, while this animation doesn’t leverage any actual three dimensional elements, it leverages those 2D transforms to visually create a sense of depth. Here’s how it works:

First, there are 3 images. The bottom-most image shows the skeletal structure and body outline. The middle image shows parts of the digestive system, and the top-most image shows another layer of major organs. The top 2 images have transparency so that they do not completely hide content from the underlying layers.
The default state is that all of these images are aligned so that they appear as a single image.
Once you click/tap the image, a set of two-dimensional animations take place providing a sense of depth and emphasizing the top layer. The underlying layers have both a scale and opacity change. The bottom layers are smaller, and less opaque. The underlying layers also have a two dimensional (top/left) transform. In this example, I’ve tried to align both the scale and top/left transforms to correspond with a 3D point of origin to the left side.

Edge Animate – Anatomy Composition

This technique provides the illusion of three-dimensional depth, even though we aren’t actually performing any kind of translation, rotation, or deformation on a three dimensional coordinate system. AND this can be implemented completely with the timeline. So, you don’t have to be a programmer to add a dimensional feeling to you Edge Animate compositions. This effect was achieved simply by using the timeline editor and visual workspace.

You can preview this animation in a new window, or download the full source using the links below:

Enjoy!

Adobe Showing Some Love for HTML

Adobe Edge Reflow (Preview)

Adobe Edge Reflow is a new responsive design tool that helps designers create and communicate responsive intent in their designs to both customers and developers. Adobe Edge Reflow enables designers to create responsive HTML experiences in a visual workspace, and leverages web standards technologies to create designs that are accurate to the capabilities of the modern web.

Learn more about Adobe Edge Reflow at:

Or check out this introduction video from product manager Jacob Surber:

Update for Adobe Dreamweaver CS6

Adobe Dreamweaver CS6 provides an intuitive visual interface for making and editing HTML websites and mobile apps. This update includes improved support for responsive design and fluid grids, integration with Adobe Edge Web Fonts for rich typography, improved HTML5 support, and much more!

Learn more about this update and Dreamweaver CS6 at:

Update for Adobe Edge Animate

Adobe Edge Animate is new tool for creating interactive and animated web content in a visual, timeline-based environment. This update (Edge Animate 1.5) includes support for CSS built-in filters (blurs, sepia, grayscale, etc…), support for gradients and gradient animation, and rich typography via Adobe Edge Web Fonts.

Learn more about the latest updates for Adobe Edge Animate at:

Or check out this video from product manager Sarah Hunt:

Update for Adobe Edge Code (Preview 3)

Adobe Edge Code is a new HTML/JS/CSS editor designed to enable you to create create web experiences, without getting in your way. Updates in preview 3 include numerous UI improvements, better code hinting support, and better search support.

You can learn more about the latest for Adobe Edge Code at:

Let’s not forget that Adobe Edge Code is built on the open source Brackets project. Brackets released the sprint 20 build today too!

Stay Informed!

For the latest news, follow us on Twitter:

As I mentioned above, all of these are available immediately via Adobe Creative Cloud subscriptions. Even better, you can get Adobe Edge Animate, Adobe Edge Reflow, and Adobe Edge Code as part of the free Creative Cloud tier. Go download them now!

ANDREW TRICE

Explorations and Evangelism in Technology