Sample Silverlight textured 3d in a pretty slick Vista Silverlight theme. It is a pretty impressive demo that is full screen app and a slight performance test with the 3d in it.

I would love for some kits like papervision3d, Sandy etc to be ported to Silverlight. There are some other early 3d works from bubblemark, a 3D engine recently released in early stages called Balder (source at codeplex), pageturns, and more but it is still pretty young.

Sample Textured Silverlight 3d Vista demo

3D Engine for Silverlight Alpha 1.1

But until Silverlight is available in the market it will hard to justify projects in it unless they are demos or technology show pieces. When it hits around 85% market availability and is finalized (it is currently 1.1 Alpha) it could be dangerous.

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.

Adobe AIR apps are starting to pop up more. After the Grant Skinner AIR app for digg.com it appears Kevin Rose has launched pownce which is a twitter/email/friend/social sharing site/service. The desktop app for pownce.com is built with AIR. I believe AIR will really take off with these types of apps succeeding on it. Pownce is only alpha but it is hard to see it not being successful with the amount of digg users that will spill over.

Pownce (you have to be invited to private alpha)

Other apps for AIR so far that are usable and ready:

FineTune
Competitor to last.fm. I wonder how long til a last.fm air app.

Digg Desktop Widget (from Adobe sponsored digg API contest)

Other AIR apps can be viewed here including kuler, a twitter app and more. And also here at Rob Christensen’s blog.

merhl has created an Adobe AIR iPhone widget for using the AIR runtime that is pretty cool.  It only has some sample screens for most buttons in it but you can actually browse the web on it using the web browser and it flips sideways to show the screen flip.  Check out your website or blog on the desktop iPhone.  Get your AIR iPhone now!

merhl has made it auto updating with AIR so as he adds more functionality it will autoupdate.  That is one neat aspect of doing desktop app/widget work with flash and AS3 in AIR is that it is much more capable of syncing content and that content is usually extremely optimized for fast delivery and keeping it up to date.  Plus you can make chrome and shiny things with it.

John Grden the resident Flash rockstar \m/ and of Red5 fame has been kind enough to release the Papervision3D FlashCS3 UI Components.

What’s nice about this is it lowers the bar to people using Papervision3D and make it more accessible to non programmers.  I have been working to get Papervision3D in many projects but this will make it easier to get designers more into the engine and using Flash to create pv3d experiences. It may also help others to combine pv3d and 2d into some neat mashups (all this can be done before in script but when barriers are lowered usually more creativity follows, also visual use of 3d models in the IDE is powerful).

Here’s what John has cooked up:

Finally! After waiting for a couple of months, I’m able to release the new Flash CS3 Papervision3D Components! There’s a lot to cover, but to get things started, let’s look at the features:

• Design-time render and editing in Flash IDE
• 3 Material types supported – BitmapFileMaterial, BitmaAssetMaterial and MovieAssetMaterial
• Creates MovieScene3D and Free or Target camera
• Manages resizing / centering of Papervision3D scene [optional]
• Dynamic masking to constrain the viewable render area to the bounds of the component [optional]
• Full API and access to Scene, Camera, Collada objects to code around
• Automatically loads materials via Collada file [when materials list is not given]
• New Custom Panel for modifying rotation, camera zoom, camera focus, camera Z at design-timeReady to get started?
  Download it hereYou’ll needs some docs with that sauce:
  DOCSWanna see it in real world action? I used it for the slide presentations at the class this last weekend at RMI.
  Here are the demo files and the project for the Jedi Training Sphere slide show

  In case you wanted to see the Jedi Sphere in action, and thus, the slides from the classes:
  Developer’s slides
  Designer’s slides

  And of course, you can find all of that stuff out on Google code:
  Papervision3D google home

Be sure to check out the quick video and more info over at RockOnFlash

Rock on John!

Right clicking and other mouse support in flash is not really a shining star but in AS2/AS3 you *can* stuff the context menu with items. You can clear out all but Settings and About from the menu and stuff in other items that may pertain to a selected movieclip or the entire app you are building. This can be good when adding multiple functions into applications and for extra functions that you want to make available from a quick location such as full screen, selecting an item etc.

