FLASHからClearboxを使うフォトギャラリー

ふらっしゅからくりあぼっくすをつかうほとぎゃらりー

表示160×250（実際の大きさ　同じ）ピクセル

‡←この‡より左の部分で収まる省スペース型の、160×250ピクセルのフォトギャラリーです。
‡　
‡　サーバーの仕様によっては万能ではありませんが、
‡　ブログパーツとか、PHPのサイドバーとかガシェットなんかに丁度いいサイズだと思います。
‡　
‡　実際は、フォトギャラリー用に色んなオープンソースがありますし、わざわざFLASHを購入してフラッシュを作る必要はないですよね。
‡　ジャバスクリプトだけで事足ります。（サムネイルが5〜6個ならオープンソースで見映えのいいページが作れる。）
‡　
‡　このムービーは一つ一つ現れるのがサムネイルになっていて、クリックするとそれに対応したイメージを表示します。
‡　全部で90個あるので、普通にhtmlにすると、90個も並んだすごい大きなページになっちゃいますが、
‡　これなら、他のコンテンツも配置できますし、省スペースにこだわる意義はあると思います。
‡　
‡　ただし、見たいサムネイルをクリックし損ねたり(？)、イメージを眺めているうちにサムネイルを見逃したり⋯
‡　そういった欠点をカバーするために、フラッシュからClearboxライブラリを使う、という仕様になっています。
‡　また、コンボボックスを開いて、ムービーの順番を変える事ができます。

▶サンプルのみを利用する

概要

jQueryのライブラリは非常にたくさんあって、Lightboxライブラリなんかは有名ですが、FLASHのアクションスクリプトでExternalInterfaceクラスを使って、ジャバスクリプトと連携するらしい。ですが、どのライブラリでもVer.が違うと動かないとかの不具合があり、ExternalInterfaceは場合によっては動かないというブログもある。jQueryのコンフリクトが起きるとこわいし。なので従来どおり、getURL("javascript:void○○")で変数をジャバスクリプトに渡し、html側で詳しくジャバスクリプトをコーディングする。そしてサムネイル表示機能やグループ表示ができる「Clearboxライブラリ」を使う事にします。FLASHプロジェクトは今更のAS2です。

FLASH（アクションスクリプト）

AS2プロジェクトで、160×250、8fps、プレーヤー７で新規プロジェクトを作成します。
まずはシーン1。ムービークリップを新規作成します。サイズはW213×H269。このmcをX0.0、Y-25.0の位置に配置し、mcとしてインスタンス(smoll_set)を入力して、ダブルクリックで開きます。この中にサムネイルとなる画像を配置し、フェードインとフェードアウトのトゥイーンをつけ、重ねながら一つずつずらして配置します。これだけだと永遠にループするただのムービーです。

次にコンボボックスを設置。配置するのはシーン１(_root)ではなく、(smoll_set)の中です。コンポーネントからコンボボックスをライブラリに入れた後、(smoll_set)のタイムラインのレイヤーを増やして、コンボボックスをステージにドロップします。サイズW120×H22、位置X0.0Y-22.0に設定し、インスタンス(combobox)とします。再びレイヤーを増やしてそこにアクションスクリプトを記述。
smoll_setフレームアクションのスクリプトはコチラ↓

import mx.controls.ComboBox;
import mx.styles.CSSStyleDeclaration;
import mx.transitions.easing.*;

this.createClassObject(ComboBox,"combobox", 248.5);
// ComboBox コンポーネントのクラススタイル設定
_global.styles.ComboBox = new CSSStyleDeclaration();
_global.styles.ComboBox.setStyle("themeColor", "haloBlue");
_global.styles.ComboBox.disabledColor = 0x99CCCC;
_global.styles.ComboBox.rollOverColor = 0x0698d3;
_global.styles.ComboBox.textRollOverColor = 0xFFFFFF;
_global.styles.ComboBox.textSelectedColor = 0x0000FF;
_global.styles.ComboBox.borderStyle = "solid";
_global.styles.ComboBox.borderColor = 0x96dbeb;
// ComboBox インスタンスのスタイル設定
combobox.textField.setStyle("backgroundColor", 0x76b3c8);
combobox.dropdown.setStyle("backgroundColor", 0x76b3c8);
combobox.openEasing = Elastic.easeOut;
combobox.openDuration = 800;
combobox._x = 21;
combobox._y = 248.5;
combobox.setSize(120,22);
combobox.dropdown.rowHeight = 19;
combobox.rowCount = 10;
combobox.addItem({data:"0", label:"ムービーを変更"});
combobox.addItem({data:"g1", label:"group1 (1〜10)"});
combobox.addItem({data:"g2", label:"group2 (11〜20)"});
combobox.addItem({data:"g3", label:"group3 (21〜30)"});
combobox.addItem({data:"g4", label:"group4 (31〜40)"});
combobox.addItem({data:"g5", label:"group5 (41〜50)"});
combobox.addItem({data:"g6", label:"group6 (51〜60)"});
combobox.addItem({data:"g7", label:"group7 (61〜70)"});
combobox.addItem({data:"g8", label:"group8 (71〜80)"});
combobox.addItem({data:"htm", label:"Mixed Gallery"});

