Ginormous

Launched Defend The Dome

Bluetube Interactive is pleased to announce we launched defendthedome.com last night, a promotional site for the Atlanta Falcons and Ford, it features the first of two games, drive, where you get to drive an F150 or Flex to the Georgia Dome.  The site was built in flex with flash animation by gnoggin studios.  Design by Artistic Image and the agency who brought it to us was JWT.

It was a challenging project but a lot of fun, using pureMVC, Fabrication and the new pureMVC finite state machine.  We have heavy timelined flash animation that was pulled into flex via a swc and then our timeline managed allowed us to control and jump to labels in the flash timeline without having to re-animate the content in flex.

We'll do a case study on the project soon to explain how it all came together.

Cheers
Grant

PureMVC Finite State Machine ( FSM )

We are building a couple of Defend The Dome games in flash for the  Atlanta Falcons and Ford, one is  driving game where you get to drive an F150 from Flowery Branch to the GA down avoiding ladders, sofas and the things you see on i285, and you can get power ups, avoid cars, and take shortcuts if you get qualifying power ups.  In that game I had a command that managed the "state" and managed the changes in state, but it was quite a bit of work and often felt a bit "hacky" where the command was really deciding things that mediators should decide for views.

For the 2nd game we are doing a sacking game, where you get to be John Abraham. This game is more like "dragons lair" where you watch video and then at strategic points you interact by entering a key sequence, or pounding your keyboard in a power meter.  We have 4 progressively harder downs and lots of video cut scenes.  For this I'm using the pureMVC Finite State Machine.

At first I wasn't sure it was going to help much, but after studying the stopwatch demo, and then using the FSM visualizer ( its very buggy, don't rely on it), I got a good picture of how complex the application was and how many states I'm going to need to manage.  I think the FSM has easily saved me a ton of time and complexity due to it managing the state and dispatching notifications when the states change.

Here is a rough capture of the my state machine for the sacking game from the FSM visualizer, sorry its not "great" but the print function in the visualizer doesn't work and it also doesn't allow scaling or zoom of the image.

Once I'm done I'll also publish the XML so people can see what a not trivial FSM looks like in pureMVC.

flex inconsistent linkage error

I just took a flex application that is going to be used by multiple products (its a flex based portal), and needed to move the core code into a swc, once I created my swc I kept getting this weird error :

Inconsistant linkage in D:\projects\clients\someClient\someProject\trunk\3rdPartyLibs\swc\playerglobal.swc(Object) - 'isNaN' is marked as extern, but '__AS3__.vec:Vector$int' is not.       

I did a google and found a couple of references :

http://www.mail-archive.com/flexcoders@yahoogroups.com/msg122106.html

so I went back to my application project to see if I had any special compiler settings, and remembered I had :

-target-player=10

I added that to the Additional Compiler Arguments in the Properties | Flex Library Compiler panel and its now works.

Hopefully this will save you some discovery.

Astra Flex and Flash Library from Yahoo - Time input component

I love simple components that just do a job that we all end up having to do and think "there must be someone who's already done this".  Astra is a fairly small Flex an Flash library that has some components that make life a little easier, the time input component I particularly like since it validates the time the user puts in and won't accept an invalid time.

pureMVC console

Bluetube Interactive does 90% of its projects using Flex and pureMVC, The Flex pureMVC console  looks like a great tool for pureMVC developers, I'll most definately be trying this out, I have a fairly large pureMVC app that would benefit from some insights.

Debugging flex modules

I have a large flex application using pureMVC. Its a flex based media portal, sort of like a Flex based "yahoo".  its loads lots of different modules that I did not write, I built the framework.

Some of these modules load flash swf's which sometimes have script timeouts, so when I'm trying to debug, I'm constantly interupted by "script timeout" exceptions that halt the main thread and stop me whever I'm stepping through the code, after dealing with it I have to click "resume" in the debugger and start over, its very frustrating.  If you change your main application script timeout to 60 seconds it has no effect on loaded modules, and the module mxml tag has no provision for extending or ignoring the script timeout exception.

If anyone has figured out some voodo to solve this annoying issue I'd be most interested.

The Difference Between Flex and Flash

^{By Grant Davies and Lee Syvester}

Introduction

I was asked recently by a friend, what is the difference between Flex and Flash, “outside” of the flex world people think Flex is another language, granted Flex has mxml, but that becomes Actionscript 3, so flex to me is really a suite of tools and an environment to build bigger, more reliable more complex Flash applications.  You can do anything in flash you can do in Flex, but its often harder, you can also do anything in flex without flash, but it can be harder (detailed animation for example), but Flex, using graphics and animations and audio done in flash, give you the best applications that can be viewed in any browser with the flash player installed. Since Bluetube Interactive does so much Flex and Flash development our "vision" is colored and we find it sometimes challenging to describe the difference.

 

