SWFObject 2.0以降で SWFForceSizeを使用する方法
SWFForceSize*1を SWFObject 2.0以降で用いる方法を以前のエントリーに公開していたのですが、より安全な方法が検証できましたので、下記にサンプルと使用方法を再考しました。
下記、HTML側のサンプルコードでは、SWFObjectと SWFForceSizeの動作に必要な部分を緑字と赤字で記述しています。
【HTMLファイル側の記述】*2
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="keywords" content="Flash,SWFObject,SWFForceSize" />
<meta name="description" content="SWFObject2.0以降で SWFForceSizeを使用するサンプルです" />
<title>SWFObject2x and SWFForceSize</title>
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
<script type="text/javascript" src="common/script/swfobject/swfobject2_2.js"></script>
<script type="text/javascript" src="common/script/swfforcesize/swfforcesize.js"></script>
<script type="text/javascript">
// <![CDATA[
var flashvars = {};
var params = {
bgcolor:"#ffffff",
scale:"noscale"
};
var attributes = {
id: "main",
name: "main"
};
swfobject.embedSWF("sample.swf", "main", "100%", "100%", "9.0.0","common/script/expressinstall/expressInstall.swf", flashvars, params, attributes);
swfobject.addLoadEvent(function() {
var so = document.getElementById("main");
if(so) {
var forcesize = new SWFForceSize(so, 800, 600);
forcesize.onLoadDiv();
}
})
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="plane">
<h1>SWFObject2x and SWFForceSize</h1>
<p>SWFObject2.0以降で SWFForceSizeを使用するサンプルです</p>
<blockquote>
<p>ご使用のブラウザ環境では、このページが正しく表示できない可能性があります。<br />
以下の注意点を確認し、必要な設定を行った上で再度表示してください。</p>
<ul>
<li>ブラウザの JavaScript 設定を有効化してください。</li>
<li>最新の <a href="http://www.adobe.com/go/JP-H-GET-FLASH">Adobe<sup>®</sup> Flash<sup>®</sup> Player</a> をインストールしてください。</li>
</ul>
<p><a href="http://www.adobe.com/go/JP-H-GET-FLASH"><img src="common/images/get_adobe_flash_player.png" alt="Adobe Flash Player のダウンロード" width="158" height="39" /></a></p>
</blockquote>
</div>
</div>
</body>
</html>
【CSSファイル側の記述】
@charset "utf-8";html {
margin : 0;
padding : 0;
height : 100%;
overflow : auto;
}
body {
margin : 0;
padding : 0;
width : 100%;
height : 100%;
}
#main {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
line-height : 0;
text-align : center;
}
【動作確認環境】
Windows 7
IE/8.0.7600
Firefox/3.6
Safari/4.0.4
Google Chrome/4.0.249.89
Windows XP SP2
IE/8
Firefox/3.5.3
Safari 4.0.3
Mac OS X 10.5.8
Firefox 3.5.2
Safari 4.0.3
*1:Pixelbreakerより配布されている JavaScriptで、ウィンドウ(Flash表示領域)が指定したサイズより小さくなった際にスクロールバーを表示できます
*2:サンプルでは Flash／代替コンテンツを表示するコンテナの idを "main"、最小ウィンドウサイズを 横:800 px × 縦:600 pxとしています
AS3でオブジェクトの子にあるボタンの有効／無効を切り替える「SmartButton」クラス
ActionScript3.0でオブジェクトの子にあるボタンの有効／無効を切り替える「SmartButton」クラスを作成しました。
静的クラスメンバ“enabled”は、指定したオブジェクトの [mouseChildren]と [mouseEnabled]の値を個別に設定します。操作したいオブジェクトと、ボタンの有効／無効[Boolean]を指定して使用します。
静的クラスメンバ“change”は、予め配列化したメニューと、ボタンを無効にしたい配列メニューのインデックス値を指定して使用します。指定したインデックスの子にあるボタンが無効となり、それ以外のインデックスの子にあるボタンが有効になります。
ボタンの有効／無効を切り替えるというより、厳密には指定したオブジェクトの [mouseChildren]と [mouseEnabled]の値を true/falseに切り替えます。
下記のボタンより、サンプルの閲覧およびソースのダウンロードができます。
【使用例】
_sp[Sprite]の子にあるボタンを無効化する
SmartButton.enabled(_sp, false);
_sp[Sprite]の子にあるボタンを有効化する
SmartButton.enabled(_sp, true);
sampleMenu[Array]の1番目のインデックスの子にあるボタンを無効化し、それ以外のインデックスの子にあるボタンを有効化する
var sampleMenu:Array = [sampleMenu1, sampleMenu2, sampleMenu3]
SmartButton.change(
sampleMenu, //配列メニュー
1, //ボタンを無効化したい配列要素のインデックス値
sampleMenu.length, //配列要素の総数
0 //配列要素の先頭
);
sampleMenu[Array]の子にある全てのボタンを有効化する
var sampleMenu:Array = [sampleMenu1, sampleMenu2, sampleMenu3]
SmartButton.clear(
sampleMenu, //配列メニュー
sampleMenu.length, //配列要素の総数
0 //配列要素の先頭
);
【パラメータ説明: “enabled”】
$scope
ボタンの有効／無効を操作したいオブジェクト
[Sprite][省略不可]
b
ボタンの有効／無効
[Boolean][省略不可]
【パラメータ説明: “change”】
buttons
配列メニュー
[Array][省略不可]
currentButtonID
ボタンを無効化したい配列要素のインデックス値
[int][省略不可]
buttonNum
配列要素の総数
[uint][規定値:0 -> 代入値:buttons.length][省略可]
indexButtonID
配列要素の先頭
[uint][規定値:1][省略可]
【パラメータ説明: “clear”】
buttons
配列メニュー
[Array][省略不可]
buttonNum
配列要素の総数
[uint][規定値:0 -> 代入値:buttons.length][省略可]
indexButtonID
配列要素の先頭
[uint][規定値:1][省略可]
【ソースコード】
import jp.atziluth.utils.SmartButton;
package jp.atziluth.utils{
import flash.display.Sprite;
public class SmartButton extends Sprite {
private static var buttons:Array;
private static var id:int;
private static var length:uint;
private static var index:uint;
public static function change(buttons:Array,currentButtonID:int,buttonNum:uint=0,indexButtonID:uint=1):void {
SmartButton.initialize(buttons,currentButtonID,buttonNum,indexButtonID);
SmartButton.exec();
}
public static function clear(buttons:Array,buttonNum:uint=0,indexButtonID:uint=1):void {
SmartButton.initialize(buttons,-1,buttonNum,indexButtonID);
SmartButton.exec();
}
public static function enabled($scope:Sprite,b:Boolean):void {
$scope.mouseChildren = b;
$scope.mouseEnabled = b;
}
private static function initialize(buttons:Array,id:int,buttonNum:uint,indexButtonID:uint):void {
SmartButton.buttons = buttons;
SmartButton.id = id;
buttonNum <= 0 ? SmartButton.length = SmartButton.buttons.length:SmartButton.length = buttonNum;
SmartButton.index = indexButtonID;
}
private static function exec():void {
for (var i:uint = SmartButton.index; i <= SmartButton.length; i++) {
SmartButton.enabled(SmartButton.buttons[i],i != SmartButton.id);
}
}
}
}
【サンプルソースコード】
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.events.MouseEvent;
import jp.atziluth.gui.RelativeLayout;
import jp.atziluth.utils.AtTween;
import jp.atziluth.utils.SmartButton;
public class Sample extends MovieClip {
internal const NAVIGATOR:MovieClip=new Navigator();
private const CHANGE_MENU_NUM:uint = 4;
protected static var currentChangeMenuID:uint;
private var changeMenu:Array = [];
private var changeMenuButton:Array = [];
private var changeMenuBackground:Array = [];
private var clearMenu:MovieClip;
private var clearMenuButton:SimpleButton;
private var clearMenuBackground:Sprite;
private const ENABLED_MENU_NUM:uint = 2;
protected static var currentEnabledMenuID:uint = 1;
private var enabledMenu:Array = [];
private var enabledMenuButton:Array = [];
private var enabledMenuBackground:Array = [];
private const ROLLOVER_COLOR:uint = 0xCC3311;
private const ROLLOVER_TIME:Number = .25;
private const ROLLOVER_EASE:String = "liner";
private const ROLLOUT_COLOR:Array = [0x000000,0x666666];
private const ROLLOUT_TIME:Number = 2;
private const ROLLOUT_EASE:String = "Strong.easeInOutQuad";
private const DISABLE_COLOR:uint = 0xCCCCCC;
private const DEFAULT_COLOR:Array = ROLLOUT_COLOR;
private const REVERSE_TIME:Number = ROLLOVER_TIME;
public function Sample():void {
setStageProperty();
setStageEvent();
addNavigator();
setChangeMenu();
setChangeEvents();
setClearMenu();
setClearEvent();
setEnabledMenu();
setEnabledEvents();
switchEnabled(Sample.currentEnabledMenuID, 2, 0);
centeringLayout();
}
internal function setStageProperty():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
private function setStageEvent():void {
stage.addEventListener(Event.RESIZE,onStageResizeHandler);
}
private function onStageResizeHandler(event:Event):void {
centeringLayout();
}
private function addNavigator():void {
addChildAt(NAVIGATOR, 0);
}
private function setChangeMenu():void {
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
changeMenu[i] =
MovieClip(NAVIGATOR.getChildByName("change" + i));
changeMenuButton[i] =
SimpleButton(changeMenu[i].getChildByName("_btn"));
changeMenuBackground[i] =
Sprite(changeMenu[i].getChildByName("bg"));
}
}
private function setChangeEvents():void {
changeMenuButton[1].addEventListener(MouseEvent.ROLL_OVER, changeMenu1RollOverHandler);
changeMenuButton[1].addEventListener(MouseEvent.ROLL_OUT, changeMenu1RollOutHandler);
changeMenuButton[1].addEventListener(MouseEvent.CLICK, changeMenu1ClickHandler);
changeMenuButton[2].addEventListener(MouseEvent.ROLL_OVER, changeMenu2RollOverHandler);
changeMenuButton[2].addEventListener(MouseEvent.ROLL_OUT, changeMenu2RollOutHandler);
changeMenuButton[2].addEventListener(MouseEvent.CLICK, changeMenu2ClickHandler);
changeMenuButton[3].addEventListener(MouseEvent.ROLL_OVER, changeMenu3RollOverHandler);
changeMenuButton[3].addEventListener(MouseEvent.ROLL_OUT, changeMenu3RollOutHandler);
changeMenuButton[3].addEventListener(MouseEvent.CLICK, changeMenu3ClickHandler);
changeMenuButton[4].addEventListener(MouseEvent.ROLL_OVER, changeMenu4RollOverHandler);
changeMenuButton[4].addEventListener(MouseEvent.ROLL_OUT, changeMenu4RollOutHandler);
changeMenuButton[4].addEventListener(MouseEvent.CLICK, changeMenu4ClickHandler);
}
private function changeMenu1RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(1);
}
private function changeMenu1RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(1);
}
private function changeMenu1ClickHandler(event:MouseEvent):void {
changeMenuClick(1);
}
private function changeMenu2RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(2);
}
private function changeMenu2RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(2);
}
private function changeMenu2ClickHandler(event:MouseEvent):void {
changeMenuClick(2);
}
private function changeMenu3RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(3);
}
private function changeMenu3RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(3);
}
private function changeMenu3ClickHandler(event:MouseEvent):void {
changeMenuClick(3);
}
private function changeMenu4RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(4);
}
private function changeMenu4RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(4);
}
private function changeMenu4ClickHandler(event:MouseEvent):void {
changeMenuClick(4);
}
private function changeMenuRollOver(newChangeMenuID:uint):void {
if (Sample.currentChangeMenuID != newChangeMenuID) {
AtTween.COLOR(changeMenuBackground[newChangeMenuID], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function changeMenuRollOut(newChangeMenuID:uint):void {
if (Sample.currentChangeMenuID != newChangeMenuID) {
AtTween.COLOR(changeMenuBackground[newChangeMenuID], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function changeMenuClick(newChangeMenuID:uint):void {
Sample.currentChangeMenuID = newChangeMenuID;
//Sample.currentChangeMenuIDが 1なら、
changeMenu[1]の子にあるボタンを無効化し、
それ以外の子にあるボタンを有効化する
SmartButton.change(
changeMenu,
Sample.currentChangeMenuID,
CHANGE_MENU_NUM
);
//ボタンの背景色を変更する
setChangeMenuColor(Sample.currentChangeMenuID);
}
private function setChangeMenuColor(newChangeMenuID:uint):void {
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
if (newChangeMenuID != i) {
AtTween.COLOR(changeMenuBackground[i], DEFAULT_COLOR[0], REVERSE_TIME);
}
}
AtTween.COLOR(changeMenuBackground[newChangeMenuID], DISABLE_COLOR,REVERSE_TIME);
}
private function setClearMenu():void {
clearMenu =
MovieClip(NAVIGATOR.getChildByName("clear"));
clearMenuButton =
SimpleButton(clearMenu.getChildByName("_btn"));
clearMenuBackground =
Sprite(clearMenu.getChildByName("bg"));
}
private function setClearEvent():void {
clearMenuButton.addEventListener(MouseEvent.ROLL_OVER, clearMenuRollOverHandler);
clearMenuButton.addEventListener(MouseEvent.ROLL_OUT, clearMenuRollOutHandler);
clearMenuButton.addEventListener(MouseEvent.CLICK, clearMenuClickHandler);
}
private function clearMenuRollOverHandler(event:MouseEvent):void {
AtTween.COLOR(clearMenuBackground, ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
private function clearMenuRollOutHandler(event:MouseEvent):void {
AtTween.COLOR(clearMenuBackground, ROLLOUT_COLOR[1], ROLLOUT_TIME, ROLLOUT_EASE);
}
private function clearMenuClickHandler(event:MouseEvent):void {
//changeMenuのすべての子にあるボタンを有効化する
SmartButton.clear(changeMenu, CHANGE_MENU_NUM);
//ボタンの背景色をすべて元に戻す
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
AtTween.COLOR(changeMenuBackground[i], DEFAULT_COLOR[0], REVERSE_TIME);
}
}
private function setEnabledMenu():void {
for (var i:uint=1; i<=ENABLED_MENU_NUM; i++) {
enabledMenu[i] =
MovieClip(NAVIGATOR.getChildByName("enabled" + i));
enabledMenuButton[i] =
SimpleButton(enabledMenu[i].getChildByName("_btn"));
enabledMenuBackground[i] =
Sprite(enabledMenu[i].getChildByName("bg"));
}
}
private function setEnabledEvents():void {
enabledMenuButton[1].addEventListener(MouseEvent.ROLL_OVER, enabledMenu1RollOverHandler);
enabledMenuButton[1].addEventListener(MouseEvent.ROLL_OUT, enabledMenu1RollOutHandler);
enabledMenuButton[1].addEventListener(MouseEvent.CLICK, enabledMenu1ClickHandler);
enabledMenuButton[2].addEventListener(MouseEvent.ROLL_OVER, enabledMenu2RollOverHandler);
enabledMenuButton[2].addEventListener(MouseEvent.ROLL_OUT, enabledMenu2RollOutHandler);
enabledMenuButton[2].addEventListener(MouseEvent.CLICK, enabledMenu2ClickHandler);
}
private function enabledMenu1RollOverHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 1) {
AtTween.COLOR(enabledMenuBackground[1], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function enabledMenu1RollOutHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 1) {
AtTween.COLOR(enabledMenuBackground[1], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function enabledMenu1ClickHandler(event:MouseEvent):void {
Sample.currentEnabledMenuID = 1;
switchEnabled(Sample.currentEnabledMenuID, 2);
}
private function enabledMenu2RollOverHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 2) {
AtTween.COLOR(enabledMenuBackground[2], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function enabledMenu2RollOutHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 2) {
AtTween.COLOR(enabledMenuBackground[2], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function enabledMenu2ClickHandler(event:MouseEvent):void {
Sample.currentEnabledMenuID = 2;
switchEnabled(Sample.currentEnabledMenuID, 1);
}
private function switchEnabled(currentID:uint, lastID:uint, time:Number=REVERSE_TIME):void {
//enabledMenu[currentID]の子にあるボタンを無効化する
SmartButton.enabled(enabledMenu[currentID], false);
//enabledMenu[currentID]の背景色を非クリック色へ変更する
AtTween.COLOR(enabledMenuBackground[currentID], DISABLE_COLOR, time);
//enabledMenu[lastID]の子にあるボタンを有効化する(元に戻す)
SmartButton.enabled(enabledMenu[lastID], true);
//enabledMenu[lastID]の背景色を元に戻す
AtTween.COLOR(enabledMenuBackground[lastID], DEFAULT_COLOR[0], time);
}
private function centeringLayout():void {
RelativeLayout.setPos(stage, NAVIGATOR, "cm");
}
}
}
MdNムック「Photoshop三ツ星テクニック大全」へグラフィック掲載いただきました
2010年1月30日に MdN Corporationより発行された、MdNムック 「Photoshop三ツ星テクニック大全」へグラフィックと作業工程解説文を掲載いただきました。
月刊MdN 2008年7月号 「Photoshop Making Studio」掲載記事を編集いただいた内容です。P14〜P19に載っていますので、書店へ寄られた折は是非ご覧ください。
家に届いた本を手に取って見てとても嬉しく、もっと精進していかなくてはと励みになりました。今は周囲との繋がりによって生かされているが、人様の世話になるばかりではなく、そろそろ自分が人の役に立つ人間にならなくてはならない、欲を言えばこれから自分のやることがたまたま周囲に還元されるものであったりすればよいと思いました。
最近は正直あまりゆとりがないのか、(頭の中が 0と1の2色に埋め尽くされていて)何も浮かんでこないのですが、ふと気持ちが昂ぶった時や落ち着いた時などに、頭の中に浮かんだものをぽんと排出できるエネルギーを常日頃から養っていきたいです。
とにかくこのままではいかんと忙しなく動き回る日常にあって、本当に有り難い機会でした。
本誌掲載の機会をくださった出版社の方々へ、ここで改めて御礼申し上げます。
Photoshop三ツ星テクニック大全 - MdN Design Interactive
MdN Design Interactive