var cbListener:Object = new Object();
// 関数をリスナーオブジェクトに割り当てる。
cbListener.change = function(event_obj:Object) {
 	 var jump_frame = event_obj.target.selectedItem.data;
	 _root.smoll_set.gotoAndPlay(jump_frame);
	 var cbSelected:String = event_obj.target.selectedItem.label;
	 display(cbSelected);
	 function display(cbSelected) {
        if (cbSelected) {
                _root.tf.text = cbSelected;
        } else {
                _root.tf.text = "ムービーを変更";
        }
}// _root.tf.のダイナミックテキストにSelectedのデータを渡す。
};
// リスナーを追加する。
combobox.addEventListener("change", cbListener);

先程配置したcomboboxはステージ外ですのでダミーです。
これがないと、なぜだか、ループmcと同期しなくて、スクリプトで記述したcomboboxが
１回再生したら248.5の位置から0,0に飛んで機能終了してしまうんです。
試行錯誤の末、ステージ外にダミーのcomboboxを置くことで、永遠にループmcと同期す
るようになりました。
ただし、textFieldのラベルが表示されなくなってしまうので、ダイナミックテキストを
利用して、セレクトアイテムのラベルを表示するようにします。（苦・汗）
シ−ン1(_root)に戻り、レイヤーを一つ増やし、そこにインスタンス(tf)のW100.4×H20.8
のダイナミックテキストをX23.8,Y224.0の位置に配置します。
階層を一つ上にして作らないと、深度がcomboboxの上にならないのです。
ダイナミックテキストを重ねた事で、textField部分のリンクヒットが反応しなくなってし
まうので、どうせなら試行錯誤ついでに、もっとカスタマイズしちゃえ、ということで、
更に画像を被せちゃいます。(もうやけくそ）
_rootのステージムービープレビューします。スクリプトで記述したcomboboxが表示される
ので画面キャプチャーし、フォトショップなどの画像処理ソフトでボーダーの色を変えた
画像を作ります。それをライブラリに読み込み、シーン１のダイナミックテキストのレイヤ
ーの下に配置します。comboboxのaddItemのdeta部分は単なるデータで、ループmcの
フレーム数を読みにいってるわけではないようです。なのでフレームネームを付ける必要が
あります。再び(smoll_set)のステージに降り(?)てレイヤーを追加し、フレームネームを付
けます。もちろん、スクリプトに記述したdetaと同じネームです。（g1〜htm）
以上、スマートでなくて大変みぐるしいですが、
スクリプトで記述したcomboboxをループさせるための処理（＆カスタマイズ？）でした。

次に、各サムネイル用画像をボタンシンボルにします。タイムラインのトゥイーン以外の部分を選択し、ステージの画像を右クリックし、「シンボルに変換」をクリックして、ついでに対応した命名でインスタンスを入力します。このままでもボタンとして機能しますが、更に機能をつけたい時はダブルクリックして開き、アップ、オーバー、ダウン、ヒットそれぞれフレームを増やします。(smoll_set)に戻り、インスタンス名が表示されている状態で、ボタンアクションでスクリプトを書きます。
on (release) { getURL("javascript:void(smoll01())");} これだけ。"smoll01()"が変数としてジャバスクリプトに渡されます。同じ様にして他のサムネイルもボタンシンボルにし、"smoll○○()" とボタンアクションをつけます。82個目のサムネイルは"smoll82()"ですね。アクションレイヤー、フレームネームレイヤー、ダミーComboboxレイヤーは(smoll_set)のタイムラインの長さと同じです。
あとは、シーン１にたまに現れる吹き出しBＯXを配置し、これも下層でループmcにします。パブリッシュ設定はこちら。flash用・html用

Clearboxライブラリ

・非商用ページでの利用ならダウンロードフリーです。
　http://www.clearbox.hu/index_en.html　
　現在は、Version 3.7 (2011. 06. 28.)

・jQueryやMooToolsなど他のスクリプトに依存せず、
このライブラリだけで、オーバーレイ上に拡大エフェクト表示するジャバスクリプトです。
使っているサーバーやブログが、
既にjQuery仕様だったりすると、コンフリクトが起きなくて安心ですね。
（ただしインターネットエクスプローラの場合、
　　　　　　　　　　　回転機能は、つかえません。）

・表示できるメディアは、画像だけでなく、Flash、QuickTime、Windows Media。htmlコンテンツ、Iframeコンテンツも表示し、混在も可能。
　　拡張子（BMP, GIF, JPG, JPEG, PNG）の画像、（AVI, MOV, MPG, MPEG, WMV,SWF）の動画、（MP3, WAV, WMA）の音源、
・表示機能はnext,previewだけでなく、サムネイルのグループギャラリー表示、画像の回転表示(IE以外)、マウスホイールによるチェンジができ、もちろんスライドショー機能付きで、コンテンツを新規ウインドウで開く事もできる、多機能な表示能力。好きな方法でどうぞ、という感じ。

・設置方法は、ライブラリフォルダとclearbox.jsファイルを同じ階層におき、htmlを開いて編集。<head>〜</head>間に
<script type='text/javascript' src='clearbox.js'></script> を入れます。
そして、<body>〜</body>間に、
<a href="開きたい画像のパス" rel="clearbox" title="表示させたい文字"><img src="サムネイル画像のパス" /></a> を入れます。
　１枚だけでなくギャラリーとして表示したい時は、
<a href="開きたい画像のパス" rel="clearbox[gallery=グループの名前]" title="表示させたい文字"><img src="サムネイル画像のパス" /></a> と指定。
　更にサイズも指定する場合は、rel="clearbox[ ]のパラメータを（,,）で区切って
<a href="○○" rel="clearbox[gallery=グループの名前,,width=880,,height=690]" title="○○"><img src="サムネイル画像のパス" /></a> と指定。
　他にもパラメータが色々ある。tnhrf=サムネイル画像のパス、comment=詳しいコメント、dlhrf=ダウンロード、とか。他にもいろいろ使い方あるけど、省略。本家の原文参照してソースを見てください。
　あまり使う事はないと思うが、文字にリンクさせ、htmlタグというか、テキストのみを表示する事もできる。
<a href="htmlcontent" rel="clearbox[html=<strong>This is a bold text</strong>]">my webpage</a>

・日本語表示にするには、languageフォルダにある「en」というフォルダをコピーして「ja」という名にします。そして、<head>〜</head>間の『 src='clearbox.js'」の部分を、「 src='clearbox.js?lng=ja';」に書きかえて保存する。意味は、languageファイルは「ja」フォルダにあって、その中のlanguageファイルを使うよ〜。という記述。そして「cb_language.js」の中身を日本語に書き換えます。
書き換えた「cb_language.js」の中身はこちら↓

・３種類の表示タイプが用意されている。

	←ライブラリには３種類の表示タイプが用意されている。
	configフォルダ内には「default」フォルダ、「grow_transparent」フォルダ、「shadow」フォルダ、の３つがあり、純正では「default」フォルダを使う事になっている。 clearbox.jsを開いて、77行目の「var CB_Config='default';」の部分を'grow_transparent';か'shadow';に書き換えてやればいい。
３種類とも満足できない場合はpicフォルダ内の画像を変え、「cb_config.js」と「cb_style.css」をカスタマイズしてやれば、更にオリジナルになる。→

・部品を違う色や画像に変えたい時は、上に書いたように「cb_config.js」と「cb_style.css」を変更し、「pic」フォルダの画像を変える。

/*
// 	ClearBox Config File (JavaScript)
//　3.5beta用の設定ファイル
*/

var

// CB layout:

CB_WindowColor='#fff',			//ウィンドウの色（注：ここにもフレームと角の丸いPNG画像を変更する必要があります！）透明(transparent)指定もok
	CB_MinWidth=200,				//画像の最小サイズとCB windowの初期幅
	CB_MinHeight=200,				//CB windowの初期高さ
	CB_WinPadd=15,					//CB window とブラウザ画面との隙間
	CB_RoundPix=12,					//ここを変えるなら角丸用のPNG画像も変える事。
	CB_ImgBorder=10,				//画像の周囲の境界線の幅　デフォルトはCB_ImgBorder=0,
	CB_ImgBorderColor='transparent',//画像の周囲の境界線の色　デフォルトはCB_ImgBorderColor='#ddd',
	CB_Padd=4,						//ウィンドウ内側の余白

CB_BodyMarginLeft=0,			//
	CB_BodyMarginRight=0,			// if you set margin to ,
	CB_BodyMarginTop=0,				// please change these settings!
	CB_BodyMarginBottom=0,			//<body>からマージンを指定した場合、この設定を変更してください！

CB_ShowThumbnails='auto',		//サムネイル表示表示方法（'常に'、'自動'または'off'）サムネイルは、画像モードでのみです！
	CB_ThumbsBGColor='#000',		//サムネイル背景色
	CB_ThumbsBGOpacity=.35,			//サムネイルレイヤーの透明度
	CB_ActThumbOpacity=.65,			//現在表示中画像のサムネイルの透明度

CB_SlideShowBarColor='#22a5e1',	//スライドショウバーの色　デフォルトはCB_SlideShowBarColor='#fff',
	CB_SlideShowBarOpacity=.8,		//スライドショウバーの透明度　デフォルトはSlideShowBarOpacity=.5,
	CB_SlideShowBarPadd=17,			//スライドショウバーの余白（左と右）
	CB_SlideShowBarTop=2,			//スライドショウバーの位置（画像の上からのピクセル）

CB_SimpleDesign='off',			//'on'にすると、外側の枠が表示されません。

CB_CloseBtnTop=-10,				//画像モードで[閉じる]ボタンの垂直方向の位置
	CB_CloseBtnRight=-14,			//画像モードで[閉じる]ボタンの水平方向の位置
	CB_CloseBtn2Top=-20,			//コンテンツモードで[閉じる]ボタンの垂直方向の位置
	CB_CloseBtn2Right=-30,			//コンテンツモードで[閉じる]ボタンの水平方向の位置

CB_OSD='on',					//OSD表示
	CB_OSDShowReady='on',			//clearbox が読み込み終了になった時に OSD 表示するかどうか

//（ウィンドウの下部にある）フォント、テキスト、ナビゲーションの設定：

CB_FontT='helvetica, arial, sans-serif',				//デフォルトはCB_FontT='Verdana',
	CB_FontSizeT=13,				//
	CB_FontColorT='#777',			//these variables are referring to the title or caption line
	CB_FontWeightT='normal',		//タイトルやキャプションの文字設定

CB_FontC='helvetica, arial, sans-serif',				//デフォルトはCB_FontC='arial',
	CB_FontSizeC=11,				// these variables are referring to
	CB_FontColorC='#999',			// comment lines under the title
	CB_FontWeightC='normal',		//
	CB_TextAlignC='justify',		//タイトルの下の行に表示されるコメント文字
	CB_txtHCMax=120,				//コメント表示部分の最大高さのピクセル

CB_FontG='helvetica, arial, sans-serif',				//デフォルトはCB_FontG='arial',
	CB_FontSizeG=11,				// these variables are referring to the gallery name
	CB_FontColorG='#aaa',			//
	CB_FontWeightG='normal',		//ギャラリー名の文字設定

CB_PadT=10,						// 画像とタイトル表示との隙間

CB_OuterNavigation='off',		// onにするとナビゲーションパネルが外側に表示される

CB_ShowURL='off',				//タイトルが指定されなかった場合、タイトル部分にURLを表示する
	CB_ItemNum='on',				//ギャラリーの何番目かを表示する
	CB_ItemNumBracket='()',			//'()'で囲む

CB_ShowGalName='on',			//ギャラリー名を表示する
	CB_TextNav='on',				//前の画像と次の画像へのナビゲーションを表示する
	CB_NavTextImgPrvNxt='on',		//ナビゲーションを画像で表示する
	CB_ShowDL='on',					//ダウンロードリンクを表示する
	CB_NavTextImgDL='on',			//ダウンロードリンクを画像で表示する

CB_ImgRotation='on',			//画像の回転メニューを表示する
	CB_NavTextImgRot='on',			//画像の回転メニューを画像で表示する

// 元ページを覆い隠す（オーバーレイ）レイヤの設定：

CB_HideColor='#000',			//レイヤの色
	CB_HideOpacity=.6,				//透明度（0で透明、1が100％の色です）　デフォルトはCB_HideOpacity=.85,
	CB_HideOpacitySpeed=400,		//フェードの速度
	CB_CloseOnH='on',				//背景をクリックしたときにclearboxの表示を終了する。

// CB animation settings:　Clearboxアニメーションの設定：

CB_Animation='double',			// 'double', 'normal', 'off', 'grow', 'warp''ダブル''通常''オフ''成長''ワープ'（CPU使用率が高い）
	CB_ImgOpacitySpeed=300,			//コンテンツのフェードスピード（ミリ秒単位）
	CB_TextOpacitySpeed=300,		//写真の下にあるテキストのフェードスピード（ミリ秒単位）
	CB_AnimSpeed=300,				//ウィンドウのサイズ変更、アニメーションの速度（ミリ秒）
	CB_ImgTextFade='on',			//文字やコンテンツがフェードするかどうか
	CB_FlashHide='off',				//clearboxが動作する時は元ページにあるflash アニメを隠す
	CB_SelectsHide='on',			//clearboxが動作する時は元ページにある選択ボックスを隠す
	CB_SlShowTime=5,				//スライドショーで画像が切り替わる速さ (秒)
	CB_Preload='on',				//ギャラリーで表示している画像の前後の画像を先読みする
	CB_ShowLoading='off',			//このバージョンでは動作しない（3.5beta）

// clearboxが使う画像ファイルの設定：

CB_PictureStart='start.png',	//
	CB_PicturePause='pause.png',	//
	CB_PictureClose='close.png',	//
	CB_PictureNext='next.png',		//
	CB_PicturePrev='prev.png',		//他の画像はスタイルシート内部で使っている

// 上級者設定:

CB_PicDir=CB_ScriptDir+'/config/'+CB_Config+'/pic',	//CBのデフォルトのディレクトリ構造を変更した場合、ここも変更！

CB_AllowedToRun='on',			//offにするとclearboxは起動しない（この設定はリロードしなくても有効）
	CB_AllowExtFunctLoad='off',		//onにすると新しいコンテンツを読み込むたびにCB_ExternalFunctionLoad()という名前の関数を呼び出す。
	CB_AllowExtFunctPageLoad='off',	//onにするとページがすべて読み込まれた後に CB_ExternalFunctionPageLoad() という名前の関数を呼び出す。
	CB_AllowExtFunctCBClose='off'	//onにするとclearboxが終了するときに CB_ExternalFunctionCBClose() という名前の関数を呼び出す。
;

←「cb_config.js」の中身
純正ではなく、既に何カ所か変更しています。
コメント部分に、（デフォルトは〜）とあるのがそれ。

html, body {
/*
min-height: 100%;
height: auto !important;
height: 100%
*/
}

/*
// 	以下、ClearBox Config File (CSS) Ver.（3.5beta）
*/
#CB_ImgContainer {
	margin: 0;
	padding: 0;
	background-image: url(../../../img/Background.jpg);
	border: 0;
	outline-style: none;
	outline: 0;
}
/*
// 	デフォルトでは#CB_ImgContainerは、↓にあった。#CB_ImgContainerのみ↑に分離、背景を色からイメージ（Background.jpg）を使うように変更。
*/
#CB_LoadingImage, .CB_TextNav, #CB_ShowTh, #CB_Thumbs2, #CB_Thumbs, .CB_RoundPixBugFix, #CB_Padding, #CB_PrevNext, #CB_ContentHide, #CB_Text, #CB_Window, #CB_Image, #CB_TopLeft, #CB_Top, #CB_TopRight, #CB_Left, #CB_Content, #CB_Right, #CB_BtmLeft, #CB_Btm, #CB_BtmRight, #CB_Prev, #CB_Prev:hover, #CB_Prev:focus, #CB_Prev:active, #CB_Next, #CB_Next:hover, #CB_Next:focus, #CB_Next:active, #CB_CloseWindow, #CB_SlideShowS, #CB_SlideShowP, #CB_SlideShowBar {
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	outline-style: none;
	outline: 0;
}

