Add a click event to a BitmapImage in Adobe Flex/AIR

Posted by Daniel | Posted in Development, Flex, Software | Posted on October 5, 2011

0

You may have noticed MouseEvent.Click is not an event available to be set on the BitmapImage Spark primitive(in the current Flex SDK). But, there is a simple workaround for this. All you have to do is place it inside of a Graphic primitive wrapper. In MXML it would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
		<s:Graphic click="graphic1_clickHandler(event)">
			<s:BitmapImage source="path/to/image.jpg"
						   smooth="true"
						   smoothingQuality="high" />
		</s:Graphic>
	</s:HGroup>
 
</s:Application>

Flex Builder Project

In AS3 it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="application1_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
 
			import spark.primitives.BitmapImage;
			import spark.primitives.Graphic;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var myBI:BitmapImage = new BitmapImage();
				myBI.source = 'path/to/image.jpg';
				myBI.smooth = true;
				myBI.smoothingQuality = 'high';
 
				var myG:Graphic = new Graphic();
				myG.addElement(myBI);
				myG.addEventListener(MouseEvent.CLICK, graphic1_clickHandler);
 
				container.addElement(myG);
			}
 
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
	</s:HGroup>
 
</s:Application>

Flex Builder Project

Read More

Write a comment

Page optimized by WP Minify WordPress Plugin