Archive for the ‘AJAX’ Category

Wednesday, December 9th, 2009

Google is pushing Web Sockets into Chrome based on the Web Socket standards being developed at all major engineering standards groups.  Web Socket is an interesting direction but it is great to couple that with O3G or WebGL for some multiplayer 3d game development with just a browser.

Starting in the Google Chrome developer channel release 4.0.249.0, Web Sockets are available and enabled by default. Web Sockets are “TCP for the Web,” a next-generation bidirectional communication technology for web applications being standardized in part of Web Applications 1.0. We’ve implemented this feature as described in our design docs for WebKit and Chromium.

Sample Code

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { // websocket is closed. };
} else {
  // the browser doesn't support WebSocket.
}

Socket Advantage

Flash has long been the answer for sockets for web applications and once sockets were added to Flash it instantly became a better interactive and gaming platform for multi-user applications and multiplayer games. They started with XmlSocket then recently added Socket for raw binary data in as3.  Silverlight and Java also have this feature but having this in script is pretty significant because many applications could really use a browser supported bi-directional communication link.

What is Missing

The biggie missing from Flash, Silverlight, etc and Web Sockets is UDP and preferably RUDP or Reliable UDP which allows UDP datagrams to be sent back and forth either verified delivery or broadcast. Unity does support UDP.  The best socket layers are reliable UDP based because mixing TCP and UDP can lead to queuing and not all messages are critical so having just UDP isn’t enough, having TCP is too much.  Reliable UDP is the way to go but so far no web layers are doing it well except Unity on that one (you still have to make your own RUDP implementation – libraries like Raknet or enet in C/C++ give you this but you can’t use that in Unity client only on the server). (Edit: Flash does have RTMFP which is based on UDP and uses FMS for nat for p2p but it is still not a true low level UDP socket just yet as it supports more features. A low-level UDP socket would also be nice in flash.)

Web Communication Evolving

I am a big Flash fan and have been developing it since 1999 among other platforms, I have recently watched other technologies nearly match the features and some go beyond it.  The interesting thing about Web Sockets is that it does go after a core feature of flash; Canvas and WebGL or O3D also do. Flash still has the webcam, mic, sound mixers/tranform, and for now sockets which put it at an advantage in gaming and interactive. Flash used to  be the sole greatest video player but Silverlight is doing a pretty good job of that as well so that is still an advantage but others are entering including possibly browser support in html5. I still think it is the best video but they would need to keep innovating.

Another interesting point about this is XMLHttpRequest objects.  Originally “AJAX” was created by Microsoft for IE, pushing new features and innovating back when IE was a good browser and ahead in IE4. Mozilla and others adopted this feature (as well as editable text areas for html) because they were great features for web applications to evolve to.  now Google is pushing with Chrome and Web Sockets is the next step that should be in web browsers even if it is only TCP based for now.  This will add great capabilities and will probably be preferred over AJAX/XMLHttpRequest for really interactive and real-time tools/games should it take hold.  Ian Hickson is running the table on the standards with this effort and it is a good one to get behind.

Tuesday, December 23rd, 2008

I have mentioned before that flash to unity3d communication is a key part of game development for the web now where you are using Unity3D as a higher end renderer and some of your other page elements might be flash. Now there is a new open source kit for this called u3dobject.

To get Flash and Unity3D to talk to one another in an HTML/XHTML page is pretty simple with javascript and with the internal Unity3D Application object and the ExternalInterface in Flash.  But there are lots of elements of that communication that can be consolidated and reused so you don’t have to recreate that over and over.  Various studios and programmers come up with their own kits but when it becomes a shared activity to get the best integration and make it more of a platform that is where things like swfobject, swfaddress and u3dobject come in.

So far swfobject is the standard for flash html embedding and unityObject is a similar take (but a bit dated) on that but now we have u3dObject that is open as well and a more official open source project for unity3D <–> flash integration and test harnesses for development when those two technologies are used together.

Unity3D <-> Flash Embedding Info:

Friday, November 28th, 2008

I am working with lots of content now that is flash and unity3d in game development for the web, and occasionally systems built in flash, javascript or other have to communicate with Unity3D and vice versa.  You can do this from the server side (WWW/WWWForm class or sockets) OR you can also communicate client side for many things such as sending name value pairs or variables into Unity3D, Flash or the javascript in page as needed. There are some great tools like UnityObject that is like swfobject (only you have to update it to work with latest browsers) that make this more simple to send in params and messages. The same can be applied to Silverlight. It is pretty simple all in all but having a sample to start with is good with all these technologies.

