Archive for October, 2012

Introducing Project “Monocle”

Project “Monocle” is a new memory profiling tool from Adobe to profile ActionScript applications (Flash Player on the desktop) and mobile applications (that run on Adobe AIR). 

Monocle uses the Telemetry feature to help you profile your Flash content. Telemetry works inside the internals of the Flash runtime, beyond the ActionScript level, and sends data to Monocle. Monocle then parses the data and displays it clearly and concisely.

Monocle is based on the Telemetry feature, which runs on the release version of Flash Player. So, you do not need the debugger version of Flash Player to use Monocle. You can, therefore, profile your content even in a release version of the build, making this especially helpful in tracking down a memory leak or fine-tuning the performance of a released application.

 To see Monocle in action, watch this video by Adobe’s Thibault Imbert: http://vimeo.com/46917940#

Configuring Project “Monocle” with Flash Builder 4.7 (Beta)

 You can configure Project “Monocle” with Flash Builder 4.7 to profile your ActionScript applications. To get started, you need the following: 

  • Flash Player 11.3 or a higher version (stand-alone or plug-in) and Adobe AIR 3.3 or a higher version
  • Flash Builder 4.7 Beta (available on Adobe Labs)
  • Project “Monocle” (available on the Monocle Prerelease Program; you need to sign up to get access to the prerelease program)

 To learn more about configuring Monocle with Flash Builder, see Using Project “Monocle” with Flash Builder.

A beginner’s guide to Adobe Edge Tools & Services

If you, like me, have been keenly following the Create the Web Tour, you’d know all about Adobe Edge Tools & Services. But if you are one of those who heard the buzz about the Create the Web events, but missed out on the details. Despair not! Here’s a quick introduction to Adobe Edge Tools & Services to help you get started. Read on.

Introducing Adobe Edge Tools & Services

Adobe Edge Tools & Services are designed to help web designers and developers create beautiful websites, digital content, and mobile apps using the latest web technologies, including HTML5, CSS3, and JavaScript.

Adobe Edge Tools & Services include Edge Animate, Edge Reflow (sneak peek), Edge Code, Edge Inspect (formerly codenamed Adobe Shadow), Edge Web Fonts, Typekit, and PhoneGap Build. The Adobe Edge Tools and Services are available with a free or paid Creative Cloud membership. For more information, see http://adobe.ly/VxX0aN.

As you read on, you’ll know more about each product in the Edge family. But before that, watch the video recording of the Create The Web San Francisco Keynote (September 24th, 2012).

Getting to know the Adobe Edge family

 Now, let’s understand a bit more about each product in the Edge family, and who’s best suited to use these products.

Adobe Edge Animate 

Edge Animate is a new motion and interaction tool to create animated, interactive content using HTML, CSS, and JavaScript. Edge Animate is best suited for web designers, web developers, and interactive designers who want to enrich their web content with motion and interactivity.

 Watch this video from the Create the Web Keynote in San Francisco, where Adobe’s Danny Winokur and Paul Trani introduce Adobe Edge Animate.

You can get started with Edge Animate by going to http://html.adobe.com/edge/animate/.

Adobe Edge Inspect

Edge Inspect (formerly codenamed “Shadow”) is an application that lets you preview and inspect web designs on multiple devices. With Edge Inspect, you can easily pair multiple smartphones and tablets with your computer and preview and inspect websites for different form-factors in real time. Edge Inspect is ideal for web developers and designers who are working on mobile projects.

To watch Edge Inspect in action, see this video. You can download and get started with Edge Inspect at http://html.adobe.com/edge/inspect/.

 Adobe Edge Code (Preview) 

Edge Code (Preview) is a code editor for HTML, CSS, and JavaScript. Edge Code is helpful for web designers and developers who write HTML, CSS, and JavaScript.  You can watch this video to know more.

To get started with Edge Code (preview), visit http://html.adobe.com/edge/code/.

Adobe Edge Reflow (Sneak)

Edge Reflow is a new tool, with an HTML-based design interface, for creating responsive web designs using CSS. Edge Reflow is ideal for web designers and developers who want to create responsive layouts, images, and CSS visuals targeting modern browsers and mobile devices. You can watch a sneak peek of Adobe Reflow  in this video.

 To be notified when Edge Reflow becomes available, keep an eye on http://html.adobe.com/edge/reflow/.

 Adobe Edge Web Fonts and Adobe Typekit 

Edge Web Fonts is a new free web font service that gives you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. To learn more, read this blog post, and to get started go to http://html.adobe.com/edge/webfonts/.

Adobe Typekit plans to provide access to hundreds of commercial and premium web fonts.  You can get started by checking out http://html.adobe.com/edge/typekit/.

Also, don’t miss watching this video, from Create the Web Keynote in San Francisco, for an overview of Adobe Typekit, and an announcement of new open source fonts from Adobe and the Adobe Edge Web Fonts.

Adobe PhoneGap Build

Adobe PhoneGap Build is a cloud-­based service built on top of the PhoneGap framework. Here’s a helpful list of FAQs that can provide you more information: https://build.phonegap.com/faq.

To get started with Adobe PhoneGap Build, go to http://html.adobe.com/edge/phonegap-build/.

Join the conversation

So, that was a quick introduction to the products in the Adobe Edge family. But, there’s lots more happening that you should not miss out on (it’s never too late!) —  do join the conversation on Twitter (@createtheweb), just remember to use the hashtag #CreateTheWeb.