Flash Catalyst/Builder Screencast

I mentioned this in my post about the Flash Builder and Flash Catalyst Beta launches but I wanted to make sure to give props to the guys at Universal Mind. We worked with Darron Schall and Francisco Inchauste to create a good workflow demo and I think they did a really solid job. A lot of us will be using some parts of this demo on the user group tour and it includes a bunch of new features from Catalyst, from Flash Builder, and ColdFusion 9 so it does a great job of showing off the workflow. I’ll try to post the assets soon as well. I took that demo and created a screencast that shows it off.

flash_catalyst_tutorial_screen1

The screncast walks you through the basic workflow of taking a Photoshop file, importing it into Catalyst, and turning the artwork into components. Then in Flash Builder we use some of the new design-centric development features to wire up that artwork to an actual data source. All of the data is coming from a ColdFusion server using the new ORM/Hibernate functionality.

Flash Builder and Flash Catalyst Betas Now Available

Flash Builder Flash Catalyst LogoWe just dropped the bits for both the Flash Builder beta and the Flash Catalyst beta. These represent a big jump in how people are going to work with the Flex Framework and I’m happy to see the hard work of the teams now available to everyone. So grab the bits and start creating some Flash content. Important: If you installed the MAX public beta, check the bottom of this post for some instructions that will help you through some install problems that may come up.

Keep in mind that we’re still early for both Catalyst and Builder. We won’t have everything we want in Catalyst 1.0 but this beta represents a HUGE step over what some of you saw at MAX last year so we’re making a lot of progress. It’s snappy, it’s tightly integrated with the CS4 tools, and it opens up a whole world of design centric tooling for the Flex Framework. What makes this all possible are the fundamental changes to the Flex SDK for Flex 4. We’ve completely separated the logic from the look of a component which means designers and developers can collaborate without stepping on each others toe’s. We’ve abstracted the layouts so you can dynamically change the layout of components creating some very cool looking components. We’ve integrated Flash Builder with a lot of your favorite backend technologies so it’s easy to consume and generate services to connect to data.

I’ve created a screencast to help people check out the new features. It goes through the workflow of moving from a PSD to Flash Catalyst and on to Flash Builder when you want to bring in real data.

Flash Catalyst Tutorial

There are a lot of resources to make sure you get up to speed quickly using the new tools. Here’s a good list:

If you’re having trouble uninstalling the MAX preview and installing the public beta, give these steps a try:

  • Uninstall Catalyst
  • Download the Mac version of the Repair tool from this page: http://www.adobe.com/support/contact/licensing.html
  • Run the Repair tool with the default options.
  • After the Repair is complete, re-install Catalyst and enter the SN when prompted by the installer.

HTML5 Versus Flash Versions

Serge has a great post on Adobe and the open web. I don’t think Adobe gets enough credit for contributing to the open web. That takes a couple of approaches. One is, as Serge said, we participate in a lot of open source and open web initiatives. But we also spend a lot of time and money investing in the web and solving problems that we come across. Cross-domain support is a perfect example. It was a problem we saw coming long before Ajax and we created a solution in the Flash Player to support cross domain requests. I ran down some of the new APIs and changes between HTML5 and HTML4 according to Wikipedia and compared them to what we have in Flash and when we added it.

Not all of this is 100% accurate but it’s the best guess I have at 2:00 AM. I’ll update it as I get new info.

HTML5 Flash Version
Canvas Tag (2D Drawing and Animation) FutureSplash (Flash Player 1)
Video/Audio Support Flash 2 (Audio) Flash 6 (Video)
Offline Storage Database No real offline storage in Flash Player, Adobe AIR added it in version 1
Drag-and-drop Supported in ActionScript 1(Flash Player 5)
Cross-Document Messaging Cross-Domain support in Flash Player 7
MIME type and protocol handler registration I don’t think there is anything analogous to this in Flash.
New parsing rules N/A
New elements such as progress, nav, time, etc Largely covered with ActionScript 2 (Flash Player 7)
New form controls (dates, times, email, url) Shipped with Flash authoring (Flash Player 3/4)

Introducing Presentations on Acrobat.com Labs (With Screencast)

Tonight we released a beta version of Presentations on Acrobat.com Labs. As you’d expect it lets you create presentations with the same collaboration features that we have in Buzzword. It also has a very similar user interface so if you like the Buzzword UI you’ll feel right at home with this one.

Acrobat.com Labs