Paul Tondeur threw togetother a little sample that shows how you can integrate Unity3D, Flash and javascript in the page fairly simply with lots of great demos.  It really is just about passing parameters around into the objects from javascript, then within Flash calling ExternalInterface to call external javascript or within Unity3D calling Application.ExternalCall.

//Flash adding callback for javascript code
ExternalInterface.addCallback("functionNameInBrowser", functionNameInFlash );
//Unity3D calling javascript code
Application.ExternalCall("javascriptFunction", "Parameter1");

Nothing too tasking but if you want to see samples of this working together from flash, flex, javascript, unity3d then check it out. Zip on over to Paul’s site to grab the files and more demos and samples. All examples are bundled in one download, which includes all the Unity3D, Flash, Flex, Actionscript and Javascript files.

Here’s some demos

Sunday, March 16th, 2008

Rostislav added a sample for his excellent SWFAddress kit using the new YouTubeAPI and deep linking to parts of the video. Part of the YouTubeAPI is by Geoff Stearns (the creator of SWFObject who works at YouTube now) and allows much more script control and embedding of the youtube player (chromeless with just the video canvas).

The sample Rostislav at Asual has, shows how you can incorporate SWFAddress now that the youtube player can be embedded by script, and thus how it can have deep-linking to sections of the video from the url.

So, today I spent some time trying to integrate SWFAddress with the sample YouTube video and the result is now available online. There were some tricky parts and probably the code can be encapsulated better, but overall I’m satisfied with the result. Every pause action or significant jump in the playback produces a deep link which will definitely make sense for long videos or specific scenarios. If you want to automatically start the video from the second verve just try this deep link. For this case I decided that it will be better to disable the generation of browser history and the SWFAddress strict mode.

The sample is available in the SWFAddress repository and will become a part of the upcoming 2.1 release.

The cool part about all this is is makes it extremely easy to add commenting at moments in time throughout youtube videos, enables deep-linking, allows snapshots of not just the flash application but also the video that might be playing in that chapter. This is done on services like viddler and others but now you can do it for youtube videos and this will also possibly start a standard way to do this across media players so that a platform of video commenting emerges.

The integration of SWFAddress is simple, on the normal onSWFAddressChange you just pass in the value to the seekTo call:

function onSWFAddressChange(event) {
  time = seek = parseInt(event.value);
  ytplayer = document.getElementById('myytplayer');
  ytplayer.seekTo(time, true);
 }

Google video always had jump to time params like:http://video.google.com/videoplay?docid=-5830318882717959520#01m30s (this is a classic/hilarious Erlang video)

…but this is not very workable with the google video player, also you can always add this to other players but having this ability for youtube is a great leap in allowing a more integrated commenting, chapter and community like feel to video.

Since youtube is so big finally having some more control with the YouTubeAPI will allow much more great additions to the capabilities of using youtube video in many more ways and integration of more great javascript kits like SWFAddress.

The YouTube API is really quite useful. Here are some links of interest:

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


Saturday, November 17th, 2007

The Proposal

Moses, the maker of FuseKit, is hoping to influence Adobe product lines to include a common base for animation and motion going forward. Currently the AS3 world is very alive and is inspiring developers like myself to build lots of toolkits and really creating reusable code and kits that can make things very easy from going to Flash to Flex. But wouldn’t it be nice if a part of these kits that have to be downloaded every time you have an application use them be part of the native Adobe applications, or a core animation kit that partially standardizes animation basics to build upon further?

Are we just asking for trouble or is this a good idea? I don’t’ think it can hurt to bring this to the surface. I know that common syntax and familiar kits can really help the developers and designers move from Flash to Flex to After Effects to Javascript, it could also help Adobe with usage and usefulness of their entire suite of products. Or further this could be a standard that allows Silverlight to also build upon (open standard) and may the best platform win.

I think it would be very wise for Adobe to:

  • Standardize animation toolkits across their products and
  • Start standardizing some of the basic tools of building motion and filter kits to native but still allowing a flourishing open source and community research and development aspect.

What MosesProposes:

Moses did speak with someone at Adobe about this and it is generally in the plans:

“It was also a pleasure to see Richard Galvan present the upcoming crop of Flash features: the sleek update to the animation timeline (better late than never?), support for columnated flowing text (double finally!) and the big one, native 3D player support for Display Objects as rotatable 2D planes. He ran out of time and didn’t get to a few others shown at Adobe MAX, such as built-in IK (inverse kinematics) and faster pixel-level drawing for texture-mapping and photoshop-like filter effects.

Talking to him after the presentation I learned that Richard has a keen awareness of exactly where each feature is at currently. We chatted about low-level animation mechanics of the Flash Player, and I found out that the holy grail of a time-based player is indeed on the distant horizon, but that each rev will need to be a small step toward this goal. The new Flash timeline features meld After Effects, Premiere and Live Motion, and from what I’ve seen I have to say that they are nailing this long-overdue upgrade with great design decisions and a level of usability we’ve never seen in Flash. Kudos, team!”

The Current Situation

Right now Tweener and TweenLite (and animation package and a few others) have a unique position in that they work the same almost for AS2 and AS3 (Flex or Flash – with minor property changes such as _x to x as that has changed in AS3). But it would be nice if these kits also had a version for After Effects (really bringing that tool into Flash/flex developer worlds) and Javascript and it would be great if Silverlight also were supported (AgTweener anyone?).

Tweener is leading the pack in this aspect of creating a similar experience from AS2 to AS3 in Flash and AS3 in Flex and even JSTweener for Javascript, and a kit for haXe which is becoming my favorite toy and the dark horse with the most upside potential, with haXe on the loose these points may all be moot as haXe can target any platform (except After Effects easily, correct me if I am wrong and Silverlight but it could easily be done so to do it for Silverlight 1.0 which is ES3 based).

I don’t use After Effects as much right now but if I could easily incorporate this into Flash/Flex and script and animate in a similar syntax and way I know After Effects would definitely have a boost in interest.

Also, the forgotten one Director, can we please get an ES4 based language in that application, or an update? Then kits and add-ons are much more possible. I really miss hardware accelerated 3d in browser as a pushed technology, Director is still around but it does not get the focus it needs. Feel the freedom and coolness just in this small test here in director, hardware accelerated 3d is the best, the Director application environment and Lingo and hacked in javascript are not the best. As a long-time Director user, hobbyist and professional I am disappointed in Director’s support at Adobe thus far, but I digress.

The Reality

The reality is right now the only problem with kits like Tweener, TweenLite, Tween, mx.transitions, mx.motion, etc is that the source has to be embedded in movieclips multiple times. Sometimes there are multiple animation kits per compiled SWF that have to be used for more advanced features. This adds bulk that if common might not need to be there (this comes into play still on mobile and large games/apps).

Let’s say you have an application that pulls in many disconnected SWFs and they all have animation in them, well if you have 20 of these let’s say, and you embedded a very small Tweener at 9k per SWF. That is about 200k of duplication of AS code. Due to the kits small sizes this is not a problem really but when animation kits like Animation Package come into play, you are talking 40k per SWF which would leave you with almost a meg of just duplicated animation code. I don’t think this is that major of a problem for kits like Tweener (9k compiled) and Tweenlite (3k compiled) but as projects get bigger and more depth of animation platforms needed this can be a problem. This can also be solved in architecture with a controller and dummy SWFs to animate but there are times when you need animation in the compiled SWFs and then also need it in many others and the controller.

The other reality is the animation kits (mx.transitions.easing, mx.transitions.tween) for Flex and Tween for fl are a little bloated, more difficult than needed to use and as has been seen, much slower than kits currently available in the community. My one fear about this is that if Adobe makes this, possibly like Microsoft’s toolkits and libraries they put out, they are always bloated and slower, then because they are embedded they are untouchable. If it was standard enough as building blocks that are faster because they are native, then this is the best option as embedded script would be hard pressed to beat native code in the players/applications.

The Future Plans

Some of this is underway….

Animation kits for future, Adobe is releasing Flash 10 called ‘Astro’ that has many new improvements in tweening with xml closer to flex or even Silverlight like transitions and storyboards. Aral Balkan, a sponsor of OSFlash, posted on this and even that Diesel Flash CS4 will include more Tween tools for IK/bones. Tweener , TweenLite, Animation Package, Animation System etc these are all helping to define the best way to do animation kits.

