Category Archives: Adobe AIR

Flex Mobile European Tour 2011

Posted on by
12

Next week I’m going to be hitting the road with my colleague Mihai Corlan to spread the news about what Adobe has been up to the past few months. The primary reason for the trip is to show off the work the product teams have done with Flex on devices. Mihai and I are going to be doing some hands-on sessions showing just how easy it is to build great looking applications for iOS and Android. Bring your laptop, a copy of Flash Builder, and a device and we’ll walk you through all the steps you need to go through to start building and deploying mobile applications.

The other part of these events is providing some firsthand demos of some of the things we showed off at MAX. I think MAX was a major turning point for Adobe and Mihai and I will be showing off the touch tooling, talking about the creative cloud, and showing all of the things Adobe is up to in the world of HTML5. Plus we’ll give you some sneak peaks of the next generation of the Flash Platform. So there’s a ton of info and you’ll have the chance to ask questions firsthand. 2012 is going to be a great ride for the Adobe community so we want to make sure you have all the info you need to be successful.

Here are the cities we’re hitting:

Update: For those of you in the UK, there is an event on Monday, the 7th. I couldn’t make it out in time for that, but Mihai will be there covering everything.

November 9th

November 10th

November 11th

November 14th

November 15th

November 17th

November 19th

Can’t wait to see you and talk about application development and Adobe’s 2012.

Why I’m Doing PhoneGap

Posted on by
12

I’ve started to see some general questions and fielded a few emails from people asking about why the big push around PhoneGap on the Adobe side. In general, everyone knows the basic answer: we acquired Nitobi (the company behind PhoneGap), so now as Adobe evangelists, it makes a lot of sense for us to know it and be able to talk about it. And I think we’ve done a pretty good job of that. Christophe has a demo app (with source code) up, Greg has a couple of really good posts on it (especially this one that talks about how PhoneGap affects Flex evangelism). So at a general level, it shouldn’t be a huge surprise, but for me it’s quite a bit deeper than that and I wanted to provide a bit of context.

My desire to learn PhoneGap (and by extension get a lot better at HTML/JS) comes from two places. One, if you aren’t learning new technology, you’re not adapting as a developer. Two, as I’ve been looking around and trying to get my head around PhoneGap/HTML, I’ve found some rougher edges. Since I work at a tools company, I want to know where those edges are so that as Adobe builds out tools for this technology stack, I can provide good feedback to the product teams.

New Technology

I’ll say this a thousand times: I think AIR and Flex are the best way to build cross-platform mobile applications. I think they’re arguably the best way to build mobile apps in general for specific types of apps. And with AIR 3.0, AIR has never been more powerful. Stage3D is coming, we have native extensions and captive runtime so as a developer you can really blur the line between your AIR app and native functionality. But as great as I think native extensions are for our developer community, I’m not personally that excited by spending a lot of time writing them. I love the web. What got me so excited about RIAs back in the day was that you could build desktop-like apps with web technologies. I fully believe that Flash is part of the web, and I always will. Java and Objective C are decidedly not web technologies. And I’m not really that interested in spending a bunch of time learning Java/Objective C code. I don’t think that many AIR developers will have to roll their own native extensions, but it is one of the cool new parts of the platform, so a lot of the Adobe evangelists will be spending time getting up to speed on how to build them. That just doesn’t get me excited. Same goes for Stage3D. The stuff you can do with 3D in Flash Player is mind-blowing. I’m just not a 3D developer or a game developer. Luckily the Flash Platform is evolving beyond that as well. The stuff coming up with concurrency and potential enhancements to ActionScript both fall into what I’d call the “web world” and I’m excited to dive into those and get to know them as they get closer.

