Webinar: using PHP and Flash for developing Rich Internet Applications

On December 2nd, together with Roy Ganor from Zend Company, I will host an e-seminar about PHP and Flash Platform. We will show you how you can create a Rich Internet Application using the Flex framework, Illustrator, Flash Catalyst, and Flash Builder 4. Then we will show you how to connect the Flex application to […]

PHP and Flex Webinars

Last week I visited Zend headquarter and I have an interesting talk over there. One effect of this meeting is this: we will start to do webinars together with Zend.
If you want to find more about Zend Studio and other products related to PHP from the Zend Company, or about the integration between the Flash […]

Article about Flash Catalyst in Dutch Magazine

If you are a designer or you just want to learn how to use Flash Catalyst you may want to check the latest issue Web Designer Dutch Magazine. I wrote an article demonstrating the workflow between Adobe Illustrator, Flash Catalyst, and Flash Builder. Although, by the time the article got published, Flash Catalyst Beta 2 […]

Flash on Mobile and Headlines from MAX

Today at Adobe MAX we previewed the next version of Adobe Flash Player, 10.1, that runs on mobile devices, netbooks and PCs. This is the full version of the Flash Player, with the same set of the features as the desktop based Flash Player. That same Flash Player was also shown running on a variety of netbooks as well. With the release of Flash Player 10.1, you’ll be able to create contextual applications that provide a customized experience – applications that are aware of the device that they’re being run on, and modify their UI accordingly. While it’s not available in a public beta just yet, it will be available before the end of this year for Windows, Mac and Linux, along with Windows Mobile and Palm Web OS.

At MAX we also showed off a new feature of Adobe Flash Professional CS5 that allows designers and developers using ActionScript 3 to create applications for the Apple iPhone. Flash developers will soon be able to submit applications to the Apple App Store — and there are already a bunch of applications available in the store now including: Red Hood, Chroma Circuit, Trading Stuff, Fickleblox, That Roach Game, and Just Letters. While, unfortunately, this isn’t Flash Player for the iPhone, it’s going to open up a lot of opportunities for developers to be able to build applications for the iPhone using Flash. There’s more information about applications for the iPhone available on

We also announced the 2nd betas of Flash Builder 4 (formerly Flex Builder), Flash Catalyst and ColdFusion Builder beta 2. Available for download today, Flash Builder 4 adds refinements to many new features from beta 1, and will help you become more successful using the new Flex 4 framework, providing more clarity between the use of Flex 3 and Flex 4 throughout the IDE. The new data-centric development features have also evolved and expanded based on beta 1 user feedback, providing improved UI and workflow for common tasks.

(Note that the Flash Builder 4 beta 2 release expires after 60 days. See below on how to extend it.)

The easiest way to change the look and feel of those applications is to have your designer design the application using Adobe Flash Catalyst beta 2. It lets designers create rich user interfaces easily using designs from Photoshop, Illustrator and Fireworks and then lets developers open those projects up directly in Flash Builder 4 to add other code (things like database connections etc…). The new Flash Catalyst beta 2 adds support for video and enhanced interaction options.

Today and tomorrow’s keynote will be streamed live at max.adobe.com. It will include demos of applications from many leading brands, showcasing how they’re improving the user experience of their websites with the Adobe Flash Platform. We’ve also made 3 sessions per day from MAX available online. All the sessions from Adobe MAX will be available on the MAX website in the next few weeks.

** To extend Flash Builder 4 Beta 2 **

To continue using Flash Builder 4 beta 2 after 60 days you need to own a copy of Flex Builder 3 and use that serial number to get a serial number to remove the timeout in Flash Builder 4. If you don’t yet own Flex Builder 3, you can buy it with maintenance, which will provide you with a free upgrade to Flash Builder 4 when its released. Yyou can purchase that by calling a Flex sales rep. Email Eardley Walker or phone 206-275-2831 for more details. Flex Builder 3 maintenance cannot be purchased through the online store.

Rundown of the MAX News

The press releases just crossed the wire and we have a ton of news coming out of MAX. Plus more surprises in store for tomorrow. For those of you not here you can still check the keynotes out. I’m hosting the online side of the MAX keynotes and we’re doing some fun stuff before and after the keynotes to give you a sense of what’s going on at MAX. As you can tell from the rundown, there’s some fun stuff today.

Flash Platform Runtimes

We’ve been saying all year that Flash on mobile devices is a push this year and we’ve made a lot of progress. Today at the keynotes we’re going to be showing off Flash Player 10.1 for smartphones. This is the version of the Flash Player that we’ve been working on so hard this year. We’ve been working with some great partners including Nvidia and ARM to optimize the player for those devices and create a quality mobile experience.

