Archive for the ‘VECTOR’ Category

Sunday, June 3rd, 2007

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);
}
}
Sunday, June 3rd, 2007

Photo Sharing and Video Hosting at PhotobucketMichael Swanson has created a SWF2XAML converter that you should check out.  It has quite a few features and fixes that would seem like conversion from SWF to XAML might not be worth the time.  This might change that.  I think that it is important to stay up on all vector technologies as a RIA solution provider and we do not treat platforms like religions rather tools to use at our disposal.

The conversion at least for the vector art looks pretty on target.

Photo Sharing and Video Hosting at Photobucket

Features

The following table contains a list of features that are supported by the current version of the SWF2XAML tool or are planned for a future release. Where there are issues, I’ve tried to address them in the Comments column. If you’d like to see some visual illustrations, take a look at the Eye Candy.

Support Feature Comments
Yes  Frame by Frame Advance Use the horizontal scroll bar at the bottom of the window to navigate frames in the SWF file. Because frames in a SWF file must be processed sequentially, later frames will need to calculate intermediate frames, so jumping forward may take some time.

* The current version of the SWF2XAML tool does not cache prior frames (and that feature in Edit/Preferences is permanently disabled). So, when navigating backwards, the file will be re-calculated from the beginning. Depending on the file complexity, this may take some time.
Yes Explore Project Folder Choose File/Explore Project Folder to view the folder that contains any exported assets (like XAML files and bitmap images).
Yes XAML Export Choose File/Export… to export the current frame to a XAML file.
Yes Save Frame as Bitmap To save the current frame as a bitmap image (.PNG), choose File/Save Bitmap. The image will be named frame####.png where #### is replaced by the current frame number. The file will be saved to the subfolder identified in the application preferences.
Yes Launch XAML File Choose File/Launch XAML to automatically export the current frame to a XAML file and launch it in your default browser (normally Internet Explorer). 
Yes Launch Original SWF File Choose File/Launch Original to launch the current SWF file. If you have the Flash Player installed, this will open the player and begin the animation.
Yes Copy XAML to Clipboard Choose Edit/Copy XAML to copy the XAML for the current frame to the system clipboard.
Yes Copy ResourceDictionary Choose Edit/Copy ResourceDictionary to copy a XAML ResourceDictionary element that represents the shapes that have been defined up to the current frame. The XAML is copied to the system clipboard. Note that any shapes that are defined after the current frame will not be included (so, to include everything, first navigate to the last frame of the SWF file).
Yes Go To Specified Frame Choose Edit/Go To… and enter a frame number to jump to that frame. Because Flash files must be processed sequentially, all interim frames will also need to be calculated, so this may take some time.
Yes Preferences Choose Edit/Preferences… to configure various aspects of the tool:

  • The Display tab contains settings that determine the opacity of the Onion Skin mode and the stroke color and fill opacity for Wireframe Mode.
  • The XAML tab contains settings to export to WPF/E-compliant XAML and to control its formatting.
  • The Files tab controls where the various file types are saved on your system. By default, each SWF file will have its own subfolder created.
  • The Advanced tab contains settings that control how the tool caches various assets. Although caching of assets can improve performance, there may be a significant memory cost involved.
Yes Stage Clipping Choose View/Clip Stage to toggle clipping of the frame on and off. Often times, frames in a Flash file contain elements that can’t be seen with clipping turned on.
Yes File Information Choose View/File Information to enable the File Information pane. This pane displays information about the SWF file, including: file name, file signature, version, file length, frame width, frame height, frame rate (in fps), and the total frame count.
Yes Display List Choose View/Display List to enable the Display List pane. Think of the Display List as a stack of layers that make-up the current scene. You can use the checkboxes to selectively hide/unhide elements until the frame content looks the way you’d like. Note that not all checkboxes will change the visual display (only Shapes, MorphShapes, Sprites, Buttons, and Text).
Yes Advance Sprite Frames Many Flash files contains movie clips (or Sprites) that are sub-elements that have their own animation frames. Although these animations will automatically progress with each frame in the main scene, choosing View/Advance Sprites will manually advance each sprite in the scene by a single frame.

