Ted Patrick - Demos & MAX @ Adobe Systems


Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.



Improve Flash 10.1 and AIR 2.0

DIGG IT!     10 Comments Published Sunday, February 07, 2010 at 7:53 PM .

Adobe engineering is headed into the final stretch of development of Flash Player 10.1 and AIR 2.0. We need community help to identify quality issues with your deployed and in-development content. While both Flash and AIR are tested extensively internally, every beta we receive valuable feedback from the Flash community and beyond.

Here is how you can get involved:

Download and install Flash Player 10.1 Beta 2 and AIR 2.0 Beta 2

Test the new beta runtimes with your content and applications.

Log bugs at bugs.adobe.com. Engineering teams use your bug reports to reproduce errors and improve the runtime quality.


As far as beta timelines, beta 3 releases are a few weeks away and release candidates are expected within 60 days. Your involvement and assistance during this critical development window is really important and will only improve Flash Player and AIR quality.

Please also help spread the word about the beta process via Twitter:
Improve Flash 10.1 & AIR 2.0 via Beta 2 http://bit.ly/cty7Nm READ & RT #Flash #AIR #QUALITY

Special thanks

Ted :)


Simple Method Closure in AS3

DIGG IT!     4 Comments Published Friday, January 15, 2010 at 3:23 PM .

Method closures allow you to bind variables into the scope of an anonymous function. Watch the value of local variable 'i' in the example below in the returned anonymous function. It is a bit twisted but results show the scope of local variable 'i' is bound in the returned function from newCounter.

CODE AT PASTIE

package
{
import flash.display.Sprite;

public class ClosureAS3 extends Sprite
{
public function ClosureAS3()
{
init() //giv-em-the-jit :)
}

public function init():void
{
//create a counter
var counter1:Function = newCounter();
trace( counter1() ); //1
trace( counter1() ); //2
trace( counter1() ); //3
var counter2:Function = newCounter();
trace( counter2() ); //1
trace( counter2() ); //2
trace( counter1() ); //4 --> scope of i is still with counter1...cool! :)
}

public function newCounter():Function
{
var i:int = 0; //variable i gets bound into returned anonymous function via method Closure
return function():int
{
//i is available to the scope of the anonymous function
i=i+1;
return i;
}
}
}
}

Scary, functional AS3. :)

Cheers,

Ted :)


Making Su (sudoku)

DIGG IT!     2 Comments Published Thursday, January 14, 2010 at 12:23 PM .

Mid November I wanted to develop a Sudoku puzzle for AIR/Flash Player/iPhone called Su. The geeky hidden goal of the project was to keep the game very simple relying on as few event listeners as possible and having as few display objects in the player at any one time. At first I went about exploring how to take a simple game data model (Array) and render out the state of the game using many display objects. In a 9x9 sudoku puzzle that meant 81+ displayobjects at a minimium. Not that player can't manage this number of items but keeping track of all the items got to be fairly tedius and memory intensive. This is when I switched over to using bitmaps and drawing bitmaps dynamically at runtime...aka blitting.



Blitting at its most basic is when you take one bitmap and draw it into another image potentially many times. AS3 has a great bitmap API that makes it easy to draw graphics. In moving to a rendered game board, 81+ displayobject were removed from the display list and better would not require any textfields, movieclips, sprites either. With 3 events listening at the stage I could create a 100% rendered game. Here is some simple rendering code I used to get started:

gameBoard.bitmapData.draw( m1.bitmapData , new Matrix( 1 , 0 , 0 , 1 , 100 , 100 ) );
//draw the bitmap "m1" into gameboard at x:100,y:100


It is that simple to render bitmaps into each other. If you want to remove image data simply do this:

gameBoard.bitmapData.fillRect( gameBoard.bitmapData.rect , 0 );
//fill gameBoard with empty data erasing the image.


or

gameBoard.bitmapData.fillRect( new Rectangle( 100, 100, 100 , 100 ) , 0 );
// cut a 100x100 hole at x:100,y:100 in gameBoard


Once I started bliting, I also noticed that my memory consumption was a flat line. Memory never went up or down as I was simply reusing the memory that had been allocated initially to the bitmaps. When you write one image to another, memory consumption does not change, you simply overwrite the data in place with new data.

The next step was organizing the data model to handle history and undo. Using a simple pattern I would change the gamedata array and keep an array history of all game changes, then rendering the single change. When you press undo, I would change the data model and render the deltas. The result was that only the initial game board rendering was expensive (I use expensive relative to rendering the whole gameboard every change).

The great part about this architecture was when I took the game to mobile. On iPhone and other phones (Flash 10.1 on Mobile) the game runs very very fast with no latency. Sudoku is not a fast paced game but it is played over a long period of time so I needed to be careful with resources consumed.

