Esoteric Framework

 

Mouse input

Abstract
In this tutorial you'll learn how to handle mouse input.
Introduction

Up until now, the applications were not interactive. In this tutorial we'll use mouse input to make the example from the 3D basics tutorial more dynamic. Here's the program we created.

Source Code

<Application>

	<Scene3D id="scene">
		<Sprite3D rotationX="10" rotationY="20">
			<Shape>
				<SolidFill color="0xCCCCCC">
					<Rectangle width="160" height="150" />
				</SolidFill>
			</Shape>
			<Sprite x="20" y="20">
				<Sprite>
					<Shape>
						<SolidFill color="0x222222">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 1</TextField>
				</Sprite>
				<Sprite y="40">
					<Shape>
						<SolidFill color="0x222222">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 2</TextField>
				</Sprite>
				<Sprite y="80">
					<Shape>
						<SolidFill color="0x222222">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 3</TextField>
				</Sprite>
			</Sprite>
		</Sprite3D>
	</Scene3D>
	
	<Camera3D id="camera" z="{-this.perfectDistance}" />
	
	<Viewport3D viewportWidth="{root.applicationWidth}" viewportHeight="{root.applicationHeight}" scene="{root.getElementById('scene')}" camera="{root.getElementById('camera')}" />
	
</Application>

Result

Get Adobe Flash player
The hovered property

All interactive objects have a hovered property which evaluates to true if the mouse is over the object, or false otherwise. The Sprite element happens to be an interactive object. In this example, we'll use bindings to change the color of the buttons when the mouse is over them. We'll also use the conditional operator, which has the form A ? B : C, and evaluates to B if A is true, or C otherwise.

Notice how the color attributes are changed.

<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">

Source Code

<Application>

	<Scene3D id="scene">
		<Sprite3D rotationX="10" rotationY="20">
			<Shape>
				<SolidFill color="0xCCCCCC">
					<Rectangle width="160" height="150" />
				</SolidFill>
			</Shape>
			<Sprite x="20" y="20">
				<Sprite>
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 1</TextField>
				</Sprite>
				<Sprite y="40">
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 2</TextField>
				</Sprite>
				<Sprite y="80">
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 3</TextField>
				</Sprite>
			</Sprite>
		</Sprite3D>
	</Scene3D>
	
	<Camera3D id="camera" z="{-this.perfectDistance}" />
	
	<Viewport3D viewportWidth="{root.applicationWidth}" viewportHeight="{root.applicationHeight}" scene="{root.getElementById('scene')}" camera="{root.getElementById('camera')}" />
	
</Application>

Result

Get Adobe Flash player
The click event

Next we'll create a rectangle to paint a background for the application, then use the click event to change the background color when clicking a button. To add an event, you use the EventListener element. It requires two parameters, which refer to the element that triggers the event, and the event type.

<EventListener target="{parent}" type="click">
	root.getElementById('background').color = 0x880000;
</EventListener>

Within the EventListener element, you can have as many instructions as you want, separated by semi-colons.

Source Code

<Application>
	<Shape>
		<SolidFill id="background" color="0x333333">
			<Rectangle width="{root.applicationWidth}" height="{root.applicationHeight}" />
		</SolidFill>
	</Shape>

	<Scene3D id="scene">
		<Sprite3D rotationX="10" rotationY="20">
			<Shape>
				<SolidFill color="0xCCCCCC">
					<Rectangle width="160" height="150" />
				</SolidFill>
			</Shape>
			<Sprite x="20" y="20">
				<Sprite>
					<EventListener target="{parent}" type="click">
						root.getElementById('background').color = 0x880000;
					</EventListener>
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 1</TextField>
				</Sprite>
				<Sprite y="40">
					<EventListener target="{parent}" type="click">
						root.getElementById('background').color = 0x008800;
					</EventListener>
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 2</TextField>
				</Sprite>
				<Sprite y="80">
					<EventListener target="{parent}" type="click">
						root.getElementById('background').color = 0x000088;
					</EventListener>
					<Shape>
						<SolidFill color="{parent.parent.hovered ? 0xAA0000 : 0x222222}">
							<RoundedRectangle width="120" height="30" ellipseWidth="10" ellipseHeight="10" />
						</SolidFill>
					</Shape>
					<TextField x="5" y="3" width="{this.textWidth}" height="{this.textHeight}" color="0xFFFFFF" size="16">Button 3</TextField>
				</Sprite>
			</Sprite>
		</Sprite3D>
	</Scene3D>
	
	<Camera3D id="camera" z="{-this.perfectDistance}" />
	
	<Viewport3D viewportWidth="{root.applicationWidth}" viewportHeight="{root.applicationHeight}" scene="{root.getElementById('scene')}" camera="{root.getElementById('camera')}" />
	
</Application>

Result

Get Adobe Flash player
Conclusion

This tutorial was probably harder to follow than the previous ones. However, once you understand the concepts, you'll be able to create interactive applications by mixing events and bindings.