Monthly Archives: September 2009

Google Wave Pisses Me Off

Posted on by
49

The hyptasticness that is Google Wave continues to annoy me as a Flash developer and RIA enthusiast. Now I preface all of this by admitting that I haven’t used it; maybe when I get an invite this thing will be worth all of the finger grease that keyboards have endured as people talk about it. And I’m not saying it’s not impressive; it is. It’s a great demo, it does some very cool stuff. I’m not annoyed at Google Wave, I’m annoyed because everything that people like about that demo was doable 3-5 years ago with Flash. Flash Remoting, Flash Communication Server, and our much better user interface capabilities pretty much could have created Google Wave. Now I understand that there’s some excitement because this is built on open standards with a more open model, but people don’t get excited about standards- they get exited about vision. And that’s what kills me.

I don’t care if you’re a Silverlight developer or a Flash developer; the technology platform you’ve got is years ahead of what Google Wave is built on. Yet with all of our UI prowess, our design sense, and our pure and simple technical superiority with things like real time communication and scalability we haven’t built very much that captures people’s imaginations the way that Google Wave has. I think we lack the vision.

I think it could be argued that in some cases we’re TOO visionary. If someone had actually built Google Wave 3-5 years ago it wouldn’t have made the same impact because people wouldn’t have realized what it meant. In the RIA world we live in the bubble of the future. I genuinely think that most of us look 3-5 years ahead because that’s where our technology puts us. When people don’t get what we’re trying to pitch we just move on to the next thing. Look at Augmented Reality. Possible with Flash for a couple of years now but it’s just starting to get some mainstream attention. RIA developers seem permanently entrenched in the Technology Trigger of the Hype Cycle and we don’t seem to be able to follow things through to the Plateau of Productivity.

Part of the Wave hypefest is probably because of the world’s love/hate relationship with Google. When they do something everyone goes nuts and that’s because they really do have the power to change the web. They did it once, they’re big, they’re smart, they can do it again. But there are a lot of smart people in the RIA world. Big companies like Microsoft and Adobe and small ones like Aviary and Picnik. We just don’t seem to encourage the visionary demos, the ones that make people rethink how they’ll communicate and interact. I don’t know if that has to come from the big companies directly or whether it’s something we can encourage startups to do. We don’t have a technology problem; if that was all it took we’d be cranking out Wave-esque demos all the time. We just don’t seem to be able to look at the entire scope of what we’ve been doing for the past couple of years and put it together in a game changing way.

I don’t have a solution, but if you’ve got suggestions, I’m all ears.

Can’t be at MAX This Year? Catch it Online Live!

Posted on by
4

max-online-screenshotEveryone I talk to is starting to get excited about MAX. Maybe it’s the Mark Hamill appearance, maybe it’s that some of the new features of the Flash Platform are starting to leak out, or maybe everyone is just excited to see a bunch of friends and hang out to talk tech. The keynotes this year should get Flash developers really excited about the platform. We’ve got some great stuff to show off and a couple of surprises that people will be talking about.

online_maxIf you can’t make it, you’ll be missing out on the networking and the chance to bother talk to the engineering teams but we still want to give you as much access to the conference as possible. So this year we’ll be streaming the keynotes live AND if you show up 10 minutes early you’ll get some behind the scenes peeks that even the regular attendees won’t get to see. There’s going to be some special content just for those of you watching online and we’re going to make it fun and entertaining so you not only get to see the news live but also get some insight into what’s happening at MAX.

In addition, the team is making the most popular sessions in our three tracks – Design, Develop, and Envision – available each day and the other sessions will be following shortly thereafter. So you not only get the info live from the keynote but you can see the best sessions at MAX from wherever you are.

Sonoflash – Easily Add Sound To Your Flash Apps

Posted on by
6

I’m a huge fan of using sound in RIAs. I think that having audio cues is just as important as visual cues and that a click sound, or a subtle noise when you interact with an application makes for a much more usable experience. Unfortunately it can be kind of a pain to add those kinds of sounds to Flash applications. In general you have to go hunt down royalty free sounds and use MP3 files in your application which can add a bit more size to an application than some people want. We made some changes to the sound APIs in Flash Player 10 that let you generate sounds and while I was in Singapore I talked to the guys from Sonoflash who have a really great solution.

You can download a series of libraries from them which are all different soundscapes and have different themes. Add one or more of those SWC files to your application and then you can just call the sounds with some simple ActionScript code. All of the sounds are generated by AS3 an so take up a lot less weight than having to deal with MP3s. It also means you can tweak the sounds on the fly and use the APIs to modify the pitch, frequency, or other variables when you call it. I did a video with them in which they show off some examples and how to use it.

Sonoflash; from Ryan Stewart on Vimeo.

New Project: Flex Collaboration Library

Posted on by
5