The other element I rather enjoyed was creating a VirtualHitArea class. Typically I use displayobjects to determine hitarea (buttons/movieclips/sprites) but you can virtualize this in stage event listeners. The VirtualHitArea class provides a way to add hitareas that conditionally react if clicked (MouseEvents) or touched (TouchEvents). The result is virtual buttons that add no displayobjects to the overall application but filter stage events to see what is hit when. One side effect of this was the ability to cancel all events in the capture phase. This truncates the DOM level 2 events bubbling across the displaylist and sort of hotwires it. Because events do not need to cascade across the displaylist, they are processed quickly in the VirtualHitArea class at the stage and then canceled.



Su was a fun expieriment in minimalistic programming using Flash Player/AIR and I learned a ton writing it.

cheers,

Ted :)


Sizing AIR NativeWindow to Stage

DIGG IT!     1 Comments Published Wednesday, December 23, 2009 at 4:36 PM .

There is a big difference between nativeWindow size and the stage size within an AIR application. Depending on what type of window you are displaying and what OS you are using, the actual size of the stage may vary wildly. This post will cover how to determine the system chrome metrics and resize the nativeWindow in both Flex 4 and AS3. Here is how it works:

My application is a Sudoku puzzle app (320x480) and I wanted it to have chrome matching the native OS of the end user. Given I know the stage size, I needed to dynamically measure the system chrome metrics and resize the surrounding nativeWindow to provide a stage properly sized to 320x480. My app was written using AS3 but the same problem holds true with apps in Flex or Flash Pro and I have included source for both Flex and AS3 to help you get started.

When applications in AIR initiate, they have a logical process they go through.

1. NativeWindow is built from application.xml running ADL
2. Application constructor is called in SWF
3. During the first frame render, this.stage and this.stage.nativeWindow are available and sized correctly.

To be able to set this.stage.nativeWindow, it needs to be called after the first frame render or else metrics will not be fully set. To make sure, I test for the presence of this.stage and this.stage.nativeWindow in an enterFrame event when using AS3 and in Flex I use the applicationComplete event and everything is ready to go.

ASSUMPTION: We will assume that the width and height properties set in the application.xml are the desired stage size for the app (not nativeWindow size but stage size) and then adjust the nativeWindow larger depending on chome boundaries.

HINT:
AS3: nativeWindow is a property of this.stage
Flex: WindowedApplication has a nativeWindow property but also includes this.stage.nativeWindow. (they are the same object)

To determine the chrome width and height I used this calculation:

var chromeWidth:int = this.stage.nativeWindow.width - this.stage.stageWidth;
var chromeHeight:int = this.stage.nativeWindow.height - this.stage.stageHeight;

At the start of your application this.stage.width and this.stage.height will be 0!!! If you use this.stage.stageWidth and this.stage.stageHeight it will save you some level of frustration. In Flash the stage.width and stage.height are determined by content (no content they equal 0) but when empty, stageWidth and stageHeight will give you proper values.

Then I add chromeWidth and chromeHeight onto the nativeWindow size to make stageWidth and stageHeight match your content to the pixel.

this.stage.nativeWindow.width += chromeWidth;
this.stage.nativeWindow.height += chromeHeight;

To make this seamless and invisible to the end user, you make the nativeWindow invisible at start-up (the default) using application.xml and making it visible once you set the correct size of the nativeWindow width and height. This way the user does not see the window resize.

In Flex using WindowedApplication the window is made visible when the ApplicationComplete event occurs.

EXAMPLE DOWNLOAD
In this Flex 4 project there are 2 apps, one is AS3 and one is Flex. Simple select one or the other to run it. Both provide a stage that is 250x250. To change the size, simple change the width/height values within the application.xml file.

Go make some great apps with a properly sized nativeWindow!

Cheers,

Ted :)


CoolIris Express Launches - Put a 3D wall anywhere using Flash Player

DIGG IT!     2 Comments Published Tuesday, December 08, 2009 at 9:53 AM .

CoolIris launched their Express online editing tool for making 3D walls. The app generates a Flash 3D wall with photos or videos. Here is one I made in a few seconds for MAX 2009:



Cheers,

Ted :)


Demos & MAX at Adobe - A new role

DIGG IT!     7 Comments Published Thursday, November 19, 2009 at 9:24 AM .

Today I start a new role at Adobe focused on keynote demos and our annual conference, Adobe MAX. As a developer, I love building software and as an evangelist, I especially love highlighting the great work the community creates. Flash, as a platform, stands apart in that every day new experiences are released that shape the future of software. Over the past 5 years, Flash has moved far beyond its animation roots and now powers applications, video, ads, and gaming making both the public and private web a better experience.