But, while I’m waiting, it turns out we now have a pretty cool HTML/JS mobile story with PhoneGap. I’ve been dabbling for a little while in jQuery mobile and HTML/JS and I’d consider myself an average JS developer. But you’ve always got to be learning, and if you love the web, you can’t not be good at JavaScript. I’m kind of ashamed that I’m not better, but this is a great opening for me to dive in, dedicate a ton of time and energy to getting better, and coming out a more holistic web developer. One of the things I love about the HTML/JS community is just how varied it is. There are JS developers of all stripes creating their own frameworks, own solutions to architecture problems, their own server solutions, and hell, even their own languages that eventually end up as JavaScript. The raw creativity of the web ecosystem is on full display when it comes to HTML/JS. And there is a certain zen to the chaos that I find intoxicating. I desperately want to be a part of that and the fact that I’m behind the curve is kind of depressing.

Helping Adobe

Which brings me to the second reason I’m planning to dedicate a ton of time to the PhoneGap stack. There are quite a few areas where the workflow is downright broken. My recent foray into on-device debugging is one example. Some of that is just that I don’t know enough, but there are also some real gaps in tooling, services, etc. We’ve got some smart people at Adobe who know the JS/HTML world pretty well. But we can always have more and if we want to provide value to developers in the space, that’s going to require knowing where the gaps are, knowing where to spend our time, and what kind of solutions will be helpful. I want to be able to provide that feedback and the best way to do that is to really know it. The hope is that I’ll be able to contribute in a small way to what Adobe will contribute to the open web ecosystem for developers.

Viva Flash!

So for me this particular foray goes beyond just learning PhoneGap to get up to speed. I think it’s a really cool time to be an Adobe evangelist and I came away from MAX a lot more invigorated than I’ve felt in a long time. Part of that is the Flash side (this session on the roadmap was excellent). But a big part of that was definitely that I think Adobe is going to make a positive impact in the HTML/JS space. The Nitobi guys are all insanely talented and I think that with them we’ve got a vision for mobile apps rooted in web technologies. I’m ready to contribute to that vision.

Update: And Ray pointed out he’s got a ton of stuff up as well.

MAX Reflections

Posted on by
20

I’m sitting down with some tea while my little girl is taking a nap feeling the big exhale from MAX. The energy of the past few days has been largely fantastic and I always find MAX to be rejuvenating both from a professional standpoint and a personal standpoint. Getting to connect with the community and my colleagues at Adobe has been great. In the contrast to the buzzing of MAX, the current deep quiet of my house leaves me reflecting a bit on the week.

This will go down as a very transformational MAX. The announcement of the Creative Cloud and the fact that it will include all of Creative Suite Master Collection as well as the touch tools and services (including TypeKit) is one of the biggest things I’ve seen from Adobe in a long time. And it feels like we’re jumping in with both feet and getting back to the core of what Adobe does: empowering designers to create with great tools. I thought the news about the single edition of the Digital Publishing suite was a perfect example of that. It makes the blossoming world of digital publishing accessible to more people.

The PhoneGap announcement was, for me, the most significant announcement of the week. By acquiring Nitobi (fantastic guys) and contributing the PhoneGap project to the Apache Foundation, Adobe took a huge, huge step into the world of HTML5. It was a perfect way to start a day 2 keynote that focused on the things Adobe is doing to be a part of the HTML5 ecosystem.

Based on the Twitter stream there seemed to be a feeling that the lack of traditional Flash indicated that Adobe is giving up on it. I think that misses the big picture. With the Nitobi acquisition and the embracing of PhoneGap, Adobe is making a significant and meaningful bet on the web and cross-platform mobile applications. This can’t be overstated. For Flash developers we have AIR, which will let you build cross-platform mobile applications. For HTML developers we have PhoneGap, which will let you create cross-platform mobile applications. Both are web technologies that don’t require developers to be locked into a specific operating system or type of device. You see the same thing with our digital publishing suite; it doesn’t matter if you want to deploy on iOS, Android, or PlayBook, you can. And that’s possible largely because of the web formats that go into creating the DPS apps.

This isn’t about Flash versus HTML, this is about supporting creative and interactive content across the broadest platform in the world: the web. Whether it’s mobile apps or browser content; animations, interactive web applications, or 3D gaming experiences, Adobe genuinely believes that the web is the best way for our customers to deliver their creations. By making PhoneGap a cornerstone of our story, I think we’ve proven our commitment to that mission.