The following is our “draft” attempt to describe the differences, Lee Sylvester used author skills to write most of it, I just added some clarity here and there.

 

Flex provides the ability to create a SWF file (flash player files) that run on the Adobe Flash Player in any web browser. Just like the Flash was created to enable animators and illustrators to provide visually appealing experiences on the web, Flex was design for the same purpose, but Flex is Flash’s “big brother”, it’s the same “technology” but the way applications are built is different and allow much more complicated applications to be built by software engineers instead of animators.

 

The closest analogy I can come to, suppose you are a house builder.

 

Flash – build a house

You hire a plumber, a carpenter, a window guy, a concrete guy and some general laborers, you give them hand tools and you say “build me a house”.  They can do it, but it takes time and a very “fancy” house may be difficult without a crane or bulldozers.

 

Flex - build a house

You hire the same guys, but you also get a 3 cranes, 4 bulldozers and 5 other guys for free.  The house is still a house, but it can be built faster, or can be more complex, can be bigger or can offer features that would not have been possible with the guys and hand tools.

 

Flex is not a new language (it does use MXML, but that is converted to Actionscript and most of the hard work is done in Actionscript), it uses Actionscript just like flash does, but it comes with a lot of extra features, to make more intelligent applications.

 

Flash pros:

 

Great animation controls

Great sound control

Familiar to designers

Most designers are not good at programming, they can make it “work” but they’d rather be doing design or animation, so getting data from a database or xml is not their skill and they often do it inefficiently or simply have to tell the clients “it can’t be done’.

 

 

Flex Pros:

 

Great “business” logic

Can connect to “any” data, mainframes, xml files, database, legacy systems, it can get information from ANYWHERE.

 

It’s a more traditional way of building software to software engineers use it to build applications instead of animators. Developers are not good designers, but with flex the can use the great work a designer has done, and implement the business logic, therefore we have the best of both worlds, designers doing  design, programmers doing code.

 

Examples of applications

 

You want to create piece of software where it has a person’s face, and you put different hairstyles on the face just for fun and you want to be able to upload your face or your friends face and then share it so you can all laugh at your friends with green spiky hair.

 

Flash

 

1)    You create the graphics in flash

2)    You have some “place” where the hairstyles are stored maybe xml files, or a database and the supporting images

3)    You have a place where the pictures of “friends” will be stored after they are uploaded.

4)    You learn how to do “social bookmarking” with either javascript, flash or some other language.

 

In Flash this would require a designer to learn a lot of programming skills, or a developer who doesn’t really understand flash to figure out “how” to do it.  Some developers are good in flash, but it’s not common.

 

Flex

 

1)    You create the graphics in flash

2)    A developer creates Actionscript 3 code in the Flex Builder (A tool for developers to build software) , the code knows how to load hairstyles, add images, upload updates etc.  This is very easy for a developer since this is “normal” work for a developer, loading files, reading data, talking to other “systems” (social bookmarking).

 

There is SEPARATION of concerns here, the “animator” works in flash, the “programmer” works in flex, they can now build MUCH more complex applications.

 

Another example

 

Carpet Configurator :

 

You want an app where you can choose from a set of carpet patterns, you can change the size of a single “square” of carpet and you can add a border to that carpet and change the color.  A graphic designer and information architect can figure out how to make this “look” nice to a user and how to make it “work” logically to a user, but tell them they have to be able to load in 500 different carpet styles, allow various colors and then dynamically add borders and they are out of their league.  In this scenario you would

 

1)    Information architect designs the useability/layout (or a good design may be able to do this)

2)    Graphic designer lays out the design in Photoshop

3)    Flash animator / Graphic designer design the “transitions”, “fades”, “blurs” and motion that should exist to make the application feel “attractive” – e.g. the iPhones carousel that shows your itunes library.

4)    A flex Developer writes Actionscript code in the Flex IDE to load in all the different carpet designs and code to allow the user to change the color of them and the code to add borders too them, he follows the IA and design the IA, Designer and flash animator created and never opens Photoshop.

 

Flex allowed serious programmers to produce software that is distributed the same way flash is distributed, the biggest difference is they can now offer exponentially more complex software.

 

For example good applications of flex :

 

Banking applications – Flash can be used to present an attractive interface, charts, graphics, nicer buttons, app doesn’t look like a “webapp”, its looks “sexy”, flex can allow the “data” to come from banking systems like mainframes and large databases.

 

Configuration applications – Flash has been used to configure cars, kitchens, gardens, garage doors, but at a great cost, Using flash to produce the look/feel and flex to do the “logic” is way more cost effective, costs are reduced, the end result is better and does what they client wanted it to do.

 

