The Alagad Technical Team Blog

About Matt LeGrand

Matt LeGrand is an accomplished user experience specialist with a primary focus on Adobe Flex and Air application development. Matt has been working with Flex since 2005 and Adobe Flash since 1999. His interest are in human computer interaction and interactive media research.

Author's Articles

Need a Gig? Alagad Needs a ColdFusion Contractor (like Today!)

Published By: Doug Hughes on Feb 3, 2010 at 10:22 AM
Categories: Alagad , Jobs

If you’re a talented and motivated ColdFusion developer who has good Model-Glue experience and understand ColdSpring, I’ve got a job for you!  We need someone who can immediately hop into the fray in an existing project, take their assignments and get coding. 

The project is a large, enterprise application for a major, recognizable, company.  We need someone who can dedicate at least 40 hours a week and can work during typical business hours.

This project is slated to last until March 31st.  While it’s not terribly long, there is a chance the project could be extended or that additional projects may follow. 

If you’re interested please send an email to me at dhughes@alagad.com.

View Full Entry | 1 Comments

 

Alagad is Hiring a User Interface Designer

Published By: Doug Hughes on Jan 20, 2010 at 03:17 PM
Categories: Alagad , Jobs

The User Interface Designer is responsible for designing and producing professional software interfaces and website designs. This person will participate in the entire design process from start to finish, beginning with learning client requirements, establishing design direction, identifying and solving design challenges, creating modern and innovative interfaces, producing all required assets, and implementing designs with front-end code. In addition, the designer should have the ability to ensure acceptance of the design by the client and end user, making design modifications as necessary to accomplish this goal. The designer should possess excellent written and verbal communication skills, and the ability to maintain professional working relationships with clients, stakeholders and users.

View Full Entry | 1 Comments

 

Checking the Users Multi-Touch Capabilities

Published By: Matt LeGrand on Nov 23, 2009 at 08:45 PM
Categories: Flex

Adobe just released the beta version of Flash Player 10.1 on their 'labs' site. Previously I've written about the new multi-touch events and written a quick how to on displaying multi-touch events with the new Air 2 SDK and now I'm going to talk quickly about checking a users multi-touch capabilities.

Checking the users multi-touch capabilities is especially important because users hardware and multi-touch capabilities is going to vary widely as new monitors, mice and input devices trickle into the market place. As such, we'll need to adjust our application to take advantage of different 'MultiTouchInputModes'.

Here's the code I'm suggesting:

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setTouchScreenType();
}

protected function addTransformListeners():void
{
this.addEventListener(TransformGestureEvent.GESTURE_PAN,
transformEventHandler, false, 0, true);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE,
transformEventHandler, false, 0, true);
this.addEventListener(TransformGestureEvent.GESTURE_SWIPE,
transformEventHandler, false, 0, true);
this.addEventListener(TransformGestureEvent.GESTURE_ZOOM,
transformEventHandler, false, 0, true);
}

protected function addTouchListeners():void
{
this.addEventListener(TouchEvent.TOUCH_BEGIN, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_END, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_MOVE, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_OUT, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_OVER, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_ROLL_OUT, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_ROLL_OVER, touchEventHandler, false, 0, true);
this.addEventListener(TouchEvent.TOUCH_TAP, touchEventHandler, false, 0, true);
}

protected function touchEventHandler(event:TouchEvent) : void
{
trace( event.toString() );
}

protected function transformEventHandler ( event :
TransformGestureEvent ) :void
{
trace( event.toString() );
}

protected function setTouchScreenType():void
{

if(Capabilities.touchscreenType == TouchscreenType.FINGER)
{
addTouchListeners();
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}
else
{
addTransformListeners();
Multitouch.inputMode = MultitouchInputMode.GESTURE;
}
}

Before assuming that they have gesture capabilities we could also check if they are on Snow Leopard:

if(Capabilities.os.indexOf('Mac OS 10.6') !=-1 )
{
trace('Your kicking it with Snow Leopard');
}

I'm not sure how to check if they are on a laptop with a trackpad.  Any ideas?

Any danger in just listening for all of these events?  Well nothing life threatening.  If the hardware isn't capable, the events simply don't fire.  It's always a good idea to use weak references when listening for events and/or remove event listeners so that we're not inadvertently using up unneeded memory allocations.

So with this information we can somewhat accurately customize our application to take advantage of what type of hardware our users might be sitting behind.  We might have a picture collage that reacts differently to the different type of hardware that it's viewed on for example.

If your company is interested in multi-touch or just want to talk.  Drop us a note on our contact page.


View Full Entry | 1 Comments

 

Checking Out the New MultiTouch Events in Flash 10.1

Published By: Matt LeGrand on Nov 20, 2009 at 01:12 PM
Categories: Flex

In this series on the new multi-touch capabilities in the new flash player 10.1, I'm going to take a closer look at the new events that are fired off by the flash player when dealing with multiple touch inputs.

