Today at Adobe’s Create the Web event in San Francisco, the software giant is launching a brand new Web-focused “Edge family,” consisting of unreleased and rebranded tools like Edge Animate, Edge Reflow, Edge Code, Edge Inspect, Edge Web Fonts and more. This announcement reflects quite a bit on Adobe’s shifting priorities, emphasizing both open Web standards and the growing benefits of a Creative Cloud subscription.

A host of new products are being released, but perhaps most notably, Adobe Edge Preview is now leading the way for an entire Edge suite. To be clear, the product that was once called “Adobe Edge Preview” is now “Edge Animate,” which fits within the new “Edge family” of apps and services.

To learn more about everything that will be launched, previewed and demoed today, all you have to do is look below.

Edge Animate 1.0 (formerly Adobe Edge Preview)

Screen Shot 2012 09 24 at 12.38.14 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

Described as a “motion and interaction design tool,” Adobe Edge Preview Edge Animate lets you create Flash-style animations that are built using open Web standards like HTML, JavaScript and CSS. Edge Animate has been available in various forms within Adobe Labs since August 2011, and now we’re finally able to explore the full-fledged release, version 1.0.

Edge Animate is certainly one of the most important apps in the Edge family, and its success will leave a direct impact on Adobe’s future success as a rich content creator for the Web. Additionally, as this tool evolves, it will adversely effect Flash’s usefulness by providing similar functionality with mobile-compatible technologies.

Screen Shot 2012 09 24 at 1.28.02 PM 520x284 Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

Perhaps surprisingly, Adobe will offer Edge Animate v1.0 for free, for a limited amount of time, as a thank you to early users. Even if you haven’t downloaded the app before, you can snag a free perpetual license today with updates included (until the next version).

edge animate feature reach Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

Eventually, the app will only be available in three ways: as a $499 app, through a paid subscription to Creative Cloud or through a $14.99/month standalone subscription. As you might expect, a subscription for this sort of tool is much more necessary than a subscription to a graphics editor like Photoshop, given how rapidly Web standards evolve and change.

➤ Edge Animate

Edge Code (Brackets)

Screen Shot 2012 09 24 at 12.46.46 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreDon’t worry: Brackets, Adobe’s open source code editor for JavaScript, CSS and HTML, is not going away. Brackets will continue as an open source project, built using the very same technologies that is was created to edit, but now Adobe is launching a public-facing version of that product (think Google Chrome vs Chromium), which will be continuously based on the progress of Brackets: Edge Code.

Edge Code is essentially Adobe’s fresh start at building a code editor for the modern Web. Interestingly, this editor and in fact the entire Edge family steps on the toes of Adobe Dreamweaver — a lagging utility for building Websites, packed into the Creative Suite.

This is just a preview release, when means it’s free for anyone to use, but isn’t quite ready for prime-time yet.

edge code hero 520x329 Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

TNW asked Adobe if they felt that Edge Code is a competitor to popular pseudo IDEs like Coda or Espresso, and we received an interesting response:

We really appreciate the comparison to Coda/Espresso. Those tools have been out for 5+ years and are really quite advanced. We actually don’t believe that there is a direct competitor to Edge Code. Edge Code is the only code editor focused on HTML, JavaScript and CSS that is built with HTML, JavaScript and CSS. Because it’s based on the Brackets open source project, anyone who has the skills to use Edge Code has the skills required to customize, extend and contribute to the project. Edge Code is free and open, so we hope it will be just one of the many tools professional web designers and developers use regularly.

➤ Edge Code

Edge Inspect 1.0 (formerly Adobe Shadow)

Screen Shot 2012 09 24 at 12.48.07 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreLeaving its cool name (Shadow) and preview status behind, Edge Inspect v1.0 is a tool that lets Web designers preview sites across mobile devices. As you edit your responsive design, Inspect makes it easy to view your changes live without having to awkwardly fumble with mobile browsers.

Adobe Inspect 520x289 Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

We’ve been fans of this app’s potential for quite a while, and this release is just one way Adobe is showing its seriousness about embracing tablets and phones despite Flash’s incompatibility with both.

Edge Inspect

Edge Reflow

