Google Tech Talk: Simple interactive 3D modeling for all - VideoTrace

3D models from basic video… This can be huge in all sorts of ways.  For exponential growth you need to go virtual.

  • This is a technology called VideoTrace from Australia
  • The Siggraph paper describing VideoTrace is available here (pdf 6MB)
  • Larger videos available here, with a more compressed version here.

Andre Michelle Brings It with Audiotools and Re-Makes Rebirth Alive and Better with AS3 Flash and Java

If you ever were a fan of Rebirth and Rebirth 2, this was a music kit that had two 303s, a 909 and an 808 kick drum (beastie says mmmmmm-m-m drop!).  Well Andre Michelle has re-ignited that awesomeness and upped it with the Audio Tools from hobnox!.

This not only has the famed 808, 909 and 303 (conveniently covered with stickers of love) but also sorts of channel mixers, pedals and sweet interface that mimics the inputs and outputs as well as customization on nearly every aspect of the audio creation with these tools. Use your mouse to move things around, connect ins and outs and move the whole setup around.

This setup on about 80 bpm and a little tinkering is groovy.

I think I just found my new batcave evil genius code monkey theme music

Apparently Andre and Joa made some noise and now you can too.  Also I noticed that some of it is in java for the sound output.  I wonder if Adobe missed an opportunity here in audio with flash, which will change probably in Flash 10 due to the Make Some Noise Adobe campaign and Tinic Uro for listening.  But for now have some fun. It is hard to find something that doesn’t sound good in the 80-90 bpm range.

AS3 Flash 3D Engine SWFZ Source Code Goes Open Source

Jono is giving SWFZ to science and the open source devices.

The SWFZ engine is one Flash 3D engine that took a different approach. It is a bit early in its technique used but the author at custom:media Jono has decided to float the source code out there in ghost mode (no active development but not dead). It is just ready to branch and others to run with it. He is floating the source but I think in 1-2 years this will be the preferred method if processors and multicore parallel usage is optimized. We shall see.

The implementation method and difference with SWFZ engine in Flash for 3d is that is is a pixel based renderer or scanline. It is based on a really fun game engine called Irrlicht which has been pretty active for the last few years but is a C++ DirectX and OpenGL engine. Since SWFZ has to run in Flash and it is a pixel renderer/scanline it has some limitations currently in Flash. Games and renders have to be fast to pull this off and Flash is limited by the software renderer but as computers get multiple processors and flash player gets better at this then this will be a viable option (it is the same thing that limits Canvas based renderers right now). One main problem with this is you can’t go too full screen the biggest sizes that perform well are smaller windows 320×240 etc. But if the processors can handle it it is actually more efficient when it removes overlap, extra triangle drawing and painters algorithm like problems dont’ pop up (triangle overlap when on same plane). This method draws pixel by pixel but fast enough flash engines like Papervision, Sandy3D and Away3D draw overlaps due to the drawing technique, back to front.

But SWFZ still manages to pull off some amazing feats such as these demos

Quake Demo

Terrain Demo

Yoshis Hip Hop Couzin

Jono has put some great classes into SWFZ engine such as bsp parsers, quake md2 parsers, animated mesh, and lots of great examples in porting C++ Irrlicht to AS3. This was a very early example of how AS3 was fun for programmers to port stuff from C or C++ into Flash. AS3 is just fun. Also be sure to check the site for more samples like an FPS game, some basic ai etc.

