<?xml-stylesheet type="text/xsl" href="anim01.xsl"?>

<svg width="16cm" height="14cm" viewBox="0 0 255 201">
<desc>Copyright 2001 - 2004 David Dodds Example anim01a - demonstrate deBono 
diagram SVG animation with Lakoff spatial metaphor</desc>
  <rect x="1" y="1" width="253" height="199"
        fill="black" stroke="blue" stroke-width="7" />

 

  <text id="uplabel" x="230" y="20"
       style="font-family:Verdana; font-size:12.333; fill:blue">
       UP
  </text>

  <text id="downlabel" x="200" y="180"
       style="font-family:Verdana; font-size:12.333; fill:blue">
       DOWN
    </text>

  <text id="goallabel" x="110" y="42"
       style="font-family:Verdana; font-size:12.333; fill:blue">
       GOAL
  </text>

  <g id="leftfunnelside">
    <path d="M 99 180 L 99 57"
     style="fill:none; stroke:green; stroke-width:10"/>
   </g>

  <g id="rightfunnelside">
    <path d="M 153 57 L 153 180 "
     style="fill:none; stroke:green; stroke-width:10"/>
   </g>

  <text id="Hide" x="15" y="190"
       style="font-family:Verdana; fill:orange; font-size:4; " >
HIDE Scrolling Text
</text>

<text id="Explain" x="15" y="180"
style="font-family:Verdana; fill:orange; font-size:4;"
>
Explanation of animation
</text>


  <rect id="arrowstreamer" x="110"  width="3" height="20" >
     <animate attributeName="y" attributeType="XML"
               begin="0s" dur="5s" fill="freeze" from="180" to="55" />
      <animate attributeName="height" attributeType="XML"
               begin="0s" dur="5s" fill="freeze" from="20" to="143" />
      <animateColor attributeName="fill" attributeType="CSS"
           from="rgb(0,0,255)" to="rgb(110,0,0)"
           begin="0s" dur="5s" fill="freeze" />
   </rect>

  <rect id="particlestreamer" x="120"  width="3" height="3" >
        <animate attributeName="y" attributeType="XML"
               begin="2s" dur="5s" fill="freeze" from="170" to="55" />
        <animateColor attributeName="fill" attributeType="CSS"
             from="rgb(0,0,255)" to="rgb(110,0,0)"
             begin="2s" dur="5s" fill="freeze" />
   </rect>

    <rect id="misdirectedbehaviourstreamer" x="147" y="190" width="5" 
height="5"
>
           <animate attributeName="y" attributeType="XML"
                  begin="3s" dur="5s" fill="freeze" from="190" to="130" />
           <animate attributeName="x" attributeType="XML"
                  begin="3s" dur="5s" fill="freeze" from="147" to="230" />
           <animateColor attributeName="fill" attributeType="CSS"
                from="rgb(0,0,255)" to="rgb(128,0,0)"
                begin="3s" dur="5s" fill="freeze" />
   </rect>

   <rect id="obstructor" class="hitBox" x="40" y="49" width="50" height="5" 
>
        <animate attributeName="x" attributeType="XML"
                 begin="3s" dur="5s" fill="freeze" from="40" to="100" />
        <animateColor attributeName="fill" attributeType="CSS"
             from="rgb(10,0,0)" to="rgb(255,0,0)"
             begin="3s" dur="3s" fill="freeze" />
   </rect>

   <text id="obstructorlabel" x="120" y="53"
          style="font-family:Verdana; font-size:4; fill:black">
          <animateColor attributeName="fill" attributeType="CSS"
                     from="rgb(0,0,0)" to="rgb(255,255,255)"
             begin="7s" dur="2s" fill="freeze" />
          obstructor
    </text>

   <text id="misdirectedbehaviourlabel" x="200" y="125"
             style="font-family:Verdana; font-size:4; fill:black">
             <animateColor attributeName="fill" attributeType="CSS"
                        from="rgb(0,0,0)" to="rgb(255,255,255)"
                begin="9s" dur="3s" fill="freeze" />
             misdirectedbehaviour
       </text>

      <text id="vertscroll" x="300" y="200"
             style="font-family:Verdana; font-size:5; fill:white" > Press 
function key F5 to rerun the animation.This SVG animation of de Bono spatial 
metaphor,
is accompanyed by spoken sound-narrative. Dont forget to turn up your sound 
volume control icon.   Press function key F5 to rerun the animation.
             <animate begin="Hide.mouseover" attributeName="visibility" 
from="visible"
                        to="hidden" dur="0.1s" fill="freeze" />
                        <animate begin="Hide.mouseout" attributeName="visibility" 
from="hidden"
             to="visible" dur="0.1s" fill="freeze" />
             <animate begin="Explain.mouseover" attributeName="visibility" 