#CB_Text,
#CB_Text *,
#CB_HiddenTextT,
#CB_HiddenTextT *,
#CB_HiddenTextC,
#CB_HiddenTextC *,
#CB_HiddenTextG,
#CB_HiddenTextG *,
#CB_OSD {
	line-height: normal;
	letter-spacing: 0px;
}

#CB_LoadingImage {
	position: absolute;
        left: -10000px;
        top: -10000px;
	margin-left: -16px;
	margin-top: -16px;
	visibility: hidden;
	z-index: 1101;
}

.CB_Absolute {
	position: absolute;
}

#CB_NotImgContent {
	position: absolute;
	width: 0px;
	height: 0px;
}

#CB_NotIC, #CB_NotImgContent {
	border: none;
	outline-style: none;
	outline: 0;
}

#CB_Window {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 0px;
	border-spacing: 0px;
	border-width: 0px;
	border-collapse: separate;
	visibility: hidden;
	z-index: 1100;
}

.CB_Sep {
	color: #bbb;
}

.CB_TnThumbs {
	width: 0px;
	height: 0px;
	border: 0px;
	padding: 0;
	margin: 0;
	visibility: hidden;
}

.CB_BtmNav {
	vertical-align: middle;
	border: 0;
	margin-left: 3px;
}

#CB_ImgHide {
	position: absolute;
	visibility: hidden;
	z-index: 1098;
	left: 0px;
}