Highly interactive websites – Flash is obviously is used to build websites, but if the website includes a “game” , a loop player where you can make your own beats, a place where you can “Draw” your own pictures (since user generated content is now so popular), this can be done in flash but it’s much much more cost effective to do the look/feel/experience in flash, but business logic in flex.

 

 

This is the more technical details on flex below :

 

Flex was created to orient the Flash platform toward application developers, therefore opening a path to infinitely extensible Rich Internet Applications (RIA). Just like Flash can create SWF files, so can Flex but the way you develop them is completely different.

 

Flex is For Developers

 

Flex was not built for animators, writers, accountants; it was written for software developers and the paradigm matches the development methodologies they already know. If you know Java, C, C++, C#, Delphi, VB, PHP, ColdFusion, Python, Ruby or any other number of programming languages and environments, then you can learn Flex with little effort. The goal of Flex when it was created was to make a development paradigm that developers could learn easily by matching the methodologies they already knew. The exception is that the resulting output for their creations is the SWF file format for the Flash Player (and now AIR). Flex has classes, components, a compiler, a debugger, class libraries, and uses XML (MXML) for declarative markup of components. The same ActionScript programming language used in the Flash IDE is also used in Flex, so advanced Flash IDE users can learn Flex with minimal effort, while at the same time, being introduced to a powerful framework that increases the applications possible for the Flash player.

 

Flex provides most of the UI components that Flash users know and already use ( like the button, list, datagrid, combobox, and tree components) but it also supports containers like HBox, VBox, TabNavigator, TitleWindow and many others. If you have written software before you can learn Flex easily. Better still is that Flex is compatible with all HTTP servers, version control systems, and any server side programming language, so the knowledge you have of servlets, php, ASP.NET, or JSP is really handy. Flex just lets you program the client side in a paradigm developers already know and understand.

 

Flex is for Making Applications

 

Flex was built for making rich client side application behavior. It wasn't built for making web pages, banner ads, or server side logic; it was built for creating client-side applications that run over the Internet talking to remote servers. Flex has been used to make some really great apps like Buzzword (Document Editor like Microsoft Word but in the web) or Picnik (Photo Editor/Manager for touching up your best snapshots) or SlideRocket (Presentation software like Apple Keynote but in the web) or Oracle Sales Prospector (An enterprise ERP application. Yes Oracle uses Adobe Flex! ) or many other applications you can see at Flex.org. The real key is that all these examples provide an application experience just like desktop software.

 

Flex Applications Run on the Web

 

Flash Player 9 is installed on more than 95% of computers that use the Internet and has been installed more than 3,500,000,000 times at a rate of over 10,000,000 times per day. When you develop software, you want it to run compatibly in as many places as possible. Adobe Flash Player provides a solid foundation to build these experiences without the need to install or update anything on the end users computer. If you were running a store you would want that store available to as many customers as possible and choosing Flash Player allows you to provide a great experience (rich) to 95% of the web (reach). If you choose something not widely installed or incompatible, you are simply turning away customers and business.

 

Flex Applications Run on the Desktop

 

Adobe AIR is a new runtime in development by Adobe that enables the developer to write desktop software that runs on 3 operating systems ( Mac, Windows, Linux ) with the same file. This allows your applications to run as true desktop applications rather than just a website and allows you to do much more than the web provides today. AIR applications are real native desktop applications and provide APIs for writing files, drag-and-drop, system notifications, network detection, and more. AIR empowers developers to write desktop software that leverages the Internet.  The biggest thing here is a Flex developer can learn AIR in a few days since the language is still Actionscript 3, there are just some new features that are “desktop” specific.  But it’s very easy transition for a Flex developer to write desktop applications.

 

Flex Can Be Styled and Skinned

 

Flex makes it far easier for developers to skin, style, and restyle any applications built using its framework. Styles are much like Cascading Style Sheets (CSS) that alter the look and feel of your application using a notation like scripting language, while skins are graphical elements that make the core look and feel of your applications. Flex skins can be created using the Flash IDE, Photoshop, Fireworks and Illustrator to provide rich look-and-feels for your Flex applications.

 

Flex Can Work Alongside the Flash IDE

 The Flex development environment can work with content produced by the Flash IDE. This provides regular applications built with the Flash IDE with the power of the Flex framework and development tools. Using Flash and Flex together, developers can build complex logic applications and experiences while utilizing high design content and animations.

Thanks

Grant Davies & Lee Sylvester

FlashLoaded 3dWall working in flex as a flex component

The FlashLoaded 3dWall pro is a pretty cool component using papervision 3d, that allows you to present images, videos or swf s(with the pro version) wall.

