Author: ben
Date: 2007-07-07 20:42:52 -0700 (Sat, 07 Jul 2007)
New Revision: 5611
Modified:
sandbox/ben/smush/smush.lzx
Log:
animations for match/no match
Modified: sandbox/ben/smush/smush.lzx
===================================================================
--- sandbox/ben/smush/smush.lzx 2007-07-08 03:08:17 UTC (rev 5610)
+++ sandbox/ben/smush/smush.lzx 2007-07-08 03:42:52 UTC (rev 5611)
@@ -114,22 +114,36 @@
<method name="showImage" args="item">
this.currentImageSelection = item;
this.imgpreview.setSource(item.urlText.text);
- // gResult.showResult(this.checkForMatch());
+ this.checkForMatch();
</method>
<method name="showTitle" args="item">
this.currentTitleSelection = item;
this.infoArea.title.setText(item.title.text);
- // gResult.showResult(this.checkForMatch());
+ this.checkForMatch();
</method>
<method name="checkForMatch"><![CDATA[
- if (("currentTitleSelection" in this) &&
("currentImageSelection" in this)) {
+ // only check for a match if both a headline and an image have
been selected
+ if ((("currentTitleSelection" in this) &&
("currentImageSelection" in this))
+ && (this.currentTitleSelection != null) &&
(this.currentImageSelection != null)) {
var titleGuid = this.currentTitleSelection.guid.text;
var imageGuid = this.currentImageSelection.guid.text;
- return (titleGuid == imageGuid);
+ if (titleGuid == imageGuid) {
+ gResult.showResult(true);
+ this.reset();
+ } else {
+ gResult.showResult(false);
+ }
}
]]></method>
+ <method name="reset">
+ this.currentImageSelection = null;
+ this.currentTitleSelection = null;
+ this.infoArea.title.setText(null);
+ this.imgpreview.setSource(null);
+ </method>
+
<view name="infoArea" width="${parent.width-105}"
height="${parent.height}" bgcolor="0x332277">
<text y="2" fontsize="10" name="title"
width="$once{parent.width}" multiline="true" height="$once{parent.height-4}"
fgcolor="0xEEEEEE"/>
</view>
@@ -142,27 +156,57 @@
</view>
- <view id="gResult" bgcolor="0x223399" x="10" y="150" width="300"
height="100"
- visible="false">
+ <view id="gResult" bgcolor="0x000000" x="10" y="150" width="300"
height="0">
+ <attribute name="matched" value="false" type="boolean" />
<method name="showResult" args="match">
+ this.matched = match;
if (match)
this.showMatch();
else
this.showMismatch();
</method>
<method name="showMatch">
- this.txt.setText("Correct, you matched yes good.");
- this.setVisible(true);
+ this.txt.setText("match!");
+ this.showResultAnim.doStart();
</method>
<method name="showMismatch">
- this.txt.setText("Sorry, wrong answer, not a match.");
- this.setVisible(true);
+ this.txt.setText("no match");
+ this.showResultAnim.doStart();
</method>
- <text name="txt" x="5" width="${parent.width-10}" fgcolor="0xFFFFFF"
fontsize="10" text="you are right or wrong" />
+ <text name="txt" x="5" width="${parent.width-10}" fgcolor="0xFFFFFF"
fontsize="48" />
+ <!-- click to dismiss -->
<method event="onclick">
- this.setVisible(false);
+ this.hideResultAnim.doStart();
</method>
+
+ <animatorgroup name="showResultAnim" process="simultaneous"
start="false">
+ <animator
+ attribute="height" to="100" start="false" duration="500" />
+ <animator
+ attribute="y" to="100" start="false" duration="500" />
+ <method event="onstart">
+ parent.txt.setVisible(true);
+ </method>
+
+ <method event="onstop">
+ parent.txt.setVisible(true);
+ if (!gResult.matched) {
+ gResult.hideResultAnim.doStart();
+ }
+ </method>
+ </animatorgroup>
+
+ <animatorgroup name="hideResultAnim" process="simultaneous"
start="false">
+ <animator
+ attribute="height" to="0" start="false" duration="500" />
+ <animator
+ attribute="y" to="150" start="false" duration="500" />
+ <method event="onstart">
+ parent.txt.setVisible(false);
+ </method>
+ </animatorgroup>
+
</view>
<view id="floatview" bgcolor="0xb10db3" visible="false" >
@@ -192,7 +236,23 @@
</method>
</view>
+ <view id="gFilm" opacity="0.5" visible="true" width="$once{parent.width}"
height="$once{parent.height}"
+ bgcolor="0xAAAAAA">
+ <method event="onclick">
+ gInstructions.animate("x", 356, 500);
+ gFilm.animate("x", 356, 700);
+ </method>
+ </view>
+ <view id="gInstructions" y="150" bgcolor="0x3377BB">
+ <view id="gLabelInstructions">
+ <text fgcolor="0xFFFFFF" text="Click a label." />
+ </view>
+ <view id="gImageInstructions" x="200">
+ <text fgcolor="0xFFFFFF" text="Click an image." />
+ </view>
+ </view>
+
</canvas>
<!-- Copyright 2007 Laszlo Systems -->
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
