AS3 : SWFaddress フルFlashサイトにパーマリンクをつける

フルFlashサイトの嫌われるひとつの原因だったパーマリンクの問題が、 swfobjectSWFAddressを使うと解決するとのことで、SWFaddressに同封のサンプルを元に勉強。

まずSWFAddressのサイトからSWFAddressEvent.as、SWFAddress.as、swfaddress.jsをダウンロード。 あとswfobjectも。

Flash側は・・・。

サイトの構成を考え予定するページ分をメインタイムラインにフラグを立てる。
Topページのフラグ例 ” $/ ”
Aboutページフラグ例 ” $/about/ ”
About子ページフラグ例 ” $/about/子ページ名/ ”
Contactページフラグ例 ” $/contact/ ”

///////////////////////////////////////////
//  メインメニューの設定
///////////////////////////////////////////
btnTop_mc.deepLink = '/';
btnTop_mc.buttonMode = true;
btnTop_mc.addEventListener(MouseEvent.CLICK, (this as MovieClip).btnClick);
btnTop_mc.addEventListener(MouseEvent.ROLL_OVER, (this as MovieClip).btnRollOver);
btnTop_mc.addEventListener(MouseEvent.ROLL_OUT, (this as MovieClip).btnRollOut);
btnAbout_mc.deepLink = '/about/';
btnAbout_mc.buttonMode = true;
btnAbout_mc.addEventListener(MouseEvent.CLICK, (this as MovieClip).btnClick);
btnAbout_mc.addEventListener(MouseEvent.ROLL_OVER, (this as MovieClip).btnRollOver);
btnAbout_mc.addEventListener(MouseEvent.ROLL_OUT, (this as MovieClip).btnRollOut);
btnAbout1_mc.deepLink = '/about/test1/';
btnAbout1_mc.buttonMode = true;
btnAbout1_mc.addEventListener(MouseEvent.CLICK, (this as MovieClip).btnClick);
btnAbout1_mc.addEventListener(MouseEvent.ROLL_OVER, (this as MovieClip).btnRollOver);
btnAbout1_mc.addEventListener(MouseEvent.ROLL_OUT, (this as MovieClip).btnRollOut);
btnContact_mc.deepLink = '/contact/';
btnContact_mc.buttonMode = true;
btnContact_mc.addEventListener(MouseEvent.CLICK, (this as MovieClip).btnClick);
btnContact_mc.addEventListener(MouseEvent.ROLL_OVER, (this as MovieClip).btnRollOver);
btnContact_mc.addEventListener(MouseEvent.ROLL_OUT, (this as MovieClip).btnRollOut);
///////////////////////////////////////////
//     SWFAddress actions
///////////////////////////////////////////
function btnClick(e:MouseEvent) {
SWFAddress.setValue(e.target.deepLink);
}
function btnRollOver(e:MouseEvent) {
SWFAddress.setStatus(e.target.deepLink);
}
function btnRollOut(e:MouseEvent) {
SWFAddress.resetStatus();
}
// SWFAddress handling
function handleSWFAddress(e:SWFAddressEvent) {
try {
if (currentFrame == 2 && e.value == '/') {
play();
} else {
gotoAndStop('$' + e.value);
}
} catch(err) {
gotoAndStop('$/error/');
}
var title:String = 'SWFAddress Website';
for (var i = 0; i < e.pathNames.length; i++) {
title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1);
}
SWFAddress.setTitle(title);
}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
///////////////////////////////////////////
html側は・・・。

swfobject.jsのあとにswfaddress.jsを読み込む

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>SWFAddress</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" media="all" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "flashcontent", "100%", "100%", "9" ,"expressInstall.swf");
</script>
</head>
<body>
<div id="flashcontent">
<h1>SWFAddress</h1>
<ul>
<li><a href="#">Top</a></li>
<li><a href="./#/news/">News</a></li>
<li><a href="./#/about/">About</a></li>
</ul>
<h2>jinngumae shibuya-ku tokyo 150-0001</h2>
<h3>tel  03.XXXX.XXXX</h3>
<p>当サイトをご覧いただくには、JavaScript が有効になっていることと、<br/>
最新のFlash Playerプラグインが必要です。<br />
Flashムービーが正常に表示されない場合は下のバナーをクリックし、<br />
最新のFlash Playerをインストールして下さい。</p>
<p>
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
</p>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/* ------------------------------------*/
/* RESET                           */
/* ------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
a 		{color: #666666;text-decoration: none;}
a:hover {color: #FFFFFF;}
#flashcontent{
height: 100%;
}
#flashcontent h1 {
font-size: 16px;
padding-top: 40px;
padding-left: 40px;
margin-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
border-top-width: 6px;
border-top-style: solid;
border-top-color: #999999;
}
#flashcontent h2 {
padding-left: 40px;
font-size: 12px;
font-weight: normal;
color: #999999;
padding-bottom: 5px;
}
#flashcontent h3 {
padding-left: 40px;
font-size: 12px;
font-weight: normal;
color: #999999;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
}
#flashcontent ul {
padding-left: 40px;
margin-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
padding-bottom: 20px;
list-style-type: circle;
list-style-position: inside;
font-size: 12px;
background-color: #000000;
}
#flashcontent li {
padding-top: 3px;
padding-bottom: 3px;
}
#flashcontent p {
margin-bottom: 10px;
margin-top: 10px;
padding-left: 40px;
font-size: 11px;
color: #666666;
padding-bottom: 10px;
line-height: 130%;
font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

参考にしたサイト
TONPOOBLOG » SWFAddressにトライ

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

14 − 12 =