Physics toolkits have their own animation kits currently usually to handle the movement according to algorithms. FOAM, APE , Box2DFlashAS3 (just released very recently will be posting more on this after I check it) and Motor Physics (unreleased but heavily demoed at polygonal labs) are great physics toolkits and I like this being part of the community to get refined, maybe one of them or the best performing ones becomes part of the proposed Adobe Animation bundle. These will define the best way to do physics kits.

3d in flash toolkits have also been emerging rapidly in 2007 with Papervision3D, Away3d based on pv3d, Sandy, and even engines starting to get built on top of these platforms.

The general direction is moving towards another platform in there somewhere but I think much work is left to be done to standardized physics systems, 3d and advanced motion filter tweens and bezier, splines (Catmull-Rom), editors, etc. I think it is getting time for basic animation kits to become more standard though and in latest versions of flash this is included in the flex and flash scripts but not the native code.

Right now the standard in syntax and the broadest reach is Tweener and due to the bigger fish syndrome, haXe that can target any platform, it also has a Tweener and can create code for as2, as3 and any target written in if After Effects, Premiere or other apps get more robust and standard animation and motion kits. Tweener has kits made and contributed for AS2, AS3, haXe, Javascript and others.

There is also Hydra and the AIF Toolkit that are standardizing After Effects and Flash shaders and filters into a new shader language like Cg and reminiscent of processing.org.

As humans we trial and error and build new platforms in the market to step on to create better platforms to build cool stuff, it is evolving right now. AS3 is inspiring platforms within platforms of Flash and Adobe kits as well as on Silverlight and in the Javascript world with JSTweener, jquery etc. As these things are refined we build a level standard platform to build more stuff on. Eventually this will be there and whoever does the standard platform for animation will probably reap in users and abilitty to easily add new products and solutions where people already have training. Silverlight is an example with .NET developers. .NET was also an example with C# so similar to Java. ES4 based AS3 has proven it is inspiring all types of new platforms and kits and will continue to do so and it is an interesting time in this industry whichever direction it goes.

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

Tuesday, August 21st, 2007

Dojo Toolkit, a robust javascript library similar to my favorite js kit mootools, recently update and added some support for Silverlight effects. This is one really cool aspect of Silverlight in that it allows you to script/code it in many languages in the DLR (Dynamic Language Runtime) including ironpython, C#, IronRuby, javascript and others. Where as with Flash you only have Actionscript3 available.

Check out the Silverlight demos here:

butterfly.html 20-Aug-2007 18:19 33K
circles.html 20-Aug-2007 18:19 4.0K
clock.html 20-Aug-2007 18:19 7.3K
lion.html 20-Aug-2007 18:19 22K
tiger.html 20-Aug-2007 18:19 100K

DojoX

  • high quality implementations of previously experimental features: gfx (portable 2D drawing), data wires, offline, storage, cometd, etc.
  • dojox.gfx now includes Sliverlight support
  • many more features and improvements than there’s room for here.

Dijit

  • unified look and feel for all widgets
  • ambitious a11y and i18n features in every Dijit widget
  • a mature CSS-driven theme system with multiple, high-quality themes
  • huge improvements in system performance
  • data-bound widgets
  • Declarations for lightweight widget writing
  • a new page parser that allows instances of any class, not just widgets
  • no magic

Core

  • reduced API surface area (easier to remember and use)
  • dojo.query() always available, returns real arrays
  • from-scratch high-performance DnD system
  • Base (dojo.js) is 25K on the wire (gzipped)
  • dojo.data APIs finalized
  • new build system
  • new test harness for both CLI and browser use
  • dojo.behavior now marked stable and based on dojo.query
  • excellent animation APIs with Color animations in Base (always available)
  • all the features you’ve come to count on from Dojo (RPC, JSON-P, JSON, i18n, formatting utilities, etc.)

[ source ]

Saturday, June 30th, 2007

There is no Flash or Java support on the iPhone. This had leaked earlier but now that it is out this is verified and it pretty much sucks.

This limits the type of gaming market the iphone could become, or the type of shiny chrome apps that could be built with Flash. I guess games can be built with HTML5 and javascript (um thanks Jobs).

I was at least hoping for FLV support which would open up many clip sites for mobile, but then again this would compete with iTunes and QuickTime.

