February
27th
Incubator News Roundup (Molehill)



NOTE: this post was last updated with new links on March 9, 2011

New and truly revolutionary versions of Flash Player and Adobe AIR named “Incubator” (formerly Molehill APIs) were made available on Adobe Labs. To those who are unfamiliar with the new release, it features hardware accelerated 3D graphics support.

As Adobe puts it: “The Adobe® AIR® and Adobe Flash® Player Incubator is a technology preview program for more adventurous developers who are willing to experiment with Flash Platform runtime features that are in early development stages.”

New Incubator builds of Adobe Flash Player and Adobe AIR available here:
Download Incubator Builds and check Wiki

If you are keen on exploring 3D capabilities right away, you can use one of the pre-release versions of the popular 3D frameworks that also announced Incubator support. To see a list of all features that are included in the Incubator builds, check out this post.

3D frameworks supporting Molehill:

Here are some LIVE demos:

(make sure you have Flash Player Incubator installed first)

Added on March 9:

Added on March 8:

Added on Feb 27:

Videos (only new stuff):

Just Source Code:

Tutorials and Articles:

Related News:

Now, let’s change the web!
Follow me on twitter @pauliusuza for more news and updates on #flash and #molehill

October
25th
MAX 2010: 3D in Flash, AIR for Android and TVs, Controller Support!



Day one of Adobe MAX 2010 announcements brought some pretty amazing things, and the conference is just getting started!

3D support in Flash

First of, the most important announcement in my mind, full 3D support in Flash Player. While there’s no details about the technology itself, we have seen Kevin Lynch demo a 3D racing game which looked nowhere far from stunning and the processor was hovering around 0-1% of CPU. This is HUGE! With the current adoption rate of Flash Player (73% in 3 months) it will be the most popular 3D gaming platform once released to the wild, surpassing Unity3D and other smaller competitors in no time.

Game Controller Support

This is epic as well – Kevin Lynch demoed controlling a game running inside a browser using mouse and then switching to a steering wheel and a PS3/XBOX type controller. By itself it means that Flash will finally be able to use a whole new range of game controller devices. However I think that this might be a hint to a whole bigger announcement Adobe could make in the next few days – PS3 support? Xbox? Who knows… ;)

AIR for Android and TVs

AIR for Android SDK is now publicly available for download. Any developer building an app in AIR can now package their app for sale in the Android Market. Also it is now possible to build an app for Google TV, which runs Android. Adobe blog has more info.

Stage Video

Native performance for video running inside Flash on tabled devices, mobiles and desktop. Again, awesome!

You can experience MAX conference streaming live using new Flash Player P2P technology:
http://max.adobe.com/online/

Let’s see what day 2 of MAX 2010 brings us!

October
23rd
Alchemist 2 – AIR for Android



Today we have released the second version of our award winning puzzle – Alchemist 2 and this time it’s for Google Android platform and it’s build using Adobe AIR 2.5 for Android.

Alchemist 2 features a lot of improvements over it’s predecessor, including a completely new gameplay engine, new gorgeous graphics, adaptive AI and unlockable achievements.

Buy Now! | Get FREE DEMO

October
14th
Dribbble Fever



Dribbble pumps out so much inspiration it’s really a phenomenon. I’m constantly finding myself browsing through countless pages of shots and discovering awesome stuff.

This shot by Kamil Khadeyev actually inspired me so much I decided do replicate it using only 3D (no Photoshop), my result done with Modo 401 in 6 hours is below:

Anyone got a spare dribbble invite? Anyone?!

August
19th
Icon debut



Icon debut

I always wanted to try my chances in icon design.. Now that I finally got my hands on it I would like to share my first icon set with you:


Uza icons one 26x26 png icon set


The UZA ICONS / ONE set contains a total of 225 26×26 pixel PNG icons. Download it for free!

August
13th
IDev.tv plugin store is now live!



We have just added a plugin store to IDev.tv where you can purchase (and sell, please contact me for details) all kinds of goodies for IDev.tv platform. Go check it out!