I’m glad I was at MAX to see all of this in person.

Edit: This is a great piece by Daryl Taft of eWeek that talks about Flash and HTML. And it’s great to see that the “and not or” message is getting picked up. But what I like about this particular message is that when you follow it upstream a bit more, it just means we love the web. And if that’s the case (and I feel like it is) then the technology becomes secondary to the goals of helping people create cross-os and cross-device content with web technologies.

Flash Player 11, AIR 3, and Flex/Flash Builder 4.6

Posted on by
6

Today is a pretty big day for Adobe developers. We’re officially announcing Flash Player 11, AIR 3, and Flex 4.6 and Flash Builder 4.6. The bits will be available in early October, but we’re announcing things today to help provide developers with information on what’s coming. I’ve been at Adobe for 4 years now and it’s been a very interesting 4 years as the landscape has evolved. It’s definitely been an up and down ride for Adobe developers, but the world has never been a better place for interactive developers, and these set of releases provide a ton of functionality aimed at helping Adobe developers create content in the most cutting edge places.

Gaming

We’ve been doing a lot of work to help enable console-esque games on top of the Flash Platform. Flash Player 11 includes Stage3D, which is going to open up a whole new world for game developers. Zombie Tycoon and Tanki are initial examples of what can be done and I can’t wait to see what comes of it. I’m reminded very much of the early days of Flash where a bunch of creative people were given a technology that was pretty open-ended and poked and prodded to create a bunch of very cool things. I think we’ll see that kind of revolution with Stage3D because of the ubiquity of Flash and the creativity of our developer community. Also in the gaming bucket is a framework we’re working on called Starling, which leverages Stage3D to create a super-fast way of doing parts of 2D games. It’s a great merger between the underlying technology/performance benefits of Stage3D and the kinds of things people want to do in 2D games. I think it’s also going to see some traction beyond games as agencies start to use it to enhance 2D content.

Mobile Applications

Flex and AIR have really found a great place in mobile applications. The performance enhancements in 2.7 made building native-experiences with AIR possible and we’ve seen some great examples of that in action including Machinarium and Caltrain Times. I’ve been impressed with performance on my 100 Days of Exercise application on iOS. I’m incredibly, incredibly excited by what this means for Flash. There’s a definite need to create mobile apps that can be deployed to multiple application stores. The Flash Platform provides a way to create great looking, high-design applications with near-native performance that can run on multiple devices. That’s a big deal.

And this release of AIR 3 goes where we haven’t gone before on the Flash Platform with native extensions. Now if there are features that aren’t included in AIR, like access to a credit card reader, you can build those extensions in native code and then link them to your AIR applications and leverage those libraries. It’s a great mix of native for specific use cases and AIR/Flash for fantastic user interfaces. It’s a big, big, big deal to be able to extend the platform and it’s a huge step.

I also think we have one of the best mobile-tool chains out there. Flash Builder 4.6 is going to help with creating those native extensions while also enabling the use of captive runtime in AIR so your applications don’t need to rely on the external AIR runtime on Android. Combine that with the enhancements that are coming in Flex 4.6 and it adds up to a world class mobile development platform that lets you reach more devices that matter. Flex 4.6 is especially exciting because of the new components that have been added. Flex and AIR are far and away the best toolset for interactive developers or any mobile developer who needs to create content for multiple devices. The apps you can build with Flex and AIR are going to stand out from the boring, standard apps that have started to litter app stores. Creativity will win the day and creativity is at the core of Flex/AIR.

Beyond

So this is a huge release, and I’m excited. But I’m also excited about the future of Adobe and how we are responding and will continue to respond to the evolving marketplace. As Danny Winokur, VP and GM of the Flash Platform, said recently:

“We’re not so concerned about what the right technology is for that as long as we’ll be able to deliver those experiences. We’re working with Microsoft and other members of the HTML community including Google, Apple, and others to enable rich experiences on HTML5.”