I’ve been digging deeply into the dark crevices of Adobe Flash Collaboration Service (AFCS) for my session on creating collaborative components at MAX this week. One of my examples is a collaborative map so I relied heavily on the Yahoo Maps example that ships with the AFCS SDK. One of the things I like about the Yahoo Maps example is that it includes a class that extends ArrayCollection and includes some hooks for collaboration. It’s essentially a collaborative ArrayCollection, and I rewrote parts of it for my own example and have found it to be very useful across a lot of my projects.

I realized that it could lower the barrier to entry on AFCS if some of the Flex classes that people rely on a lot had “automatic” support for collaboration via AFCS. So I took the class I created based on the Yahoo Maps example and tried to make it as “drag-and-droppable” as can be for someone who wants to start using AFCS. It merges two concepts, the ArrayCollection concept, and the CollectionNode concept from AFCS. CollectionNodes let you store any piece of data on the server and let multiple people add/change/remove information from the collection. Events are fired so that any time someone changes a piece of data it can be updated across all of the connected clients.

What I’ve done with my SharedArrayCollection class is put all of that logic into a single class that extends ArrayCollection. Developers can use the SharedArrayCollection just like they would use an ArrayCollection but the difference is that the SharedArrayCollection is automatically enabled for multi-user collaboration with AFCS. The only major difference is that instead of listening for a collectionChange Event you listen for a CollectionNodeEvent.

I’m still hacking out the basics and after MAX I’ll try to provide an example use case so people can see exactly how it works. I’ve put everything up on GitHub under the Flex Collaboration Library project. I’m hoping to make the SharedArrayCollection more bullet proof and then create more AFCS-enabled Flex classes and components. Let me know if you find a bug or if you find this at all useful.

The Full Flash Platform Services Story

Posted on by
3

platform_servicesToday we announced the release of the distribution side of Flash Platform Services. Most of the action is on Techmeme but I liked the ReadWriteWeb post, the TechCrunch post, and the VentureBeat post specifically. Distribution Services is the one that’s new and the goal is to let you track your application across a number of different screens while also simplifying the distribution mechanism. There are also hooks that will let you easily bring in advertising so that you can both track and monetize your content. The first thing people will think of is widgets, and that makes sense because a lot of the “sharing” aspect, which we’re partnering with Gigya for, will remind people of the widgets they’re able to place on Facebook, MySpace, blogs, and other places. But as Serge’s MAX Widget shows, these can be more complicated applications as well. So while widgets may be the first thought, any one of these three threads–sharing, tracking, and advertising–can be brought into an application of any size. So regardless of what kind of application you’re building, these services should be helpful.

Show me the money
One thing this allows you to do is easily monetize your content. The money side of this is that advertisers or developers can buy installs and pay a fee (starting at one dollar) per successful installs. You can also target this a bit, so if you want to make sure a high number of people are embedding your widget, you can promote it via the network and you’ll be charged a fee anytime someone embeds or installs your content. On the profit side, you can also offer to host advertisements via our network. We’ll give you a specific CPM (cost per thousand impressions), we estimate around $5, and pay that out to you.

Mobile
These services also work with mobile devices. This is one of the slickest features I’ve seen demoed because when a user wants to install a shareable mobile application, they’ll get an SMS with a link to the application. When they click it, our distribution service detects which device they’re on and will push out the correct version of the application. Currently we support Symbian S60 phones, Windows Mobile, and the iPhone. That doesn’t mean you can use Flash on the iPhone, but you can create an iPhone version that can be pushed out with our distribution network.

The Rest of the Services Story
There are three parts to the Flash Platform Services initiative; Distribution, Collaboration, and Social. Distribution is what we announced today, Social will make it easy to integrate social networks like Facebook and MySpace, and Collaboration has been in beta for a while, you know it as Flash Collaboration Service. All of these will have a pay-per-use model and will provide added functionality or easy integration for developers. The Flash Platform is the most cutting edge technology on the web. The full range of things it lets developers and designers do just doesn’t exist on any other platform. As a result, we’re able to do some very interesting things when it comes to collaboration, tracking, distribution, or integration. The goal of these services is to make it much easier for any Flash Platform developer to accomplish those things. Lowering the barrier to entry for things that make Flash so powerful is going to be beneficial for a lot of developers.

Writeup of the ActionScript Conference in Singapore

Posted on by
1

I’ve had a great couple of days here at The ActionScript Conference in Singapore (Flickr photos here and here). I had the first session of the conference and got to talk about Adobe Flash Collaboration Service. I had some good questions during the day and I’ve got high hopes for some cool AFCS examples coming out of Singapore. Of course the rest of the sessions were way better than mine. One of the things I love about this conference is the really amazing set of speakers. We got to see some multi-touch demos from Alvin Zhang, and during his session Andre Michelle demoed Hobnox, which is a fantastic use of the new sound features of Flash Player 10.