from="visible"
                to="hidden" dur="0.1s" fill="freeze" />
             <animate begin="Explain.mouseout" attributeName="visibility" 
from="hidden"
                  to="visible" dur="0.1s" fill="freeze" />
             <animate attributeName="x" from="200" to="-579"
                begin="15s" dur="25s" repeatCount="indefinite"/>
    </text>

   <text x="700" y="200" style="fill:white; font-family:'Times New
   Roman', serif; font-size:7; font-weight:normal;" visibility="hidden">
   This SVG animation is of a de Bono diagram which depicts obstruction of
   a group achievement. If you want explanation of the various parts of this 
diagram
   just hover your mouse over that part and read the explanatory text that 
appears.
   <animate attributeName="x" from="600" to="-1100" begin="0s" dur="30s"
   repeatCount="indefinite"/>
   <animate begin="Explain.mouseover" attributeName="visibility" 
from="hidden"
   to="visible" dur="0.1s" fill="freeze" />
   <animate begin="Explain.mouseout" attributeName="visibility" 
from="visible"
   to="hidden" dur="0.1s" fill="freeze" />
   </text>

  <text x="700" y="45" style="fill:white; font-family:'Times New
   Roman', serif; font-size:7; font-weight:normal;" visibility="hidden">
   The GOAL label is placed here in this diagram to signify that the spatial 
area
   generally around the word "GOAL" is considered  to be the goal space or 
success
   achievement space or area. The goal is thus more spatially dispersed than 
is a
   single GOAL point or a simple line-segment GOAL. It is also possible to 
use a
   fuzzy calculation to assign a spatial distribution according to distance 
from the
   center of the the GOAL label, as signifying the weight of GOAL 
achievement
   or success.
   <animate attributeName="x" from="600" to="-1290" begin="0s" dur="39s"
   repeatCount="indefinite"/> <!-- 600 -1290 0s 37s -->
   <animate begin="goallabel.mouseover" attributeName="visibility" 
from="hidden"
   to="visible" dur="0.1s" fill="freeze" />
   <animate begin="goallabel.mouseout" attributeName="visibility" 
from="visible"
   to="hidden" dur="0.1s" fill="freeze" />
   </text>

   <svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 
140 200 150 -->
   <animate begin="rightfunnelside.mouseover" dur="0.1s" 
attributeName="visibility"
   from="hidden" to="visible" fill="freeze"/>
   <animate begin="rightfunnelside.mouseout" dur="0.1s" 
attributeName="visibility"
   from="visible" to="hidden" fill="freeze"/>
   <animate begin="leftfunnelside.mouseover" dur="0.1s" 
attributeName="visibility"
      from="hidden" to="visible" fill="freeze"/>
      <animate begin="leftfunnelside.mouseout" dur="0.1s" 
attributeName="visibility"
   from="visible" to="hidden" fill="freeze"/>
   <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
   <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
   <text>
   <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
   sans-serif" >
   De Bono directed channel
   </tspan>
   <tspan x="2" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
   sans-serif">
   de Bono uses a funnel to signify a
   </tspan>
   <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
   sans-serif">
   channel used to direct activity
   </tspan>
   <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
   sans-serif">
   towards "reaching" some spatial
   </tspan>
   <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
   sans-serif">
   area or location, i.e. the
   </tspan>
   <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
   sans-serif">
   "goal" area; if the activity gets into
   </tspan>
   <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      the funnel entrance in the first place.
   </tspan>
   </text>
</svg>  <!-- Ends the information about right@leftfunnelside. -->

<svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 140 
200 150 -->
    <animate begin="uplabel.mouseover" dur="0.1s" attributeName="visibility"
    from="hidden" to="visible" fill="freeze"/>
    <animate begin="uplabel.mouseout" dur="0.1s" attributeName="visibility"
    from="visible" to="hidden" fill="freeze"/>
    <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
    <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
    <text>
    <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
    sans-serif" >
    UP
    </tspan>
    <tspan x="10" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    UP is a spatial metaphor
    </tspan>
    <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    used by Lakoff to
    </tspan>
    <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    represent a virtual place,
    </tspan>
    <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    using the simple metaphor
    </tspan>
    <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    of Cartesian coordinates.
    </tspan>
    </text>
</svg>  <!-- Ends the information about UPLABEL. -->

  <svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 140 
200 150 -->
     <animate begin="downlabel.mouseover" dur="0.1s" 
attributeName="visibility"
     from="hidden" to="visible" fill="freeze"/>
     <animate begin="downlabel.mouseout" dur="0.1s" 
attributeName="visibility"
     from="visible" to="hidden" fill="freeze"/>
     <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
     <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
     <text>
     <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
     sans-serif" >
     DOWN
     </tspan>
     <tspan x="10" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     DOWN is a spatial metaphor
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     used by Lakoff to
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     represent a virtual place,
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     signifying the opposite
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     Cartesian coordinates from UP.
     </tspan>
     </text>