Current knowns about the iPhone dev platform:

  • there’s no Flash or Java support
  • there is PDF support
  • Quicktime is used for encoding and displaying video and audio
  • said video is encoded via H.264
  • with Safari on the iPhone, links can be embedded in web pages to allow phone calls from a click; this would be insanely useful for corporate directories and such
  • web pages are limited to 10 MB (!), Javascripts can only run for five seconds (maybe no games at all :( )
  • the iPhone’s browser user agent: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3

Also more info from here:

  • HTML5
  • 10MB max html size for web page
  • Javascript limited to 5 seconds run time
  • Javascript allocations limited to 10MB
  • 8 documents maximum loaded on the iPhone due to page view limitations
  • Quicktime used for audio and video
  • stylesheet device width:480px
  • there are no scroll bars or resize knobs. the iphone will automatically expand the content
  • new telephone links allows you to integrate phone calls directly from your webpage. remember this is only on safari.
  • built in google maps client for integrated mapping from your website
  • iPhone screen size 480×320
  • encode movie size 480×360
  • Links to movies on a web page will take users directly to video full screen playback

They are really controlling the experience early on, something I was hoping they wouldn’t do. Controlled markets is the current problem with mobile platforms in the US. I am sure better specs and flash might pop up in later versions of the iPhone in Apple fashion of increasing the hype on each version. Advancements such as 3G, more than 8GB storage, flash maybe, just not sure about this one due to the competition of Quicktime and iTunes. This severely limits the RIA web on the iPhone, at least this version of it.

UPDATE: Jesse Warden has links to using Flash content inside of Quicktime. This coud be a gaming option after all. It still limits the web browsing but in terms of interactives and games this could be good.

Flash on the iPhone via Quicktime: Part Deux

Apparently the “enabling” of Flash is as simple as clicking a button, correcting my original coverage.

Check out I2Fly’s coverage of iGiki.com’s iPhone Flash Games. Also, some of Gary’s ported Flash games worked.

Be sure to check out this out regarding a mobile web with no Flash.

Wednesday, April 25th, 2007

[source]

Photo Sharing and Video Hosting at PhotobucketAdobe is in the process of Open Sourcing Flex Under the Mozilla Public License (Mozilla Public License FAQ: http://www.mozilla.org/MPL/mpl-faq.html )

Adobe is announcing plans to open source Flex under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also includes the Java source code for the ActionScript and MXML compilers, the ActionScript debugger and the core ActionScript libraries from the SDK. The Flex SDK includes all of the components needed to create Flex applications that run in any browser – on Mac OS X, Windows, and Linux and on now on the desktop using “Apollo”.

The timeline to do so will be by the end of 2007.

The source code for the Flex framework is already available within the free distribution of the current Flex 2 SDK. By this summer, Adobe plans to put in place most of the infrastructure (public bug database and public daily builds) required to run the Flex SDK as an open source project. We expect to complete the transition to a fully open source project (source code for the compiler, infrastructure for community contributions, etc.) by the end of 2007.

This is pretty interesting in that it will lead to more applications challenging FlexBuilder but I imagine its largely to get around Open Sourcing Flash altogether.  They will never do that.  But some think that if Adobe were to do this that it would make flash more accepted as an application bulding tool. 

Silverlight Incoming! Flank ‘em

However you might see more backing of Flex.  I know many Flash developers and designers but not many are raving about Flex just yet. In fact its a bit of a confused strategy. It needs more support and this is a very good tactical move.

This is Flex trying to still get in the game

The reality is Flex is not really a player right now.  Flash is the best for interactives, games, learning systems, etc and it completely OWNs online video.  Director owns 3d games on the web.  And .NET, Java, PHP, Rails, Python etc own the web and enterprise.  That is just the state of the industry today. Flex isn’t a top choice right now.

Vector based to be more accepted?

With WPF entering and Flex possibly gaining more ground then vector based desktop apps and websites will be the norm maybe one day, but Adobe and former Macromedia’s sites aren’t even flash or flex.  Its more about applications and as the web becomes even more of a platform for that more trusted than even your own hard drive this may change.  The thing is people like to read content on textual systems like HTML. Vector based RIAs just do not do text correctly yet.  All text should be selectable and able to be searched and copied. Many systems have dual content systems to be indexable but teh text in the flash also needs to be selectable. The closer the usability and readable content in flash comes along maybe this will change.  Vector based interfaces are great for visual and advertising mediums but for most content its not there yet. Flex is starting to bring this in with better HTML support but I think that this move to open source was important to save a falling off initiative or one that had a bit of lag due to the switch from Macromedia to Adobe.  I am still wondering what happened to Director in that hand off.