A few things that I learned during the conference:

  • FDT is really cool. Michael Plank showed off some nice productivity features. Might check this out.
  • Mark Barcinski is hilarious. If you get a chance to hang out with him at a conference, do.
  • If you come to Singapore, you need to hang out with Aleksandar Gvozden. Just don’t drink his Rakia. It tastes like gasoline.
  • I think Peter Elst has a loud, obnoxious side to him somewhere. And he also has an AIR Badge plugin for WordPress that I didn’t know about.
  • The Sonoflash guys are doing some great work at using the new Flash Player 10 sound APIs to make it easier to use sounds in Flash apps (video coming later).

It really has been a great conference. One of the things I love about the Flash community is that there are so many different types of creative people. We have sound guys like Andre Michelle, full on artists like Erik Natzke, video geeks, code monkeys, and everything in between. This conference captures a wide range of those types so you get a great spectrum of talks and some really engaging hall conversations.

Iterative Design/Development with Flash Catalyst and Flash Builder

Posted on by
10

As I talk to more and more designers and developers one of the things that comes up is whether 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 with 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 do 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 other’s 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 let’s 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 in 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, and then convert 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. With that done, 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, I simply 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.

Reasons to Go on RIAdventure

Posted on by
Reply


Ryan takes Doug McCune down at Sumo

This has been an interesting year for the Adobe developer community. We’ve seen public betas of the next generation of Flash Builder, Flash Catalyst, and watched the birth of a large open source project at Adobe in the form of the Flex SDK. We’ve also seen the beginning of developer services like Adobe Flash Collaboration Service and a public beta of ColdFusion that includes lots of Flex/AIR integration goodness, and we heard a lot of talk about mobile devices and Flash. And that’s one of the reasons I’m so excited about RIAdventure. Getting a bunch of smart, passionate, RIA minds in the room is a great way to set the stage for next year.

One of the things that’s nice about RIAdventure is that it comes after MAX so we’ll not only have a whole bunch of new stuff to talk about, but we’ll also be able to reflect on the entire year while discussing what’s coming up in the future.

My primary complaint of the Flash/Flex community is that there isn’t enough higher level thinking. With two powerhouses like Microsoft and Adobe in the space and a number of smaller, more nimble, and passionate startups, there’s a lot of different ideas about what RIAs are or should be. Throw in the open web initiatives with HTML5, and CSS3 and it really hasn’t been a better time to be building applications on the web. What does that mean for the Adobe developer community? What do you like about what we’re doing, what do you hate about it? The focus this year has been on mobile devices, and that’s extremely important. But it also means that the next phase of what I’ll call “core innovation” is coming up. What does ActionScript 4 look like? What direction do our tools move in? How should we evolve the Flex Framework? These are both geeky, nitty gritty questions as well as larger philosophical questions.

To me, there is no better group than the one we have and no better place to disconnect and think about larger issues concerning Flash Platform developers. We’re not going to have all of the answers, but I think RIAdventure is going to be an ideal venue in which to make your voice heard, hear what others want to see, and make your own opinions known. Oh, and have a crap-ton of fun while you’re at it.

Using a MySQL Datasource with Tomcat and LCDS 3.0

Posted on by
2

I’ve spent today becoming familiar with LiveCycle Data Services 3.0 and am excited by the direction the product is going in. You’re going to hear a lot more about model driven development from us and I think LCDS 3.0 is a product that 1) makes full use of the Flash Platform and Flex’s capabilities and 2) shows what it takes to build a genuine rich Internet application.

One issue I ran into though was getting a MySQL database to work with the Tomcat installation of LCDS 3.0 so I wanted to quickly blog the steps I went through. The instructions here were hugely helpful and I wanted to break them down for an LCDS-specific install of Tomcat

  • First you need to get the MySQL drivers for Java which are available here. As of this post the most recent drivers are version 5.1.
  • Copy the mysql-connector-java-5.1.8-bin.jar file into the lib/ directory of your tomcat install (/Applications/lcds/tomcat/ by default).

Once that's copied, open the xml file for your specific server inside of the tomcat/conf/Catalina/localhost/ directory. In this case, I'm using the default lcds server, so I need to change lcds.xml. You'll also see the other servers that come with LCDS 3.0 like lcds-samples.xml and ds-console.xml.

Copy this code into that file anywhere inside the Context tags and replace {databaseName} with the name of your database, and change the other {} variables accordingly.

    <Resource name="jdbc/{databaseName}" type="javax.sql.DataSource"
          driverClassName="com.mysql.jdbc.Driver"
          url="jdbc:mysql://{host}:{databasePort}/{databaseName}"
          username="{username}" password="{password}" />

Now you're all set! Once you've got RDS set up on your LCDS 3.0 server you'll be able to see the MySQL database and start using it for your model driven development.