Archive for the ‘INTERFACE’ Category

Tuesday, March 25th, 2008

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?

Monday, January 14th, 2008


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…

Friday, January 11th, 2008
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


Wednesday, December 5th, 2007

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.

Tuesday, November 27th, 2007

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 url
loader.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 try 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

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

// use an "id" so the item can be retrieved later without a reference to the url
loader.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 loaded
loader.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 instances
loader.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


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!

Monday, November 5th, 2007

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.

Sunday, September 30th, 2007

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 differently.

JSTweener

JSTweener.addTween(element.style, {
time: 3,
transition: 'linear',
onComplete: function() {},
width: 200,
height: 200,
left: 500,
top: 300
});

JSTweener Source

JSTweenerRepo

Samples:

Found via Zeh

Friday, September 14th, 2007

Zeh has posted an excellent cheat sheet for Tweener Easing Penner equations based on the original cheat sheet by Nate Chatellier. This is a very nice visual lookup to see what easing equation you want to use on your motion animations. Usually it is a trial-error approach without some visualization like this unless you were going to Robert Penner’s site visualization tool. It is not specific to Tweener in visualizing the Penner easing equations as many kits use them such as Fuse (AS2), TweenLite, Animation Package etc.

View the large demo here

Download from Tweener on Google Code

Download the source

View Robert Penner’s Easing Visualization Tool

Thanks Zeh/Nate one again and always Robert Penner!

Thursday, September 13th, 2007

Incremental Blogger has posted a very well done mouse gesture/handwriting/tablet PC silverlight demo. ByteArray has a similar script for flash with a Mouse Gesture library but this is very accurate to real handwriting.

Thursday, August 2nd, 2007

Uploading on the internet is pretty arcane. Either you have to individually select each file with the browse file input, install some activex control or use java to select multiple files. It always ends up being a tedious action.

But Flash is the new champ in file upload for the web, as with video, Flash just makes it simple. The FileReferenceList class and its browse method pop up the multiple file select box where the user can hold CTRL or SHIFT to select multiple files and watch them all drop in rather than having to painstakingly select them one by one and not having to install an unknown activex or java applet.

Here’s script to upload multiple files (or get the multiple file select box).

var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/upload/");
    var file:FileReference;
    var files:FileReferenceList = FileReferenceList(event.target);
    var selectedFileArray:Array = files.fileList;
    for (var i:uint = 0; i < selectedFileArray.length; i++)
    {
        file = FileReference(selectedFileArray[i]);
        file.addEventListener(Event.COMPLETE, completeHandler);
        try
        {
            file.upload(request);
        }
        catch (error:Error)
        {
            trace("Unable to upload files.");
        }
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded";);
}

[source]

SWFUpload is based on this and is a nice AJAX based script that uses ExternalInterface in AS3 to pass the javascript presentation to the flash uploader.

The multiple file select, checking the file size before uploading and the ExternalInterface access for Actionscript to talk to Javascript makes Flash the best option for online file uploads for the web yet.