[JavaScript]JS like flash
モデルau design projectのneonです。
全て自作しました。
WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE6,7(png8画像は劣化)
GoogleChrome4.0.249.78 (36714)
SRWare Iron4.0.280
Safari4.0
[JavaScript]fill up
3時間くらいでササッと作ったものなんで
生暖かい目で見てください。
jQueryなどのライブラリを使わず全て自作しました。
元ネタはこちら
左が重い方は右へ
応用編
四角クリック：対象矩形を fill up
追記：応用編2
縦横複合
[JavaScript]ScrollBar on javascript
javascriptです。
全て自作しました。
上部サムネクリック：対象画像までスライド
マウスホイール：スライド
バードラッグ：ドラッグ
バーを投げる：飛んでく
WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.5
IE7
GoogleChrome4.0.249.78 (36714)
Safari4.0
[JavaScript]maru on ajax
ajaxです。
marunouchi.com的なものを作ってみました。
全て自作しました。
ブラウザウィンドウリサイズ：並び替え
リンクマーク付き画像クリック：リンク先へ
リンクマーク無し画像クリック：拡大画像表示
[Yahoo!ウィジェット]基本メモ
基本メモ。
ウィジェットエンジンをダウンロードしてインストール。
http://widgets.yahoo.co.jp/download/
開発ツール、リファレンスはここ。
http://widgets.yahoo.co.jp/workshop/
ウィンドウを生成
var field=new Window(); field.title="frasio report"; field.width=480; field.height=480; field.visible=true; field.shadow=true;
画像を配置
var im=new Image(); im.src="images/img00.png"; im.hOffset=10; im.vOffset=10; field.appendChild(im);
テキストを配置
var t=new Text(); t.hOffset=10; t.vOffset=10; t.size=12; t.color="#000000"; field.appendChild(t);
入力テキストを配置
var texinput=new TextArea(); texinput.width=200; texinput.height=150; texinput.bgColor="#ffffff"; texinput.bgOpacity=255; field.appendChild(texinput);
Flashを配置
var f=new Flash(); f.src="flash/item.swf"; f.hOffset=100; f.vOffset=50; field.appendChild(f); //flash上はウィジェットをドラッグできない
Webを配置
var w=new Web(); w.hOffset=200; w.vOffset=200; w.width=280; w.height=280; w.url="http://www.yahoo.co.jp/"; field.appendChild(w); //表示に時間がかかる //jsが効かなかったり文字化けしたりして実用的ではない
オンライン上のxmlをロードして解析する。
get_xml();
function get_xml(){
var url=new URL();
var xmlstr=url.fetch("/test/20/test.xml");
var xml=XMLDOM.parse(xmlstr);
var myxml=xml.evaluate("metadata");
var node=myxml.item(0);
var str=node.evaluate("string(name)");
log(str);
//strにnameタグの「frasio report」という文字列が格納されている
}
ローカルのxmlをロードして解析する。
get_local_xml();
function get_local_xml(){
var xmlstr=filesystem.readFile("test.xml");
var xml=XMLDOM.parse(xmlstr);
var myxml=xml.evaluate("metadata");
var node=myxml.item(0);
var str=node.evaluate("string(name)");
log(str);
//strにnameタグの「frasio report」という文字列が格納されている
}
テキストファイルをユーザ指定場所に保存する。
save_text("保存するテキスト");
function save_text(target_str){
var destination=saveAs(".txt");//ユーザに保存先を指定させる
if(destination==null)return;
if(!filesystem.itemExists(destination)){
filesystem.writeFile(destination, target_str);
return true;
}
return false;
}
ファイルのドロップを受け付ける
field.onDragDrop=when_file_drop;
function when_file_drop(e){
var files=e.items;
var ft=get_filetype(files[0]);
if(ft!="jpg")return;
var img=new Image();
img.src=files[0];
field.appendChild(img);
}
function get_filetype(filepath){
return filepath.toString().split(".").pop();
}
[JavaScript]swfobject2.1
swfobjectはこの↓サイトでダウンロードできます。
http://code.google.com/p/swfobject/
まずhtmlに貼り付けるには下記のようにします。サンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<div id="flashcontent"></div>
<script type="text/javascript">
swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45");
</script>
</body>
</html>
1.5のときと同じようにdivタグにidをつけ、
flashplayerのバージョンが足りないときに表示するコードを記述する。
embedするためのコードの引数は下記のようになっています。
swfobject.embedSWF(swfファイル, divタグのid, flashの幅, flashの高さ, 必要なバージョン, expressInstall.swf, flashvars, params, attributes);
5個目までは分かると思いますので6個目から説明します。
6個目以降は必ずしも必要ではありません。
expressInstall.swfはflashplayerのバージョンが足りないときに画面遷移なしに
その場で最新flashplayerをインストールすることができるモジュールです。
使わないときはfalseを渡します。
これを使って貼り付けてflashplayerのバージョンが足りないときは下図のような
画面が出てインストールすることが出来ます。
見た目がアレなので素直にAdobeのサイトへ飛ばすリンクを記述したほうがいいかも。
7個目のflashvarsはflashに値を渡したいときに使います。
使い方：
var flashvars = {};
flashvars.id = "232";
8個目のparamsはmenuやallowfullscreenを設定するものです。
使い方：
var params = {};
params.menu = "false";
params.wmode = "opaque";
params.allowfullscreen = "true";
params.allowscriptaccess = "sameDomain";
9個目のattributesはnameやstyleclassを設定するものです。
使い方：
var attributes = {};
attributes.name = "flashswf";
attributes.styleclass = "jack";
attributes.align = "middle";
これら全部の引数を使うとコードはこんなふうになります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<div id="flashcontent"></div>
<script type="text/javascript">
var flashvars = {};
flashvars.id = "232";
var params = {};
params.menu = "false";
params.wmode = "opaque";
params.allowfullscreen = "true";
params.allowscriptaccess = "sameDomain";
var attributes = {};
attributes.name = "flashswf";
attributes.styleclass = "jack";
attributes.align = "middle";
swfobject.embedSWF("swf/main.swf", "flashcontent", "400", "300", "9.0.45", "swf/expressInstall.swf", flashvars, params, attributes);
</script>
</body>
</html>
以上がswfobject2.1の説明です。便利ですねー。
ここまで長々と説明してきましたが、自分で書くのめんどくせーってときは
swfobjectのサイトでswfobject_generator_1_2_air.zipをダウンロードして使えばコピペで済みます。
JavaScriptをかましたMac対応ScrollBarとかswfobject1.5用に作っていたので
2.1のものも作らなければ。
[AS3]jsからflashのメソッドを叩く
jsからflashのメソッドを叩くメモ。
あらかじめ↓のようなjsメソッドを用意する。
今回は例としてブラウザサイズが変更されたらflashメソッドを叩くことにする。
function init_callback(){
if(window.addEventListener&&!window.opera){
window.addEventListener('resize', onResize, false);
window.onresize = document.onresize = onResize;
}else{
if(window.opera){
window.onresize = onResize;
}else{
window.onresize = document.onresize = onResize;
}
}
}
function onResize(){
callMovie(so.getAttribute("id")).windowResizeEvent();
}
function callMovie(id){
if(swfwheel_safari || navigator.appName.indexOf("Microsoft") != -1){
return window[id];
}else{
return document[id];
}
}
そしてこんな↓感じでいつも通りswfを貼り付ける。
<div id="flashcontents"></div>
<script type="text/javascript">
<!--
var so = new SWFObject('swf/main.swf', 'main', '1000', '640', '9.0.45', '#ffffff');
so.write('flashcontents');
//-->
flash側は↓のinit_callbackを任意のタイミングで叩く。
叩くとブラウザリサイズ時にcall_from_jsメソッドが実行される。
function init_callback():void{
ExternalInterface.call("init_callback");
ExternalInterface.addCallback("windowResizeEvent", call_from_js);
}
function call_from_js():void{
//実行される処理
}