Jono has been working on 3d in Flash for a while and actually this message is what shows the difference betweeen this approach and other flash engines the way Papervision, Sandy and Away3D (pv3d derivative) make 3d in flash fast enough (Painter’s Algorithm and drawing skewed movieclips and textures.

Demos

More about the Engine Some Notes

The SWFZ engine.

Overview:

SWFZ engine is the result of four years of me messing with 3D in Flash.

I was a complete newbie to 3D, so a lot of learning has happened to get to here.

If you’re interested in 3D engines check out the resource links at the bottom of the page:

The Demo:

Model

  • .md2 format from ID’s Quake2.
  • Uses frame based animation
  • Textured with jpeg
  • No lighting, No Gouraud Shading, just plain texture

Skybox

  • Textures are just jpegs.

Boxes

  • Rendering – Textured Gouraud , Textured Gouraud with Alpha, Textured Gouraud with Quick Alpha, Gouraud Shaded, and the large box is just Textured.
  • Star Texture – Targa (.tga) file format.

AS3 classes

  • 171 classes and interfaces

Scene

  • No lighting
  • No collision detection

SWFZ engine technology:

The demo only shows a small part of the capabilities of the engine. In the coming weeks I will get www.custommedia.co.nz up and running and start to post more info then.

Currently implement stuff:

New file formats supported

  • .tga – Targa Image
  • .bmp – Bitmap Image
  • .3ds – 3D Studio Max
  • .bsp – Quake3 levels
  • .md2 – Quake2 models
  • .obj – Wavefront 3d object (static)
  • .zip – Read from a zip archive (all in Flash, no server side scripts)

3D Rendering

  • mipmaps
  • perspective correct texturing + affine texturing
  • Flat shading
  • Gouraud
  • Textured Gouraud
  • Textured Flat
  • Textured Two Layers
  • Gouraud Alpha
  • Textured Flat Alpha
  • Textured Gouraud Alpha

3D Scene

  • Billboards
  • Parent, Child scene nodes
  • OctTree
  • Skybox
  • Static Meshes
  • Animated Meshes
  • Basic collision detection
  • Scene node animators

If any code is useful to you maybe drop him a donation or what would be nice if this was all setup at google code and used to be integrated into other engines. Irrlicht ports are fun and there is a future in this method when processors catch up I think.

TweenMax Bezier Tweening Released for AS2 and AS3 by Jack at GreenSock - And List of Animation Kits

TweenMax (Speed Test) has been released that adds a main feature missing from GreenSock’s offerings in tween animation libraries and kits over Tweener. That is the bezier curve tween. Tweener is very popular for use in PV3d and AS3 due to the bezier curve and Zeh’s great example that is really the base of a possible 3d editor. TweenMax now adds this and bezier tween capability for the GreenSock animation libraries.

Tweener and TweenLite have become the micro animation kits as well as micro kits you can make with Go base kits. TweenLite, TweenFilterLite and TweenMax divided up into different kits allows it to be embedded for banners or small assets easier if you don’t need the filters or other advanced tweens (this comes into play heavily with large games and asset collections when the compiled SWF each need the library). Tweener packs all features into one kit for simplicity. GreenSock kits are divided up for need. The comparison together is about the same but for basic tweens TweenLite is only 2k.

Performance is one area that the kits from GreenSock have really shined and since the addition of the speed tests and benchmarks it has become a great focus on showing how the open source kits are much better than bloated included animation calls in Flash and Flex defaults. I think all the kits have niches that they fit and Tweener and TweenLite are just very simple to use which adds alot to an animation kit success.

List of Animation Kits for AS3 (some for AS2 as well)

If you are using the Flex of Flash default animation classes, I am sorry…

Flash/Flex Application Proofs: Adobe Launches Photoshop Express

If there ever was a proof that more intense applications like word processors and image manipulation software are capable of being built and some aspects even better than their desktop counterparts with flash and flex then Scrapblog, Buzzword, Picnik and Photoshop Express are that (in fact Photoshop Express is a direct competitor with Picnik it seems…).  

Adobe launches Photoshop Express today to add to that set that are very usable, quality applications built with Flash9/Flex and most of all actionscript 3 (as3) and the new AVM2. These apps just weren’t possible with AS2 and with Flex they can be easily managed codebases (one major problem with old skool flash actionscript is it was throwaway many times because it was so scripter specific and full of optimizations just to barely perform - now these are actual code bases made by programmers and you see the results).  The great thing about buzzword, picnik and photoshop express are that they are easy to use. Flash/Flex make sense in their case and they tend to mimic and use very good usability patterns.There is no way an AJAX app (even though I build lots of those too) can come close to this integration of style, usability and expected results on all browsers.One important point of this article on news.com mentioning this:

The service will go live in beta test mode on Thursday. Mack said that the company intends to use the test period as a way garner feedback from customers.Adobe intends to offer more features to consumers who pay a yearly fee. Some planned features include a printing service, more storage, support for audio and other media, and the ability to read additional image file types (the service works with .JPGs now.)Adobe also plans to build an offline client using AIR (the Adobe Integrated Runtime) so that people can edit photos offline, executives said.

A couple things here.  First there is going to be an AIR version for the same experience on the web and the desktop for a major application.  Second, flash IS limited to certain file types JPG, SWF, PNG, GIF, and a few others for sound and video.  So why an online photoshop is great, it is still only web based photos, simple edits, etc.  Photographers and users above 72dpi in the 300 600 ++ ranges will still be using Photoshop.  Users with EPS,RAW, etc will still have to use Photoshop until Adobe figures a way to either proxy an image and handle the real source (be it another format) behind the scenes.  Or, improve the flash player to handle other raster and vector image types.A project a while back we had this issue where it was a approval system of media types but the types could be PDF or EPS in addition to web image formats or on occasion other formats and it became a challenge where the content was marked up with flash.  Eventually it was in a div overlay so we could load in the unsupported types behind and sync them with javascript, where flash was just a canvas or screen on top to put notes and markings.  But when it comes to editing that is different, you expect to edit. Also, working with the real source in image manipulation is extremely important so a proxy to the real image seems unlikely a good choice except for simple web uses.In any case, Photoshop Express is a great web based image tool but there are limitations that prevent it from taking any large swath of share from the normal old desktop Photoshop any time soon.

Director 11 Is Released

I was able to download the demo and it is in the store and on Adobe’s site. The new AGEIA™ PhysX™  physics engine and some sort of updated 3D with hardware rendering is nice.

But, Director is like the Rodney Dangerfield of products at Adobe.  Everywhere you have to dig for it, it doesn’t even have updated marketing in most places, the shockwave player link is still from 2002 etc.  I wish that Adobe would support it more, open it up, allow better IDEs, integrate ES4 based Actionscript 3 or 4 into it and keep the 3d market that shockwave supports moving along.

Maybe they will give Director more love but if they don’t allow for some community input and work on the platform like Flex and Flash have thrived on, well they might just lose that piece of the market (3d gaming, hardware).

First impression is the fonts do look much better.  Unicode support is so far so good and I haven’t had a chance to dig into the AEGIS PhysX engine yet but that looks very very fun.

For instance here is a Physics Engine call that creates a rigid body terrain


//JavaScript Syntax
var objTerrain= member("PhysicsWorld").createTerrain("myterrain",terrainDesc,position,orientation,1,1,1);

Or some raycasting:


//JavaScript Syntax
var lstraycast = member("PhysicsWorld").rayCastAll (vector(10,0,0),vector(0,0,1));
for(i = 1; i < = lstraycast.count ; i++)
{
    raycstEntry = lstraycast[i];
    put("Name:" + raycstEntry[1].name);
    put"Contact Point:" & raycstEntry[2]);
    put("Contact Normal:" & raycstEntry[3]);
    put("Distance:" & raycstEntry[4]);
}

