Author: ben
Date: 2007-07-08 13:11:29 -0700 (Sun, 08 Jul 2007)
New Revision: 5623
Added:
sandbox/ben/smush/cover-news.png
Modified:
sandbox/ben/smush/main.lzx
Log:
integrated start animation from bret, visual tweaks
Added: sandbox/ben/smush/cover-news.png
Property changes on: sandbox/ben/smush/cover-news.png
___________________________________________________________________
Name: svn:executable
+ *
Name: svn:mime-type
+ application/octet-stream
Modified: sandbox/ben/smush/main.lzx
===================================================================
--- sandbox/ben/smush/main.lzx 2007-07-08 19:45:08 UTC (rev 5622)
+++ sandbox/ben/smush/main.lzx 2007-07-08 20:11:29 UTC (rev 5623)
@@ -8,15 +8,16 @@
<include href="resources.lzx" />
<!-- views -->
- <view width="${parent.width}" height="${parent.height}" bgcolor="white"
oninit="txtlayout.intro.doStart()" >
+ <view width="${parent.width}" height="${parent.height}" bgcolor="white" >
<!-- layout -->
<simplelayout axis="y" />
<!-- title bar -->
- <view name="tbar" width="${parent.width}" >
- <view resource="headerbkgnd" stretches="width"
width="${parent.width}" />
- <view resource="logo" x="7" y="7" />
+ <view id="tbar" width="${parent.width}" opacity="0" >
+ <view resource="headerbkgnd" stretches="width"
width="${parent.width}" />
+ <view resource="logo" x="7" y="7" />
+ <animator name="headerfade_anm" attribute="opacity" to="1"
duration="500" start="false" />
</view>
<!-- headline and photo content -->
@@ -45,7 +46,7 @@
<!-- selection details -->
<view id="gDetails" bgcolor="white"
- y="${parent.tbar.height + 3*(txtlayout.vsize + 2) + 2}"
+ y="${tbar.height + 3*(txtlayout.vsize + 2) + 2}"
width="${parent.width}"
height="90"
options="ignorelayout" >
@@ -56,7 +57,7 @@
</method>
<method name="showTitle" args="item">
this.currentTitleSelection = item;
- this.infoArea.title.setText(item.title.text);
+ gInfo.title.setText(item.title.text);
this.checkForMatch();
</method>
@@ -77,13 +78,13 @@
<method name="reset">
this.currentImageSelection = null;
this.currentTitleSelection = null;
- this.infoArea.title.setText(null);
+ gInfo.title.setText(null);
this.imgpreview.setSource(null);
</method>
<!-- selected headline and text -->
<view id="gInfo" name="infoArea" width="${parent.width-4}"
height="${parent.height}" bgcolor="0xFFFFFF"> <!-- 0x778daa-->
- <text x="4" y="3" fontsize="14" name="title" width="210"
multiline="true" height="$once{parent.height-4}"
+ <text x="6" y="3" fontsize="14" name="title" width="195"
multiline="true" height="$once{parent.height-4}"
fgcolor="0x000000" fontstyle="bold" />
</view>
@@ -120,7 +121,7 @@
</method>
</view>
- <view id="gResult" x="2" y="157" width="316" height="100" >
+ <view id="gResult" x="2" y="157" width="316" height="90" >
<attribute name="matched" value="false" type="boolean" />
<method name="showResult" args="match">
this.matched = match;
@@ -130,13 +131,26 @@
this.showMismatch();
</method>
<method name="showMatch">
- this.nomatch.setVisible(false);
- this.capsule.txt.setText("MATCH");
+ // hide nomathc icon and text
+ this.nomatch.setVisible(false);
+ this.capsule.txt_nomatch.setVisible( false );
+
+ // show match text
+ this.capsule.match.setVisible( true );
+
+ //animate results
this.showResultAnim.doStart();
</method>
+
<method name="showMismatch">
- this.nomatch.setVisible(true);
- this.capsule.txt.setText("NO MATCH");
+ // show nomatch icon and text
+ this.nomatch.setVisible(true);
+ this.capsule.txt_nomatch.setVisible( true );
+
+ // hide match text
+ this.capsule.match.setVisible( false );
+
+ //animate results
this.showResultAnim.doStart();
</method>
@@ -152,24 +166,31 @@
if (this.matched) {
this.nomatch.setVisible(false);
gMoreInfo.txt.setText(gDetails.currentTitleSelection.content.text);
-
gMoreInfo.img.setSource(gDetails.currentImageSelection.urlText.text);
+
gMoreInfo.img.setSource(gDetails.currentImageSelection.urlText.text);
gDetails.reset();
gMoreInfo.show();
}
</method>
- <view name="capsule" opacity="0">
- <view name="capsule" bgcolor="0xFFFFFF" x="50" y="25" width="163"
height="38" />
- <view name="capl" x="${parent.capsule.x - 14}"
height="${parent.capsule.height}" y="25" resource="circle" />
- <view name="capr" x="${parent.capsule.x + parent.capsule.width -
19}" height="${parent.capsule.height}" y="25" resource="circle" />
- <text name="txt" x="50" y="28" width="${parent.width-10}"
fontsize="20" />
+ <view name="capsule" opacity="0" x="76" y="27" width="156" >
+ <view name="capl" x="0" resource="circle" />
+ <view name="capsule" bgcolor="0xFFFFFF" x="15"
width="${parent.width - 30}" height="37" />
+ <view name="capr" x="${parent.width - width}" resource="circle"
/>
+
+ <text name="txt_nomatch" text="NO MATCH" x="17" y="6"
width="${parent.width-10}" fontsize="16" fontstyle="bold" resize="true" />
+
+ <view name="match" x="45" y="6" width="${parent.width-10}" >
+ <text text="MATCH" fontsize="16" fontstyle="bold"
resize="true" y="-5"/>
+ <text text="click to read article" fontsize="9" y="16"
x="-10" />
+ </view>
+
</view>
- <animatorgroup name="showResultAnim" process="simultaneous"
start="false">
+ <animatorgroup name="showResultAnim" start="false"> <!--
process="sim3ltaneous"-->
<animator
- attribute="opacity" to="0.5" start="false" duration="200"
target="gResult.film"/>
+ attribute="opacity" to="0.7" start="false" duration="300"
target="gResult.film"/>
<animator
- attribute="opacity" to="1" start="false" duration="200"
target="gResult.capsule"/>
+ attribute="opacity" to="1" start="false" duration="0"
target="gResult.capsule"/>
<method event="onstop">
if (!gResult.matched) {
@@ -182,9 +203,9 @@
<animator duration="1000" /> <!-- pause for a second -->
<animatorgroup>
<animator
- attribute="opacity" to="0" start="false" duration="1000"
target="gResult.film"/>
+ attribute="opacity" to="0" start="false" duration="0"
target="gResult.capsule"/>
<animator
- attribute="opacity" to="0" start="false" duration="1000"
target="gResult.capsule"/>
+ attribute="opacity" to="0" start="false" duration="500"
target="gResult.film"/>
</animatorgroup>
</animatorgroup>
@@ -192,7 +213,7 @@
<view id="gMismatch" name="nomatch" x="203" y="27" width="38"
height="38"
visible="false" >
<view name="nmc" x="-7" resource="circle" height="38" width="38"/>
- <view name="nmi" resource="nomatchicon" y="6" height="38"
width="38" />
+ <view name="nmi" resource="nomatchicon" x="-1" y="6" height="38"
width="38" />
</view>
</view>
@@ -210,9 +231,32 @@
<method event="onclick">
animOut.doStart();
</method>
- </view>
+ </view>
+
+ <view name="cover" width="320" height="356"
onclick="coverslide_anm.doStart()" >
+ <view name="top" bgcolor="0x000000" height="178" width="320" >
+ <!-- text x="30" text="NEWS" fontsize="40" fontstyle="bold"
fgcolor="white" y="$once{parent.height-height}" /-->
+ <view resource="cover-news.png" x="55"
y="$once{parent.height-height}" />
+ </view>
+
+ <view name="bottom" bgcolor="0xffffff" height="178" width="320"
y="178" >
+ <view resource="cover-match.png" x="55" y="0" />
+ </view>
+
+ <animatorgroup name="coverslide_anm" process="simultaneous"
start="false" duration="500" >
+ <animator target="${cover.top}" attribute="y" to="-180" />
+ <animator target="${cover.bottom}" attribute="y" to="360" />
+ </animatorgroup>
+
+
+ <handler name="onstop" reference="coverslide_anm" >
+ this.setVisible(false);
+ txtlayout.intro.doStart();
+ tbar.headerfade_anm.doStart();
+ </handler>
+
+ </view>
-
</canvas>
<!-- Copyright 2007 Laszlo Systems -->
_______________________________________________
Laszlo-checkins mailing list
[email protected]
http://www.openlaszlo.org/mailman/listinfo/laszlo-checkins
