デザインの学校 ウェブデザイン実戦編 フラッシュ2回目

フラッシュ2回目の講義となりました。
が、先生から渡された資料には目がちかちか、頭はくらくらしそうなソースコードがびっしり
本日も初めから冷や汗たらたらのスタートです。
今日はフルフラッシュでサイトを完成させます。
その前に

左のボールが右に横移動して戻る上のアニメーションを
タイムラインアクションスクリプトの両方で作成してみましょー
タイムラインだけだと

タイムラインは1フレームから30フレームで右へ移動
30フレームから 60フレームで左までもどります。
これをアクションスクリプトで作ると

見えにくいですがこんな感じ。たった6行の記述で終わってしまいました。
この中で重要なのがtweenです。
tweenを使うことでコンテンツにビジュアルに効果的な動きをさせることが可能になります。
一見タイムラインでの作成の方が簡単にも見えますが、複雑なフラッシュを作るときにはアクションスクリプトを使うとタイムラインがいたずらに長くならず管理しやすいのでぜひ覚えてくださいと先生のお告げがありました。
デザイナーを目指す貴方、ぜひ覚えてものにしましょー
では、本格的にサイトを作ってみましょー
今回作るフルフラッシュサイトはリキットデザインです。
フラッシュでもリキットデザインができるなんて驚きです
まず、パーツをそれぞれ作って下のようにステージ上に配置しましょう。
なぜヘッダーやフッター、ボタンなどがバラバラした配置なのか? 
それは後のお楽しみということでどんどん進みますよ~
ではアクションスクリプトを記述していきます。
しつこいようですがリキットデザインなのでブラウザの表示サイズが変わっても常にセンターに表示されるようにします。
そこで今日のお勉強で重要になってくるのがイベントリスナーです。
一番上のレイヤーasの1フレーム目にサイトのベースになる部分を記述します。
上部はステージの基準点からいつでも各コンテンツが中心に表示されるよう記述しています。
ロードバーの記述部分は汎用的に使えるので覚えておくと便利です。
this.stop();
Stage.scaleMode=”noScale”;
Stage.align=”TL”;

//ロードバーのローディング用記述
loader.bar._xscale=0;
myInt=setInterval(load_fn, 40);
function load_fn(){
percent=Math.floor(_root.getBytesLoaded()/_root.getBytesTotal()*100);
loader.bar._xscale=percent; if (percent>=99 && _root.getBytesLoaded()>0){ 
clearInterval(_root.myInt); _root.gotoAndStop(2);  
}
}

イベントリスナー記述によりローダーも同様に画面中央に表示されます。
//イベントリスナー追加
resizeListener0 = new
Object();
resizeListener0.onResize=setPosition0;
Stage.addListener(resizeListener0);
function setPosition0() {
loader._x=Stage.width/2-loader._width/2;
loader._y=Stage.height/2-loader._height/2;
}
setPosition0();


ローディングが終わるとベースとなる画像が表示されます。
ではでは、2フレーム目に突撃です!
//ローディングのアイコン非表示
center_mc.loadingImg_mc._alpha=0;
//Wellcomeボタンの非表示
wellcom_mc._visible=false;
//tweenの宣言
import mx.transitions.
Tween; import mx.transitions.easing.*;

//イベントリスナー
//コンテンツをブラウザのセンターに読み込むイベント