To enable a context menu for full screen capabilities take this example:

1) Make your document class of your AS3 Flash CS3 file to the class below.

package
{
import flash.display.*;
import flash.errors.*;
import flash.events.*;
import flash.filters.*;
import flash.geom.*;
import flash.net.*;
import flash.media.*;
import flash.ui.*;
import flash.utils.*;
import flash.xml.*;
public class FullScreenTest extends MovieClip
{
public function FullScreenTest()
{
// create the context menu, remove the built-in items,
// and add our custom items
var fullscreenCM:ContextMenu = new ContextMenu();
fullscreenCM.addEventListener(ContextMenuEvent.MENU_SELECT, onContextMenuHandler);
fullscreenCM.hideBuiltInItems();
var fs:ContextMenuItem = new ContextMenuItem("Show Full Screen" );
fs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onShowFullScreen);
fullscreenCM.customItems.push( fs );
var xfs:ContextMenuItem = new ContextMenuItem("Exit Full Screen");
xfs.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onShowNormalScreen);
fullscreenCM.customItems.push( xfs );
 
// THIS ASSUMES YOU HAVE A MOVIECLIP IN THE LIBRARY
// THAT IS SET TO A CLASS NAMED 'mc' that inherits from MovieClip
var m:MovieClip = new mc();
m.contextMenu = fullscreenCM;
addChild(m);
}
// functions to enter and leave full screen mode
function onShowFullScreen(event:ContextMenuEvent):void
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
function onShowNormalScreen(event:ContextMenuEvent):void
{
stage.displayState = StageDisplayState.NORMAL;
}
// function to enable and disable the context menu items,
// based on what mode we are in.
function onContextMenuHandler(event:ContextMenuEvent):void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
event.target.customItems[0].enabled = true; // show full screen button
event.target.customItems[1].enabled = false; // hide normal screen button
}
else
{
event.target.customItems[0].enabled = false; // hide full screen button
event.target.customItems[1].enabled = true; // shoe normal screen button
}
}
}
}

2) Now Export to HTML and be sure to change the exported parameters in the HTML file to allowFullScreen = true (for the fullscreen effect) and menu = true (for the ability to add in context menu items) to whatever library you use for embedding flash:

   'menu', 'true',
   'allowFullScreen', 'true'

OR if using HTML parameters

<param name="allowFullScreen" value="true" />
<param name="menu" value="true" />

You can view a sample here. (right click on the movie clip and ‘show full screen’, then ‘hide full screen’)

You can download a sample FlashCS3/AS3 version here.

If you want more information on fullscreen check here and here (downloadable sample and component).

Here’s some of the best commercial Papervision3d projects so far
(all commercial papervision I have seen so far has made theFWA):

1)  The Brahma Bus interactive project
       by Russian firm PARK Studios.

Customize your own VW Bus, received theFWA recognition.

2) Eye Project
      by Takayuki Fukatsu aka fladdict

This is a killer use of pixel color mapping to video overall color.  It has papervision in the archives where it uses some more really well done pixel manipulation effects, received theFWA recognition.

3) The Net Eye interface (based on pv3d sample PaperCloud)
      by Neteye

Nice interface based on a pv3d sample project, received theFWA recognition.

*** The authors of papervision3D also have some of the coolest demos with it as well listed here.

Carlo Ulloa (based on pv3d sample Focus – by far the best)
      by Carlo Ulloa

Papervision3d homepage Shark Demo (wait for it, wait for it…)

Very First Papervision3D Star Wars Game by John Grden.

Also the original shader demos by Ralph Hauwert were killer.

About Vector/Web 3d

Papervision3d created by Carlos Ulloa Matesanz, Ralph Hauwert, and last but not least John Grden has really hit a development and design nerve, along with AS3 finally being ready for primetime. People are really excited about projects like this and it just goes back to my point that in the Vector Wars (Adobe vs Microsoft (haxe making a little noise in dev circles as well)) whoever rolls out cross platform 3d harware rendering in their plug in they will pwn.