#CB_ShowTh {
	width: 100%;
	height: 20%;
	visibility: hidden;
	position: absolute;
	z-index: 1097;
	bottom: 0px;
	left: 0px;
}

#CB_Thumbs {
	display: none;
	height: 62px;
	padding-top: 10px;
	position: absolute;
	z-index: 1100;
	overflow: hidden;
	bottom: 0px;
	left: 0px;
}

#CB_Thumbs2 {
	margin: auto 0;
	height: 52px;
	position: absolute;
}

.CB_ThumbsImg {
	position: absolute;
	cursor: pointer;
	border: 1px solid #eee;
}

#CB_ThumbsActImg {
	cursor: default;
	border: 1px dotted #fff;
}

.CB_RoundPixBugFix {
	display: block;
	visibility: hidden;
	font-family: arial;
	font-size: 1pt;
}

#CB_ImgContainer {
	position: relative;
	width: 100%;
}

#CB_PrevNext {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 1002;
}

#CB_NavPrev, #CB_NavNext {
	visibility: hidden;
	position: absolute;
	z-index: 1001;
	top: 47%;
	cursor: pointer;
}

#CB_NavPrev {
	left: 18px;
}

#CB_NavNext {
	right: 14px;
}

#CB_ContentHide {
	position: absolute;
	z-index: 1000;
	top: 0px;
	left: 0px;
}