** If you run across a single frame Flash file and it doesn’t appear to animate properly, it may be because you need to manually advance the sprites in the scene.
Yes Wireframe Mode Choose View/Wireframe Mode to display the outlines of the elements in each frame. The wireframe stroke color and fill opacity can be configured under Edit/Preferences. Note that XAML exported or copied to the clipboard in this mode will represent the wireframe version of the frame (i.e. what you see).
Yes Onion Skin Mode Choose View/Onion Skin Mode to toggle opacity of the entire tool window. When Onion Skin Mode is enabled, the tool window becomes semi-transparent so that it can be moved over the top of a comparison window (like the Flash Player). This is useful to visually compare the converted geometry. The opacity of the window can be configured under Edit/Preferences.
Yes Tag Statistics Choose View/Tag Statistics to view a table of the Flash tags that have been encountered up until the current frame in the current file. To get statistics for the entire SWF file, choose Edit/Go To… to jump to the last frame of the file, then view the tag statistics.
Yes View Original Size Choose View/Original Size to size the frame to the height and width that is specified in the Flash file. When using Onion Skin Mode, this makes it easier to do a visual comparison with the Flash Player.
Yes Shape Morphs Shapes that were authored to morph over a specific number of frames are supported in the conversion. This includes geometry, fills, strokes, gradients, matrix transformations, etc.
Yes Clipping Layers Layers in the Display List that are set to clip lower layers are supported. Although these layers don’t have any visual strokes or fills, toggling these layers in the Display List pane will affect the display.
Yes Bitmaps All JPG, indexed color, and full color bitmap types are supported. Note that indexed color modes are simply converted to 32-bit RGBA PNG files (as are JPG files with an alpha layer, unique to Flash files).
Yes Color Transformations Simple color transformations (multiply and add) are supported per-layer in the Display List.
Yes/No Shape Fill Types  All fill types are supported to varying degrees:

  • Solid fills are fully supported
  • Both radial and linear gradient fills are supported. However, the new radial gradient settings in later Flash versions are not supported.
  • Bitmap fills are supported, but non-repeating clipped fills currently have some issues.
Yes/No  Buttons Only the button “up” state is currently converted and displayed. Also, there is no interactivity. 
No Frame Blend Modes No current support for various frame blend modes that were introduced in later versions of Flash.
No Dynamic Text Although static glyph text is supported, there is currently no support for text that uses locally-installed fonts.
No ActionScript All ActionScript code is currently ignored. As such, no interactivity is converted. 
No Sound No sounds are currently exported or played; they are simply skipped.
No Video All video is skipped. 

Installation

To get the SWF2XAML tool up-and-running on your system, follow these steps:

  • Make sure that you have the .NET Framework 3.0 installed on your machine. If you’re running Windows Vista, you can skip this step, because the Framework is automatically installed with the operating system.
  • Download SWF2XAML_0.2.zip (521KB).
  • Extract all of the files to a folder of your choice.
  • Double-click SWF2XAML.exe to run the tool.
Friday, May 4th, 2007

Adobe is throwing down $100 million in venture funding to companies developing tools with Apollo. Or more specifically the “Engagement Platform“ Is Adobe serious about making Apollo successful? I would say yes.  It is both an excellent PR move and it shows their dedication to making desktop as proliferated at Flash on the web.

Microsoft is already using companies to push the Silverlight technology who are known partners and to direct competition with Flash and Apollo with WPF/Silverlight. Although Apollo is a cross platform desktop application wrapper for Flash its more than Microsoft currently has and blows away widget libraries of today.

Here’s a snippet from Niall Kennedy 

Adobe has allocated $100 million towards investing in companies that enhance its engagement platform and is especially interested in funding Apollo companies. As of last month Adobe had invested in 6 companies, including word processing company Virtual Ubiquity. Companies might develop for Apollo to take advantage a strategic investment from Adobe at reasonable terms.