Whos the Next Leader of 3d on the Web?

Director has been abandoned for new released until 2008 at least for any 3d updates (if we ever see another version).  But Flash could implement OpenGL (which would lead to it maybe being open one day) and Silverlight would implement DirectX but woudl probably stop at implementing OpenGL.  Flash *could* own with hardware rendering but it opens it up to many more plugins which lead to Director being maxed out at 50% market saturation. 

Anyways, it probably won’t happen but today we have some nice 3d engines in Flash that are fast enough in AS3 with its new shiny VM and there have been some nice commercial successes of the wise early adopters of this technology. Papervision3D, Away 3d (possible merging of code), and Sandy have all helped to add to the buzz around AS3.

UPDATE: Check out this Mech Demo that is making the rounds.  The demo has working hit detection and projectiles from the mech as well as animation on the 3d model.

In case you haven’t heard the SWFObject creator Geoff Stearns and the UFO creator have teamed up to create a new Flash Embed kit for HTML/XHTML called SWFFix that is more DOM compliant yet works.  Its always been a battle on this front of DOM standards vs Javascript when it comes to Flash embedding.

This teamwork to make a common kit will help to consolidate all issues with this and hopefully provide a really solid platform for embedding flash that takes into account all browser and satisfies standards but also works all the time. Making it harder to vote against when it comes time to decide what technology to use.

Of course there have been libraries like SWFAddress (for deep linking in flash and back button support easily) that have been built on top of SWFObject that will have to be switched over that have large user bases and following.

Check out SWFfix (of course this project has been very quiet and is not public since Feb 6-7th) hrm.

Flash is great for monitoring all actions by a user from what they type to what their mouse is doing and for how long. We have many tracking systems that rely on script in Flash and HTML when not using flash that can detect user interaction with our applications. Many tracking companies also use this info for hotspot or heat maps to see what your users are messing with.

To do all this interaction logging and tracking you need mouse events. Mouse events drive games, applications, cool user controlled interfaces, expected user direction and simplify your application. Understanding all the mouse events possible is important.

Here is a list of all the events that are clearly implemented in AS3:

CLICK : String = “click” MouseEvent
Used to detect mouse clicks.

DOUBLE_CLICK : String = “doubleClick” MouseEvent
Used to detect double clicks.

MOUSE_DOWN : String = “mouseDown” MouseEvent
Checks when mouse is pressed down.

MOUSE_LEAVE : String = “mouseLeave” Event
Monitors when the mouse leaves the stage.

MOUSE_MOVE : String = “mouseMove”
Monitors when the mouse moves.

MOUSE_OUT : String = “mouseOut”
Monitors when the mouse moves out of the attached to object of the event.

MOUSE_OVER : String = “mouseOver”
Monitors when the mouse moves over the attached to object of the event.

MOUSE_UP : String = “mouseUp”
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : String = “mouseWheel”
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

Wiring up Events in AS3 is easier than its ever been.

// attach the event listener to this object, if you want a global event outside
// the current class attach to stage.addEventListener([event],[callback])
this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
 
// then make the callback
public function onMouseClickEvent(event:Event)
{
trace(event);
if(event.buttonDown) // if primary button down, left mouse button
trace("left button was down");
else
trace("left button was not down");
}

What about right clicks?

Well not all mouse equipment has right click so its not always best to implement but for the ones that have right click capabilities and other buttons there is both mouse wheel and right click support in Flash mouse events.

To detect right click:

In the MouseClick event there is a buttonDown property on the event that returns true if its a left click, false if its any other mouse button. So you could have a menu drop down on a mousewheel click, right mouse click or other mouse button clicks.

Detecting right clicks or other mouse clicks is impossible in Flash AS3. I got excited and error in testing and thought the buttonDown helped to determine the button pressed but it only listens to the left click.

What about drag over and drag out?

The buttonDown property is mainly used for drag over or drag out events (which are not an actual event) but you could do something like:

function onMouseOver(event:MouseEvent):void
{
if(event.buttonDown==true)
{
// mouse is down and dragged over.
trace('onDragOver');
}
}