</svg>  <!-- Ends the information about DOWNLABEL. -->

<svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 140 
200 150 -->
     <animate begin="arrowstreamer.mouseover" dur="0.1s" 
attributeName="visibility"
     from="hidden" to="visible" fill="freeze"/>
     <animate begin="arrowstreamer.mouseout" dur="0.1s" 
attributeName="visibility"
     from="visible" to="hidden" fill="freeze"/>
     <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
     <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
     <text>
     <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
     sans-serif" >
     arrowstreamer
     </tspan>
     <tspan x="10" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     It is a visual signifier of activity,
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     or effort, used by de Bono
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     to spatially depict directed action.
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     Visually reified "naive physics"
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     cultural knowledge in viewer's
     </tspan>
     <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     mind's eye is appealed to.
     </tspan>
     </text>
</svg>  <!-- Ends the information about ARROWSTREAMER. -->

  <svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 140 
200 150 -->
      <animate begin="particlestreamer.mouseover" dur="0.1s" 
attributeName="visibility"
      from="hidden" to="visible" fill="freeze"/>
      <animate begin="particlestreamer.mouseout" dur="0.1s" 
attributeName="visibility"
      from="visible" to="hidden" fill="freeze"/>
      <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
      <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
      <text>
      <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
      sans-serif" >
      particlestreamer
      </tspan>
      <tspan x="10" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      It is a visual signifier of activity,
      </tspan>
      <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      or effort, used by de Bono
      </tspan>
      <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      to spatially depict directed action.
      </tspan>
      <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      This is a "visual particle object"
      </tspan>
      <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      to suggest the "naive physics"
      </tspan>
      <tspan x="10" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
      sans-serif">
      the model appeals to.
      </tspan>
      </text>
</svg>  <!-- Ends the information about PARTICLESTREAMER. -->

<svg x="10" y="10" width="70" height="50" visibility="hidden"> <!-- 80 140 
200 150 -->
    <animate begin="misdirectedbehaviourstreamer.mouseover" dur="0.1s" 
attributeName="visibility"
    from="hidden" to="visible" fill="freeze"/>
    <animate begin="misdirectedbehaviourstreamer.mouseout" dur="0.1s" 
attributeName="visibility"
    from="visible" to="hidden" fill="freeze"/>
    <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
    <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
    <text>
    <tspan x="1" y="7" style="fill:blue; font-size:5; font-family: Arial,
    sans-serif" >
    misdirectedbehaviourstreamer
    </tspan>
    <tspan x="2" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    de Bono uses a funnel to signify a
    </tspan>
    <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    channel used to direct activity
    </tspan>
    <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    towards "reaching" some spatial
    </tspan>
    <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    area or location, i.e. the "goal"
    </tspan>
    <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
    sans-serif">
    area; this misdirected behaviour
    </tspan>
    <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
       sans-serif">
       streamer misses the funnel entrance.
    </tspan>
    </text>
</svg>  <!-- Ends the information about misdirectedbehaviourstreamer. -->

<svg x="10" y="10" width="70" height="50" visibility="hidden"> 
     <animate begin="obstructor.mouseover" dur="0.1s" 
attributeName="visibility"
     from="hidden" to="visible" fill="freeze"/>
     <animate begin="obstructor.mouseout" dur="0.1s" 
attributeName="visibility"
     from="visible" to="hidden" fill="freeze"/>
     <animate begin="obstructorlabel.mouseover" dur="0.1s" 
attributeName="visibility"
     from="hidden" to="visible" fill="freeze"/>
     <animate begin="obstructorlabel.mouseout" dur="0.1s" 
attributeName="visibility"
     from="visible" to="hidden" fill="freeze"/>
     <rect x="0" y="0" width="100%" height="25" style="fill:#EEEEEE; 
stroke:blue;stroke-width:2"/>
     <rect x="0" y="10" width="100%" height="40" style="fill:black; 
stroke:blue; stroke-width:2"/> <!-- fill:#CCCCCC -->
     <text>
     <tspan x="10" y="7" style="fill:blue; font-size:5; font-family: Arial,
     sans-serif" >
     obstructor
     </tspan>
     <tspan x="2" dy="2em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     de Bono uses solid objects to signify
     </tspan>
     <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     where any direct activity streamer or
     </tspan>
     <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     effort "motion" cannot pass through.
     </tspan>
     <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     Naive physics model of effort streams
     </tspan>
     <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
     sans-serif">
     depicts how behaviour or actions
     </tspan>
     <tspan x="2" dy="1.5em" style="fill:orange; font-size:4; font-family: 
Arial,
        sans-serif">
     fare in given situations and contexts.
     </tspan>
     </text>
     
     
     </svg>  <!-- Ends the information about obstructor. -->






  </svg>