#CB_OSD {
	position: fixed;
	left: 50%;
	z-index: 5000;
	font-size: 12px;            /*デフォルトはfont-size: 22px;*/
	color: #fff;
	background-color: #000;
	visibility: hidden;
}

#CB_Image {
	position: relative;
}

#CB_TopLeft {
	background-image:url(pic/s_topleft.png);
	background-position:right bottom;
}

#CB_Top {
	background-image:url(pic/s_top.png);
	background-position:left bottom;
}

#CB_TopRight {
	background-image:url(pic/s_topright.png);
	background-position:left bottom;
}

#CB_Left {
	background-image:url(pic/s_left.png);
	background-position:right top;
}

#CB_Right {
	background-image:url(pic/s_right.png);
	background-position:left top;
}

#CB_BtmLeft {
	background-image:url(pic/s_btmleft.png);
	background-position:right top;
}

#CB_Btm {
	background-image:url(pic/s_btm.png);
	background-position:left top;
}

#CB_BtmRight {
	background-image:url(pic/s_btmright.png);
	background-position:left top;
}

#CB_Prev, #CB_Next {
	background: transparent url(pic/blank.gif) no-repeat scroll 0%;
	display: block;	
	width: 49%;
	cursor: pointer;
	z-index: 1102;
}

.CB_TextNav {
	text-decoration: underline;
	padding-right: 5px;
	color: #999;
	cursor: pointer;
	border: none;
}

