前回のものを少し改良し、左から右に順々に画像が表示されるようにした。それぞれの画像はフェードインしフェードアウトする。フェードアウトが始まったら、次の画像のフェードインが始まるようにした。
デジカメを良く使うようになって以来、写真データはたまりっぱなしである。そんなとき、たまったデータを気持ちよく、楽しく見られる、そんな仕組みが欲しいものだ。何が楽しいだろうか？そんなことを真剣に考える毎日である。
ソースコード：
<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2006 uiengineda.blogs.com -->
<!-- Yahoo Widgets サンプル047：スクリーン上に並べる 横5枚 で、フェードイン、フェードアウト -->
<widget>
<debug>on</debug>
<window>
<name>main_window</name>
<title>animation</title>
<height>500</height>
<width>500</width>
<visible>true</visible>
</window>
<action trigger="onLoad">
<![CDATA[
// choose folder
var folder = chooseFolder();
print("folder : " + folder);
// initialize for window size
main_window.hOffset = 0;
main_window.vOffset = 0;
main_window.width = screen.availWidth;
main_window.height = screen.availHeight / 2;
// File List
var path = folder;
fileList = filesystem.getDirectoryContents(path, false);
var ctr = 0;
var ptr = 0;
var images = new Array();
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[3] = new Image();
images[4] = new Image();
for(var i = 0;i < images.length; i++){
images[i].width = screen.availWidth / 5;
images[i].hOffset = i * screen.availWidth / 5;
images[i].vOffset = 0;
}
NextImage();
function NextImage()
{
if( ctr < fileList.length )
{
print( "animation start : " + ctr + " : " + fileList[ctr]);
var a = new Array();
// initialize
var index = ctr % 5;
images[index].visible = false;
images[index].src = path + "/" + fileList[ctr];
images[index].opacity = 0;
images[index].height = images[index].srcHeight * images[index].width / images[index].srcWidth;
images[index].visible = true;
if(index > 0){
a[(index) - 1] = new FadeAnimation( images[index - 1], 0, 3000, animator.kEaseIn, NextImage);
a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn);
animator.start(new Array( a[(index) - 1], a[index]) );
}else{
if(ctr>0){
a[4] = new FadeAnimation( images[4], 0, 3000, animator.kEaseIn, NextImage);
a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn);
animator.start(new Array( a[4], a[index]) );
}else{
a[index] = new FadeAnimation( images[index], 255, 3000, animator.kEaseIn, NextImage);
animator.start(a[index]);
}
}
ctr++;
}
}
]]>
</action>
</widget>
ヤフージャパンからYahoo!ウィジェットの提供が開始された。
最近のコメント