I use the Javascript source simply because it is much more usable to me. Unfortunately the docs are only partially converted to Javascript.  Lingo is pretty close to it though but it scares people off.

What Adobe needs to do is port into Flash the ability to use Shockwave3D (hardware rendering for 3d), AEGIS PhysX, would that not blow up big time or what?

Degrafa for Flex Looking Pretty Sweet (AS3 and Commonizing Paths Graphics Pipeline for Silverlight and Flex)


Just recently through the holidays Degrafa has made some great strides as a very cool SVG pathing and designers toolkit for Flex. I have to say some recent Flex apps have really looked good like Picnik and Buzzword but this kit looks to clean up the lack of design and default style-itis that has plagued most common Flex Apps.

This so far looking like a pretty strong kit for bringing the designer pipeline into Flex to provide some really nice looking web styled apps. It has a direct crossover to Silverlight and Path objects that are largely just a series of data created in Expression or exported from Illustrator into XAML. The one benefit of Flex/Flash is it compiles to a very small SWF where with Silverlight you have to package the XAML in a zip and use the downloader object to extract it out. These XAML files and Paths can get massive as I am sure the ones for Degrafa will for Flex but the compile option is nice as it is compressed heavily.

All about Degrafa

Yes the launch includes shiny buttons…

Sphere Sample (right click for source)