.CB_TextNav:hover {
	text-decoration: underline;
	color: #555;
	border: none;
}

#CB_Prev {
	float: left;
	left: 0px;
}

#CB_Next {
	float: right;
	left: 0px;
}

#CB_Prev:hover {
background:transparent;
}

#CB_Next:hover {
background:transparent;
}

#CB_CloseWindow {
	position: absolute;
	z-index: 1104;
	cursor: pointer;
}

#CB_SlideShowS, #CB_SlideShowP {
	position: absolute;
	left: -11px;
	top: -10px;
	z-index: 1104;
	cursor: pointer;
}

#CB_SlideShowBar {
	width: 0px;
	position: fixed;
	height: 2px;
	display: none;
	z-index: 1102;
}

#CB_Text {
	position: relative;
	text-align: left;
	overflow: hidden;
}

#CB_TT, #CB_TC {
	position: relative;
}

#CB_TT, #CB_HiddenTextT {
	white-space: nowrap;
}

#CB_TC {
	overflow-y: auto;
}

#CB_HiddenTextT, 
#CB_HiddenTextC, 
#CB_HiddenTextG {
	position: absolute;
	visibility: hidden;
	z-index: -1000;
	top: -100000px;
	left: -100000px;
}

.CB_PreloadBugFix {
	width: 0px;
	height: 0px;
	z-index: -1000;
	visibility: hidden;
	position: absolute;
}