The two new events that I'm particularly interested in are: flash.events.TouchEvent and flash.events.TransformGestureEvent.

The new TouchEvent class is fired off by the flash player when the player detects a single touch. This class should look very familiar to those who are comfortable with the MouseEvent. It's my current understanding that this event can only be fired on touch enabled Windows 7 machines. I have no doubt that this will change in the near future but as of this writing (November 09) Linux and OSX don't have a clear way to dispatch the TouchEvent class.

Types include:
TouchEvent.TOUCH_BEGIN
TouchEvent.TOUCH_END
TouchEvent.TOUCH_MOVE
TouchEvent.TOUCH_OUT
TouchEvent.TOUCH_OVER
TouchEvent.TOUCH_ROLL_OUT
TouchEvent.TOUCH_ROLL_OVER
TouchEvent.TOUCH_TAP

The new TransformGestureEvent class is fired off by the flash player when the player detects a gesture from the operating system. OSX users will be familiar with the 'Pinch', 'Zoom' and 'Pan' feature that is commonly used via the newer trackpads on most Macintosh laptops. It's important to note that OS 10.6 (Snow Leopard) is required for the flash player to consume these events from the trackpad correctly.  The flash player makes use of these gestures and dispatches the appropriate type of TransformGestureEvent. Windows 7 can also dispatch these same gesture event types.

Types include:
TransformGestureEvent.GESTURE_PAN
TransformGestureEvent.GESTURE_ROTATE
TransformGestureEvent.GESTURE_SWIPE
TransformGestureEvent.GESTURE_ZOOM

A sample event might look like this:

[TransformGestureEvent type="gestureRotate" bubbles=true, cancelable=false phase=null localX=20 localY=20 stageX=20 stageY=20 scaleX=1 scaleY=1 rotation=0 offsetX=0 offsetY=0 ctrlKey=false altkey=false shiftKey=false commandKey=false controlKey=false]

Just like a mouse event the developer can handle that rotation event however they wanted. Most likely a developer might want to rotate the currentTarget of the TransformGestureEvent.

One requirement that might be overlooked is that you have to specify the type of events that your applications will be consuming.

This code is required:
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT
or
Multitouch.inputMode = MultitouchInputMode.GESTURE;

Your flash 10.1 or Adobe Air 2 application can switch between touch input modes but it can't consume them both at the same time.

If there is anything that Alagad can do to help you or your company get started with your multi-touch project, please don't hesitate to contact us.

Thanks for posting comments, corrections or questions.


View Full Entry | 1 Comments

 

Tracing Out MultiTouch Events

Published By: Matt LeGrand on Nov 19, 2009 at 03:58 PM
Categories: Flex
There hasn't been a ton of interest when I've posted multi-touch subject matter on this blog in the past. But I'm not letting that stop me.  I'm excited about the new features in the Beta version of Adobe Air 2, and I'm going to start in on a series of Blog posts that talk about some of the basics of the new multi-touch capabilities in the new flash player release.

One of the first things I did when I was starting to play with the new feature were to trace out all of the new multi-touch events that come with new Flash Player 10.1 (also used within Air 2 applications).

Here's the code I quickly came up with:

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
  setTouchScreenType();
}

protected function addTransformListeners():void
{
this.addEventListener(TransformGestureEvent.GESTURE_PAN,
transformEventHandler);
this.addEventListener(TransformGestureEvent.GESTURE_ROTATE,
transformEventHandler);
this.addEventListener(TransformGestureEvent.GESTURE_SWIPE,
transformEventHandler);
this.addEventListener(TransformGestureEvent.GESTURE_ZOOM,
transformEventHandler);
}

protected function addTouchListeners():void
{
this.addEventListener(TouchEvent.TOUCH_BEGIN, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_END, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_MOVE, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_OUT, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_OVER, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_ROLL_OUT, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_ROLL_OVER, touchEventHandler);
this.addEventListener(TouchEvent.TOUCH_TAP, touchEventHandler);
}

protected function touchEventHandler(event:TouchEvent) : void
{
eventLabel.text = event.toString() + "\n" + eventLabel.text;
}

protected function transformEventHandler ( event :
TransformGestureEvent ) :void
{
eventLabel.text = event.toString() + "\n" + eventLabel.text;
}

protected function setTouchScreenType():void
{

if(Capabilities.touchscreenType != 'finger')
{
addTouchListeners();
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}
else
{
addTransformListeners();
Multitouch.inputMode = MultitouchInputMode.GESTURE;
}
}

On the creation complete event I start listening for some of our new multi-touch events.  Within the MXML I have a TextArea named 'eventLabel' that displays the events as a user touches the screen.  Just that simple. 

If you have a touch enabled screen or an OSX 10.6 operating system with a newish trackpad, feel free to give something like this a try and hopefully you'll start to see all the new events scrolling down your screen. 

In the next post in this series I plan on discussing the two new events of Flash Player 10.1 in a little more detail. 

Thanks for any comments and corrections.


View Full Entry | 3 Comments