Table of Content Introduction Capturing Mouse Events within an Active Region Presenting Images in Active Regions Presenting Text in Active Regions Detecting Overlap of Active Regions Graphical Transformations on Active Regions Embedding Sketches within Active Regions Examples to Import in Sketchify To Probe Further

Introduction

An active region is a rectangular region in the sketch that can display drawings and text, but can also capture user events and that can be graphically transformed (translated and rotated). An active region may also embed one or more other sketches (with other active regions). Active regions allow to easily creating a multitude of interactive effects within sketches. They can, for example, detect mouse events, such as mouse clicks or mouse movement, or overlap of the regions. The other way around, we can directly, or through variables, control most properties of an active region, including its geometrical properties, its transparency, the path to the image file that is associated with it, or its textual label.

Presenting images in Active Regions

Active regions can contain images. The image that is displayed in the active region can be created in several ways (also see Video 1):

• By drawing it in the AMICO Sketchify editor or in an external image editor,
• By importing it from a file or pasting it from the clipboard,
• By extracting a region from the background sketch image, or
• By specifying a path or URL to an image file.
• By capturing it live frtom any part of the screen.

Video 1. Different Ways to Create Images in Active Regions

 

In the last case, the path to the image file may also be specified indirectly, i.e., by means of variables. If the image path is specified with an expression that starts with “=”, for example, “=image-file”, the path will be taken from the variable “image-file”. The path name can also contain more complex textual patterns. A textual pattern is a string in which parts are provided by variables. For example, in the string pattern “http://www.sigmund.nl/strips/sig08090<%=img-index%>.gif” the text “<%=img-index%>” will be replaced with the current value of the variable “img-index”. When the variable “img-index” for instance equals “1”, this URL evaluates to the string  “http://www.sigmund.nl/strips/sig080901.gif”.

The image within the active region will be automatically refreshed every time when the variables associated with its path are changed. This allows creating various animated effects. For example, our web camera image capturer can periodically capture a camera frame and save the result into a file, while also updating a variable with the corresponding file name. Such an image can be displayed within an active region.

Figure 1 illustrates a simple navigational interface for an online collection of comic strips. In this example, the upper active region is configured to show the image specified in an URL that is specified in the form of a textual pattern. The variable “img-index”, used in the textual pattern, is updated by the rotation of the bottom left active region. Consequently, the rotation of the bottom-left active region updates the variable “img-index”, which causes the image in the upper active region to change.

Figure 1. Simple interface for navigation through online comic strips.

 

 The ability to change the images shown by an active region through a variable or a string pattern also enables employing online image generators within our sketches. Such generators create images “on the fly”, based on the parameters received through a URL. For example, the Google Chart API (http://code.google.com/apis/chart/), generates images of diverse charts diagrams, based on data and settings received through the simple URL (see Figure 2). In this way, designers can experiment with various dynamic forms of visualizations of data, embedding such visualization in any part of the sketch.

Figure 2. Google chart images generated from AMICO Sketchify string patterns.

Adding Perspective in Active Regions

Images created in active regions can also have perspective transformations, simulating its 3D transformations. See Video 2 for illustrations.

Video 2. Perspective in active regions (see also how to open this example in Sketchify).

Presenting Text in Active Regions

The text within an active region is treated in a very similar way as an image (see Figure 3 and Video 3), i.e., the textual content can be provided literally, taken from a variable, or specified through a text file. When text is taken from a variable, it will be automatically refreshed every time when the variable is updated, which, amongst others allows the creation of various animation effects, where, for example, text changes are controlled by a timer.

Figure 3. Interface for setting the text properties of an active region.

 

Video 3. Presenting text in active regions (see also how to open this example in Sketchify).

Capturing Mouse Events within an Active Region

An active region can detect when the user clicks on it, presses or releases a mouse button, or moves a cursor over it. In response, the active region can initiate actions, such as updating variables or initiating the transition to another sketch (Video 4).

Video 4. Using active regions to capture user mouse events and define transitions between sketches.

 

Through dragging on an active region, the user can change its position and orientation. The designer specifies how such a change in position or orientation (or one of its derived parameters, such as speed or acceleration) should be mapped to the update of one or more variables (see Figure 4 and Video 5).

 

Figure 4. An example of a bike simulation. The rotation of the left active region (pedals) is mapped to the variable “rotation”. Mouse clicks on the right active regions (1, 2 3) update the variable “speed” with a priori specified constants. Both variables are used in the spreadsheet to derive a new variable “rotation2” which is used to control the rotation of the active region containing the back wheel.  The result is that the rotation of this latter active region equals the rotation of the former one, multiplied by the factor specified in “speed” (see also how to open this example in Sketchify).

 

Video 5. Mapping rotations of active regions to variables (see also how to open this example in Sketchify).

 

The mappings can be direct or indirect, using so-called interpolators. Interpolators allow defining more complex mappings. For example, an interpolator allows mapping the rotation of an active region, between 0 and 360 degrees, into a linear variable ranging from 0.0 to 1.0. If we, for example, connect this variable to the transparency of another active region, we can control the latter’s transparency by rotating the first active region.

Detecting Overlap of Active Regions

Active regions can detect when other regions touch or overlap it, triggering update of varaibles, transition to other sketches of starting timers or macros (see Video 6).

Video 6. Detecting Overlap of Active Regions (see also how to open this example in Sketchify).

Graphical Transformations on Active Regions

The geometric properties of active regions can also be connected to variables (Figure 4 and Video 7). In this way, it is possible to control the relative or absolute position or orientation of a region (as well as its speed or acceleration), its width and height, its shear, its clipping rectangle and its transparency.

Figure 4. Specifying the connection between variables and some geometrical properties of an active region.

 

Video 7. Active region transformations (see also how to open this example in Sketchify).

 

The ability to control the geometrical properties of active regions can be used to create interesting animation effects. For example, Figure 4 illustrates how this mechanism is used to connect the geometrical parameters of two active regions (see also Video 2 in earlier section). More specifically, the orientation of the bottom region is exported into a variable “rotation”, which is constantly updated with the angle of the active region as a user rotates the active region. The orientation of the upper active region, on the other hand, is taken from the variable “rotation. As “the user rotates the lower region, the upper region is automatically rotated in the same direction. By changing some parameters of the upper region, such as its speed, we can for instance create a simple driver simulator (when the speed parameter is set, an active region moves in the direction corresponding to its current orientation).

Figure 5. Example of how to use variables to connect the geometrical properties of two active regions.

Embedding Sketches within Active Regions

Complete sketches that may themselves contain several active regions can be embedded in other active regions (Figure 6 and Video 8). This also enables easy reuse of sketches. Most embedded sketches will themselves be active, which  means that they are capturing events, and are updating and reading variables. In order to avoid conflicts between different copies of the same sketch, each embedded sketch may be assigned a unique prefix and postfix for the variables that it depends on.

Figure 6. Embedding sketches. The original sketch (a) is embedded twice in another sketch through two active regions (b).

 

Video 8. Embedded sketches (see also how to open this example in Sketchify).

Examples to Import from URL in Sketchify

You can open the examples from this tutorial in Sketchify by using "Import from URL" function (in the File menu), and copy-and-paste there the URL of an example.

• Driving a Car Example, URL:
• Perspective Example, URL:
• Bike Example, URL:
• Text Example, URL:
• Overlap Example, URL:
• Transformations Example, URL:
• Embedded Sketch Example, URL:

To Probe Further

• Learn more about AMICO Sketchify Time and Dynamics
• Learn more about AMICO Sketchify Advanced Option