Creating a Hit Area on Transparent PNG Content for Button Use

 
After weeks of investigation and discussion we have come up with a way to create a button on the content of a loaded in transparent png.

 You can set a sprite mask to use a bitmap and it will mask successfully so long as both are cached as a bitmap. This is ok but when you put mouse listeners on the sprite it registers the whole rectangular area.

 Next we thought we'd utilize the bitmapData getPixel32 method which returns an ARBG colour when passed in the x and y coordinate. This works great but you can only get 1 pixel at a time.

So then we thought a bit outside the sqaure and rather than create a dynamic hit area over the bitmap, we'd use the stage's MouseEvent.MOUSE_MOVE listener and get the x and y of the current position then pass that into the getPixel32 methods of each bitmap.

Success however for overlaying bitmaps this method is limited. Now we would need to updated the mouseEnable property on the fly to allow for bitmaps that are being obscured.

So the final thing you would need to do is check to see whether or not the ARBG value is equal to 0. If so enable the mouse add a MouseEvent.CLICK listener to the clip and set the button mode to true. I also use a boolean isActive to avoid adding multiple listeners. Once the ARBG value equals 0 then disable the actions by removing the MouseEvent.CLICK listener set the button mode to false and set mouseEnabled to false.

The reason we use the stage MouseEvent.MOUSE_MOVE listener is so we can always receive updates regardless of whether the bitmap button is enabled or not. If we set the bitmap button MouseEnabled property once we set it to false we'd never receive mouse events again.

So there we have it, still in it's infancy but nonetheless a solution to a perculiar problem. See the attached AlphaBitmapButton.as to view the workings.

View Example 

AlphaBitmapButton.as (3.76 kb)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Video in Flash + Fullscreen

So you need to create a video player in flash. There are a few ways to do this but what is the best way to approach it? It ultimately comes down to what you are after and in case you're not familiar with the points below have a read and hopefully it can help make your decision.

FLVPlayback
Pros
- Quick, drag, drop, set parameters on your way.
- easier to skin than previous component versions
- ability to add cue points
- implement standard captioning through FLVPlayback captioning
- access to built in VideoEvents, volume controls with built in full screen fucntionality

Cons
- Filters and effects would be applied to whole component
- difficult to add custom functionality without deconstructing underlying code (can experience unusual results)
- publishes redundant classes that increase file size

Video Class
Pros
- fully customizable video player
- complete control over hadnling events
- reduced file size

Cons
- need to create own handlers to respond to NetStream events (no built-in events on Video class)
- fullscreen hardware acceleration only available in latest flash player
- without latest player video scales to screen size.

Limitations of fullscreen
- You must have version 9,0,28,0 or later of Flash Player installed to use full-screen mode and 9,0,115,0 or later for hardware-scaled full-screen mode.
- fullScreenRect only available in latest flash version. fullScreenRect chooses what part of the screen scales to fullscreen.
- in earlier versions of flash fullscreen was not supported if wmode is set to transparent or opaque

To get around the latest flash player issue include expressInstall so the user has the option to install on the fly the latest player. People without administration rights may have trouble with this as the only drawback.

Also included a link to Flash Video for Professionals by Lisa Larson and Renee Costantini on Amazon.com. It has useful information on how video is handled in flash. I found seeking to be very interesting, where if you scrub the video playhead it will snap to the nearest keypoint in the video. The more keypoints, the more seamless seeking appears.

Other useful links and references:
- Adobe full screen mode article: http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
- Adobe full detection kit: http://www.adobe.com/products/flashplayer/download/detection_kit/
- Fullscreen Demos:  http://labs.adobe.com/wiki/index.php/Flash_Player:9:Update:Full-Screen_Mode:Demos
- Flash Video for Professionals: Purchase on Amazon

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Online AS3 Event Reference

Here is the offical Adobe AS3 Event reference list.

http://livedocs.adobe.com/flash/9.0/.....

Drill down to find just the right event.

Very handy lookup reference.

Enjoy. 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Flamingo Drive

No it's not a lap-dancing club.
It's one of the most addicitve "hit something as far as you can" type flash games I've played.

http://www.yetisports.org/download/yetisports5.zip
http://www.yetisports.org/download/yetisports5.hqx

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Hi ho silver!

Our blog is finally live - look forward to some interesting and elucidating posts on love, life and interactive media :)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5