My new role is focused on highlighting the work of our community, showcasing amazing uses of the Flash Platform inside and outside of the firewall, and building demos around new technology. We need to showcase great applications to move the ecosystem forward and when we have new technology to show we need to build demos in partnership with our ecosystem. In the weeks leading up to MAX 2009, I worked in partnership with Cynergy Systems, MLB.com, EA (Pogo.com) to deliver great demos for MAX keynotes. I am looking forward to expanding this work out to Adobe's ISVs, customers, and partners to both showcase amazing work and to highlight the road ahead.

I am also looking forward to another year of Adobe MAX. Although October 24-27, 2010 looks far away, work is already underway to make the event better. Having worked on MAX for 4 years in a row, things have come a very long way from the MAXUP in the hallway in Las Vegas and I know we can do better still. I look forward to working with everyone again making MAX 2010, the best one yet.

It is an exciting time for Flash and 2010 is looking to be one of the best years for the Flash Platform and the surrounding ecosystem. Feel free to contact me in regards to new applications and demos at ted@adobe.com. I look forward to working with you.

Cheers,

ted :)


Learning Fx4 from Scratch - Update 2

DIGG IT!     3 Comments Published Tuesday, October 27, 2009 at 8:03 AM .

Yesterday I completed 4 new pages with 10 Flex 4 samples in Learn Flex 4 from Scratch. Now is really the time to start learning Flex 4 given the stability of Flex 4 Beta 2 and the volume of great session content available post Adobe MAX.

Here are the new sections in Learn Flex 4 from Scratch:

Element Creation
addElement, addElementAt, removeElement, removeElementAt
Element Properties
States

Have I told you that I really love States! They are my favorite feature in Flex 4 (thus far) and really make building applications much easier. The syntax change for States really makes them easy to read and use in your application. Prior to Flex 4 you placed all state property changes in tag so they were remote from the components they affected. In Flex 4, state code is added directly to the components themselves with dot notation.

I could go on and on about States but best to let you ready it over at Learn Flex 4 from Scratch!

Also I would love some feedback. If you feel I have missed something, I have enabled comments on the Learn Flex 4 from Scratch site. So feel free to leave feedback.

Cheers,

Ted :)







Learning Fx4 from Scratch - Part 1 - Application

DIGG IT!     16 Comments Published Tuesday, October 20, 2009 at 5:45 AM .

Welcome to "Learning Fx4 from Scratch", this weekly series of blog posts will attempt to cover Fx4 beginning to end from a developer perspective.

Learning Fx4 from Scratch has MOVED!
Learning Fx4 from Scratch has MOVED!
Learning Fx4 from Scratch has MOVED!
Learning Fx4 from Scratch has MOVED!
Cheers!

ted ;)


SOURCE to 4 Flash iPhone Apps

DIGG IT!     20 Comments Published Monday, October 05, 2009 at 2:10 PM .

Here is the source for 4 iPhone demo applications I made during the internal development of "Notus", aka iPhone export. The projects are ASProject out of Flex Builder. The first thing you will notice is that there is nothing special here, just simple AS3 apps the are cross-compiled to IPA ( iPhone ARM Binaries ).



From these projects you can get started today building apps.

Circles - A simple 2.5D app

Circles GLES - Same app hardware accelerated using GLES

FlashWrap - Bubble wrap with random sounds! (In the Adobe Booth!)

FingerPaint - A simple drawing app (In the Adobe Booth!)

Special thanks from Matt Snow on the UI design in FingerPaint. Also special thanks to the folks at XD for assets.

Have fun, share source, and rock the iPhone!

And yes this is why I haven't been blogging for 3 months!

Cheers,

Ted :)


ADOBE MAX 2009: SESSIONS NOT TO MISS

DIGG IT!     1 Comments Published Wednesday, September 23, 2009 at 9:39 AM .

I put this list together of sessions that I would not miss at Adobe MAX. There are so many great sessions to choose from but this is my biased list:



Flash Player Internals by Lee Thomason
Tour the inner workings of Flash Player through the eyes of one of its architects and see what happens after you've written your code. You'll learn about the rendering model, text engine, new acceleration features, and how Flash Player has evolved for mobile. By knowing what is really going on with Flash Player, you'll leave with a better intuitive sense of how to build and optimize your applications.

Thoughts: Once you know how player works, you can develop far faster and accomplish the seemingly impossible. Know how player works is what this session is all about.



What's New in Flex 4 by Ely Greenfield
Come hear why folks are excited about the upcoming release of Flex 4. This session will explore the new component architecture and how skinning, effects, and layouts have been enhanced as a result. Also see how you can leverage new Flash Player 10 capabilities, additional features in Flex 4 that can make you a more productive developer, and much more.