#CB_Debug,
#CB_Debug a,
.dbg_1,
.dbg_2,
.dbg_2a,
.dbg_3,
.dbg_3a,
.dbg_4,
.dbg_5 {
	border: 0;
	margin: 0;
	padding: 0;
	background: none transparent;
	letter-spacing: 0px;
	line-height: normal;
	font-size: 11px;
	font-weight: normal;
	font-style: none;
}

#CB_Debug {
	display: none;
	background: #000 none;
	width: 280px;
	padding: 10px;
	z-index: 5000;
	position: absolute;
	right: 0px;
	top: 0px;
}

.dbg_1 {
	color: #fff;
	padding-top: 10px;
	font-weight: bold;
}

.dbg_2,
.dbg_2a  {
	color: #999;
	padding: 10px 0px 0px 20px;
}

.dbg_2a {
	color: #ff8800;
}

.dbg_3 {
	color: #fff;
	padding-top: 10px;
	font-weight: bold;
}

.dbg_4 {
	color: #fff;
	font-weight: bold;
}

.dbg_5 {
	color: #fff;
	margin: 15px 0px 5px 0px;
	border-bottom: 5px dotted #ccc;
	font-weight: bold;
}

#CB_Debug a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px dotted #999;
}

#CB_Debug .dbg_2a a {
	color: #ff8800;
	border-bottom: 1px dotted #ff8800;
}

#CB_Debug a:hover,
#CB_Debug .dbg_2a a:hover {
	color: #fff;
	border-bottom: 1px dotted #fff;
}

#CB_OutNavContainer {
	display: none;
	z-index: 5000;
	width: 100%;
	position: fixed;
	padding-bottom: 20px;
	bottom: 0px;
}

#CB_OutNavG {
	text-align: center;
	padding-bottom: 10px;
}

#CB_OutNavB, #CB_OutNavBG {
	width: 180px;
	height: 50px;
}

#CB_OutNavB {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

#CB_OutNavBG {
	position: absolute;
	left: 50%;
	margin-left: -90px;
	bottom: 20px;
	background: transparent url(pic/on_bg.png) no-repeat;
}

#CB_OutNavB a {
	cursor: pointer;
}

#CB_OutNavB a img {
	position: relative;
}

#CB_OutNavB a:hover img {
	top: -50px;
}

←「cb_style.css」の中身
純正ではなく、既に何カ所か変更しています。
コメント部分に、（デフォルトは〜）とあるのがそれ。

そして、「pic」フォルダにある、各部品をフォトショップなどのソフトで開き、好みの部品に変えてやる。（ただし、サイズは変えない）
今回変えたファイル↓（色を付けただけです。）

html（ジャバスクリプト）

ソースを見てもらえば、一目瞭然ですが、FLASHをhtmlに追加した時は、FLASHのパラメータに、（wmode = transparent）が必要です。これは、FLASHの深度をClearboxライブラリより下に表示させる為必須です。FLASHからClearboxを使うには、<head>〜</head>間にジャバスクリプトを記述します。アクションスクリプトから渡された変数"smoll○○()"をどう動かすかです。本家の原文によると、使うのは"CB_Open()"です。基本のパラメータは、
CB_Open('href=開きたい画像のパス,,parameter2=表示させたい文字,,parameter3=グループの名前');
なので、<script type="text/javascript">〜</script>間に
function smoll○○(){CB_Open('href=開きたい画像のパス,,title=表示させたい文字,,gallery=グループの名前');}
を記述します。
過去に同じ方法でThickboxライブラリとLightboxライブラリを使った事がありますが、ギャラリーグループのパラメータは無視されてしまい、成功例はないかとネットサーフィンしましたが、どのページもギャラリーのパラメータが効かないと書かれてありました。
Clearboxライブラリは、<body>〜</body>間に記述した<a href="○○" title="○○" rel="clearbox[gallery=グループ名,,tnhrf=サムネイル画像のパス]"></a>を残しておけば、<head>〜</head>間のスクリプトと同調します。（なぜ同調するか私にはわからない。）
あと、こんな使い方をするとIE（インターネットエクスプローラ）でバグがでます。2009年版ではよかったのですが、その頃はFF（ファイヤーフォックス）でバグがあって見なかった事にしてました（汗）。今年に入って、FFのバグに対処されたと喜んでいたら、IEでバグ・・・どうにもFFとIEの違いは困ったものです。(※ここで言うバグとは、こんな使い方をするとの意で、普通にClearboxライブラリを使う分にはバグはありません。)仕方がないので、ブラウザがIEの場合は、2009年版を使い、その他は今年Ver.を使う、という分岐がしてあります。
<script type="text/javascript"></script>
分岐に伴い今年Ver.のライブラリフォルダ名を「clearbox_new」に変え、両方のclearbox.jsファイルをcb_oldフォルダとcb_newフォルダに分けて入れ、今年Ver.のclearbox.jsファイルを開いて下記のように変更してあります。
var CB_ScriptDir='clearbox_new';