Apollo in its current form seems overhyped, but the cross platform development space will definitely look different in a year as we see new toolkits from big companies executed inside and outside of the browser. It’s not too difficult for a web application to pop out of the web browser and into a standalone web technology, and the marketing and investment dollars being spent by large companies such as Adobe and Microsoft should help boost the visibility of cutting edge web apps.

This was announced at MAX the Apollo/Flash9/AS3 funding effort.  There were lots of interesting things going on in the vector app space and direct to browser desktop apps.  Ray Ozzie added his points about the future of desktop apps in that winforms apps are dead…

Saturday, April 28th, 2007

Zeh has posted a great article on using Tweener to animate along a Bezier.  There is even a papervision3d sample.  Tweener has been a good choice for papervision3d animation due to its flexibility to be able to easily handle z and custom params.Photo Sharing and Video Hosting at Photobucket

This is excellent for game development or pathing in game systems.  The sample in papervision is a set of cones that the path can be set around.  For custom scripted sequences and triggered events this is exactly what is needed. Things like flying through cities, vehicles, transitions, recording replays etc.

I am blown away by this as its probably the most useful and cool demo I have seen yet. Check it out Download the source here (Flash CS3, AS3). 

I will give this project 6-8months before its a full blown papervision3D scene editor in flash. 

Thursday, April 19th, 2007

Photo Sharing and Video Hosting at PhotobucketWell it is ”pageturn” week here at { drawlogic } but this is worthy.  Its the first papervision pageturn zero point nine is now famous.

source code

I have a feeling papervision3D is responsible for a surge in new blogs.  It is an exciting technology but our processors are probably not too happy about all the extra work. 

Wednesday, April 18th, 2007

Hardware 3D rendering…

One thing that might be interesting in the heating up battle of Flash vs Silverlight is rendering.  Will Silverlight down the road provide hardware rendering support for 3d in Silverlight?  If so Microsoft will have a compelling offering.  Would Microsoft really want this with strong 3d capabilities built into a browser (goes against their console offerings, or maybe not in the end).

Photo Sharing and Video Hosting at PhotobucketWith 3d in the browser on two competing platforms that use hardware rendering we can make Raycasted donuts (yummy) oh and there could be a massive surge in the online 3d gaming market (especially the indie market).

It is up for grabs 

But the problem is that Silverlight will also need to support OpenGL for other platforms (that do not run DirectX).  If Adobe wants to win this maybe OpenGL 3d integration into flash will make it more cross platform.  I know the developers on the papervision3d lists are all looking forward to better than software rendering in flash.

Who’s Directing Director? 

But then this leads to another question, where does Director fit in all this, is it even part of the plan? Will Director and Flash merge to support this? Then what happens to the saturation of Flash in the market when it has more third party issues like Director? (and possibly less adoption director usually gets up to 50% to 60% saturation) 

What exactly happened to Director in the plans?

Director is still the de facto standard in 3d web games, more on this soon.  Director has been noticeably absent from all versions of Creative Suite (they are up to CS3 now without it).  Buzz about it was happening in 2004-2005 but last anyone heard is it is still planned for released. The one problem with the Director development environment and community is that the IDE is clunky, the libraries and script (Lingo) is not as advanced as AS3 (the addition of Javascript to the capabilities was great but much of the community was Lingo) and the community is a ghost town (loads of broken links and pay xtras, its stuck in 2003-4).  It was a great market before that, I think Adobe is letting it slip further and further away.  If they wait too long Microsoft might add hardware rendering to Silverlight and then game over in owning 3d gaming on the web. 

“Halleys Comet”

Here is a posting to macromedia.director.3d from Ritesh Banglani, Product Manager for Director and Shockwave. It was in response to a joke about him coming and going from the forum like Halley’s Comet…

Still here, guys. I cannot give an exact release date for the next version, but it will likely be towards the end of the year rather than the middle. The Shockwave Vista release (with DirectX 7) will be out sooner – in 6 weeks or so.