Thoughts: Ely is a great speaker and architect. It is rare to get a glimpse inside a new release of Flex. Flex 4 has changed massively since MAX 2008 and Ely will highlight a years work on the new framework.



FiTC Unconference by Shawn Pucknell

Thoughts: Shawn Pucknell has but together an all star cast for the FiTC unconference. The speaker pool is so good that it will have a long lasting effect on MAX.



Designing Applications for Desktops and Mobile Devices with Adobe AIR by Arno Gourdol
See how Adobe AIR has made it possible for web developers to build cross-platform desktop applications. Learn how the platform is expanding to enable the delivery of applications not just for desktop operating systems, but also for mobile devices.

Thoughts: Miss this session at your peril.



Multi-touch and the Flash Platform by Daniel Dura & Matt Bugbee
Discover what you can do with multi-touch and the Flash Platform. Learn how you can build your own multi-touch table for a fraction of the cost of commercial products. We'll also discuss an approach to building multi-touch applications for the Flash Platform on these tables that will open up an entire new world of possibilities not only for experimentation, but for your customers and clients as well.

Thoughts: flash.events.TouchEvent duhhhh!



What's Coming in Adobe AIR 2 by Christian Cantrell
Adobe AIR allows developers to build rich Internet applications (RIAs) that run outside the browser on multiple operating systems. In this session, you will learn about the planned capabilities of the upcoming release of Adobe AIR 2.

Thoughts: AIR 2 is feature rich and hits many features developers have been asking for. Plus Christian can code like few can and his session will get knee deep into the code on all the new features.



Building Mobile Applications with Adobe AIR by Aditya Bansod
Learn how Adobe is working to bring Adobe AIR development out of the desktop and onto a mobile phone near you. We will cover how the AIR SDK and platform will evolve to add capabilities to help developers mobile enable, test, and publish their content. Mobile computing and mobile applications provide publishers and developers with exciting opportunities to get their products into the pockets of millions of people.

Thoughts: Yup, AIR and Mobile in the same sentence. Miss at your peril!



A Deep Dive into Flex 4 Lists and Layouts by Glenn Ruehle
Explore the power of the List component in Flex 4, and dig deep into the layout mechanism that allows you to create new and interesting components displaying data. It is recommended that you have an understanding of the Spark architecture before attending this session.

Thoughts: Few components are as powerful as List in Flex 4. Glenn is List master and I would not miss this session.



BYOL: Down and Dirty Tricks in Photoshop by Corey Barker
Discover the many design possibilities with Photoshop CS4 Extended by exploring the latest design trends from movies, television, and magazines. This hands-on session will cover using features such as masks, generating selections, and creating jaw-dropping effects the same ones used by leading photographers and designers today.

Thoughts: I suck at Photoshop. Learn from a master hands on.



Hands-On ORM with ColdFusion 9 by Rupesh Kumar & Adam Lehman
One of the most significant additions to ColdFusion is the new object-relational mapping (ORM) framework built in to ColdFusion 9. Powered by the industry-leading Hibernate framework, ColdFusion 9 takes rapid application development to the next level. In this session, you'll learn the basics of ColdFusion ORM so you can build applications without having to write a single line of SQL. From there you'll move on to advanced topics like how to leverage complex joins, implement transaction management, and effectively use interceptors.

Thoughts: CF9 ORM kicks ass. It makes writing db apps on cf simple and bomb-proof. Learn from the team that made this happen.



Things Every Flash Developer Should Know by Grant Skinner
Join Grant Skinner as he shares critical knowledge on a variety of aspects of ActionScript development, drawing from over a decade of experience working with Flash. This session will focus on techniques, workflows, philosophies, and mental models that are important to understand but difficult to learn from a book or website. While this session is targeted at beginner and intermediate attendees, experienced developers may find a lot of value in comparing approaches and learning new techniques.

Thoughts: Please it's Grant. You will learn a ton.



MAX Day 1 & Day 2 Keynotes
Thoughts: You would be a fool to miss this years keynotes!



SNEAKS!!!!

Thoughts: Sneaks is going to be so good. The team has been working around the clock getting demos ready. The force is strong with our team and It should be great fun. We also have a top secret special guest joining us to help sort the strong ones! Miss sneaks and you will have to answer to me! :)



So that is my biased list of sessions not to miss at MAX. I am pretty sure most of these will be at capacity so make sure to add them to your scheduler!

And if you are not registered, get it in gear and sign up today at MAX.ADOBE.COM!

See you at MAX!

Ted :)


Where to find me:

Ted on Twitter - @AdobeTed
Ted on Adobe Groups
Ted on LinkedIn
Ted on Facebook
Ted at Adobe


Latest

Lists

Links

Jobs

Flex Jobs
city, state, zip

Archives