Also, it appears it is a way to bridge the pathing and pipeline for flash or Silverlight. At one of the contributors blogs they mention this:

We have lot of interesting features planned for the coming releases. There is also a converter app that will be made available for converting the juicy Degrafa graphics to XAML.

Degrafa has gone live.

Developing…

AS3 HTML to Flash Conversion Library - htmlwrapper

Interesting library for html to flash front end. Basically this runs off the HTML in your page to draw the same in Flash. I am sure there are great pitfalls in this but when controlled this could be very key in a flash add-on to CMS or CMS content. Might be useful for many things.

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile.

Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper’s capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript’s event model is also implemented within Wrapper’s HTML. Wrapper’s best features are the ones that you get for free because of how it is set up. It’s like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology.

Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

Documentation can be found in the wiki and news about this project can be found at http://motionandcolor.com

Examples can be found in the downloads http://code.google.com/p/htmlwrapper/downloads/list

Source is for everything is in svn http://code.google.com/p/htmlwrapper/source

I checked it out and it looks pretty well done, most of the time HTML to Flash or vice versa has to be a semi-controlled environment in terms of the markup. This and FlashML which is only AS2 I am using a partially converted to AS3 are part of my rotation for HTML<–>Flash content challenges for research right now. Usually most CMS in Flash has content loaded into the flash and then an alternate (sometimes similar) representation, here this is trying to merge the two which has it’s challenges.

Try out a demo (view source)

EDIT: Title dyslexia


Flash App Photo Editor Picnik Integrated with Flickr

Picnik is an excellent application that makes believers out of RIA skeptics made with Flash/Flex.   Today Picnik is now integrated with Flickr bringing user friendly photoshop essentially to the masses

This is a pretty interesting market direction as more photo companies like photobucket and flickr add to the competition for photo editing. As flash based uploads, photo editors, word processors, presentation creators, conference systems, office apps, planning apps and many others all over the web does this mean the services model is really here and RIA is not just a fad?

The model of software is changing, again. The one competitive edge that web applications, and specifically RIA apps have over desktop is that many desktop apps are bloated, have legacy evolution that caused heavy, busy interfaces and absolutely no abstraction of the possible user level in many cases. Web applications are for a broad audience so these applications will see many benefits in making simplified versions of applications for lower skilled users, and then for advanced users more features.

The model is entirely different. They also have the ability to embed in sites like flickr, photobucket, social networks, office product offerings, small business servers, etc.  They could even compete on these sites.  The install base will not be millions of client computers but networks and clusters of users at online places and services.

This was a dream with ASP applications and software as a service.  The problem was before RIA some of the limits of the web were preventing web apps from overtaking and beating out the features of desktop apps. RIAs and the web, web services, user controlled  environments are changing the way software is used. is   We aren’t entirely there yet but RIAs are reviewing their schematics, late at night, and are slowly taking over the software world and changing the model.  Like a ninja is Picnik.

Regarding Picnik, I can’t say enough about the simplicity, clean design that they have pulled off here.  The website and application have an identical brand.  The application is extremely responsive and acts like html sites would when it comes to text and forms. The integration of services, webcam, all filters in flash, on and on.  They really have a great team and it seems like they are both a great product team but also have the right quality. The new market is extremely agile, the paradigm is shifting.

AS3 BulkLoader Useful Flash Asset Loading Kit by Arthur Debert

Found via Zeh, this great bulk loading kit for AS3 from Arthur Debert.

AS3 Loaders are very useful, but when you have large projects there is always a pause and focus on loading scenarios and architecture needed for your loading scenarios, sometimes this can literally eat days and entirely change performance with wrong moves. BulkLoader is a well written kit from Authur Debert that makes loading scenarios or using BulkLoader as a base to your loading situations a great pluggable piece of code that has many excellent features.

