Spry prerelease 1.3のエフェクトの１つにシェイク効果があります。シェイク効果は指定されたオブジェクトを左右に揺らし（シェイク）します。シェイクできるのは画像だけでなく文字を含むブロックや、ページ全体でも可能です。
シェイク効果を利用するにはエフェクト対象になるオブジェクトにID名を指定します。指定したID名をSpry.Effect.Shake()の最初のパラメータに指定します。以下のサンプルではボタンをクリックすると文字ブロックがシェイクされます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Shake() {
Spry.Effect.Shake("myBox");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="シェイク" onClick="Shake()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Shake<br>
釈迦がシャカシャカ...（寒）</div>
</body>
</html>
エフェクトの開始時および終了時に特定の処理を行わせる事もできます。開始時の処理を指定するにはsetup、終了時にはfinishを使います。パラメータには呼び出す処理（関数）を指定します。呼び出される関数側には2つのパラメータが渡されます。1つ目はエフェクト対象となるエレメント名（オブジェクト名）、2つ目が適用されるエフェクト（オブジェクト）になります。以下のサンプルでは、エフェクト開始時／終了時にアラートダイアログを表示するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryエフェクト</title>
<style type="text/css"><!--
#myBox {
width:150px;
height:150px;
background-color:#202000;
border:1px solid black;
color:white;
}
--></style>
<script type="text/javascript" src="SpryEffects.js"></script>
<script type="text/javascript"><!--
function Shake() {
Spry.Effect.Shake("myBox", {
setup:startFunc, finish:endFunc });
}
function startFunc() {
alert("エフェクト開始");
}
function endFunc() {
alert("エフェクト終了");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : エフェクトサンプル</h1>
<form>
<input type="button" value="シェイク" onClick="Shake()">
</form>
<div id="myBox">Spryエフェクト<br>サンプル<br>Shake<br>
釈迦がシャカリキ...（冷）。</div>
</body>
</html>
[
目次へ]
(2006.9.8)