2013/4/6 16:13 | Category Action Script3.0 映像トレーニング | Comment (0)
■56.Action Scriptでアニメーションを制御する
(56-12)目標に向かって進ませる[4]
(56-13)ムービークリップ同士の重なりを判定する。
//■重なり判定
if( girl_mc.hitTestObject( boy_mc) ){
boy_mc.gotoAndStop( 2);
}
else if( girl_mc.hitTestObject( fountain_mc) ){
fountain_mc.gotoAndStop( 2);
}
else if( girl_mc.hitTestObject( dog_mc) ){
dog_mc.gotoAndStop( 2);
}
else if( girl_mc.hitTestObject( home_mc) ){
home_mc.gotoAndStop( 2);
back_mc.gotoAndStop( 2);
}
else{
boy_mc.gotoAndStop( 1);
fountain_mc.gotoAndStop( 1);
dog_mc.gotoAndStop( 1);
home_mc.gotoAndStop( 1);
back_mc.gotoAndStop( 1);
}
■59.AIRアプリケーションを作成しよう！
(Chapter13)
59-1.AIRランタイムのインスートール
/ AIRアプリケーションのインストーラーを作成する
(1)Adobe AIRをインストールする
http://get.adobe.com/jp/air/
(2)Flashデータ
ch_work_01.fla
ch_work_01.swf
map.swf
menu.swf
movie.swf
photo.swf
skinOverPlaySeek.swf
./start/ch06_01.flv
(3)AIRで書き出し
★パブリッシュ設定 [ctrl+Shift+F12]
[Flash]->[Player]->[AIR2.5]
OK
※CS6
[パブリッシュ設定]ダイアログボックスの[ターゲット]を[AIR 3.2 for Desktop]に設定し、[OK]ボタンをクリックしてください。
crlt+[ENTER] ムービープレビュー
Adobe AIR形式のアプリケーションで再生される。
ch13_work_01-app.xml
(4)AIR2.5の設定
[ファィル]->[AIR2.5設定]
※CS6 [AIR3.2 for Desktop設定]になっている。
●アプリケーションとインストーラーの設定
▼一般
出力ファイル ch13_work_01.air
[]Windowsインストーラー チェック無し
バージョン 1.0 (バージョン管理)
ウィンドウスタイル : システムクローム
含めるファイル
ch_work_01.swf
ch13_work_01-app.xml
+ ボタンで追加
map.swf
menu.swf
movie.swf
photo.swf
skinOverPlaySeek.swf
./start/ch06_01.flv
▼署名
コードサイニング証明書
[作成] をクリック。
「自己署名の電子証明書を作成」
AIR 電子署名
パスワード : 学籍番号
[参照]から場所を指定して作成。
このセッション中はパスワードを保存する [チェック]
タイムスタンプを付加する。 [チェック]
・・・ チェックで5年間有効になる。
▼アイコン
16 32 48 128 iconフォルダより指定。
▼詳細
初期ウィンドウ
[]最大化を有効にする
[チェック]最小化を有効にする
[]リサイズを有効にする
[チェック]起動後に表示する
★[パブリッシュ]でAIRアプリケーションを作成！！！
★ch13_work.air が作成されるので、ダブルクリック！！！
(アプリケーションのインストーラー)
[アプリケーション]->[ch13_work_01]
というアプリが完成！！！！！！
最終的なアプリケーションは、AIR無しのPCでも動くのだろうか？？？
2013/4/5 17:53 | Category Action Script3.0 映像トレーニング | Comment (0)
■56.Action Scriptでアニメーションを制御する
おぉ～、ココからは、CS4(ActionScript2.0)と、CS5(ActionScript3.0)の映像トレーニングが2回づつあるのか！すぐ気づいてよかった！！！Action Script2.0は必要なしっと！！！
(56-4)ムービクリップを上下左右に移動させる[1]
up_btn.addEventListener( MouseEvent.CLICK, onClickUp);
function onClickUp( e:MouseEvent):void{
//girl_mc.y = girl_mc.y – 1;
girl_mc.y -= 1;
girl_mc.gotoAndStop( “back”);
}
(56-5)ムービクリップを上下左右に移動させる[2]
right_btn.addEventListener( MouseEvent.CLICK, onClickRight);
function onClickRight( e:MouseEvent):void{
girl_mc.x += 1;
girl_mc.gotoAndStop( “right”);
}
(56-6)押している間は進むようにする[1]
変数定義の説明で終わった(^_^;;
(56-7)押している間は進むようにする[2]
・・・
(56-12)目標に向かって進ませる[4]
2013/4/4 17:57 | Category Action Script3.0 映像トレーニング | Comment (0)
■55.Action Scriptの基本を理解しよう
(55-1)Action Scriptの概要[1]
(55-2)Action Scriptの概要[2] (ActionScript基礎概論)
■56.Action Scriptでアニメーションを制御する
(56-1)操作するムービークリップを作成すめ
動かすアニメーションのムービークリップの作成
(56-2)ボタンシンボルに作成する
上下左右のボタンを作成
意外と役にたった！
(56-3)ステージにシンボルを配置する
※上下左右ボタンの配置方法、整列とShift+↑ での配置方法。
結構、使える！！！
2013/4/3 18:33 | Category Flash映像トレーニング | Comment (0)
■51.フォトギャラリーを作ろう
(50-1)複数の写真を読み込んで配置する
/写真をフェードイン・アウトする
・・・
(50-5)写真用マスクをかける[4]
四角横 マスク
四角縦 マスク
を同時にかける。
2013/4/2 18:51 | Category Flash映像トレーニング | Comment (0)
※CS5形式で保存！
ch03_work_04_CS5.fla
※Flashはなんで、上位バージョンで書き込んだモノを古いバージョンで見れないんだぁ～～～
簡単にアニメなのに・・・
■50.アニメーションの基本を理解しよう
(50-3)モーショントゥイーンを利用してバスを走らせる
・・・・
(50-9)アニメーションデザイン概論
●フレームアニメーション
パラパラ漫画 gifアニメ
●トゥイーンアニメーション (トゥイーン = 間)
▼モーショントゥイーン
▼シェイプトゥイーン
●
■51.フォトギャラリーを作ろう
(50-1)複数の写真を読み込んで配置する
/写真をフェードイン・アウトする
2013/3/31 16:27 | Category Flash映像トレーニング | Comment (0)
■49.アニメーションの基本を理解しよう
(49-1)アニメーションを確認する
(49-2)タイムラインを設定する 【ch02_work_01.fla】
F5 ・・・ フレームの挿入
Shift を押しながら、タイムラインをクリックで、複数レイヤーの1フレームを選択できる。
(49-3)シンボル化する
F8 ・・・ シンボルに変換
2013/3/30 16:47 | Category アプリ開発実践フェーズ | Comment (0)
■HTML5 API
(8)Geolocation ～ 【HTML5_API/geolocation/geolocation.html】
※なんで、pdfに載っていないんだ！メモめも・・・
位置情報を取得する Geolocation APIが利用できる。
デバイス関係ななく、同じ記述で位置情報の処理が実現できる。
無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得します。
接続環境次第で、取得できる位置情報の精度や取得に掛かる時間が異なります。
ユーザーのセキュリティとプライバシーに配慮した仕様
位置情報をリクエストすれば必ず許可が必要が必要となります。
ユーザーはブラウザの確認ウィンドウで、位置情報の取得の許可をするかどうかを選択できるようになっています。
◇geolocation
位置情報を取得することができる APIです。
geolocationがサポートされているブラウザであれば、デバイス関係なしで使用することが可能です。
ローカルニュースなど位置情報からサービスを広げることも可能です。
サポート情報の確認
http://caniuse.com/#search=geolocation
http://caniuse.com/
◇位置を取得
位置を取得する方法が2つあります。
●現在の位置を取得する
navigator.geolocation.getCurrentPosition( 成功, 失敗, option)
●位置を定期的に取得する
navigator.geolocation.watchPosition( 成功, 失敗, option)
成功時には「positionオプジェクト」を取得します。
取得内容は以下の通りです。
position.coords 緯度経度などの情報
poition.timestamp 位置を取得した時刻
◇位置を取得
position.coords で取得した緯度経度の情報について
coords.latitude ・・・ 緯度
coords.longitude ・・・ 経度
coords.altitude ・・・ 高度
coords.accurancy ・・・ 正確性
coords.altitudeAccurancy ・・・ 高度の正確性
coords.heading ・・・ 方位
coords.spped ・・・ 速度
◇失敗時の取得
失敗時には「errorオブジェクト」を取得します。
取得内容は以下の通りです。
error.code ・・・ エラーコード
1.位置情報の取得が許可されていない
2.位置情報の取得が利用できない
3.タイムアウト
error.message ・・・ エラーメッセージ
◇option の指定
3つめの引数では関数を実行する時のオプションを指定します。
指定しなくても可能。
option.enableHighAccuracy ・・・ より高い正確性を求める(取得時間が遅くなる)スマフォではGPSを利用する
※スマフォでは指定しない方がいい？
option.timeout ・・・ 処理のタイムアウト
option.maximumAge ・・・ キャッシュされている位置情報オプジェクトを許容するキャッシュ時間
◇取得停止
定期的に取得する「watchPosition」を取得する方法
navigator.geolocation.clearWatch( watchID)
「watchPosition」は制作時にidを返します。
idを使用して「clearWatch」で停止させます。
※落ち着いたら、jQuery Mobileと連動してみて、iPhone でテストしてみよう！！！
★素材写真のフォルダーをコピーしよう～～～！！！
◎簡単な JavaScriptでの、無名関数の使い方を、テストしてみよう vVV
■Flash
フレームの挿入 F5
2013/3/28 19:06 | Category アプリ開発実践フェーズ | Comment (0)
■HTML5 API
(5)Canvas sample2 ～ パス(四角)を表示 ～ 【HTML5_API/canvas_sikaku.html】
ctx.beginPath();
ctx.rect(10,10,40,40);
//塗りつぶし
ctx.fillStyle = “f00″;
ctx.stroke();
ctx.closePath(); // 描画してパスが閉じている場合は、何もしない
(6)Canvas sample3 ～ 円を表示 ～ 【HTML5_API/canvas_arc.html】
//パスの開始
ctx.beginPath();
//色指定
ctx.fillStyle = “#f00″;
//線の太さ
ctx.lineWidth=5;
//円の設定（座標、半径、円のスタートとエンド、回転）
ctx.arc( 100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false); // full circle
//描画
ctx.fill();
ctx.closePath();
(7)Canvas sample3 ～ 線を描画 ～ 【HTML5_API/canvas_line.html】
●lineCapプロパティ
http://www.html5.jp/canvas/ref/property/lineCap.html
▲三角形を描画 【HTML5_API/canvas_sankaku.html】
//色指定
ctx.strokeStyle = “#000″; //need list of available colors
//線の太さ
ctx.lineWidth = 10;
//線の端の形状
ctx.lineCap = ”; // round | butt
//パスの開始
ctx.beginPath();
//始点
ctx.moveTo( 20, 200);
ctx.lineTo( 200, 200);
ctx.lineTo( 100, 20);
ctx.lineTo( 20, 200);
//自動的に閉じてくれる
ctx.closePath();
//描画
ctx.stroke();
※クローズしないと、閉じた部分の線がキレイにならない！！！
(8)audio 【HTML5_API/audio/audio.html】
2013/3/27 19:30 | Category アプリ開発実践フェーズ | Comment (0)
■jQueryMobile
(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】
data-role=”fieldcontain”
placeholder=”ヒント出力”
select ～ data-role=”slider”
3/29(金)に、Mac Book Airで試してみよう！！！
■HTML5 API
(1)WebStrage
▼sessionStorage
PHPのセッションだネ！
▼localStorage
プラウザ内に映像的にデータを保存するストレージ
保存は「ドメイン名：ポート番号」の組み合わせ「オリジン」単位で保存。
▽set
window.onload = function(){
localStorage.setItem( “test1″, “test” );
};
▽get
var get_value = localStorage.getItem( “test1″ );
document.getElementById(“test”).innerHTML = get_value;
▽remove
localStorage.removeItem( “test1″ );
(2)AppCache
▼アプリケーションキャッシュ：CacheManifestの基本
処理の流れ：
１回目HTMLをリクエスト：
キャッシュを保存
２回目HTMLをリクエスト：
利用
▽index.html
▽.htaccess
AddType text/cache-manifest .manifest
▽cache.manifest
(3)Canvas基礎
<canvas id=”＊＊” width=”1024″ height=”764″></canvas>
★注意：サイズ属性のサイズ指定はstyle属性で指定すると、うまくいかない！！！
var can = document.getElementById(“drowarea”);
var ctx = can.getContext(“2d”);
(4)Canvas sample1 ～ 文字を表示 ～ 【HTML5_API/canvas_font.html】
★参考サイト
ctx.textBaseline:文字の設置するベースライン
http://www.html5.jp/canvas/ref/property/textBaseline.html
(5)Canvas sample2 ～ パスを表示 ～ 【HTML5_API/canvas_sikaku.html】
ctx.beginPath();
ctx.rect(10,10,40,40);
ctx.stroke();
2013/3/26 17:26 | Category アプリ開発実践フェーズ | Comment (0)
■jQueryMobile
(2)jQueryMobile sample1 [ページ作成] 【sample1/index.html】
<div data-role=”page”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page2″ data-add-back-btn=”true”>
ヘッダ コンテンツ フッタ
</div>
<div data-role=”page” id=”page3″ data-add-back-btn=”true” data-back-btn-text=”戻る”>
ヘッダ コンテンツ フッタ
</div>
(3)jQueryMobile sample2 [リスト表示] 【sample2/index.html】
▼スマホ向けリストの設定
<ul data-role=”listview”>
▼テーマの設定 (背景色)
<li data-theme=”e”>
(4)jQueryMobile1 sample3 [ボタンの追加] 【sample3/index.html】
<div data-role=”header”>
<h1>ヘッダー</h1>
<a href=”#page1″>ボタン</a>
<a href=”#page3″%gt;class=”ui-btn-right”>ボタン</a>
</div>
★ヘッダの中にa要素を書くと、勝手にボタンにしてくれる。
☆class=”ui-btn-right” での設定も可能。
●複数ボタンの設置などのサンプル
http://d.hatena.ne.jp/Naotsugu/20120108/1326034322
(5)jQueryMobile1 sample4 [ページ遷移時の効果] 【sample4/index.html】
<a data-role=”button” href=”#page2″ data-transition=”slide”>slide</a>
<a data-role=”button” href=”#page2″ data-transition=”slide” data-direction=”reverse”>slide</a>
data-transition=siedup
data-transition=sieddown
data-transition=pop
data-transition=fade
data-transition=flip
data-transition=flow
data-transition=turn
data-transition=none
(5)jQueryMobile1 sample5 [インターフェースデザイン] 【sample5/index.html】
▼ボタンのアイコン表示
data-icon=”arrow-r”
▼ボタンのアイコン位置
data-iconpos=”right”
▼アイコンだけ表示
data-iconpos=”notext”
◇ボタンのグループ
▼ボタンの縦にグループ化
data-role=”controlgroup
▼ボタンの横にグループ化
data-role=”controlgroup data-type=”horizontal”
(6)jQueryMobile1 sample6 [フォーム作成] 【sample6/index.html】
data-role=”fieldcontain”
placeholder=”ヒント出力”
select ～ data-role=”slider”
3/29(金)に、Mac Book Airで試してみよう！！！