I did a quick screencast (embedded below, but the link is better) that walks through some of the functionality. It was quick and dirty so it’s a bit rough around the edges but it does a pretty good job of showing everything off. I hadn’t played with this until today but I’m impressed with how full featured it is. When you combine that with the power of collaboration I think there are some exciting opportunities that open up. Congrats to the Acrobat.com team.

Amethyst Hits Beta 5 – Includes Support for Refactoring

I just got an email from Huw that Amethyst, one of the Visual Studio plugins for Flex, has hit Beta 5 which includes refactoring support and the options to run and debug using a web server. He’s also made some tweaks to the code formatting and some bug fixes.

I’m really excited to see the Visual Studio/.NET ecosystem for Flex start to grow up. Between WebORB for .NET, FlourineFx, Amethyst, and Tofino it’s a pretty good time to be combining .NET and Flex.

You can grab the Amethyst Beta 5 bits here. Make sure to give them feedback and let them know what you think.

Flex 4 Layouts on Tech Talk with Ryan Stewart

One of my favorite features in Flex 4 is the ability to easily apply custom layouts to your components. It’s going to make things like building lists very, very interesting and let you create some unique looks. A while back I sat down with Evtim Georgiv on the SDK team to talk about layouts in Flex 4 for Adobe TV. You can check out the video below or use the link. At the end I walk through a couple of the methods that Evtim talks about and then show one of his samples that gives a glimpse into what you can do. This is definitely less of a technical session and more of a teaser so you’ll jump in and want to check out more.

Pandora Nails it: Pay a Premium for the Experience

pandora_oneWhen we first started talking about AIR I envisioned it as a way for web application developers to create a premium experience around their content. Ideally that premium experience would be worth the money and AIR would help with the “freemium” models out there. It looks like that’s exactly what Pandora is doing with Pandora One. The new service costs $36 a year and you get not only higher quality streaming with no advertisements but also the option to install an Adobe AIR-based desktop application so you can break out of the browser.

AIR was never meant to replace web applications or the browser. It was created so that web developers could take their skills and build web-centric desktop applications. The Pandora One model is a perfect example of why that can be so beneficial. Taking a lot of the same code, the same developer skills, and the Pandora brand they’re able to very quickly provide a premium experience on the desktop that people are willing to pay for.

Awesome move by Pandora.

Flex Builder “Gumbo” is Being Renamed Flash Builder

color_wheelDo you remember the wheel o’ icons that John Nack posted on his blog when the CS3 branding first came out? I wasn’t a big fan when I first saw them but they’ve grown on me a lot since then. But right in the middle were a bunch of grey/black icons and right behind the black Fx that we all know and love was an Fb icon for Flex Builder. For some reason that never got used and to this day I don’t know why. So my first reaction to the changing of the name from Flex Builder to Flash Builder is that it’s about damn time.

I came up as a Flex developer. I’m still a Flex developer. If you’ve ever seen me try and demo Flash CS4 you know how much of a trainwreck I am when I’m outside of my precious eclipse-based IDE. In the early days there was a pretty solid line between people doing Flex and people doing Flash. But as Flex Builder evolved, a lot of people started using it for AS3 only projects. The “traditional Flash developer” would move between Flex Builder and Flash CS4 a bit or had started to use Flex Builder as their primary development environment even if they weren’t using the Flex Framework at all. As the Flash Platform has grown up, the types of people using the tool has increased. And that’s what a good tool should do; it should be basic and powerful enough to meet a variety of needs.

Flash builder Logo

So with the name change, we’re acknowledging that the tools for creating Flash content are independent of frameworks or other parts of the Flash Platform. And I don’t see how that’s a bad thing.

Some of the push-back I’ve seen has been from Flex developers who enjoyed a clean break from the perceived baggage of the Flash brand. For you guys, not much is changing. Knowing the Flex Framework inside and out is still going to be a much-demanded skill. You’ll still be able to call yourself a Flex developer, you can still say you know how to build Flex applications and you can still pitch clients on Flex instead of Flash. No one is going to ask you what tool you’re using. The Flex brand still lives. The bigger concern, and one I think is more valid, is one like Constantiner posted:

Ok. What we have now? We have Flash IDE and Flash Builder IDE (looking forward for questions from customers and colleges about what is difference and why Flash Builder IDE has advanced code editor but can’t compile fla-files and Flash IDE can compile them but useless for serious coding?). And we have Flash Catalyst which can use projects imported from Flash Builder IDE but can’t share the same project and can’t edit fla-files. And have one ugly child aka Flex SDK which is what? How to explain colleges and customers why Flash Builder IDE hasn’t timeline and can’t build flas but can use something which called Flex SDK (why Flex? why Flash?). And in other hand Flex SDK can be used to develop only in Flash Builder IDE and Flash Catalyst but not in Flash IDE. And what about beginners? Why Adobe going to drive them mad?

