Interfaceを試すのだ!

Interface を試してみるのだ! :boy:

いきなり、swf 側から制御しちゃうぞ。指定位置(id)に自動でスクロールするかも。 :bouzu:

:caution: 要 Flash Player 8 以上


まず、Interface と jQuery をダウンロードしよう。

:check: Interface elements for jQuery - About Interface
#最新版は、Interface 1.2 (08/01/11現在)
# download ページから、scroll を指定してダウンロード。interface.scroll.js にリネーム。
:dlfile: Compressed version of jQuery
# jquery-latest.pack.js は、jquery.js にリネーム。(jQuery 1.1.2 を使用)
:banana: jQueryを試すのだ! (1) 参照。

hamster_click

jquery.js / interface.scroll.js / interface.scroll.sample.js
swf を表示する html と同じ階層にでも置いておく。

swf を表示する html
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.scroll.js"></script>
<script type="text/javascript" src="interface.scroll.sample.js"></script>

  (中略)

<div id="projectyop"></div>
<div id="interfaceheader"></div>
<div id="jscode"></div>
<div id="ascode"></div>
<div id="interfacefooter"></div>

  (中略)

<a class="scrolleffect" href="#projecttop">[トップへもどる]</a>

interface.scroll.sample.js
$(function() {
  $("a.scrolleffect").click(function() {
    var target = $(this).attr("href");
    $(target).ScrollTo(1000, "easeout");
    return false;
  });
});

function autoScrollTo(target) {
  $(target).ScrollTo(1000, "easeout");
  return false;
}

参考資料「jQueryでスムーススクロール - Movable Type備忘録


_root に、ムービークリップ(インスタンス名: headerBtn など) を配置。

_root 第1フレームに
import flash.external.ExternalInterface;

headerBtn.onRelease = function():Void {
  //getURL("javascript:void(autoScrollTo(\"%23interfaceheader\");");
  ExternalInterface.call("autoScrollTo", "#interfaceheader");
};
jscodeBtn.onRelease = function():Void {
  //getURL("javascript:void(autoScrollTo(\"%23jscode\");");
  ExternalInterface.call("autoScrollTo", "#jscode");
};
ascodeBtn.onRelease = function():Void {
  //getURL("javascript:void(autoScrollTo(\"%23ascode\");");
  ExternalInterface.call("autoScrollTo", "#ascode");
};
footerBtn.onRelease = function():Void {
  //getURL("javascript:void(autoScrollTo(\"%23interfacefooter\");");
  ExternalInterface.call("autoScrollTo", "#interfacefooter");
};
と記述。


[追記] (08/01/21 Mon 14:28)
Windows IE6 で「interfaceは宣言されていません」ってエラーが出るらしい。 :bouzu:
SWFObject の id に「.」を含んだ文字列(inteface.sample)を指定していたのがどうやら原因だったらしい。(thanks to けんじさん :boy:)