Every account now also comes with affiliate program where you can earn money by sharing IDev.tv with your friends. To start using it, just sign up and check out “Affiliate Settings” section inside your IDev Account!

August
2nd
Beta Testers Wanted – www.IDev.tv



For a while now, we at InRuntime have been working on a new product for Flash Platform and just couple of days ago we have released a public beta to the wild (woohoo!)

It’s called IDev and it’s an advanced XML based template system for building fully functional Flash websites. It comes in three parts: a ready to use website (SWF + XML), a SWC library for developers and a set of online tools located at www.idev.tv.

You should be interested in IDev if:

- You are a freelancer making Flash websites for a living (IDev serves as a perfect base for freelance development, allowing you to mix and re-use components to create unique online experiences)

- You are an Actionscript 3 developer making standalone Flash components and you would like to earn some cash (You will be able to easily port and sell your components as IDev plugins)

- You are a person / company who wants to set up their website without putting your hands in the code or hiring a programmer (IDev is fully customizable through XML, so you don’t have to know how to program)

Sign Up, Talk, Share!

We think that IDev is a great product and we would like to ask your assistance in getting it off the ground. Go to www.idev.tv and SIGN UP, test it out by downloading your own copy from Launchpad and let us know what you think about it. To make the visit worthwhile, we are giving away all our existing IDev plugins for FREE for every new user.

If you like IDev as much as we do, please SHARE IDev.tv with your friends!

May
10th
Gianduia vs. Flash



Today, internet is full of stories about the Apple's secret weapon that will kill Silverlight, Java and Flash once and for all... Again! Sadly this is becoming sort of a cliche (of everyone wanting to kill Flash) and it's my second article in a row trying to give you a completely different point of view.

The mythical new framework is called Gianduia which relates to Gianduja a sweet chocolate containing about 30% hazelnut paste, invented in Turin by Caffarel in 1852 (wikipedia). I'm betting on a hazelnut reference in the logo once Gianduia is out!

Since early version of Gianduia is already deployed on some parts of Apple.com (here and here), I went to find out what exactly is it. Here's what I found by digging through the available information and sources.

Gianduia is:

  • A client-side Model View Controller based framework in JavaScript 1.x
  • Cocoa (with CoreData) and WebObjects translated to JavaScript
  • Lots of OS X / iPhone / iPad style interfaces in your web browser
  • Targeted at building HTML5 web apps using Cocoa
  • Meant to unify multiple JS frameworks used by Apple into one piece

What it's not:

  • A Flash, Java, Silverlight or any other "killer" - it's just another JS framework running in your browser
  • Portable - it runs in the browser, but it needs XCode+Mac to compile from Cocoa.
  • Self sufficient - it relies on device or browser for delivering video / audio / interactivity to the end user

Gianduia's direct competition:

So if it's not the next "Flash Killer" what exactly is Gianduia's purpose? The answer is simple: Apple are just trying to fix their own loose web application toolset and to put all components under a single unified framework. In this case however they will be competing with other JS frameworks out there such as:

Gianduia's APIs

At the time of writing, Giandua's main framework file is located here. Depending on requirements on each application, it would call and load multiple "modules" which appear to be sort of a descriptor files of an equivalent UI element or utility class in Cocoa, just written in Javascript.

For those of you who want to peek under the hood and check the inner workings of the framework, below is a list of some of Gianduia's framework classes (links to Javascript files). Whitespace has been removed from JS files, but they uncompressed and still more or less readable.

You can see some really interesting stuff here like NSPersistentStore or NSBindingDeclaration, take a look:

Foundation

AppKit

CoreData

The Unusual

While browsing through the new API I noticed a new syntax which probably relates to Gianduia's data binding features. The following bit comes from a script type="text/declaration" tag located in the head section of Apple iPhone reservation tool.

Maybe someone from readers could provide more ideas on what this code does? Do you think it's a good approach?