Possibly more important is that the number of companies committed to the Open Screen Project continues to grow. Today we announced that RIM is joining the Open Screen Project which means that Blackberry will be supporting Flash Player 10.1. Google is also on board. We’ll have public versions of Flash Player 10.1 for Palm, and Windows Mobile later this year with Google Android and Symbian following shortly. Developers will have mobile bits in their hands soon.

We also announced AIR 2.0 which is going to give Flash developers a lot more native hooks into the operating system. A lot of the developers I talked to wanted it and so that’s what the team did. Mike Chambers talked about some of these features at Flash on the Beach. Another cool feature of AIR 2.0 is the ability to record from the microphone without going to a server. getMicrophone can now be a reality

Tools

We also have public betas of both Flash Builder and Flash Catalyst that are available today. I’ve been really impressed with how far Flash Catalyst in particular has come from Beta 1 to Beta 2. It’s a lot more polished, has more functionality (including video) and feels a lot more fun to use. If you checked out Beta 1 and found it lacking, you should check out Beta 2. We’ve also made big progress on Flash Builder and I’ve been a very happy camper using the tool full-time.

Servers

Some very cool stuff is also happening on the server side. We’ve released ColdFusion 9, a spectacular release with some great features including the ability for you to consume ColdFusion as a service from inside of your Flex application without writing ColdFusion code. I’ve also been playing with the LiveCycle Data Services release and it’s modeler plug-in for Flash Builder. The team has focused on model-driven development making it easy to generate and create a model, then linking that model directly to your Flex application. It helps by generating all of the assemblers and you can directly modify the user interface just by changing the model.

Finally we’ve got some Flash Media Server news. We’re adding support for HTTP streaming which will include support for content protection. We also have released the Collaboration side of Flash Platform Services and announced pricing so you can jump in and start adding collaboration to your application.

If you guys have any questions (sorry I don’t have more fleshed out info, it’s a lot of news), feel free to drop me an email – ryan@adobe.com and I’ll try and answer what I know.

What’s New In Flash Catalyst Beta 2 Screencast

I did a screencast that tried to cover all of the feature changes between the beta 1 of Flash Catalyst and the just-released beta 2. The team has been very hard at work and they’ve done a really good job. It feels more polished and has a lot of great stuff in it.

The quality of the screencast (and the audio) ended up being bad, so I apologize for that. I’ll be better next time.

What’s New in Flash Catalyst Beta 2 from Ryan Stewart on Vimeo.

The Flash community’s thoughts on Flash Catalyst

At Flash On The Beach in Brighton this week my colleague Andrew Shorten talked to a number of Flash designers and developers, asking their thoughts on how Flash Catalyst might impact their workflow for producing rich Internet applications. Here’s the video from those conversations.

Iterative Design/Development with Flash Catalyst and Flash Builder

As I talk to more and more designers and developers one of the things that comes up is whether or not Catalyst makes it easier or harder to do iterative design on a project. The workflow most people have seen is you start in a tool like Illustrator, Photoshop, or Fireworks; create a high fidelity visual design in that tool and then import that into Flash Catalyst where you can start turning that artwork into visual components. I think that’s a pretty powerful workflow for designers of all stripes.

The issue that comes up most is that not everyone starts that way. In a lot of cases people create a skeleton application first in Flash Builder and then want to apply visual designs later. Themes are one option, and we’ve got a new Theme chooser in Flash Builder to help that, but one of the great things about Flex 4 is that it’s easy to create very customized, unique skins for components. So without the ability to do round-tripping between Flash Catalyst and Flash Builder in the 1.0 version of Catalyst, what can designers to to iterate on a design alongside a developer? The answer is the Flex Library project.

I realize this is far from an ideal workflow, but I think for Flash Catalyst 1.0 and Flash Builder 4 it works okay and provides a way for teams of designers and developer to iterate together without stepping on each others toes.

Core Steps

  • Export assets to a Library Project in Flash Catalyst.
  • Import that Library Project as a Library Project into Flash Builder
  • Link the imported Library Project to your main Flash Builder project.
  • Make design changes in Flash Catalyst.
  • Re-export the Library Project and import it by overwriting the old Flash Builder Library Project
  • Your main Flash Builder project will be updated with the new design.

Detailed Walkthrough

So lets say a developer has an application that they’ve created with the default components. I’ll start with something really basic:

<s:Button x="19" y="78" label="Button"/>
<s:HSlider x="210" y="31" />
<s:List x="152" y="108">
 