このファイルが正常に動くためのフォルダ構造↓

	今年Ver.
	htmlから見たアドレス 2009年Ver.
	設置ファイル（clearbox.js）	cb_old/clearbox.js
	コアプログラミングファイル（cb_core.js）	clearbox/core/cb_core.js
	言語設定ファイル（cb_language.js）	clearbox/language/ja/cb_language.js
	スタイル設定ファイル（cb_config.js）	clearbox/config/default/cb_config.js
	スタイルシート（cb_style.css）	clearbox/config/default/cb_style.css
	部品画像	clearbox/config/default/pic/
	設置ファイル（clearbox.js）	cb_new/clearbox.js
	コアプログラミングファイル（cb_core.js）	clearbox/core/cb_core.js
	言語設定ファイル（cb_language.js）	clearbox_new/language/ja/cb_language.js
	スタイル設定ファイル（cb_config.js）	clearbox_new/config/default/cb_config.js
	スタイルシート（cb_style.css）	clearbox_new/config/default/cb_style.css
	部品画像	clearbox_new/config/default/pic/
	FLASH・イメージギャラリー用
	イメージファイル（01〜82.png）	img/（01〜82.png）
	背景ファイル	img/Background.jpg
	サムネイルファイル（01〜82.png）	img/imgs/（01〜82.png）
	FLASHファイル	smoll.swf
	FLASH表示用ジャバスクリプト	AC_RunActiveContent.js
	部品画像用picフォルダの中身は、今年Ver.も2009年Ver.も同じです。 blank.gif、btm_dl.gif、btm_max.gif、btm_next.gif、btm_prev.gif、btm_rot_l.gif、btm_r ot_r.gif、close.png、next.png、no_flash.gif、no_html.gif、no_iframe.gif、no_image.gi f、no_inner.gif、no_quicktime.gif、no_winmedia.gif、no_winmediaavi.gif、no_winmed iamp3.gif、no_winmediampg.gif、no_winmediawav.gif、no_winmediawma.gif、no_win mediawmv.gif、no_youtube.gif、pause.png、prev.png、s_btm.png、s_btmleft.png、s _btmright.png、s_left.png、s_right.png、s_top.png、s_topleft.png、s_topright.png、s tart.png、start_outer.gif、rot_r_outer.gif、rot_l_outer.gif、prev_outer.gif、pause_oute r.gif、next_outer.gif、loading.gif

※2009年版のClearboxライブラリは、本家では見つかりませんでしたが、OpenSpaceに旧Ver.がありました。
※プログラミングの才がなくても、これぐらいはカスタマイズ利用できる例として説明しました。使用画像をはじめ、”人のふんどしで相撲を取る”的な内容ですので、flaファイルなどの配布はできませんし、アフターサービス？などありませんので、よろしくお願いします。

使用画像

画像については、すべて「©青山剛昌／小学館・読売テレビ・TMS 1996」です。
５〜６年前から少しずつ集め貯めていたもので、title=の部分で画像検索すればヒットするかもしれませんが、今では手にはいらないものもあります。著作権の関係上、イメージには、モザイクがかけてありますので、実物とは違います。
また、配信画像そのままでは、FLASHの素材になりません。通常、BMPかJPG画像で配信されているので、フォトショップなどのソフトで、背景を切取り、背景が透明なまま維持するフォーマットで保存する必要があります。今回は、.PSDで作ってFLASHに取り込みました。他のフォーマットとして、GIFやPNGとして保存するのもよいかと思います。FLASHをパブリッシュ、HTMLをコーディング、JSライブラリを編集したりするよりも何よりも、画像前処理（透過性を保持）するのが一番時間がかかります。

FLASHからClearboxを使うフォトギャラリー

概要

FLASH（アクションスクリプト）

Clearboxライブラリ

html（ジャバスクリプト）

使用画像

FLASH関連リンク

サイトの他のコンテンツ