This is not a technology war. Adobe is about enabling developers to build the best possible experiences with the technology they want. We want to build tools and services that cater to that ethos. That takes the form of cutting-edge gaming features like Stage3D and world-class mobile app features with Flex, AIR and Flash Builder. But HTML5 is exciting for a lot of reasons, and Adobe will help developers there as well. If you’re an interactive developer, the future is very, very bright for you.

So you better get a good pair of sunglasses.

Success Window fix in Facebook ActionScript API

Posted on by
Reply

Facebook ActionScript APII just added a fix to an issue with the Facebook ActionScript API I ran into where after logging into Facebook on Android, the success event listener would never get called, the login window would never disappear, and you’d be left with a white StageWebView window with the word “Success” in it. It had something to do with a change in how AIR for Mobile handles StageWebView events.

I also noticed that when you would pass in a custom viewport for StageWebView in the initial window, the code would overwrite any settings and make it full screen. I didn’t think that was the expected behavior so I patched some code in FacebookMobile to make sure that if the login function has a viewPort specified, that one gets used instead of creating a new one.

I’m working on getting it added to the release SWC but I can’t tell exactly how the project has that process set up, so for now if you want the fix you’ll have to check out the source directly.

I’m spending some time with the Facebook API recently so if you have any issues, let me know.

AIR for Android Application – 100 Days of Exercise

Posted on by
17

100 Days of Exercise

100 Days of Exercise

Part of the evangelism team has been spending the past few weeks diving in and creating AIR mobile applications. We didn’t want them to look like just any other app so we hired the folks at The1stMovement and had them come up with some very cool designs across a few different application ideas. They gave us the PSD files and then we went to work developing them. It has been a great experience and I think it touches on something that AIR and Flex do really well; expressive, beautiful applications. This is an area where HTML/JS can’t quite cut it and that is pretty tough to do with native toolkits on iOS or Android. But it’s exactly the kind of thing that Flex and Flash excel at. Plus with AIR these apps can be taken and deployed to other platforms (you’ll see a version of all of these on the Apple App Store before too long). The apps themselves are awesome. Terry Ryan built a helpful item-finder called Finicky which incorporates a very cool grunge design. Renaun Erickson built the best looking Caltrain app on the market for finding train schedules and the closest stop to you based on GPS. Both are really spectacular.

Profile Screen

Profile Creation Screen

My contribution is 100 Days of Exercise, an app that will help track exercise progress over 100 days. Evidence has shown that if you do something 100 days in a row, it becomes a habit, and this app helps track that. It’s also supposed to help redefine what exercise means. For a lot of people, they think it means 3 hours at the gym, or an hour run, but it doesn’t have to. Just commit to something small for as long as you feel like you can do it. The goal is to get to the end of 100 days, not to throw yourself into a completely new lifestyle.

Wheel of Death

The Date Selector

One of the things I’m most proud of is the date picker. This is going to be an application for both Android and iOS and those platforms do date pickers very differently. Android has the buttons for up and down and iOS has the scroller. I wanted something that was very high design that would translate across both platforms. They came up with the “wheel of death” as a way to represent the month and date. So I took some of Evtim’s wheel layout code and created a custom Flex list layout that did what I wanted. It looks nice, is unique, performs well, and translates across any platform.

It’s been a fun project and I’m looking forward to adding a few things down the road. If you have any feedback, definitely drop me an email and let me know.

Dismissing a Flex Mobile PopUp With the Back Button

Posted on by
8

In an application I’m building for Android I use a lot of pop up windows (because that’s how Android does combo boxes) and I was having a tough time figuring out how to get them to close when the user pushes the back button. By default, the framework will call navigator.popView() whenever the back button gets pushed and the only way to override that is by doing it at the application level, which isn’t really ideal.

So here’s what I came up with.

Basically I intercept the removing event on the view, which is the last event that gets called before the view goes away. Using that event I check to see if any of my PopUps are on the screen using the isPopUp property and if they are, I use event.preventDefault() to stop the view from being removed and instead just remove the PopUp.

