Explore Area
This is probably
the most basic form of interaction in that you only need to put a type of “hotspot” on
a image to make it functional. Basically, this activity allows the user to
click or rollover different areas of an image
in search of information.
In the example below, clicking the
different "+" signs will trigger a filmloop (director's pseudo movieclip).
Please note: this example is a reconstruction of a piece of work that I ran
across that was originally done in Flash. My re-creation of this
activity in Director format was intended
for educational purposes only. I take no credit for the author's artwork and
original
concept. To simplify the rollover action I have created a "Hide-Show
On Rollover" behavior so that this kind of activity can be done
by merely dragging this behavior to the graphics.
__________________________________________________________
This activity works by allowing the users to explore multiple areas by dragging the brown square within them. The tracking aspect of this is added by the creation of three behaviors that record the users visits:
The example
below will tell you where you came from, the area you are in
now & if you have been to area “2” or not. These actions
trigger text messages but you could change this to do any action. As you
can see, I chose area “2” as
an area to track. This is done by storing its visits in director’s
memory via a container called a list. Other developers may know this term
as an “array”.
This is a very
good activity to use if you want to check and record the position of the
user and allow or
limit their activity based on area visits (exploring game, map game etc). I have
also left the hotspot borders (in red) so you can see them. In a real project
you
would hide these by eliminating the border color. Try resetting the activity
and moving your square from 1 to 3 to see the activity recognize your lack
of visiting area 2 and try it with a visit to area 2 before going to area 3.
__________________________________________________________
This is probably the most advanced activity I have worked with (although you would not know it by first appearance). The activity constrains a sprite to a certain area of an image by way of looking at the constraining sprite’s alpha mask.
The behavior used is called "ConstrainToMask" and does as the name implies. What is happening is that director analyzes the alpha channel of a sprite you designate as the "constraining sprite" and limits the constrained sprite (little red dot) based on this mask. This is way more useful than director’s built in "Constrain Sprite" behavior which limits you to only a rectangle shape.
Some of the credit to this behavior must go to James Newton who helped in not only providing the a majority of the base code, but in explaining how some of the more complex calculations of the code work as well. I have added comments to almost every line of this script and have added a parameters dialogue box to allow “newbies” to lingo the ability to use and modify this amazing behavior.
In the example below the ship (red dot) is constrained to the sea (blue).
While dragging, notice that the ship is constrained only to the ocean. As a bonus, the shift key will also allow the ship to jump gaps. Although this would never happen in real life with a sea vessel, jumping may be useful in your activity.
If you would like
to see an example of the interactive map from concept to concept follow this
link
(under construction - release data 7/1/07)
__________________________________________________________
This is a good interaction to simulate scratching or wiping to reveal an concept or idea. This activity uses my "DragtoReveal" behavior which has been modified from Luke Wigley's "alpha scratcher" behavior. The activity below is a mock simulation to help show a before and after scenario of the Armor All's Glass Wipes product.
What is happening here is that a grayscale image is used as an alpha brush that will reveal the underlining graphic by way of interactively painting into the alpha channel of the top graphic. Basically the result is the ability to control an interactive image mask.
__________________________________________________________
This is a good interaction to simulate a flashlight or X-ray effect in that you can reveal a sub-layer under enough by creating an animated mask. The activity uses my "Mask follows cursor behavior" to reveal only the area of the image below which is under the mask. Your mask can be round, square or pretty much any shape you want (gradient mask work better in that they look softer). The behavior also gives you the option to attach a tracking cursor sprite (such as an object that might be doing the revealing).
The activity below is a reconstruction of a piece that I saw on the Poin1interactive site. I have reconstructed the activity as an example of to show off the my "Mask follows cursor" behavior in a wonderfully created outdoor camping environment. The original artwork is from the Coleman site, I have chose to use the artwork and re-create the action to show the interactive masking behavior in action as well as my animated cursor tracking behavior (the lantern). Recreation of this fine example is for educational purposes only. I take no credit for the original artwork being used.