●670*370、24fpi 背景灰色のステージを用意
●「挿入」「新規シンボル」でムービークリップ、インスタンス名navi1を作成し、その編集画面で（基準左上）、40*300の矩形を描き、シンボルに変換、インスタンス名を
tab とする。さらにその右横に並べて460*300の矩形を描き、ムービークリプ（インスタンス名 link ）を作成する。 （要するに、navi1の入れ子にtabとlinkを作る）
tab link は好みの色の組み合わせで着色する。
●tab部分のテキストフィールドを静止テキストとし、プロパティの方向変更タブで縦書きを選択し、縦書きでナビ表題を記述する
●次いで、同様に、tab と link を入れ子にした、navi2,navi3,navi4 を作成する。
●座標（25,50）にnavi1を配置、次いで、tabが並ぶように、x座標を40ずつ離しながら（増加させて）navi2からnavi4までを配置する。
●620*350の矩形を描き、シンボルに変換（ムービークリップ、基準左上）インスタンス名を mask_rec とし、(25,10)に配置する。（この矩形で表示部全体にマスクをかける）
●imgフォルダに、各ナビゲーションに表示する写真（440*280、p1.jpg,,,p4.jpg）を収納しておく。
|
import mx.transitions.Tween;
import mx.transitions.easing.*;
//一つのナビゲーション（tab,link）の横幅
var navi_w = 500;
//tabの数、横幅
var tabNum = 4;
var tab_w = 40;
//naviを表示する左マージン
var x0 = 25;
//ナビ表示領域用マスク
var mask_w = mask_rec._width;
this.setMask(mask_rec);
//リンク先URL
var url1 = "http://yama.tyoshioka.com/yama/kasa/kasa.html";
var url2 = "http://yama.tyoshioka.com/yama/turugi/turugi.html";
var url3 = "http://yama.tyoshioka.com/yama/daisen_2011_4/daisen_2011_4.html";
var url4 = "http://yama.tyoshioka.com/yama/daisen/daisen.html";
//各ナビゲーションの作成と配置
for(i=1; i<tabNum+1; i++) {
var pic = this["navi"+i].link.createEmptyMovieClip("pic"+i,this.getNextHighestDepth());
pic.loadMovie("img/p"+i+".jpg");
pic._x = pic._y = 10;
var thistab = this["navi"+i].tab;
var thislink = this["navi"+i].link;
thistab.num = thislink.num = i;
thistab.onRelease = openNavi;
thislink.onRelease = jump;
}
//tab部クリックでlink部がオープン（写真表示）
function openNavi() {
for(i=1; i<tabNum+1; i++) {
navi_mc = _root["navi"+i];
if(navi_mc._xthis.num) {
targetx = navi_w+x0+tab_w*(i-2);
new Tween(navi_mc,"_x",Bounce.easeOut,navi_mc._x,targetx,1,true);
}
if(navi_mc._x>mask_w/2 && i<=this.num) {
targetx = x0+tab_w*(i-1);
new Tween(navi_mc,"_x",Regular.easeOut,navi_mc._x,targetx,0.5,true);
}
}
}
//link部クリックで指定urlを表示
function jump() {
var targetURL = _root["url"+this.num];
getURL(targetURL,"_blank");
}
|
//各種クラスのインポート
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Stage;
import flash.events.MouseEvent;
//初期設定
var navi_w:Number = 500;
var tabNum:Number = 4;
var tab_w:Number = 40;
var x0:Number = 25;
var mask_w:Number = mask_rec.width;
this.mask = mask_rec;
//リンク先URL
var url1 = "http://yama.tyoshioka.com/yama/kasa/kasa.html";
var url2 = "http://yama.tyoshioka.com/yama/turugi/turugi.html";
var url3 = "http://yama.tyoshioka.com/yama/daisen/daisen.html";
var url4 = "http://yama.tyoshioka.com/yama/daisen_2011_4/daisen_2011_4.html";
//各ナビゲーションの作成と配置
for(var i:uint=1; i<tabNum+1; i++) {
var thistab:MovieClip = this["navi"+i].tab;
var thislink:MovieClip = this["navi"+i].link;
thistab.num = thislink.num = i;
var pic:MovieClip = new MovieClip();
pic.x = pic.y = 10;
thislink.addChild(pic);
thistab.buttonMode = thislink.buttonMode = true;
var url = "img/p"+i+".jpg";
loadPic(pic,url);
thistab.addEventListener(MouseEvent.CLICK,openWindow);
thislink.addEventListener(MouseEvent.CLICK,jump);
}
//link部に写真表示
function loadPic(load_mc, url):void {
var mcLoader=new Loader();
load_mc.addChild(mcLoader);
var urlReq:URLRequest=new URLRequest(url);
mcLoader.load(urlReq);
}
//tab部クリックでlink部がオープン
function openWindow(event:MouseEvent):void {
for(var i:uint=1; i<tabNum+1; i++) {
var navi_mc:MovieClip = root["navi"+i];
if(navi_mc.xevent.target.num) {
var targetx = navi_w+x0+tab_w*(i-2);
var tw:Tween = new Tween(navi_mc,"x",Bounce.easeOut,navi_mc.x,targetx,1,true);
}
if(navi_mc.x>mask_w/2 && i<=event.target.num) {
targetx = x0+tab_w*(i-1);
tw = new Tween(navi_mc,"x",Regular.easeOut,navi_mc.x,targetx,0.5,true);
}
}
}
//link部クリックで指定urlを表示
function jump(event:MouseEvent):void {
var targetURL:URLRequest = new URLRequest(this["url"+event.currentTarget.num]);
navigateToURL(targetURL,"_blank");
}
|
package {
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.display.Stage;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Shape;
import fl.text.TLFTextField;
import flashx.textLayout.formats.BlockProgression;
import flash.text.TextFormat;
import flash.text.TextField;
public class openNavi_as3_3 extends Sprite {
//サブタイトル（背表紙）文字列、サブタイトル数
private var subtitle:Array=new Array("笠ヶ岳","剣岳、立山","残雪の大山","紅葉の大山");
private var tabNum:Number=subtitle.length;
//各サブタイトルに対応したナビゲーション領域（navi、入れ子にtab,link）の大きさ
private var navi_w:Number=500;
private var navi_h:Number=300;
//一番目のnaviの座標
private var x0:Number=25;
private var y0:Number=50;
//tab（背表紙の幅）
private var tab_w:Number=40;
//maskの幅
private var mask_w:Number
//リンク先URL
private var url1:String="http://yama.tyoshioka.com/yama/kasa/kasa.html";
private var url2:String="http://yama.tyoshioka.com/yama/turugi/turugi.html";
private var url3:String=
"http://yama.tyoshioka.com/yama/daisen_2011_4/daisen_2011_4.html";
private var url4:String="http://yama.tyoshioka.com/yama/daisen/daisen.html";
public function openNavi_as3_3() {
//文字のフォーマット
var txtFormat = new TextFormat();
txtFormat.font="_ゴシック";
txtFormat.size=23;
txtFormat.color=0xffffff;
txtFormat.bold=true;
//メインタイトル
var mainTitle:TextField = new TextField();
addChild(mainTitle);
mainTitle.text="山 の ア ル バ ム";
mainTitle.width=300;
mainTitle.x=200;
mainTitle.y=10;
mainTitle.setTextFormat(txtFormat);
//マスク用矩形作成とナビゲーション表示域にマスクのセット;
var mask_rec:Shape = new Shape();
addChild(mask_rec);
mask_w = navi_w+tab_w*(tabNum-1);
drawRec(mask_rec,mask_w,navi_h+y0,2,0xffffff,0xffffff,1);
mask_rec.x=x0;
mask_rec.y=0;
this.mask=mask_rec;
//各ナビゲーションの作成と配置
for (var i:uint=1; i<tabNum+1; i++) {
var navi:MovieClip = new MovieClip();
addChild(navi);
navi.x = x0+40*(i-1);
navi.y=y0;
navi.name="navi"+i;
var thistab:MovieClip = new MovieClip();//背表紙部
var thislink:MovieClip = new MovieClip();//写真表示部（リンク部）
navi.addChild(thistab);
navi.addChild(thislink);
var rec1:Shape = new Shape();
thistab.addChild(rec1);
drawRec(rec1,tab_w,navi_h,2,0xffffff,0x777777,1);
//背表紙の表示
var subTf:TLFTextField = new TLFTextField();
with (subTf) {
width=30;
height=250;
y=10;
blockProgression=BlockProgression.RL;
text=subtitle[i-1];
setTextFormat(txtFormat);
}
thistab.addChild(subTf);
//リンク部に写真を表示;
var rec2:Shape = new Shape();
thislink.addChild(rec2);
drawRec(rec2,navi_w-tab_w,navi_h,2,0xffffff,0xbbbbbb,1);
thislink.x=40;
var url:String="img/p"+i+".jpg";
loadPic(thislink,url);
thistab.num=thislink.num=i;
thistab.buttonMode=thislink.buttonMode=true;
thistab.mouseChildren=false;
//マウスイベントのセット
thistab.addEventListener(MouseEvent.CLICK,openWindow);
thislink.addEventListener(MouseEvent.CLICK,jump);
}
}
//矩形描画関数
private function drawRec(sp,w,h,lineWeight,lineColor,recColor,recAlpha):void {
sp.graphics.lineStyle(lineWeight,lineColor);
sp.graphics.beginFill(recColor,recAlpha);
sp.graphics.drawRect(0,0,w,h);
}
//写真のロード表示関数;
private function loadPic(load_mc, url):void {
var mcLoader:Loader = new Loader();
load_mc.addChild(mcLoader);
var urlReq:URLRequest=new URLRequest(url);
mcLoader.load(urlReq);
mcLoader.x=mcLoader.y=10;
}
//tabクリックでlink部がオープン（写真表示）
private function openWindow(event:MouseEvent):void {
for (var i:uint=1; i<tabNum+1; i++) {
var navi_mc:MovieClip=MovieClip(getChildByName("navi"+i));
if (navi_mc.x<mask_w/2 && i>event.currentTarget.num) {
var targetx:Number = navi_w+x0+tab_w*(i-2);
var tw:Tween=new Tween(
navi_mc,"x",Bounce.easeOut,navi_mc.x,targetx,1,true);
}
if (navi_mc.x>mask_w/2 && i<=event.currentTarget.num) {
targetx = x0+tab_w*(i-1);
tw=new Tween(
navi_mc,"x",Regular.easeOut,navi_mc.x,targetx,0.5,true);
}
}
}
//link部クリックで指定urlを表示
private function jump(event:MouseEvent):void {
var targetURL:URLRequest=new URLRequest(
this["url"+event.currentTarget.num]);
navigateToURL(targetURL,"_blank");
}
}
}
|