We will NOT upgrade the 3D feature set in the forthcoming Director release. Requirements like new platform support, performance and text engine enhancements are very urgent, and we don’t want to delay this release beyond 2007. However, we are committed to maintaining Shockwave as the leading 3D format on the web, and you WILL see 3D enhancements in a subsequent release. The move to DirectX 9 is a signal of our long term commitment to Shockwave 3D.

I know this is not the answer many of you are looking for. I appreciate your patience, and hope to keep the channels of communications open!

Currently this is the status of hardware supported 3d in WPF/E Silverlight. 

WPF fully supports hardware rendering but Silverlight (cross browser) does not.

What features are missing from Silverlight presentation markup that will be supported in WPF?

Some high-end, Windows-specific features of WPF, such as real 3D, hardware-based video acceleration, and full document support, will not be supported in Silverlight. This is done on purpose in order to serve the Silverlight cross-browser, cross-platform reach requirements that demand a light-weight plug-in. However, Silverlight will offer a uniform runtime that can render identical experiences across browsers on both Macintosh computers and on Windows-based computers.

Wednesday, April 18th, 2007

Photo Sharing and Video Hosting at PhotobucketHere’s the first pageturn in silverlight.  It runs pretty smooth. 

Wednesday, April 18th, 2007

Photo Sharing and Video Hosting at PhotobucketBubblemark has posted a 3d version of the bubble test in WPF/E which will just be called Silverlight now, that compares the new vector render engines Flash9/Flex, Silverlight and DHTML/Javascript.    

Note: I think my processor just melted after this test. 

Bubblemark has been kind to share the source.

Download source code

“Silverlight” 

Personally the names WPF and WPF/E and now Silverlight really didn’t make sense but  Alexey Gavrilov puts a spin on it.  Personally, the Blend, Expression, Slilverlight, WinFX, WPF, WPF/E, Live marketing is a total blitz but I just don’t know that its working much. Here is Tim Sneath’s take on the naming (he works on the project).

I like the technology though but sticking with only Windows Video (which does conform to a standard VC-1 that allows video to be played on mobile, directx and xbox but in a windows only world yes but) after FLV has really taken over it might be tough.  

One thing is for sure the competition between Adobe and Microsoft on these vector tools and development environments will benefit the solution providers and developers who can learn both.  DEVELOPERS! DEVELOPERS!

Wednesday, April 18th, 2007

Photo Sharing and Video Hosting at PhotobucketBumpMapping in Flash has been a possibility since Flash 8/AS2 but libraries are showing up in AS3 now.

Here is a collection of the best samples and authors of that code.  ByteArray AS3 BumpMapping and Ralph Hauwert 3D BumpMap + sources.

BumpMapping shows off the power of per pixel operations and how beneficial the addition of per pixel work is when it was added to Flash 8 with the graphics libraries and filters.

BumpMapping is great for simulating 3d depth in textures and can only be used minimally right now in flash due to the per pixel nature of the operation.   It seems more work in this area is maxing out at 256×256 textures/maps.

Photo Sharing and Video Hosting at PhotobucketFor a quick benchmark you can see that ByteArray’s AS2 BumpMap sample is much much slower than the AS3 version.  Its a small glimpse into the optimizations and reasons for graphics that AS3 is simply the best choice now. UnitZero’s BumpMap for AS2 is much faster but the comparison of ByteArray’s experiment is a better comparison since its using the same algorithm ported to AS3.

Wednesday, April 18th, 2007

Photo Sharing and Video Hosting at PhotobucketByteArray has been developing the Raster class which has an impressive demo of a raster engine to draw rather than the Adobe Graphics library included with Flash and it is much faster albeit pixelated (the nature of raster).

Here’s his latest listing of what it supports:

V1.3 API :
line()
triangle()
filledTri()
aaLine()
circle()
aaCircle()
quadBezier()
cubicBezier()

This class use
rastering : Bresenham algorithm
anti-alias rendering : Xiaolin Wu algorithm

Authors (contribution) :
Didier Brun (original class)
Drew Cummins (bezier curves)

Photo Sharing and Video Hosting at PhotobucketAlso check out a demo on the generalrelativity blog with some added beziers.