Some of the calls like BulkLoader.getLoader(“main-site”).getContent(“bg”), are also very similar to Silverlight’s downloader object that can be queued like this. All in all a kit that is very useful that I have already put to work and will help teams standardize on bulk loading for those killer flash apps.

Creating a BulkLoader instance:

// creates a BulkLoader instance with a name of "main-site", that can be used to retrieve items without having a reference to this instance

var loader : BulkLoader = new BulkLoader("main-site");

Add urls to load:

// simplest case:loader
.add("logo.png");

// use an "id" so the item can be retrieved later without a reference to the urlloader
.add("background.jpg", {id:"bg"});

// since the url by itself can't tell us what the filetype is, use the type property to let BulkLoader know what to do:loader
.add("/some-web-services?size=Large", {type:"image"});

// add an item that should be loaded first (higher priority):loader
.add("/data/config.xml", {priority:20});

// add a max trie number (defaults to 3)loader
.add("/unreliable-web-services.xml", {maxTries:6});

// you can also use a URLRequest object , this will load from a POST request

var postRequest : URLRequest = new URLRequest("/save-prefs.php");postRequest
.method = "POST";

var postData : URLVariables = new URLVariables(myPostDataObject );postRequest
.data = postData;loader
.add(postRequest, {"id":"settings"});

// of course, all options can be combined:loader
.add("the-sound-webservices?name=maintrack", {"id":"soundtrack", type:"sound", maxTries:1, priority:100});

Listening for events:

// attaching events to all items:

// this will fire once all items have been loadedloader
.addEventListener(BulkLoader.COMPLETE, onAllLoaded);

// this will fire on progress for any item

// the event , BulkProgress is a subclass of ProgressEvent (with extra information)loader
.addEventListener(BulkLoader.PROGRESS, onAllProgress);

// this will fire if any item fails to load:

// the event is BulkErrorEvent and holds an array (errors) with all failed LoadingItem instancesloader
.addEventListener(BulkLoader.ERROR, onAllError);

// you can also listen to events in individual items               

// this will fire as soon as the item registred with the id of "bg" is done loading (even if there are other items to load)loader
.get("bg").addEventListener(Event.COMPLETE,onBackgroundLoaded)

// this will only trigged if the config.xml loading fails:loader
.get("data/config.xml").addEventListener(BulkLoader.ERROR, onXMLFailed)

Starting the loading operation:

BulkLoader will only begin loading once you call the start method:

loader.start();

Retrieving content:

You can retrieve an untyped object and cast it your self:

var theBgBitmap : Bitmap = loader.getContent("bg") as Bitmap;

// you don't need to keep a reference to the loader intance, you can get it by name:

var theBgBitmap : Bitmap = BulkLoader.getLoader("main-site").getContent("bg") as Bitmap;

// you can also use the conviniece methods to get a typed object:

var theBgBitmap : Bitmap = loader.getBitmap("bg");

// grab a BitmapData directly:

var theBgBitmap : Bitmap = loader.getBitmapData("bg");

Other convenience functions: getXML, getText, getNetStream, getSound, getMovieClip, getNetStreamMetaData.

You can retrieve an item using it’s id, it’s url as a String or as the URLRequest object (if the item was created with an URLRequest).

Arthur also has experience on Tweener so making simplified calls and minimalist code to make a library successful is very clear in the notes/goals on the project and the resulting code:

BulkLoader is a minimal library written in Actionscript 3 (AS3) that aims to make loading and managing complex loading requirements easier and faster. BulkLoader takes a more dynamic, less architecture heavy aproach. Few imports and making heavy use of AS3’s dynamic capabilities, BulkLoader has a one-liner feel that doesn’t get your way.

BulkLoader tries to hide the complexity of loading many data types in AS3, providing a unified interface for loading, accessing and events notification for different types of content.

This library is licensed under an open source MIT license.