HTML:
  1. <script type="text/declaration">
  2.     skuThumbnailC : Gianduia.AppKit.NSImage {
  3.         src = skuRepetitionC.objectAtEnumerationIndex.url;
  4.     }
  5.     skuNameC : Gianduia.AppKit.NSDynamicString {
  6.           value = skuRepetitionC.objectAtEnumerationIndex.name;
  7.     }
  8.     selectedPlanInputC : Gianduia.AppKit.NSDynamicElement {
  9.         value = selectedPlanURI;
  10.     }
  11.     errorMessageC : Gianduia.AppKit.NSDynamicElement {
  12.         elementClass="alert";
  13.         innerText = errorMessage;
  14.     }
  15.     hideWhenNoWhereAvailableC : Gianduia.AppKit.NSConditional{
  16.         condition = skuRepetitionC.objectAtEnumerationIndex.hideNotAvailStoreDesc;
  17.         negate = true;
  18.     }      
  19. </script>

Impressions

I might be mistaking, but after playing around with the live demos and looking at the sources I think Gianduia is not meant to be written by hand rather than generated by a compiler - syntax is sort of unusual, hacky and difficult to read.

However even in this case Gianduia will have a slight edge over other JS frameworks due to the fact that it's developed by Apple; This means if this framework ever gets released to the wild you can expect very tight integration with XCode and ability to choose "web" as a compile target for your next Cocoa application.

The dark side of this is the new language lock-in trend that starts to emerge - it seems that Apple wants everyone to write their code only with Obj-C in XCode, on a Mac and compile to other platforms, but not the other way around.

As far as the demos go, I was not impressed. What I saw was pretty basic and static web forms and still the UI components did not seem very responsive. I would really like to experience this framework integrated in a more advanced web application to test how well it performs handling difficult tasks.

Gianduia seems to have implemented a dependency model which results in chain-loading of framework components. At one point during my test of Apple iPhone reservation tool I had user interface frozen (with unresponsive inputs and no preloader) for 12.7s while the dependencies were loading in the background - that's a bad user experience!

Conclusion

It's shaping to be a nice extension for developers using XCode and a solid framework for building layout based HTML apps but we will have to wait and see if it's anything more than that.

Just don't put your bets on Gianduia killing Flash -

it just won't happen.

April
29th
My take: HTML5 vs. Flash



Recently the steam has built up to the level where it needs to be set free, so here is my take on the whole HTML5 vs. Flash matter:

HTML5 by itself does not provide scripting or styling

HTML5 is a markup language, markup as in "the collection of tags that describe the specifications of an electronic document, as for formatting", nothing more. To build anything more useful than a bunch of static text and media you will need to rely on...

CSS and Javascript

That's right, RELY being the key word here. You might have heard (or experienced) that CSS and Javascript support across browsers is fragmented and broken due to vendor inability to talk with each other and to find a common understanding when defining web standards.

But how bad is it exactly? How does it look when you put it in perspective with a technology like Flash?

Mouse Events

In Flash Player's Actionscript 3 you have a rich set of mouse events that allow you to distinguish between different states interaction with interface elements. These events allow to create complex user interface elements, nested navigation items, drop-down menus and even multitouch interfaces that work flawlessly. See a full list of supported events here.

In Javascript, you have to check with this compatibility table from QuirksMode.org which looks like a Christmas tree. It's sad but browser vendors have chosen to implement mouse events so differently that most of the time it's impossible to get something to work without using tons of compatibility code and sometimes it's just not possible at all (for example this will never run on Opera).

Consistency

A table of currently supported HTML5 tags can be found here (note the dominating RED color).

Whereas Flash Player 10 supports consistent API through operating systems and devices and is currently deployed on 97% of all internet-enabled computers worldwide (data taken from here)

Clipboard

In Actionscript 3 setting clipboard contents is as easy as calling

Actionscript:
  1. System.setClipboard(contents)

In Javascript... well since the native clipboard functionality is only supported in Internet Explorer you will have to EMBED A FLASH FILE and use a js-to-flash bridge to set the clipboard:

JavaScript:
  1. function copyIntoClipboard(text) {
  2.     var flashId = 'flashId-HKxmj5';
  3.     /* Replace this with your clipboard.swf location */
  4.     var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
  5.     if(!document.getElementById(flashId)) {
  6.         var div = document.createElement('div');
  7.         div.id = flashId;
  8.         document.body.appendChild(div);
  9.     }
  10.     document.getElementById(flashId).innerHTML = '';
  11.     var content = '<embed src="' +
  12.         clipboardSWF +
  13.         '" FlashVars="clipboard=' + encodeURIComponent(text) +
  14.         '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
  15.     document.getElementById(flashId).innerHTML = content;
  16. }

Video

Let me quote diveintohtml5.org for this one: "There is no single combination of containers and codecs that works in all HTML5 browsers. To make your video watchable across all of these devices and platforms, you’re going to have to encode your video more than once."

Hey, thanks but NO THANKS.

I will not go into details on this topic since it was covered many times over before me but currently HTML5 video tag support is fragmented and implementations are slower than Flash due to browser's inability to leverage hardware acceleration. More information here and here. In other words, it's a complete mess.

Styling

So here's a simple example in Actionscript 3, let's draw a semi-transparent box with rounded corners and and rotate it by 7.5 degrees:

Actionscript:
  1. with(shape.graphics) {
  2.    beginFill(0xB4B490,0.6);
  3.    drawRoundRect(0,0, 100, 100, 12);
  4.    endFill();
  5. }
  6. shape.rotation = 7.5;

Makes sense? Sure does.
Now let's take a look at HTML and CSS code required to achieve exactly the same result:

HTML:
  1. <div id="box"></div>

CSS:
  1. #box {
  2.    /* Color and Transparency */
  3.    background-color: #B4B490;
  4.    background-color: rgba(180, 180, 144, 0.6)/* FF3+, Saf3+, Opera 10.10+, Chrome */
  5.    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */
  6.    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8
  7.    /* Dimensions */
  8.    width: 100px;
  9.    height: 100px;
  10.  
  11.    /* Rounded Corners */
  12.    -moz-border-radius: 12px; /* FF1+ */
  13.    -webkit-border-radius: 12px; /* Saf3+, Chrome */
  14.    border-radius: 12px; /* Opera 10.5, IE 9 */
  15.  
  16.    /* Rotation */
  17.    -moz-transform: rotate(7.5deg)/* FF3.5+ */
  18.    -o-transform: rotate(7.5deg)/* Opera 10.5 */
  19.    -webkit-transform: rotate(7.5deg)/* Saf3.1+, Chrome */
  20.    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
  21.    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */
  22.    zoom: 1;
  23. }

See those values next to filter and -ms-filter? HOW THE HELL should I calculate those matrix values by heart without opening my scientific calculator every time I need to adjust the rotation angle?!

And why do I have to repeat the same statement over and over again for each crappy browser implementation? -moz-o-webkit-ms-gimme-a-break.

And worst of all, why after going through all of this nonsense it still works only on 25% of all browsers?!

[EDIT] By popular demand, here's how it looks in JS + canvas:

HTML:
  1. <canvas id="drawing" width="200" height="200">
  2.     <p>Alternate text.</p>
  3. </canvas>

JavaScript:
  1. var drawingCanvas = document.getElementById('drawing');
  2. if(drawingCanvas.getContext) {
  3.     var width = 100;
  4.     var height = 100;
  5.     var radius = 12;
  6.     var x, y = 0;
  7.     var ctx = drawingCanvas.getContext('2d');
  8.  
  9.     ctx.fillStyle = "rgba(180,180,144,0.6)";
  10.     ctx.beginPath()
  11.     ctx.moveTo(x,y+radius)
  12.     ctx.lineTo(x,y+height-radius)
  13.     ctx.quadraticCurveTo(x,y+height,x+radius,y+height)
  14.     ctx.lineTo(x+width-radius,y+height)
  15.     ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius)
  16.     ctx.lineTo(x+width,y+radius)
  17.     ctx.quadraticCurveTo(x+width,y,x+width-radius,y)
  18.     ctx.lineTo(x+radius,y)
  19.     ctx.quadraticCurveTo(x,y,x,y+radius)
  20.     ctx.fill();
  21.     ctx.rotate(7.5*(Math.PI/180));
  22. }

