ホーム >
JavaScriptで作ったオープニング風デモ画面
2009/10/26
JavaScriptで某鉄道会社のCMっぽいデモ画面を作ってみました。
⇒こちらをご覧ください（ちょっと重いです）オープニング風デモ画面
最初に見るときは画像や音楽の読み込みで重くなるかもしれません。ちなみに短くてシンプルに見えるのですが、コード自体は無駄に長かったりします。以下参照。
クリックするとコードの一部が表示されます（JavaScript使用）
..........
..........
initOpening: function() {
//このメソッド内にすべてのアニメーションを記述
//Flashでない場合、事前に音楽ファイルを読み込んでおきます
this.playMusic('tam-y23', 'bgm', { mute: true });
//テキストは始めにまとめて用意しておきます
this.msg01 = this.simpleText('WIZARD-CODE', { loc: [135, 140], style: 'wiz_font01' });
this.msg02 = this.simpleText('presents', { loc: [200, 175], style: 'wiz_font02' });
this.msg03 = this.simpleText('OPENING DEMO', { loc: [160, 160], style: 'wiz_font03' });
this.msg04 = this.simpleText('和の文化、それはこの国が誇る古き良き伝統', { loc: [40, 60], style: 'wiz_font04' });
this.msg05 = this.simpleText('寺社仏閣、陶芸に絵巻物・・・・', { loc: [95, 110], style: 'wiz_font04' });
this.msg06 = this.simpleText('いにしえの歴史が薫る古都の風景', { loc: [85, 160], style: 'wiz_font04' });
this.msg07 = this.simpleText('花', { loc: [100, 50], style: 'wiz_font05' });
this.msg08 = this.simpleText('鳥', { loc: [80, 280], style: 'wiz_font05' });
this.msg09 = this.simpleText('風', { loc: [300, 50], style: 'wiz_font05' });
this.msg10 = this.simpleText('月', { loc: [340, 280], style: 'wiz_font05' });
this.msg11 = this.simpleText('季節が彩る色とりどりの景色', { loc: [110, 60], style: 'wiz_font04' });
this.msg12 = this.simpleText('紅葉も見ごろの時期が', { loc: [130, 110], style: 'wiz_font04' });
this.msg13 = this.simpleText('もうじき来そうです', { loc: [140, 160], style: 'wiz_font04' });
this.msg14 = this.simpleText('そうだ 京都、行こう。', { loc: [140, 220], style: 'wiz_font04' });
this.msg15 = this.simpleText('提供 Ｊ○東海', { loc: [135, 150], style: 'wiz_font01' });
//背景画像を用意
this.changeBgImg('name:wahu01', 'sub');
this.bgImage[1].setStyle({
left: '0px',
top: '0px'
});
//冒頭のクレジットを表示
Effect.Appear(this.msg01, { delay: 2.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
Effect.Appear(this.msg02, { delay: 2.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
Effect.Fade(this.msg01, { delay: 5.5, from: 0.9, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
Effect.Fade(this.msg02, { delay: 5.5, from: 0.9, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
//エフェクト以外のコードは基本的にEventエフェクトでラップする。
new Effect.Event({
delay: 9.0,
queue: { scope: 'event', position: 'parallel' },
afterFinish: function() {
this.playMusic('tam-y23', 'bgm', { loop: true });
}.bind(this)
});
//テキスト表示
Effect.Appear(this.msg03, { delay: 8.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
Effect.Fade(this.msg03, { delay: 12.0, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.msg04, { delay: 15.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg04, { delay: 24.5, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.msg05, { delay: 18.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg05, { delay: 24.5, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.msg06, { delay: 21.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg06, { delay: 24.5, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
//背景表示（移動有）
Effect.Appear(this.bgImage[1], { delay: 11.0, from: 0.1, to: 0.8, duration: 3.0, queue: { scope: 'event', position: 'parallel' } });
new Effect.Move(this.bgImage[1], { delay: 11.0, x: -444, y: 0, duration: 6.0, mode: 'relative', queue: { scope: 'event', position: 'parallel' } });
//背景画像の切り替え
this.changeBgImg('name:wahu06');
this.bgImage[0].setStyle({
left: '0px',
top: '0px'
});
//Morphエフェクトで移動・拡大・色調変化を一気にやらせる。エフェクトは「花」
new Effect.Morph(this.msg07, {
style: {
color: '#FF1493',
fontSize: '90px',
opacity: '0.8',
left: '320px',
top: '220px'
},
beforeSetup: function() {//エフェクト開始前に処理しておきたいことはここで
this.msg07.setOpacity(0.1).show();
}.bind(this),
delay: 26.5, duration: 2.0, queue: { scope: 'event', position: 'parallel' }
});
Effect.Fade(this.msg07, { delay: 29.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//背景のクロスフェード表示
Effect.Fade(this.bgImage[1], {
afterFinish: function() {//エフェクトが終了したらあらかじめ次の背景画像に切り替えておく
this.changeBgImg('name:wahu07', 'sub');
this.bgImage[1].setStyle({
left: '0px',
top: '0px'
});
}.bind(this),
delay: 26.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.bgImage[0], { delay: 26.0, from: 0.1, to: 0.8, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//Morphエフェクト「鳥」
new Effect.Morph(this.msg08, {
style: {
color: '#228B22',
fontSize: '90px',
opacity: '0.8',
left: '350px',
top: '40px'
},
beforeSetup: function() {
this.msg08.setOpacity(0.1).show();
}.bind(this),
delay: 29.5, duration: 2.0, queue: { scope: 'event', position: 'parallel' }
});
Effect.Fade(this.msg08, { delay: 32.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//背景のクロスフェード表示
Effect.Fade(this.bgImage[0], {
afterFinish: function() {
this.changeBgImg('name:wahu08');
this.bgImage[0].setStyle({
left: '0px',
top: '0px'
});
}.bind(this),
delay: 29.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.bgImage[1], { delay: 29.0, from: 0.1, to: 0.8, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//Morphエフェクト「風」
new Effect.Morph(this.msg09, {
style: {
color: '#1E90FF',
fontSize: '90px',
opacity: '0.8',
left: '80px',
top: '220px'
},
beforeSetup: function() {
this.msg09.setOpacity(0.1).show();
}.bind(this),
delay: 32.5, duration: 2.0, queue: { scope: 'event', position: 'parallel' }
});
Effect.Fade(this.msg09, { delay: 35.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//背景のクロスフェード表示
Effect.Fade(this.bgImage[1], {
afterFinish: function() {
this.changeBgImg('name:wahu09', 'sub');
this.bgImage[1].setStyle({
left: '0px',
top: '0px'
});
}.bind(this),
delay: 32.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.bgImage[0], { delay: 32.0, from: 0.1, to: 0.8, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//Morphエフェクト「月」
new Effect.Morph(this.msg10, {
style: {
color: '#FFD700',
fontSize: '90px',
opacity: '0.8',
left: '50px',
top: '50px'
},
beforeSetup: function() {
this.msg10.setOpacity(0.1).show();
}.bind(this),
delay: 35.5, duration: 2.0, queue: { scope: 'event', position: 'parallel' }
});
Effect.Fade(this.msg10, { delay: 38.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//背景のクロスフェード表示
Effect.Fade(this.bgImage[0], {
afterFinish: function() {
this.changeBgImg('name:wahu05');
this.bgImage[0].setStyle({
left: '0px',
top: '-360px'
});
}.bind(this),
delay: 35.0, from: 0.8, to: 0.0, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.bgImage[1], { delay: 35.0, from: 0.1, to: 0.8, duration: 2.0, queue: { scope: 'event', position: 'parallel' } });
//テキスト表示
Effect.Appear(this.msg11, { delay: 40.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg11, { delay: 51.0, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.msg12, { delay: 42.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg12, { delay: 51.0, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.msg13, { delay: 44.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Fade(this.msg13, { delay: 51.0, from: 1.0, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
//Morphエフェクト「京都へ」
new Effect.Morph(this.msg14, {
style: {
fontSize: '40px',
opacity: '0.8',
left: '40px',
top: '240px'
},
beforeSetup: function() {
this.msg14.setOpacity(0.1).show();
}.bind(this),
delay: 47.0, duration: 0.5, queue: { scope: 'event', position: 'parallel' }
});
Effect.Fade(this.msg14, { delay: 48.8, from: 0.8, to: 0.0, duration: 0.5, queue: { scope: 'event', position: 'parallel' } });
//打ち消し線を引く
new Effect.Event({
delay: 48.5,
queue: { scope: 'event', position: 'parallel' },
afterFinish: function() {
this.playMusic('sword1', 'snd', { skip: true });
this.msg14.setStyle({
color: '#F00',
textDecoration: 'line-through'
});
}.bind(this)
});
//背景のクロスフェード表示（移動有）
Effect.Fade(this.bgImage[1], { delay: 38.0, from: 0.8, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
Effect.Appear(this.bgImage[0], { delay: 38.0, from: 0.1, to: 0.8, duration: 3.0, queue: { scope: 'event', position: 'parallel' } });
new Effect.Move(this.bgImage[0], { delay: 38.0, x: 0, y: 360, duration: 3.0, mode: 'relative', queue: { scope: 'event', position: 'parallel' } });
//背景をすべて消し真っ黒い画面に
Effect.Fade(this.bgImage[0], { delay: 52.5, from: 0.8, to: 0.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' } });
//クレジット表示・消去
Effect.Appear(this.msg15, { delay: 55.0, from: 0.1, to: 1.0, duration: 1.5, queue: { scope: 'event', position: 'parallel' }, transition: Effect.Transitions.sinoidal });
Effect.Fade(this.msg15, { delay: 56.8, from: 1.0, to: 0.0, duration: 0.5, queue: { scope: 'event', position: 'parallel' } });
//打ち消し線を引く
new Effect.Event({
delay: 56.5,
queue: { scope: 'event', position: 'parallel' },
afterFinish: function() {
this.playMusic('sword1', 'snd', { skip: true });
this.msg15.setStyle({
color: '#F00',
textDecoration: 'line-through'
});
}.bind(this)
});
},
..........
..........
本当はゲームっぽいデモ画面にしたかったんだけれど、和風BGMを選んでからいつの間にか路線変更してしまった……。動作などでおかしなところがあったらご連絡お願いします。
（追記）初めてこのページを読み込む場合、画像表示が大幅に遅れてしまうようなので、プリロードさせるようにしました。