protected function view1_removingHandler(event:ViewNavigatorEvent):void
{
     if(exerciseList.isPopUp)
     {
          PopUpManager.removePopUp(exerciseList);
          event.preventDefault();
     }
 
     if(timeList.isPopUp)
     {
          PopUpManager.removePopUp(timeList);
          event.preventDefault();
     }
}

I’m not sure if this is really the best way to solve this issue, so if anyone has something that they’ve done I’d love to hear about it in the comments.

Skinning a Flex Mobile Button with Bitmaps

Posted on by
4

Flex Mobile Button Skin

Flex Mobile Button Skin

I’m working on a mobile app that requires a lot of skinning and since Flex 4 we’ve gotten a MUCH improved skinning model for Flex. Unfortunately, with Flex mobile, for performance reasons it’s a good idea to use ActionScript-only skins which means going back to the world of Flex 3 and diving into the component lifecycle a bit.

My colleague Terry Ryan has a good blog post that shows what he used to do skinning and I started off with that approach. But something didn’t seem quite right about skinning a button with a function associated with borders, so I tracked down the skinning master on the Flex team, Jason San Jose, and asked him the best way to do it. It turns out it’s really pretty simple to skin a button using Bitmap assets. If you look at the source code for ButtonSkin you’ll see that in the constructor, they associate FXG files (as classes) with specific button states.

upBorderSkin = spark.skins.mobile320.assets.Button_up;
downBorderSkin = spark.skins.mobile320.assets.Button_down;

In that constructor they also check for the DPI of the device and then load in the correct skin class according to that DPI. In general it’s going to be a good idea to check for different screen sizes and load in different assets accordingly, but for this example, I’ve just got one size that stretches reasonably well. The first step is to embed the assets and give them a variable name.

[Bindable]
[Embed(source="/assets/combobox_button_up.png")]
private var up:Class;
 
[Bindable]
[Embed(source="/assets/combobox_button_down.png")]
private var down:Class;

Then, in the constructor, simply set the upBorderSkin and downBorderSkin to those classes:

public function ComboBoxButtonSkin()
{
     super();
 
     upBorderSkin = up;
     downBorderSkin = down;
}

In this example I also wanted to create a graphic that would be overlaid on top of my skin. It’s a triangle graphic that will change depending on whether the app is on iOS or Android because of the different ways that those two platforms do ComboBoxes. On iOS you often have the app slide over to reveal the list (so the arrow would be pointing to the right) and on Android you often get a pop-up window with a list of choices (so the arrow would point down).

Adding Objects To Your Button Skin

To add something to your skin you need to go back and think about how Flex components work. You first want to make sure it’s added using the createChildren method. In this example I have already created the _triangle variable and instantiated it in the constructor.

override protected function createChildren():void
{
     super.createChildren();
     addChild(_triangle);
 
}

Then, once it’s added, you can start to modify it. In this example I wanted to make sure I could dynamically place the arrow depending on the height and width of my button. Luckily, the drawBackground method gives you an unscaledHeight and unscaledWidth, which you can use to calculate where the object should be placed. So all I had to do was tie into the drawing API, use those numbers, and voila, my skin now has the triangle.

override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
     var halfUnscaledHeight:int = Math.round(unscaledHeight/2);
 
     _triangle.graphics.beginFill(0xcee410);
     _triangle.graphics.moveTo(unscaledWidth-20,halfUnscaledHeight-5);
     _triangle.graphics.lineTo(unscaledWidth-10,halfUnscaledHeight);
     _triangle.graphics.lineTo(unscaledWidth-20,halfUnscaledHeight+5);
     _triangle.graphics.lineTo(unscaledWidth-20,halfUnscaledHeight-5);
     _triangle.graphics.endFill();
}

One of the benefits of this approach as opposed to just including the triangle in the skin is that the triangle kind of looked odd when it was stretched and morphed to different screen sizes. This way it’s independent of the bitmap skin and I can change the size according to the size of the underlying button.