Any better? I thought so... Oh, and if you want this on IE, you have to use a compatibility library.

Licensing

This is a point that gets mentioned over and over again, so let's see:

  • Wikipedia states that "On March 14, 2007, WebKit developer Dave Hyatt forwarded an email from Apple's Senior Patent Counsel, Helene Plotka Workman[3], which stated that Apple reserved all intellectual property rights relative to WHATWG’s Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1, entitled “Graphics: The bitmap canvas” [4], but left the door open to licensing the patents should the specification be transferred to a standards body with a formal patent policy.". Today, Canvas is still a copyrighted property of Apple Inc.
  • HTML, JS and CSS parser implementations of most of the browsers are closed source (with few exceptions).

Now on the opposite side we have this:

Still not convinced?

What Else?

Finally, here's a list of cool functionality that you will miss out on if you choose HTML5, JS and CSS over Flash:

  • Sockets
  • Video and audio streaming
  • Microphone and webcam access
  • Embedded fonts (don't get me started)
  • Multitouch
  • Native 3D transforms
  • Graphics shaders and other C++ based extensions (Alchemy)
  • DRM

Conclusion

Summing up I would like to say that I like HTML5 *very much* for what it is - a semantic upgrade to HTML4. But please don't call it something like "Flash Player Killer" because doing so simply does not make sense.

Flash is a superior technology allowing for rich and true cross platform experience and it's here to stay for a long long time whether you like it or not.

Flame wars commence... If you have a different point of view or want to add something to the discussion, please leave a comment below. You can also send me a shout at @pauliusuza on twitter.

April
25th
Photoshop CS5: Adding a Smile With Puppet Warp



Photoshop CS5 is has already been announced and most of us are thinking is it worth the upgrade? Well today I will show you one less-talked-about feature that we've been using in a production setting for the last month and that has been a real time saver for me - the Puppet Warp.

Puppet Warp tool has a lot of cool uses like character or object posing on the scene (as seen in this video), however what I found really useful is Puppet Warp's ability to tweak the image without any visible distortion that usually occurs when using warp, scale or smudge tools. Just to give a very quick example of what I mean, I will demonstrate how you can add a nicer smile on my portrait image I took a while ago for my Facebook profile.

Disclaimer: I am no way affiliated with Adobe Systems Inc. or getting "rewarded" for this article, I was just happy to discover a feature in CS5 that I really seem to like and I want to share it with you.

Here's the original image I took:
Puppet Warp: Step 1

Let's choose Edit -> Puppet Warp
Puppet Warp Menu

The Puppet Warp mesh appears over non-transparent parts of the layer, in our case it covers all the portrait:

Puppet Warp: Step 2

When we click on the image, yellow control points appear. Let's position those points on (or near) the main features we want to keep in place when modifying the image - think of them as pins on a flexible garment:

Puppet Warp: Step 3

When working with detailed images, you will want to increase the mesh density for more precise results and less visible distortion, this can be done by choosing an option from the Density menu:

Puppet Warp: Step 4

Now let's drag the control points to tweak the image to your liking, like so:

Puppet Warp: Step 5

When done, hit Return key on the keyboard and behold the final result:

Puppet Warp: Step 6

This is a comparison of the two images side by side:

Puppet Warp: Result

And this is a close up of detail, you can clearly see that no detail or texture was lost in the process and the image still looks very natural. All of this in less than 60 seconds with the new CS5!

Final Detail

Amazing, isn't it? What do you think about it? Please leave your comments in the comment section below and follow me on twitter for more fun stuff!