Flashloaded produced the component to work in flash, and when Flex questions are asked on the their support forum it appears they do not wish to support flex users.

I greatly dislike the 'hack" of loading a swf into flex and then finding your instance on the timeline and then trying to hack it together to work.  This is so similar to how we got flex 2 Actionscript 3 to work with Actionscript 2 code it makes me shudder.

What I wanted was to use the Flex Component kit for flash, to turn the 3d wall into a flex component that I could then use in flex like other components and do all my code in flex.

This took a lot of trial and error, but it does work.  Thanks to Lee Sylvester for some help and moral support (listening to me bitch) along the way.

Prequisites

Make sure you have the 3DWall or 3DWallPro MXP installed so it can be used in the flash ide
Make sure you have the flex component kit for flash CS3 (it works with flex3 and flash cs4)

Steps

Create your swc in flash

1. Open Flash CS3 or Flash CS4
2. Create a new flash file, save it as 3dwall.fla
3. Make sure your components panel is visible (window | components)
4. Drag an instance of the 3dWall from the components window to the stage so it appears in frame 1.  You'll see the 3d wall symbol and its assets appear in your library.
5. Select the 3dWall symbol in your library and then from the command menu select : Convert Symbol to Flex component. _{(if you don't see this option you haven't installed the Flex component kit for flash)}
   Flex will now add Flexcomponent base to your library and change the export setting of the 3dWallPro component.
6. Right click on the 3dWallPro symbol in the library and change the export settings to :
   com.flashloaded.Wall3DPro.Wall3DPro (it probably was _3DWallPro)
7. Your library should looks similar to this .
   
8. Now right click on the 3dWallPro component in your library and  select 'Export SWC file' and place it somewhere you'll remember to put in your flex lib folder later.

Create you project in flex

1. Create a new flex project
2. Copy the 3dwall.swc you created in flash to your libs folder in flex
   If you then go to your project properties in flex and click on "flex build path" and then the Library path tab you should see something "like" this (ignore the pureMVCLibraries)
   
   
   
3. Your project is now ready for the Wall components, I'm not going to go into the specifics of creating a wall's content, but there are a couple of things to note : If I just import the wall3dPro class and try and use it, I get some ambiguity compiler issues, if you declare the instance with a fully qualified class name it works fine like this :
   
   var wall : com.flashloaded.Wall3DPro.Wall3DPro = new                                       com.flashloaded.Wall3DPro.Wall3DPro();
   
   
4. You  also need to wrap your wall instance inside a UI component so it can be added to any flex container.  Here "mainView" is a HBox.
   
   var wrapper : UIComponent = new UIComponent();
   wrapper.addChild( wall);
   mainView.addChild( wrapper );

Then you should initialize the wall as you usually would be setting its MediaPaths      

e.g.

     wall.setMediaPaths("/assets/img/portfolio/", "/assets/img/thumbs/portfolio/");

add your images/videos/swfs either using the object way shown in the user guide or setting your xml.

wall.xmlPath= put some stuff here

then initialize your wall

wall.init();

I obviously can't post a working copy with the wall in a swc since that would be a violation of the wall license.

Cheers
Grant

       

Flex SDK builds

I haven't been keeping an eye on the latest flex sdk builds but probably should.

Deep Linking with SWF Address and URL format

So we are on another project that needs deep linking, and trying to decide on the format of the urls.  We use SWFAddress and create a proxy for it in pureMVC which is fairly easy.  The format of the URL and query string parameters is what we seem to spend a lot of time dwelling on.

One of our other projects uses a simple token relationship since it is flex module based where the name of the module and the parameters it needs are sent in the url

e.g

http://www.somesite.com/content.html#/thepageName/moduleName/moduleArgument

so if we had a link to the home page, needed to tell the video module the video to play and the news module to show headlines it would be :

http://www.somesitecom/content.html#/home/videoModule/http://somestreamingsite.com/videoid=12345/NewsModule/show=headline

its works but its not like traditional query string style urls like we are used to in basic server based apps.

Our new projects needs to be able to provide the current page, the currently 'focused' item and arguments to other items so we are considering

http://www.somesite.com/content.html#/home&focus=video&videoId=124&someotherThing=456&anotherone=789

its a bit more typical query string style.  I'm not married to any particular style but would at least like to decide on one and then be consistent across projects, I'd love to see how others have handled more complex deep linking with swf Address. The requirements for us are

• provide a "page" in the deep link
• provide arguments to specific modules or components for that page
• allow components on the stage to get multiple arguments and not just one, e.g. the url to the video, should it auto play, should it go full screen ?
• provide a focus for the page, i.e. the video module has focus if the page is complex and you should be able to state the item with focus on the page

I welcome discussion on this topic