function onMouseOut(event:MouseEvent):void
{
if(event.buttonDown==true)
{
// mouse is down and dragged over.
trace('onDragOut');
}
}

To detect when the mouse leaves the screen:

Use the MouseEvent.MOUSE_LEAVE event on your main document class or a class instantiated that assigns this event to the stage. This can be used for high intensity flash sites where performance is preserved when the user is not interacting with certain elements.

More on mouse events and timers shortly. Here’s a sample from the docs:
http://livedocs.adobe.com/flex/2/langref/flash/events/MouseEvent.html#constantSummary

package {
import flash.display.Sprite;
 
public class MouseEventExample extends Sprite {
private var size:uint = 100;
private var bgColor:uint = 0xFFCC00;
 
public function MouseEventExample() {
var child:ChildSprite = new ChildSprite();
addChild(child);
}
}
}
 
import flash.display.Sprite;
import flash.events.MouseEvent;
 
class ChildSprite extends Sprite {
private var size:uint = 50;
private var overSize:uint = 60;
private var backgroundColor:uint = 0xFFCC00;
private var overColor:uint = 0xCCFF00;
private var downColor:uint = 0x00CCFF;
 
public function ChildSprite() {
draw(size, size, backgroundColor);
addEventListener(MouseEvent.CLICK, clickHandler);
addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
}
 
private function draw(w:uint, h:uint, bgColor:uint):void {
graphics.clear();
graphics.beginFill(bgColor);
graphics.drawRect(0, 0, w, h);
graphics.endFill();
}
 
private function clickHandler(event:MouseEvent):void {
trace("clickHandler");
}
 
private function doubleClickHandler(event:MouseEvent):void {
trace("doubleClickHandler");
}
 
private function mouseDownHandler(event:MouseEvent):void {
trace("mouseDownHandler");
draw(overSize, overSize, downColor);
 
var sprite:Sprite = Sprite(event.target);
sprite.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.startDrag();
}
 
private function mouseMoveHandler(event:MouseEvent):void {
trace("mouseMoveHandler");
event.updateAfterEvent();
}
 
private function mouseOutHandler(event:MouseEvent):void {
trace("mouseOutHandler");
draw(size, size, backgroundColor);
}
 
private function mouseOverHandler(event:MouseEvent):void {
trace("mouseOverHandler");
draw(overSize, overSize, overColor);
}
 
private function mouseWheelHandler(event:MouseEvent):void {
trace("mouseWheelHandler delta: " + event.delta);
}
 
private function mouseUpHandler(event:MouseEvent):void {
trace("mouseUpHandler");
var sprite:Sprite = Sprite(event.target);
sprite.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
sprite.stopDrag();
draw(overSize, overSize, overColor);
}
}

Didier Brun of ByteArray just keeps throwing down.  Here is another great showcase of the power of AS3 and the tools that can be built with it, strongly based on alogorithms proven in other hardcore languages. This project is a Mouse Gesture Recognition lib for AS3 (demo)

Mouse gesturing can be used for recognition of letters, numbers or even just programmable actions by gesture.  Imagine an application that allows you to just make a gesture (even if its not a drawing program or letter recognition) that would open when you make an open gesture, or close a file with a slash gesture. I have many uses for this planned. Very inspiring stuff.

A bit on the algorithm from Didier at ByteArray, I just don’t think it can be made any more simple:

1. Each letter is defined by a n ‘ 8-directions gesture sequence
2. The mouse moves are saved with the same 8-directions sensibility
3. A Levenshtein distance is calculated from each letter to the user moves
4. The algorithm return the best candidate (lowest levenshtein cost)

Usage

Example for the B :

gesture=new MouseGesture(stage);
gesture.addGesture("B","260123401234");
gesture.addEventListener(GestureEvent.MATCH,matchHandler);
 
function matchHandler(e:GestureEvent):void{
 trace (e.datas+" matched !")
}

This project is OPEN SOURCE under RPL License.
2007-05-17 v1.0 mouse_gesture_v1_0.zip