</s:List>
<s:TextInput x="10" y="31"/>
<s:Button x="152" y="77"/>

iterate_design_01

Clearly a great RIA in the making. But I take a lot of pride in my work and I want to use the power of Flex 4 to create a unique set of skins and components that stand out. In the ideal workflow I would be able to give this to my designer, they would open it in Catalyst, create some great components, and send it back to me. I can’t do that, but I can do some design in Catalyst and then bring those designs in a special way. First I’ll create some great looking components in Catalyst by starting with a blank project and importing Illustrator/Photoshop assets then converting them to components.

itreate_design_03

After I turn all of my artwork into interactive components I am going to pop over to the library panel and start giving them usable names. By default Catalyst calls the created components “Button1″, “Button2″, “ItemRenderer1″, etc. I give them names that will mean something to the developer and help differentiate components.

iterate_design_02

Once I do that, all I have to do is export my library file into an FXPL file by right-clicking anywhere in Catalyst’s Library panel. Once I can do that, I have the ability to import that FXPL file as a new Flex Library project in Flash Builder.

iterate_design_04

That library file contains all of the assets and skinned components I just created. In order to use those, all I need to do is add that project to my main Flex project from the project Properties->Flex Build Path and I can start changing the skinClass attribute for my components to point to those new files.

<s:Button x="19" y="78" label="Button" skinClass="components.BlackPushButton"/>
<s:HSlider x="210" y="31" skinClass="components.MetallicSlider"/>
<s:List x="152" y="108" skinClass="components.GreyDataList">
 
</s:List>
<s:TextInput x="10" y="31" skinClass="components.MetallicTextInput"/>
<s:Button x="152" y="77" label="Button" skinClass="components.GreyButton"/>

iterate_design_05

But now the client tells us they want that black button to be an interstate sign (who knows). I have that asset in Illustrator so I can open my original Flash Catalyst file that I created the library project in and I have a couple of options. I could create a new button with a unique name or I can change the original button component using the round-tripping between Illustrator. I’ll do the latter.

iterate_design_06

Once that’s finished toggle back to the Library panel and re-export the assets making sure to overwrite the original file. Then switch back to Flash Builder and go through the import process again. By default, it will try to create a new project and just append “_1″ to the project folder. Make sure you overwrite your project by removing that. You’ll get a warning, but that’s fine.

This is where the magic happens. Without doing anything, you can run your application and you’ll automatically have those new assets. Any event handlers you’ve wired up to the button or any code you’ve created that use that button will remain unchanged; only the button graphics will change. Because the projects are linked, any change we make to our imported assets filter down to our core project.

The designer can use that original Catalyst file and the re-export process to make modifications to any asset we want. They can also create new components from artwork, create custom components, or add image assets and all of those will be available to the developer inside of that main Flex project.

iterate_design_07

This is all still kind of a work in progress, but I think this will work for some of the design-develop problems people need to solve. While the 1.0 version of Flash Catalyst will have some limitations around the Flash Builder workflow, there are still a lot of basics there that can be built on. If you’ve tried this or have other ideas on how this could work, definitely drop me an email. I’d love to hear feedback.

Screencast: Using the Library Panel in Flash Catalyst

I think the Library Panel in Flash Catalyst is one of the most important parts of the product when it comes to working in a team environment and the design-develop workflow (more on that in a later post). I’m also trying to do more small, detailed Catalyst tutorials as we ramp up to MAX, so I’ve posted a tutorial on using the Library Panel. Most of this will be pretty obvious but there are a couple of nuances to what shows up in the Library Panel so hopefully it’s valuable to folks. I suggest toggling into full screen mode so the tutorial is actually watchable.

Flash Catalyst best practices article published

An article I wrote on Flash Catalyst best practices for the Adobe Developer Connection site went live yesterday.

Flash Catalyst and Flash BuilderOne of the things I’ve found with Flash Catalyst is that the quality and usefulness of the assets and component skins that you’ll make available for the developers you are working with can vary depending upon how you’ve organized your project, as can the amount of rework and restructuring required on their part when they receive your FXP file. By thinking about naming, structure and being organized throughout the design phase of the project, you’ll help to ensure a smooth flow of assets from design into development.

If you’re considering using Flash Catalyst for creating the user interface for a rich Internet application then I hope the hints and tips shared in the article will help you to make the most from Flash Catalyst and ensure that you’re structuring your projects with the eventual output to the developer in mind.

The article is posted here.

If you have any feedback on the article or additional hints & tips then please do share them using the comments.