Features:

  • Connection pooling.
  • Unified interface for different loading types.
  • Unified progress notification.
  • Events for individual items and as groups.
  • Priority
  • Stop and resuming individually as well as in bulk.
  • Cache managing.
  • Statistics about loading (latency, speed, average speed).
  • Multiple kinds on progress indication: ratio (items loaded / items to load), bytes , and weighted percentage.
  • Multiple number of retries.
  • Configurable logging.

Design goals:

  • Minimal imports.
  • Few method to learn.
  • Dynamic nature: items can be added by specifying a url as a String or a URLRequest .
  • Items can be assigned an identifier key to be used on retrieval.
  • Only one class to learn / use.

BulkLoader tries to gracefully handle progress notification in these use cases:

  • Few connections to open: bytes total can be used instantly.
  • Many connections opened: progress by ratio
  • Many connections opened for data of widely varying sizes: progress by weight.

Check out and download AS3 BulkLoader!

This is quite a contribution to the flash community and is a perfect candidate for the base of your loading assets projects and scenarios. Thanks Arthur!

Good Usable RIA Applications in Flash and Silverlight

Flash and Silverlight allow developers to make amazing tools, they allow creative expression and they also are usually a bad user experience many times.

Lots of that is changing as more applications are made and frameworks like Flex and Silverlight progress. Much of the needed performance is now available for Flash/Flex in AS3 and the AVM2 virtual machine that runs it, making full applications much faster for all actions that might have been a drag in AS2 and vector based application’s of the past. Some great tools were made with this still that were usable like gModeler a flash based UML modeling tool but the performance boost will make these applications even more usable for mainstream.

Some great examples of user friendly apps where the flash or the silverlight element doesn’t blind the developer from usability. These applications might really have a market for general users of applications from advanced depending on feature set as long as they are usable.

buzzword (Flash/Flex/AS3)

Is a word processor that is really well done. This is made with Flex and everything from validation to the toolset is very usable and clean. I use Google Docs and haven’t looked back for about a year but this application is a nice change to web editors for documents at the current state. It included all the usual basic functionality and great new zoom, revision history and sharing tools that web office tools like word processors has come to expect. Be sure to try this one.

scrapblog (Flash/Flex/AS3)
scapblog is a bloggy/presentation that is a great template editor and the tools are broad and expected from users including great integration with the web for photos and video at major sites such as photobucket, flickr, etc.

Google SearchMash (Flex/Flash/AS3)

This is a Flex 2 (actionscript 3) application that is very fast and usable in vector.

Sample Textured 3d Vista demo(Silverlight 1.0)

This demo showcases the speed of Silverlight and a usable OS like interface that performs well. It showcases Silverlight but also has great usability in expected user actions and results.

tafiti (Silverlight 1.0 demo)

Tafiti is a search tool that uses SIlverlight and live search to represent search results in a rich way. They did a pretty good job with usability and especially considering the Silverlight 1.0 lack of good input controls. Little bit laggy.

The point is solution developers should use technology but most importantly make it functional and usable to what users expect. RIAs will succeed very well as long as you can select text, hit back buttons, deep linking, use menu systems, integrate services, have all the features of apps not in vector engines like Flash or Silverlight and to make it mainstream friendly they need to have a low bar of entry and just work. RIAs have an advantage right now as office apps move to the web and photo apps as well, many of these apps above would appeal to general computer users in addition to advanced users.

JSTweener: Javascript Tweener for Animation

Zeh Fernando’s AS2 and AS3 Flash Animation Kit Tweener has inspired a JSTweener port to javascript, why thanks Yuichi Tateno (secondlife).

This actually could be used quite easily with Silverlight and an AgTweener could be very easily created from this. The Tweener like syntax with an object and adding tweens of available properties as an object or array is very simple and could make animation systems much more standard if everything used this not to mention easier for developers to animate in any presentation layer. The syntax makes for the best of the Animation Packages currently available for AS3. If this could be used in other kits it would make animation pretty standard and simple when changing platforms.

JQuery is very lightweight and has a similar syntax on their animate() call. There are many animation javascript kits such as mootools, jquery, dojokit and prototype and others that have similar functionality but it is all handled differen