FLATLAND TUTORIAL Flatland home
texture styles orientation guide tips,tricks more blocks actions sprites popups lighting sound linking orientation textures navigation mulitilevels body tag head tag starting welcome
14 | ACTIONS

<ACTION> tags are used to make your spots more dynamic and interactive. Here you will use two types of ACTIONs: REPLACE and EXIT. The <REPLACE> tag allows you to switch out one block for another when the ACTION is triggered. This very simple functionality opens an incredibly wide range of options to you. The REPLACE tag can be used to make doors that open and close, locks that require keys to open, blocks that move around in your spot, sounds that are triggered on user actions, etc. The possibilities are endless. And of course, an EXIT tag within an ACTION tag will trigger a link to occur.

Lets take a look at some sample code, then we'll go into the details:

<CREATE SYMBOL="1" BLOCK="full">
     <PART NAME="*" TEXTURE="images/sad.gif"/>
     <ACTION TRIGGER="roll on" >
          <REPLACE SOURCE="2" />
     </ACTION>
</CREATE>

<CREATE SYMBOL="2" BLOCK="full">
     <PART NAME="*" TEXTURE="images/happy.gif"/>
</CREATE>

Here we have created a full block, which has the image "sad.gif" on all its parts, and assigned it the symbol "1". Whenever a user rolls her mouse over this block, the block will be replaced with the "2" block, which is also a full block but which has the image "happy.gif" on all its parts. So with a simple mouse rollover, the block goes from sad to happy. [Life should be so easy, heh?]

Note that there is no other action on the "2" block, so once this action has been triggered once, there is no more functionality. When the player rolls off the block, it will still appear to be happy. But we can also add an <ACTION> tag to block "2" which will switch back to block "1":

<CREATE SYMBOL="2" BLOCK="full">
     <PART NAME="*" TEXTURE="images/happy.gif"/>
     <ACTION TRIGGER="roll off" />
          <REPLACE SOURCE="1" />
     </ACTION>
</CREATE>

 

Now there is another <REPLACE> tag on block "2", with TRIGGER="roll off". So when the user rolls over block one, it will replace itself with block "2". Then when they roll off of block "2", it will replace itself with block "1" again. So in effect, when a user rolls the mouse onto the block, they will see happy.gif, and when they roll off, they will see sad.gif again.

Now lets look at the complete syntax for ACTION and REPLACE:

<ACTION LOCATION="(column,row,level)" TRIGGER="roll on|roll off|click on|step in|step out|proximity|timer|location" RADIUS="number-of-blocks" DELAY="min..max"/>
   <REPLACE SOURCE="symbol|(column,row,level)" TARGET="(column,row,level)"/>
</ACTION>

RADIUS is measured in blocks and is only used when the TRIGGER is "step in", "step out", or "proximity". When TRIGGER="proximity", the ACTION will remain active as long as the user is within the specified RADIUS. Once they leave the RADIUS, then the ACTION will reverse itself.

DELAY is measured in seconds and is only used when the TRIGGER is "timer". If only one value is included for DELAY, then the delay will always be the same number of seconds. If a minimum and maximum DELAY are specified, then the delay will be a random length in between those 2 values.

If the ACTION is not attached to a block through a CREATE tag, then LOCATION specifies where the ACTION is located in the map.

TARGET (in the ACTION tag) is only used when TRIGGER="location". If TRIGGER="location' then the ACTION will be triggered when a block is placed on the specified TARGET.

TARGET (in the REPLACE tag) specifies the location in the map where the REPLACE will take place. If no TARGET is specified, then the block that holds the ACTION tag will be replaced.

SOURCE specifies the block that will be used to replace whatever block sits at the TARGET.

ACTION and EXIT
ACTION tags can also hold EXIT tags. For a cheery example, lets say you wanted to create an area of your spot that was a fiery pit of death. You might put an ACTION tag in the middle of this area with TRIGGER="step in" that contains an EXIT that leads to another spot or html page that says something like "HAHA! Yer dead." The ACTION tag would look like this:

<ACTION TRIGGER="step in" RADIUS="3" LOCATION="(5,5,1)">
     <EXIT HREF="hell.3dml#yerdead"/>
</ACTION>

So any time a user wanders within 3 blocks of the location (5,5,1), they will be sent to the ENTRANCE named "yerdead" in the spot "hell.3dml"

Each ACTION can have only one TRIGGER, but a single ACTION tag can have one EXIT tag, and/or as many REPLACE tags in it as you want. And a single CREATE tag can have multiple ACTION tags as well. So in the above example, we might add a second ACTION tag to block "2" with TRIGGER="click on", so that if a user clicks on the block, some other action will take place, but if they roll off without clicking, then the block will just revert back to block "1".