resizeListener = new Object();
resizeListener.onResize=setPosition;
Stage.addListener(resizeListener);
function setPosition(){
xtween=new Tween(center_mc,”_x”,Back.easeOut,center_mc._x,Stage.width/2-center_mc._width/2,1,true);
 if(Stage.height<800){ ytween=new Tween(center_mc,"_y",Back.easeOut,center_mc._y,Stage.height/2-center_mc._height/2-50,1.2,true);  }  else{ ytween=new Tween(center_mc,"_y",Back.easeOut,center_mc._y,Stage.height/2-center_mc._height/2,1.2,true); } navixtween=new Tween(underNavi_mc,"_x",Back.easeOut,center_mc._x,Stage.width/2-center_mc._width/2,1,true); naviytween=new Tween(underNavi_mc,"_y",Back.easeOut,underNavi_mc._y,Stage.height-180,1.2,true);

//右上のアイコンをステージ右端から113pxに固定
globalNavi_mc._x=Stage.width-113;
//フッターを下端から44pxに固定
footer._y=Stage.height-44;

ここが一番難しい部分になります。
以下はbgの画像を比率を固定したままステージいっぱいに敷き詰めるソースになります。
この場合横1024・縦768は4:3(0.75)の比率になります。
この記述をしておくことでブラウザの画面を広げたときにbgの画面が足りなくなったり
ブラウザを狭くしたときにbgの画像が変形しません。
if (Stage.height/Stage.width>=0.75){
bg._xscale=Stage.height/768*100; bg._yscale=Stage.height/768*100;
}
else if (Stage.height/Stage.width<0.75){ bg._xscale=Stage.width/1024*100; bg._yscale=Stage.width/1024*100; } } setPosition();

とここまで記述するとブラウザの外側からコンテンツ部分とボタンの画像が弧を描きながら画面センターに微妙にゆれながら入ってきます。
この動きをさせるためにパーツをステージ上にバラバラにおいていたのです
やはりここでも重要になるのがtweenです。
画像が入ってくる時の縦軸・横軸に関係する秒数にずれを生じさせると微妙に揺れながらブラウザのセンターに入ります。
ちょっとしたことですがこういった部分でデザイナーのセンスが光ります

では次にボタンを押すと一番大きな黒い四角の中に画像が表示されるようにしましょー!
//ボタンクリック、ローディングして画像を読み込む
function loadFunction(x){ 
imgAlphatween=new Tween(center_mc.load_mc,”_alpha”,Regular.easeOut,100,0,1,true);
iconAlphatween=new Tween(center_mc.loadingImg_mc,”_alpha”,Regular.easeOut,0,100,1,true);
imgAlphatween.onMotionFinished=function(){ mcLoader.loadClip(“img/img”+x+”.jpg”,center_mc.load_mc);
};
}

//ローディングの終了を告知させるソース
var mcLoader:MovieClipLoader=new MovieClipLoader();
mcLoader.addListener(this);
function onLoadInit(mc:MovieClip){
center_mc.loadingImg_mc._alpha=0;
alphatween=new Tween(center_mc.load_mc,”_alpha”,Regular.easeOut,0,100,1,true);
}

//Naviボタンロールオーバー
underNavi_mc.m1.onRelease=function(){
loadFunction(1);
};
underNavi_mc.m2.onRelease=function(){
loadFunction(2);
};
underNavi_mc.m3.onRelease=function(){
loadFunction(3);


すると~ローディング後に画像が表示されました
最後にここは先生のこだわりポイント
このサイトの中では意味を持ち合わせていないけれど、覚えておけば今後何かの役に立つはず

画面右上にあるボタンを押すと「wellcome!」と表示され、マウスをボタンから離すと1秒置いて非表示になるソースです。
functionでどの位置に表示したいかを記述します。
function apComment(){
wellcom_mc._visible=true;
wellcom_mc._x=globalNavi_mc._x+49;
wellcom_mc._y=globalNavi_mc._y+70;
}

//通常は非表示
function disapComment(){
wellcom_mc._visible=false;
}

//マウスを放すと1秒後に非表示
 globalNavi_mc.onRollOut=function(){ 
_root.controlTo=setTimeout(disapComment,1000);
};

//マウスが乗っている場合は消えないようにうする定義 
globalNavi_mc.onRollOver=function(){
 clearTimeout(_root.controlTo);
apComment();
};

以上長~くなりましたが、いかがだったでしょうか
私的には嗚呼、ぜひともマスターしてみたい 
でも無理っかな~? いや~頑張ろうっかな~・・・・
2日間フラッシュを勉強しましたが奥の深さにびっくり 難しさと面白さを肌で感じました。
では皆さんごきげんよう~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP