flash
flashでつくるメニューバー
1.新規シンボルでヒット部分にだけ四角図形を入れて透明なボタンを作成
2.ボタンインスタンスをx軸上60〜340の間に等間隔で設置し以下のアクションスクリプトを記述(目標値はそれぞれのx座標)
on(rollOver){ mc.xm=60; /*スライダー(インスタンス名:mc)の目標値xmとして60を指定*/ }
3.ボタンインスタンスと同じ大きさのスライダー(mc)を作成しアクションスクリプトを作成
onClipEvent (load) { var xm:Number = 60;/*読み込まれた時のmcの初期値*/ speed = 8;/*吸着するスピード*/ } onClipEvent (enterFrame) { this._x += (xm-this._x)/speed; }
4.メニュー文字を別レイヤーで記述し、レイヤーを上から文字、ボタン、スライダーにおく
ActionScript2.0
Dateクラス
デジタル時計
ムービークリップ(インスタンス名:time_mc)の中にダイナミックテキスト(h_txt,m_txt,s_txt)を入れて、タイムライン上に以下のActionScriptを記述
time_mc.onEnterFrame=function(){ var new_time:Date=new Date(); time_mc.h_txt.text=new_time.getHours(); minute=new_time.getMinutes(); if(minute < 10) {minute="0"+minute;}; time_mc.m_txt.text=minute; second=new_time.getSeconds(); if(second < 10) {second = "0" + second;}; time_mc.s_txt.text=second; };
アナログ時計
長針(minutes_mc)、短針(hours_mc)、秒針(seconds_mc)としてタイムラインフレーム上にActionScriptを記述
this.onEnterFrame=function(){ var time:Date=new Date(); seconds_mc._rotation=time.getSeconds()/60*360; minutes_mc._rotation=time.getMinutes()/60*360; hours_mc._rotation=time.getHours()/24*720+time.getMinutes()/60*30; }
カレンダー
年(インスタンス名:y)、月(m)、日(d)、曜日(w)をタイムラインにて記述
var new_date:Date=new Date(); this.onEnterFrame=function(){ y.text=new_date.getFullYear()+"年"; m.text=new_date.getMonth()+1+"月"; d.text=new_date.getDate()+"日"; week=new Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"); w.text=week[new_date.getDay()]; }
flash ActionScriptの自宅練習
ActionScript2.0
ステージ内にマウスを乗せると遅れながら吸着します。
flash ActionScriptの自宅練習
ActionScript2.0
ボールのクリップアクション内に上下運動、タイムラインにて横の動きを設定しました。ボールが止まったあとにbtn1がタイムライン再生、btn2がムービークリップの再生を指定しています。
名詞デザイン(Illustrator)
先週の講義全般と今後のブログ方針
先週ははじめてのサイト作成を行いました。
まだタイトルやmeta要素も含めて微修正していく予定ですがひとまず作成したものです。はじめてのこと尽くしで順調にいかないことが多かったですが、しっかりと反省と改善点をみつけて今後に生かして生きたいと思います。
広島カープのデータサイト
http://snowman.main.jp/carp/
ブログに関してですが、今までは日付別のタイトルが『講義・・・日目』とだけあり、あとで見直すときに分かりづらいので今後は出来る限りカテゴリーと内容を含めて記述していきます。
IllustratorCS5でトリムマーク作成
***トリムマークとは・・・
印刷物を作成する場合に、断裁や見当合わせの基準となるマークのことをいう。トンボともいわれる。断裁用に四隅にコーナートンボ、印刷の位置合わせ用に四辺中央にセンタートンボの2つが基本だが、折り目をつけるときに使われる折りトンボなどもある。ちなみに日本と海外はトリムマーク(トンボ)の形状が違うため、日本のトンボを指定してやるとよい。
Illustratorのバージョンによりトリムマーク作成の手順が変わるがCS5では以下の2通りできる。
■オブジェクト指定(パス)
1.仕上がりサイズとなる矩形ボックスを作成(A4:210mm×297mm、名詞:91mm×55mmなど)
2.塗りと線を『なし』に設定
※マーク位置がこれをしないと線の分だけ微妙に大きくなる
3.[オブジェクトートリムマークの作成]を指定
4.矩形ボックスをガイド化(Ctrl+5)
5.作成したトリムマークは選択可能であるが、移動しないようにロックをかけておく
(Ctrl+2)
■効果指定(アピアランス属性)
1.矩形ボックスを作成
2.塗りと線を『なし』に設定
3.[効果ートリムマーク]を指定
4.このトリムマークはアピアランス属性のために選択できないが、矩形ボックスの変形に追従して変形が可能
5.パス指定してやる場合は、[オブジェクトーアピアランスを分割]してやる
講義37日目
JavaScript
【実践課題A】
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>実践課題A</title> </head> <body> <script> <!-- var kuji=["大吉","中吉","小吉","吉","凶"]; var i=Math.floor(Math.random()*kuji.length); document.write(kuji[i]); --> </script> </body> </html>
【実践課題B】
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>実践課題B</title> <script> <!-- var prodName=['リラックスチェア','リラックスデスク','ブックスタンド']; var prodPrice=[4000,12000,800]; //--> </script> </head> <body> <table border=1> <tr> <th>製品名</th> <th>価格</th> </tr> <script> <!-- for(var i=0;i<prodName.length;i++){ document.write('<tr>'); document.write('<td>'+prodName[i]+'<\/td>'); document.write('<td>'+prodPrice[i]+'円'+'<\/td>'); document.write('<\/tr>'); } //--> </script> </table> </body> </html>
【実践課題C】
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>実践課題C</title> <script> <!-- var linkName = ['ホーム','会社情報','製品情報','お問い合せ']; //--> </script> </head> <body> <script> <!-- for (var i=0;i<linkName.length;i++){ document.write('<ul>'); document.write('<li>'+'<a href="#">'+linkName[i]+'<\/a>'+'<\/li>'); document.write('<\/ul>'); } //--> </script> </body> </html>
【実践課題E】
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>実践課題E</title> <script> <!-- var rate=[300,450,520]; //--> </script> </head> <body> <table border="1"> <tr> <th scope="col">個数</th> <th scope="col">商品A</th> <th scope="col">商品B</th> <th scope="col">商品C</th> </tr> <script> <!-- for(i=1;i<=10;i++){ document.write('<tr>'); document.write('<th scope="row">'+(i)+'</th>'); for (var j=0;j<rate.length;j++){ document.write('<td>'+rate[j]*(i)+'円'+'</td>'); } document.write('<\/tr>'); } //--> </script> </table> </body> </html>