Tag Archives: Edge

More Device Motion Experiments with HTML & Adobe DPS

I wanted to follow up my last post on 3D Parallax effects in HTML or Adobe DPS, I’ve decided to release some of the other experiments that I’ve been exploring with device motion in DPS publications. Check out the video below to see two new samples, and a corrected version of the strawberries example from my last post (the plants were going the wrong way in the last post).

All three of these samples leverage the same basic technique for responding to device motion inside of a DPS publication. The motion-interactive components are implemented using HTML and JavaScript, and are included in publications as web content overlays. In JavaScript, it takes advantage of the ondevicemotion event handler to respond to the physical orientation of the device.

In all three of samples, the web content overlay is set to autoplay, with user interaction disabled. This way the HTML & JavaScript automatically loads and the scripting is active, but it doesn’t block interaction or gestures for DPS navigation. I also enabled “Scale Content To Fit” so that HTML content scales appropriately between retina and non-retina devices.

Adobe InDesign - Web Content Overlay Options
Web Content Overlay Options

Strawberries

The strawberries sample is identical to the one from my previous post. This is just a capture of the updated motion. You can access the full source project to this sample at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/strawberries

strawberries

Adobe San Francisco

The Adobe/inline content example is implemented in the same manner as the strawberries example. The large city image It is a two-layer composition created with Adobe Edge Animate. The foreground building and flag move independently from the background image. I used Photoshop to separate the content into layers and made them animate based on device orientation in the exact same fashion as the strawberries sample. All of the text and image content surrounding the cityscape panorama is laid out with InDesign.

adobe

You can check out the Adobe Edge Animate project at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/adobe%20roof

AT&T Park/San Francisco Giants

The AT&T Park/San Francisco Giants example is implemented with basic HTML and JavaScript, no additional tools were used to create this interactive scenario.   The content on the left hand side was all laid out with InDesign. The content on the right side is the interactive HTML.

att_park

The image used in this example is a vertical panorama captured from a remote control helicopter. This image contains various perspectives that have been composited in Photoshop. The motion of the device is aligned to match the perspectives in the image/viewport; When the device is facing down, the image is looking down and when the device is vertical, the image faces forward. You can check out the vertical panorama image below. If you’re interested in creating a vertical panorama, be sure to check out this tutorial from Russell Brown.

Vertical Panorama over AT&T Park

The HTML and JavaScript used in this example is fairly minimal. The image is applied as the background of the root HTML <body> element, and the position of the background is shifted based upon the device motion event. This approach keeps the HTML DOM as flat and simple as possible.

Here’s the HTML that makes up this example:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Parallax Vertical Background</title>
        <link rel="stylesheet" href="assets/styles.css">
        <script src="assets/zepto.js"></script>
    </head>
    <body></body>
</html>

… and the CSS styles used to apply the background image.

body {
    background-image:url('att_park_vert_panorama.jpg');
    background-position: center;
}

… and the JavaScript used to shift the position based on the device orientation event. Note: this also uses the Zepto JavaScript library.

window.ondeviceorientation = function(event) {
        var gamma = event.gamma/90;
	var beta = event.beta/180;
	var temp = 0;

	// shift values/motion based upon device orientation
	switch (window.orientation) {
		case 90:
			temp = gamma;
			gamma = beta;
			beta = temp;
			break;
		case -90:
			temp = -gamma;
			gamma = beta;
			beta = temp;
			break;

	}

	// update positions to be used for CSS
	var yPosition = 1200 - (beta * 2200);
	var xPosition = -200 + (gamma * 300);
	xPosition = Math.max( -300, Math.min( 0,xPosition));
	yPosition = -Math.max( 100, Math.min( 1400,yPosition));
	//console.log(xPosition, yPosition);

	// apply css styles
	var css = xPosition + "px " + yPosition + "px";
	$("body").css( "background-position", css);
}

Textual content used in this example from: http://en.wikipedia.org/wiki/At%26t_park

Source code for the device motion in this example is available at: https://github.com/triceam/DPS-HTML-Samples/tree/master/ATT%20Park

All of the HTML, CSS and JavaScript code used for these examples is available in the GitHub repository at: https://github.com/triceam/DPS-HTML-Samples

Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate

A few weeks ago, a fellow Adobe colleague showed me a DPS publication that had an amazing design. All of the content looked great by itself, but what really made parts of it “pop” was that in certain areas there was a 3D parallax effect, which made it feel like you were looking into an image that had depth. You could rotate the device and see what’s hiding behind a person, or around the corner of a building.

Here’s what I mean… on the surface the image looked static, but as I rotated it, elements shifted to give the illusion of depth. The background and foreground elements all moved at different rates:

animation
3D Parallax Effects on a Device

I thought this was an incredible example of added interactivity and immersive experiences, and it’s not really that difficult to implement. In fact, I put together this tutorial to show exactly how you can create these types of effects in your own compositions.

To create this kind of an effect, the first thing you need to do is break apart an image into layers – note: you may need to synthesize edges so that there is an overlap in all transparent areas. Then you need to add interactivity in HTML. Align those images so that their default state looks just like the still image, then move the images based upon the device orientation. I move the foreground one way, keep the middle content more or less stationary, and move the background content the opposite direction (all based upon which way you are rotating the mobile device). Since this is all HTML, you can take this content and use it on the web, or import it into Adobe InDesign to export a DPS digital publication.

Step 1: Create Layered Images

