一文字ずつ表示

ボタンを押すと一文字ずつカタカタと表示されます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee" fontsize="16"> 
  <class name="scrollText" extends="text">
    <attribute name="fulltext" type="string"/><!--  一文字ずつ表示する文字列 -->
    <attribute name="duration" type="number"/><!--  一文字表示の所要ミリ秒   -->
    <attribute name="i" value="0" type="number"/>
    <handler name="oni" args="d">
      this.setAttribute('text',this.fulltext.substring(0,d));
    </handler>
    <animator name="a" attribute="i" to="1" repeat="${parent.fulltext.length+1}"
        duration="${parent.duration}" start="false" motion="linear" relative="true"/>
    <method name="scroll">
        this.setAttribute('i',0);
        this.a.doStart();
    </method>
  </class>
  <simplelayout/>
  <edittext name="ed" width="400" text="サンプル満載！OpenLaszlo入門" />
  <button onclick="parent.t.scroll()" text="一文字ずつ表示開始" />
  <scrollText name="t" fontstyle="bold" fulltext="${parent.ed.value}" duration="100"/>
</canvas>