Archive for the ‘JAVASCRIPT’ Category

Wednesday, February 18th, 2009

Looks like it is a javascript day here at *drawlogic.  Here is an interesting example with some demos of a javascript and canvas based pseudo 3d engine. Anything this cool you know it has to be from Japan.
Also of note, it has been rumored that Silverlight 3 will have fully hardware accelerated 3d and canvas and javascript engines are getting much faster with great demos like this.  Adobe needs to leap into hardware acceleration for flash on a broader scale soon.

But I digress, this demo it appears, was inspired by Papervision3D due to the naming and the javascript reference of “parpevision.js“.  I wasn’t able to find much more information about this but it is very well done and this example even shows some environment mapping. It is not close to flash pseudo-3d engines like Papervision3D yet but at the rate of javascript engine development lately this could rival flash AVM2 in the next couple of years.

Demos

Code

Here is the code for the parpevision.js file and the mini engine, it is an MIT license. (more…)

Wednesday, February 18th, 2009

Box2D is responsible for inspiring many 2d physics engines including Motor2, Box2DFlashAS3 and others.  Box2D the original toolkit is a solid c++ physics engine that has many great examples and features including real collision.

Now it has inspired a pure Javascript version of Box2D called Box2Djs to (using prototype dependency) to implement many of the same demos using the same functionality.  So it appears Box2D if you want to find a baseline standard physics kit for 2D, it now has versions in many languages that might allow you to have 2d physics capabilities across many platforms.

Box2DJS is a JavaScript port of Box2D Physics Engine. To tell the truth, this is converted from Box2DFlashAS3_1.4.3.1 in an automatic manner. (The reason why not Box2DFlashAS3_2.0.0 based is simply because I overlooked the renewal.)

Dependencies

  • prototype.js
  • IECanvas (when you use a canvas tag to display the result of your physics simulation)

Links

How to use

  1. Download a zip file and extract it.
  2. Copy js/ and lib/ directories from the extracted directory to your app directory.
  3. Copy script tags in the header part of index.html in the extacted directory to your html file where you want to simulate physics.

    Because this library does not have a lazy-loading system now, you should load all classes before starting your simulation. To make things worse, each library has a bit complicated dependency each other so that loading libraries in wrong order may cause a fatal error. To avoid such a trouble, it is strongly recommended to copy the header part of this file or `index.html’ including the downloaded zip file.

  4. Utilizing Box2D APIs, simulate the newton world as you like.

    The Box2DJS APIs are completely same as those of Box2DFlashAS3. Please refer information about it.

Also the speed of your javascript engine makes a big difference just like the AS2 AVM1 to the AS3 AVM2 virtual machines.  Chrome is much faster than FF3.

Video of Box2DJS in Chrome

Video of Box2DJS in FF3

Tuesday, December 30th, 2008

SWFAddress 2.2 has been released.  SWFAddress is pretty much THE solution for deep linking in flash and works greatly in combo with THE embedding solution into (X)HTML/Javascript for flash SWFObject.

The new SWFAddress has just arrived after seven months of active development, various contributions and lots of positive feedback from the community. The list of changes includes the following:

  • Refactored JavaScript implementation
  • New SWFAddress.swc AS3 component
  • New CS4 based Splash screen sample
  • New Digg API sample
  • New up() method for easier deep linking path navigation
  • New XSS protection that doesn’t affect special characters
  • Support for Internet Explorer 8
  • Support for custom HTTP status messages in the SEO sample
  • Improved title handling
  • Improved unload event handling for IE
  • Updated Rails sample
  • Fixed getBaseURL() for AS3
  • Fixed Safari 2.0-2.0.3 support
  • Build-in fix for the Firefox 3/Mac OSX blinking effect
  • Additional onLoad fix for application/xml content type
  • Fixed optional options parameter for the popup method
  • Cross platform build script
  • Various optimizations

I believe that this new version is pretty stable and won’t require an update soon. There are two known Safari bugs (19202 and 20355) that currently affect the project and we can only hope that they will make it’s way into the next major release of the browser.

SWFAddress has grown significantly in the last two years and it’s very likely that we’re going to provide a lite version for users who need just the basic functionality. Very soon the same API will become available for Silverlight and we’re also scheduling the development of a jQuery plugin.

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

Saturday, November 8th, 2008

The YouTube Chromeless Player works with AS3/ActionScript 3.

The demo shows great examples of the player with just the window canvas (chromeless) from both javascript and inside of flash.

The project is hosted on Google Code [youtubechromelesswrapper-as3]

Looks like they maybe had a contribution for this, so do it where you can.

This is something we’ve been wanting to provide for a while, and the YouTube API team greatly appreciates the work of developer Matthew Richmond of The Chopping Block for making it happen. Thanks Matthew!

Links

Capabilities/API

Public Methods

player.loadVideoById(id:String, startSeconds:Number = 0):void
Loads and plays video based on specified id.
player.cueNewVideo(id:String, startSeconds:Number = 0):void
Loads but does not automatically play video based on specified id.
player.clearVideo():void
Clears currently cued/loaded video.
player.setSize(w:Number, h:Number):void
Sets the size of YouTubePlayer instance.
player.play():void
Plays the currently cued/loaded video.
player.pause():void
Pauses the currently cued/loaded video.
player.stop():void
Stops the currently cued/loaded video.
player.seekTo(seconds:Number):void
Seeks to specified time within the currently cued/loaded video.
player.getPlayerState():String
Returns the current state of the currently cued/loaded video.
player.getBytesLoaded():Number
Returns the value of current bytes loaded of the currently cued/loaded video.
player.getBytesTotal():Number
Returns the value of total bytes loaded of the currently cued/loaded video.
player.getCurrentTime():Number
Returns the current position in time of the currently cued/loaded video.
player.getDuration():Number
Returns the current duration of the currently cued/loaded video.
player.getStartBytes():Number
Returns the start bytes of the currently cued/loaded video.
player.setVolume(newVolume:Number):void
Sets the volume of the currently cued/loaded video.
player.getVolume():Number
Returns the current volume of the currently cued/loaded video.
player.mute():void
Stores the current volume and changes the volume of the currently cued/loaded video to 0.
player.unmute():void
Returns the volume of the currently cued/loaded video to the last stored value when muted.
player.getEmbedCode():String
Returns the current YouTube embed code of the currently cued/loaded video.
player.getVideoUrl():String
Returns the current YouTube video url of the currently cued/loaded video.

Events

YouTubeLoaderEvent.LOADED
Fired once the Chromeless Player has successfully completed loading and is ready to accept operations calls.
YouTubeLoaderEvent.STATE_CHANGE
Fired whenever the player’s state changes. The YouTubeLoader class translates the JavaScript API numbers to their related string values, the YouTubeLoaderEvent class stores the current event in a variable called state. Possible values are unstarted, ended, playing, paused, buffering, video cued. When the SWF is first loaded, it will broadcast an unstarted event. When the video is cued and ready to play, it will broadcast a video cued event.
YouTubeLoaderEvent.IO_ERROR
Fired when an error in the player occurs. There are two error codes possible: 100 is broadcasted when the video requested is not found. This occurs when a video has been removed (for any reason), or it has been marked as private. 101 is broadcasted when the video requested does not allow playback in the embedded players.
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