ACTIONs in IMAGEMAPs
ACTIONs can also work inside of IMAGEMAPs. The code is the same as for a regular IMAGEMAP, except that the AREA tag becomes an ACTION tag, like so:

<IMAGEMAP NAME="pop1train">
     <Action SHAPE="rect" COORDS="0, 0, 100, 100" trigger="click on">
          <replace source="+2" target="(10,6,2)"/>
     </action>
</IMAGEMAP>

Relative REPLACE
The SOURCE and TARGET for a REPLACE tag can also be specified in terms relative to the current block. For example, you could tell Rover to replace a block with the block that is 2 blocks east and 3 blocks south:

<CREATE SYMBOL="#" BLOCK="full">
   <ACTION>
      <REPLACE SOURCE="(-2,+3,0) TARGET"(0,0,+1)"/>
   </ACTION>
</CREATE>

Lets say that this block is sitting at the location (4,4,4) in your map. This ACTION tells Rover to take the block that is at (2,7,4) [That's -2 columns, +3 rows, +0 levels] and place a copy of it at (4,4,5) [+0 columns, +0 rows, and +1 level].

Let's have some ACTION!
Still working in your firstspot.3dml file, add the following <CREATE> tags:

<CREATE SYMBOL="#" BLOCK="full">
  <ACTION TRIGGER="click on" >
    <REPLACE SOURCE="A" />
  </ACTION>
</CREATE>

<CREATE SYMBOL="A" BLOCK="full">
  <PART NAME="*" TEXTURE="images/pinkmarble.gif"/>
</CREATE>

The "#" blocks that make up the walls of this spot will now replace themselves with the "A" block when they are clicked on. Save the file and open it in your browser. Click on the walls to see them change.

Show me the code so far.


Now lets try a different kind of ACTION. Change the <CREATE> tag for the "2" block to look like this:

<CREATE SYMBOL="2" BLOCK="spriterevolve">
  <PART NAME="*" TEXTURE="images/animate.gif"/>
  <PARAM SPEED="1" />
  <ACTION TRIGGER="timer" DELAY=".85">
    <REPLACE SOURCE="5" />
  </ACTION>
</CREATE>

And add a new <CREATE> tag that looks like this:

<CREATE SYMBOL="5" BLOCK="sprite">
  <PART NAME="*" TEXTURE="images/animate.gif"/>
  <ACTION TRIGGER="timer" DELAY="2">
    <REPLACE SOURCE="2" />
  </ACTION>
</CREATE>

Save the file and open it in your browser. You'll see that the SPRITEREVOLVE block will now revolve for a little less than a second, and then replace itself with a regular SPRITE block that doesn't move for 2 seconds. Then this SPRITE block will replace itself with the original SPRITEREVOLVE block again.

Show me the code so far.


And now lets use the TARGET parameter, and do several REPLACEs in one <ACTION> tag. First, we'll need to add another level to our map. Add this code, right after Level 1:

<LEVEL NUMBER="2"> 
......... 
......... 
......... 
......... 
......... 
......... 
......... 
......... 
......... 
</LEVEL> 

And don't forget to change the dimensions in your <MAP> tag:

<MAP STYLE="single" DIMENSIONS="(9,9,2)"/>

Then add the following <CREATE tags to your file:

<CREATE SYMBOL="B" BLOCK="pyramid">
  <PART NAME="*" TEXTURE="images/pinkmarble.gif"/>
  <ACTION TRIGGER="click on" >
    <REPLACE SOURCE="." />
    <REPLACE SOURCE="P" TARGET="(1,1,2)" />
    <REPLACE SOURCE="P" TARGET="(1,9,2)" />
    <REPLACE SOURCE="P" TARGET="(9,1,2)" />
    <REPLACE SOURCE="P" TARGET="(9,9,2)" />
    <REPLACE SOURCE="P" TARGET="(3,1,2)" />
    <REPLACE SOURCE="P" TARGET="(7,1,2)" />
  </ACTION>
</CREATE>

<CREATE SYMBOL="P" BLOCK="pyramid">
  <PART NAME="*" TEXTURE="images/pinkmarble.gif"/>
</CREATE>

And now add the "B" block to your map. Change Level 1 to look like this:

<LEVEL NUMBER="1">  
###.@.###  
#.......#  
#.1.....#  
#.....2.#  
#...B...#  
#.3.....#  
#....4..#  
#.......#  
#########  
</LEVEL>  

  The walls are alive!

Save the file and open it in your browser. You'll see a pink pyramid in the center of the spot. When you click on this pyramid, it will disappear and 6 other pyramids will appear along the top of the wall. The original block disappears throught the first <REPLACE> tag, where it replaces itself with a ".", or empty block.

code spot next

 



Copyright 1999, 2000 Flatland Online, Inc.