You can either create your own layers, or break apart an existing image into layers so that each individual layer can be placed over top each other to form a seamless composition. In this case, I separated the strawberries, the rows of plants, my daughter, and the sky out to separate layers.

Break Apart Layers in Photoshop
Break Apart Layers in Photoshop

To achieve this, I used the following in Photoshop:

Yes, I did this quickly, and there are still some artifacts visible from the layering process.  :)

Step 2: Create Edge Animate Composition

Next, pull all of those images into an Edge Animate composition so you can create the parallax behavior on the timeline. I actually used the exact same technique that fellow Adobe evangelist Paul Trani uses in his parallax scrolling example.

Edge Animate Composition
Edge Animate Composition

The only difference in mine is that I added some simple HTML and JavaScript to handle device-specific behaviors. I added the following:

An HTML meta tag to the root HTML file to prevent device scaling:

<meta name = "viewport" content = "user-scalable=no, width=device-width"/>

JavaScript to disable touch interactions (prevents touch scrolling):

document.addEventListener('touchstart', function(event){
   event.preventDefault();
   return false;
});

JavaScript to handle device orientation – this jumps to a specific point in time in the timeline animation based on the device orientation:

window.ondeviceorientation = function(event) {
   var delta = Math.round(event.beta);

	switch (window.orientation) {
		case 0:
			delta = Math.round(event.gamma);
			break;
		case 180:
			delta = -Math.round(event.gamma);
			break;
	}

   var position = 15000 + (delta * 400);
   position = Math.floor(position);
   sym.stop(position);
   console.log(position);
}

Update 1/7/2014: I added logic to support both landscape and portrait orientation.

Be sure to add both of those JavaScript snippets inside of the creationComplete event for the Stage.  I also over-exaggerated the movement in the timeline.  I think it would look better with slightly less (more subtle) movement.

At this point, you could publish the composition and use it on the web – there’s nothing stopping you at all. In fact, you can check it out here, just load it on an iPad and rotate the device to see the effect. However, please keep in mind that 1) I haven’t added a preloader, 2) the assets are non-optimized and are all retina size , 3) I don’t have it auto scaling for the viewport size, so it will only look right on a retina iPad, and 4) I have only tested this on an iPad – no other devices.

Note: You could also do this without using Edge Animate, but you’d have to hand code the HTML/JS for it.

You can download the source for the Edge Animate project here.

Step 3: Include in InDesign/DPS Composition

To include this in a DPS publication, all that you need to do is export an Animate Deployment Package (.oam file) from Adobe Edge Animate. You can then just drag and drop this into InDesign for inclusion in a DPS publication.

Including the Animation in an InDesign layout for DPS
Including the Animation in an InDesign layout for DPS

Be sure to check out the DPS Getting Started Guide to learn more about DPS, and check out the docs on Web Content Overlays to learn about HTML usage inside of DPS publications.

If you aren’t already a member of Creative Cloud, join today to take advantage of all of our creative tools!

Update: After publishing this I realized that the movement of the plants should actually be reversed.  If you view this link, you’ll see the updated motion (which looks more realistic), but I can’t update the video that’s already been published.

Live Editing HTML on Mobile Devices With Adobe Edge Code CC & Adobe Edge Inspect CC

inAdobe Edge Inspect CC is an awesome tool for synchronized browsing experiences across both desktop and mobile devices. It is incredibly powerful, and streamlines the developer & testing workflows by reducing iterations when testing HTML/JS experiences on multiple devices.

coAdobe Edge Code CC is an awesome code editor for creating HTML/JS experiences. It has a live connection to the browser, so you can see your edits in the browser in real time as you are editing your code… all without having to leave the code editor.

Wouldn’t it be cool if Adobe Edge Code CC could push updates to mobile devices leveraging Adobe Edge Inspect CC? Oh wait, what? It already can? YES, it can! This is one of the coolest new features in this week’s Creative Cloud release. You can edit your code in Edge Code CC, and preview your changes live, and in real time in both the desktop browser and on mobile devices. Take a look at the video below to see it in action:

OK, so how do you get it? Become a member of Creative Cloud… Membership does have its perks! This is available in all of the plans, even the free option. This plugin for Edge Code CC/Brackets is also open source. Know what else is cool about Adobe Edge Inspect CC? It has an open source JavaScript API that you can leverage to integrate your own apps into an Edge Inspect workflow or continuous integration environment. It’s definitely worth checking out.

Getting Started With Adobe Edge Web Fonts

Amongst the big announcements last week, you may not have noticed that the Adobe Edge Web Fonts got a huge upgrade too!  It’s now easier than ever to browse web fonts and include them into your own HTML experiences. All for free, with no Creative Cloud membership required!

Adobe Edge Web Fonts
Adobe Edge Web Fonts

Check out the video below to see the new interface in action:

Also shown in the video is Adobe Edge Code for live editing/previewing HTML in the browser.

Enjoy!

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

Yesterday kicked off Adobe MAX, Adobe’s annual conference for designers and developers to converge and learn about the latest and greatest from Adobe and our community. In yesterday’s keynote, there were lots of big announcements. If you weren’t able to catch the keynote live, it will soon be available for viewing online. In the meantime, I’ve tried to summarize some of the biggest announcements, so let’s get started…

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:

  1. 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.
  2. 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.
  3. 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.

Creative-Cloud-Feature-Reveal-FINAL-12

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:

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