Here’s what the finished button looks like and here’s the full code for you to grab.

Mobile Button Up State

Mobile Button Up State

Mobile Button Down Skin

Mobile Button Down Skin

    package skins
    {
    import flash.display.Sprite;
 
    import spark.skins.mobile.ButtonSkin;
 
    public class ComboBoxButtonSkin extends ButtonSkin
    {
    [Bindable]
    [Embed(source="/assets/combobox_button_up.png")]
    private var up:Class;
 
    [Bindable]
    [Embed(source="/assets/combobox_button_down.png")]
    private var down:Class;
 
    protected var _triangle:Sprite;
 
    public function ComboBoxButtonSkin()
    {
    super();
 
    upBorderSkin = up;
    downBorderSkin = down;
 
    _triangle = new Sprite();
    }
 
    override protected function createChildren():void
    {
    super.createChildren();
    addChild(_triangle);
 
    }
 
    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
    {
    var halfUnscaledHeight:int = Math.round(unscaledHeight/2);
 
    _triangle.graphics.beginFill(0xcee410);
    _triangle.graphics.moveTo(unscaledWidth-20,halfUnscaledHeight-5);
    _triangle.graphics.lineTo(unscaledWidth-10,halfUnscaledHeight);
    _triangle.graphics.lineTo(unscaledWidth-20,halfUnscaledHeight+5);
    _triangle.graphics.lineTo(unscaledWidth-20,halfUnscaledHeight-5);
    _triangle.graphics.endFill();
    }
 
    }
    }

A Couple of PlayBook-Related Videos on AdobeTV

Posted on by
3

The PlayBook is on sale today and it really is a beautiful device, especially for Flash developers. Having been able to play with one for a while now I am incredibly impressed with the QNX operating system and the general form factor of the tablet.

I did a couple of videos on the PlayBook for AdobeTV. The first one is on using OAuth with the PlayBook. It should be a good primer for PlayBook developers who want to leverage services like Twitter or Facebook Connect. The second one was a video of one of Renaun’s tips on how to use ImageCache in a QNX list to help improve performance. Both are embedded below.

The Implications of Every Flash Developer Being a Mobile Developer

Posted on by
16

There’s an article in the Wall Street journal today about the demand and insufficient supply of mobile developers, which is becoming a huge problem for companies as mobile strategy becomes more and more critical. One of the main problems, as the WSJ draws out, is that these mobile platforms are relatively new so it’s tough to find developers with a lot of experience. Many companies are turning to good developers and retraining them as mobile developers to fill demand.

If a software engineer doesn’t have mobile experience, the company has sometimes been willing to spend several weeks training the engineer to work on mobile platforms, Mr. Rosenthal said.

Given the mismatch between supply and demand, many companies say they have no choice but to retrain software engineers in the art of mobile development. In the last year, Major League Baseball’s Internet company MLB.com nearly doubled the number of mobile engineers it has to 19, said MLB.com CEO Bob Bowman.

I thought this article was a perfect complement to the announcement this week of Flash Builder 4.5 and Flex 4.5, which are focused explicitly on helping Flex developers build applications for mobile devices like iOS, Android, and the PlayBook. There is obviously huge demand for mobile applications, and because of scarce supply and experience, existing developers are going to have to think about how they can gain mobile experience. Flex mobile does a fantastic job of making that learning curve smaller by letting Flex developers use what they already know and providing some key mobile features (like ViewNavigator for managing views, the ActionBar for managing global navigation, etc) so that they can quickly turn out Flex applications for these mobile devices.

If you’re a Flash or Flex developer, then with AIR for mobile devices and Flex 4.5, you’ve got the skills to go out and build applications for the biggest platforms. That’s a huge advantage to you as a developer and for any developer who doesn’t want to get locked into a specific platform. As the chart below shows, there are a lot of people looking for experts in iPhone, Android, and BlackBerry, but there are a lot more people who are looking for Flash experts. With this release, you get the best of both worlds.