Back in the summer, I was lucky enough to get my hands on some early builds of Stage3D for mobile. I built some simple examples, including basic geometric shapes and simple 3D bubble charts inside of mobile Flex/AIR applications. I have been asked numerous times for the source code, and I’ve finally given in, and am sharing some source code.
I am not posting the full mobile application source code, since Stage3D for mobile is not yet available. However, I have ported the 3D bubble chart example to run in a Flex application targeting the desktop (Flash Player 11). The bubble chart example extends the concepts explored in the basic geometric shapes example.
Before you say “shoot, he didn’t give us the mobile code”, let me explain… When I ported the code from the mobile project to the desktop Flex project, all I changed was code specific to the mobile Flex framework. I changed <s:ViewNavigatorapplication> to <s:Application> and the corresponding architecture changes that were required, and I changed the list item renderers to Spark item renderers based on <s:Group> instead of mobile item renderers. In the mobile item renderers, all my drawing logic was done using the ActionScript drawing API. For simplicity in the port, I just used <s:Rect> to add the colored regions in the desktop variant.
That is all I changed!
The stage3D code between the desktop and mobile implementations is identical. You can see the desktop port in action in the video below:
The source code was intended to be exploratory at best… I was simply experimenting with hardware accelerated content, and how it can be used within your applications. There is one big “gotcha” that you will have to watch out for if you want Stage3D content within a Flex application… Stage3D content shows up behind Flex content on the display list. By default, Flex apps have a background color, and they will hide the Stage3D content. If you want to display any Stage3D content within a Flex application (regardless of web, desktop AIR, or mobile), you must set the background alpha of the Flex application to zero (0). Otherwise you will pull out some hair trying to figure out why it doesn’t show up.
The source code for the web/Flex port of this example is available at:
BlackBerry DevCon 2011 kicked off earlier this week, and surrounding it were some exciting announcements around Adobe tools and BlackBerry platforms. These announcements include Flash Player 11 and AIR 3 features available on the PlayBook – including Stage3D (among many other great features). Also announced was AIR support for the new BlackBerry BBX operating system, as well as PhoneGap support for BBX/QNX. BBX is the new QNX based operating system for BlackBerry smartphones.
Adobe’s VP and General Manager of Interactive Solutions, Danny Winokur, joined RIM’s Alec Saunders, VP of Developer Relations and Ecosystems Development, on stage at BlackBerry DevCon Americas 2011. Danny spoke about the exciting possibilities that Flash and HTML5 bring to the web and mobile app development – specifically for the BlackBerry PlayBook and BBX in the future. (read more here, or check out the video below)
Can you feel the excitement?!?!?! Adobe has just announced the availability of AIR 3 and Flash Player 11 for early October! This release will bring a wave of change to the Internet and development tooling as you know them. From console-quality hardware accelerated 3D, to AIR captive runtime, to native extensions… Adobe tools will enable the next wave of innovation in games, rich media, and multi-device applications. In this release there are a lot of new features to get excited about.
Flash Player 11 and AIR 3 will be publicly available in early October. Flash Builder and Flex will offer support for the new features in an upcoming release before the end of the year. We’ll have a lot of news and new content at MAX, and in the meantime, you can download the Flash Player and AIR betas on Labs, and start checking out some of the amazing content that’s already been built by developers!
Here’s a little demo I put together that I’m just too excited not to share… Fellow Adobe Evangelist Christophe Coenraets has an awesome Mobile Trader application that highlights the power of LCCS collaboration and realtime information, using Flex for mobile. I decided to see if that same collaboration example would work with the Stage3D data visualization component I’ve been playing around with, and guess what: it works fantastic. I’ve given it the nickname “project awesome” b/c it combines realtime collaboration (audio, video & data), Stage3D hardware accelerated graphics, and desktop to mobile paradigms. Check it out below:
If you haven’t already seen Christophe’s Mobile Trader, you can check it out here:
Christophe has made the source of the Mobile Trader application freely available on github, so go download it and creating your own collaborative applications! I know, you *really* want to see Stage3D out in the public… I promise you, it is coming, and it will be enable you to build great apps & games.
I almost forgot to mention: I wrote less than 200 lines of code to create project awesome! It uses the Away3D library, and LCCS… the hard stuff is easy with Flex.
Stage3D is starting to look incredibly promising for developers. Whether you are targeting mobile, web, or desktop or developing for gaming or data visualization, the future is bright. I was in the Adobe offices in San Francisco last week meeting with the team, and Thibault Imbert showed us some jaw dropping demos… Keep an eye out for whenever those become public.
…but it is not all about games. In a recent post, I showed off some basic stage3d hardware accelerated graphics within AIR on mobile devices. I’ve been developing some ideas to show how this can be applied within non-gaming contexts, and I figured I’d show my progress so far. The previous post was an actionscipt-only project. In enterprise scenarios, you most likely will want to take advantage of the plethora of pre-built components that the Flex framework provides. The progression for me was natural; How about showing what Stage3D can do within a Flex for mobile application?
Above is a fairly basic visualization application. There is a stage3D-based custom charting component, tied into data that is displayed using a standard spark List with a custom item renderer. The chart is based on my previous example, and obviously isn’t fully fleshed out (no legend, no ticks, no axis labels, etc…). Did I mention, this is on a tablet? Oh yeah, that is pretty awesome. Did I also mention that it will be cross platform once released? Oh yeah, that is pretty awesome too.
The data is morbid, but it works for my scenario. It is based on this data set from CMU.edu, which shows the cancer deaths and the number of cigarrettes consumed per state.
Please keep in mind, this is all beta, and not a final build. I’ll post the source code once Stage3D for mobile is publicly available.
I recently had the opportunity to start playing around with Molehill for mobile (hardware accelerated 3D graphics), and I think it is something that many of you will be very excited about (see video below). Everyone thinks that 3D is just for games, but it’s not… 3D graphics can be used for complex data visualizations, scientific modeling, or a whole host of other subject areas.
I started down the path of creating 3D charts that are capable of rendering on mobile, using the Away3D engine. This is really just exploratory work, and I have it rendering multiple axes with 250 spheres (individual data points), which is about 70K-90K polygons drawn onscreen at any given time. Check out the preview below:
Molehill (Stage3D) on Mobile
This preview is running on a Motorola Atrix, and Samsung Galaxy Tab 10.1 with a prerelease AIR runtime… more devices will coming soon. Source code will be available once molehill for mobile has been released.
Tomorrow (Thurs) I'm presenting an "Introduction to Mobile Development with PhoneGap" at Towson University http://t.co/Qch6pD93 Come on out! 3 hours ago
Recent Comments