Screen Shot 2012 09 24 at 12.37.43 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreTeased as a completely new tool, Edge Reflow is one of the most intriguing apps Adobe is announcing today. Reflow is a Web design tool which lets you to create responsive layouts with CSS. Unlike the rest of the apps and services announced today, however, Edge Reflow is only being shown as a sneak-peek. No previews are available quite yet, but Adobe says we can expect a preview release by the end of 2012.

On first look, it’s curious that Reflow is being released as a stand-alone tool, but given the generally new and complex nature of creating responsive designs, we can understand why users might like their hands held through this process.

Screen Shot 2012 09 24 at 1.29.23 PM 520x278 Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

➤ Edge Reflow

Edge Web Fonts

Screen Shot 2012 09 24 at 12.37.20 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreLike Reflow, Edge Web Fonts is being released today as a completely new (and free) tool for Web designers. What’s interesting, however, is that Edge Web Fonts serves almost exactly the same purpose as Typekit.

Edge Web Fonts is simply a free, Typekit-like web font utility that lets designers take advantage a growing library of open source typefaces — including type originally commissioned by Google – on websites and in apps.

The collaboration with Google is particularly interesting to us, as Google Web Fonts holds a similar purpose. TNW asked Adobe about this connection:

Edge Web Fonts contains many open source web fonts originally commissioned by Google, but it is not intended to be a mirror of the Google Web Fonts service, nor is it intended to be competitive with the Google Web Fonts service. Adobe wants Edge Web Fonts to drive additional web font adoption, an aim commended by Google – which is why they support this project. Google and Adobe are excited to partner together to drive web font adoption.

➤ Edge Web Fonts

Typekit

Screen Shot 2012 09 24 at 12.36.54 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreTypekit, Adobe’s premium Web typography service which was acquired back in October 2011, is adding 1,000 fonts from Monotype and is now being packaged within the Edge family. Users can still subscribe separately to the service, and alternately gain free access through an Adobe Creative Cloud subscription — something that was possible since the launch of Creative Cloud.

Typekit

PhoneGap Build 1.0

Screen Shot 2012 09 24 at 12.48.47 PM Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and moreLike Edge Inspect, PhoneGap Build is leaving behind its preview status with today’s release of v1.0. PhoneGap Build is a cloud service created with the open source PhoneGap utility which packages mobile apps built with HTML, CSS and JavaScript into native apps that run on various mobile platforms.

This new service makes PhoneGap more seamless than ever before, and while PhoneGap has been criticized in the past for leading to sub-par apps, the tool is worth keeping an eye on.

➤ PhoneGap Build

Pricing

Like usual, Adobe hasn’t made its pricing for the Edge Family crystal-clear, and that’s because some of the offerings are available in a number of different ways. The graphic below should ease your confusion (full size here).

Screen Shot 2012 09 24 at 11.31.58 AM 520x325 Adobe launches Web focused Edge family: Animate, Reflow, Code, Inspect, Web Fonts and more

As we mentioned above, Edge Animate will be available for free (intro offer) for now, but will eventually be sold as a ~$499 app, through a paid subscription to Creative Cloud, or through a $14.99/month standalone subscription. Similarly, Edge Inspect, PhoneGap Build and Typekit also offer standalone subscriptions and free, limited versions through a Creative Cloud starter plan.

For today, Edge Animate, Edge Code and Edge Web Fonts are completely free.

The Take Away

When Flash truly ruled the Web as the only tool for quality Web design (pre-CSS domination), Adobe was King. In an open standards world, however, this is just not the case.

Over the past decade, Adobe has become accustomed to dominating the spaces it operates in, particularly with the Creative Suite (Photoshop, Illustrator, etc), which still serves as a near monopoly for design professionals (even considering Gimp, Pixelmator, and the rest). The new Edge family signals a major change for Adobe as an important player in this space, because for the first time in quite a while, Adobe is not attempting to assert complete control.

Now, Adobe is openly accepting the fact that many professionals will want to swap out or only use a portion of the Edge products in order to fit into an existing flow. This is something the company has told TNW directly.

On top of that, Adobe is investing heavily in technologies which it has little control over: HTML, CSS and JS, while initiating open source projects and bringing in early feedback as an integral part of its development process.

What we are looking at today is a new Adobe, and Adobe’s future is open.

Head here to learn more about Creative Cloud.