Getting Started with Interactions

From Frontal Wiki

The process of reading a Frontal document and rendering a rich media application is like a story full of thousands and thousands of events. Those events mark happenings like "an element was added to the document", "an image was loaded", "an object was selected", and so forth. And in this story are also those events created by the user, like "that object was clicked", "the mouse rolled over this test", and "a form was submitted". The key to interactivity then is to create any number of listeners, which, when they hear a certain part of the story, do something in reaction. In Frontal, we call this process "adding an interaction".

For example, here our Frontal document draws an image. We use the interaction "onRollOver" to change the scale of the image. And we use the interaction "onRollOut" to restore the scale of the image. Cut and paste the following into the Workspace.

<style><![CDATA[
	.scale
		{
			style-tween-ease: fl.motion.easing.Bounce.easeOut;
			style-tween-duration: 60;
			style-tween-use-secs: false;
			width: 160px;
			height: 120px;
			movie-registration-x: 80px;
			movie-registration-y: 60px;
			margin: auto;
 
			@onRollOver { prepStyleTween ( ); sS ( "scale", 4   ); tweenStyles ( ); }
			@onRollOut  { prepStyleTween ( ); sS ( "scale", 1 ); tweenStyles ( ); }
		}
]]></style>
<img class="scale" src="assets/images/image_10.jpg" />

Interactions are always applied to an element in the document. In this case, they're applied to the 'img' element. This is done by adding specially named attributes to the element, in this case, "onRollOver" and "onRollOut". The value for these special attributes is always a snippet of Frontal script. In this case, a script that tweens the scale to 4, or a script that tweens the scale to 1.

There are many interactions supported by Frontal and they're all listed in the Advanced Topic Adding Interactions. There, and elsewhere throughout this documentation, we'll see how interactions may be used to create buttons, sectioned sites, menus, slide shows, integrations with web services, validated forms, and much, much more.