I can tell you after watching this whole experience that at a big company doing something as simple as a name change takes a LOOOOOONNNG time. Let alone trying to take two mature products like Flex Builder and Flash CS4 and get them to work better together. So Constantin is absolutely right when he says that there are still a lot of things that need to happen. But now that the naming is set we’ll keep working on bringing the tools closer together so that you can interchange between all of them as well as the design tools on the Creative Suite side.

I’m less concerned about people figuring out which tool to use. As I see it, here’s the landscape for Adobe’s Flash Platform tools:

flash_platform_des_dev

The developers to the platform will use Flash Builder, the designers can use Flash Catalyst, and those of you who are creative developer rockstars will continue to use Flash Professional to create some great content.

Hopefully this clarifies the name change a bit. We’re going to be doing a huge user group tour to talk about Flex 4, Flash Builder, Flash Catalyst, and ColdFusion 9 in June, so if you want to find out more, check with your local user group. The long and short of the announcement is that all of your tools and technologies are staying the same, we’re just working on making them play better together.

Another Step Forward in Opening Up Flex – FlexUnit 4

This week we added FlexUnit 4 alpha to the Adobe Open Source site but the biggest news was that Michael Labriola who created Fluint is going to be helping lead the FlexUnit project and will be merging the two projects. He’s got a great roundup of the new features in FlexUnit 4 on his blog and there is a TON of stuff there. Fluint was a great project that the Digital Primates crew clearly spent a lot of time on. Now we get those features in Flex Unit 4 and all under the open source Flex umbrella.

Big thanks to Michael for working with the Flex team to make this happen. It’s a great example of the community making a huge impact on the project. Hopefully we’ll be able to get some FlexUnit 4 stuff up on the developer center soon.

Using FXG Assets as Custom Markers in Google Maps

Pamela Fox‘s talk at Web09 got me all hyped up on using custom map markers in Google Maps and it’s possible in Degrafa but I figured with Catalyst and Illustrator out there supporting FXG, it should be possible in FXG as well. Luckily the answer is “mostly yes”.

I’m hoping to do a deep dive on FXG later but I’ll give the main points here. There’s a difference between MXML Graphics and FXG. They use the same tags but MXML Graphics can be altered at runtime. FXG files are more like static assets that can’t change. This means you get a bit more performance because they’re optimized at compile time. Using MXML graphics as marker icons isn’t possible because there doesn’t seem to be a way to get a DisplayObject from MXML Graphic assets. But in the latest nightly builds of the Flex 4 SDK you can treat FXG assets just like an image or SWF and reference it that way in your code. That makes using FXG for custom markers simple. It also means it’s very easy for a designer and a developer to work together and be able to use things like source control while the designer and developer are each working in their tools. The screencast below shows what I mean.

The first thing you need to do is create an FXG file. This can be done with Illustrator or Fireworks CS4, just create some artwork and save as an FXG. Note that you can take any freely licensed SVG file and turn it into FXG using Illustrator CS4. Once you’ve got that, drop the FXG file into your Flex project. It’s a good idea to follow normal class naming conventions with the first letter being capitalized.

Once that’s done you can create an instance of that asset like you would any other ActionScript class and then set the icon property of your MarkerOption class to your FXG asset. In the case below I’ve got an FXG file called HikerIcon in the assets folder.

1
2
3
4
5
6
7
8
9
10
11
12
	import assets.HikerIcon;
 
	// this is in the onMapEvent handler
	var hikerIcon:HikerIcon = new HikerIcon();
	var markerOptions:MarkerOptions = new MarkerOptions();
	markerOptions.icon = hikerIcon;
	markerOptions.tooltip = "FXG Test";
	markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER;
	markerOptions.iconOffset = new Point(0,0);
 
	marker = new Marker(map.getCenter(), markerOptions);
	map.addOverlay(marker);

That’s it, you’re all set. As I mentioned, I did a screencast below that talks more about the workflow for designers and developers using FXG. Because FXG is XML-based, it fits with how developers think about the project and can be modified if need be by developers inside of Flex Builder. But since these are graphical assets, designers have the option to make changes just like they would be able to with other external images. Since this is a big screencast, I suggest you click on this link to watch it instead of trying to view it in the small area below (or use full screen mode).