Loadクラス(ActionScript3.0)

外部のイメージファイルをロードするときに使用するクラス。

JPEG、GIF、PNG、SWFファイルを読み込むことができる。

 

手順

1.Loaderコンストラクタを引数なしで実行してLoaderクラスのインスタンスを生成する。

2.ロードするイメージのURLを表すURLRequestクラスのインスタンスを生成する。

3.URLRequestオブジェクトを引数にLoaderオブジェクトのload()メソッドを実行する。

4.Loaderオブジェクトを引数に表示オブジェクトコンテナのaddChild()メソッドを実行する。

 

//Loaderオブジェクトの生成
var img01:Loader = new Loader();
//URLの設定
var theUrl:URLRequest = new URLRequest("image/photo01.png");

//イメージをロード
img01.load(theUrl);
//座標の設定
img01.x = 100;
img01.y = 100;

//ステージに追加
addChild(img01);

 

 

ActionScript3.0 ドキュメントクラスの基本メモ

1.ドキュメントクラスのメリット

 

  ⅰ.クラスの継承が利用できる

    通常のクラスと同じく、作成したいドキュメントクラスを継承する別のドキュメントクラスを作成することができるので、クラスの再利用が可能。

 

  ⅱ.複数のムービーで同じプログラムの使い回しが簡単

    他のFlashドキュメントでも、同じドキュメントクラスを利用できるためプログラムの使い回しが簡単。

 

  ⅲ.Flash以外のアプリケーション(開発環境)でも利用が可能

 

 

2.ドキュメントクラスにする条件

 

  ⅰ.MovieClipクラスもしくはSpliteクラスを継承する

 

  ⅱ.必要なクラスはすべてインポートする

 

  ⅲ.ステージに配置したインスタンスは変数で定義しない

 

 

3.ドキュメントクラスの作成

 

  カスタムクラス同様に、クラス名とASファイル名を同じにして、設定したASファイルのリストを表示し、これをFlashドキュメントと同じ階層に保存する。

 

  設定は、プロパティを表示し、ステージ外をクリック、そうするとプロパティにドキュメントクラスを設定するボックスが表示され、そこにクラス名を入力する。

 

 

  

ActionScript3.0 カスタムクラスの基本メモ

オリジナルのクラスであるカスタムクラスは、ActionScript3.0の場合ASファイルという外部テキストファイルに記述する。(拡張子「.as」のテキストファイル)

 

◎カスタムクラスの基本的な書式

package パッケージ名{

     import インポートするクラス

     public クラス名{

         変数の宣言

         コンストラクタの定義

         メソッドの定義

     }

}

 

 

Point!

ⅰ.パッケージ名はクラスが属するパッケージを示す。

  (パッケージ名を省略するとデフォルト見なされ、Flashドキュメントと同じディレクトリに保存される。)

 

ⅱ.クラス名とファイル名は同じにする。

  クラス名が「thanks」の場合、ファイル名を「thanks.as」にする。

 

ⅲ.アクセス修飾子

  フィールド変数とメソッドをあわせてクラスのメンバーと呼び、個々のメンバーには、どのクラスからアクセス可能かを、アクセス修飾子と呼ばれる属性で設定することができる。

 

internal ・・・同じパッケージ内のクラスから参照可能

private ・・・同じクラス内からのみアクセス可能

protected ・・・同じクラスおよび派生クラス(そのクラスを継承するクラス)からアクセス可能

public ・・・任意のクラスからアクセス可能

 

※通常のメソッドはアクセス修飾子性を指定していないと「internal」、コンストラクタは「public」と見なされる。

 

 

if文メモ

1.if 文

  if ( 条件式 ) {

  ステートメント1;

  ステートメント2;

  .....

  }

 

  条件が成り立つかどうかの判断の基準はさまざまで、ActionScriptの場合は、条件式の結果が「0」、「null」、「undefined」、および、空文字列「""」以外の場合には、条件が成り立つと判断する。

 

 

2.if ~else 文

  if ( 条件式 ) {

     条件式が成り立った場合のステートメント1;

     条件式が成り立った場合のステートメント2;

     ・・・・・

  } eles {

     条件式が成り立たなくなった場合のステートメント1;

     条件式が成り立たなくなった場合のステートメント2;

     ・・・・・

  }

 

 

3.if ~else 文の組み合わせ

  if ( 条件式 1) {

     条件式1が成り立った場合の処理

  } eles if ( 条件式2 ){

     条件式1が成り立たず、条件式2が成り立った場合の処理

  } eles if ( 条件式3 ){

     条件式1,2が成り立たず、条件式3が成り立った場合の処理

  }eles {

     すべての条件が成り立たなかった場合の処理

  }

 

  if~eles文を組み合わせることで、複数の条件をテストし処理を分岐させることができる。

 

 

4.条件演算子

  「?:」を使ってif~eles文と同じような処理を行うことができる。

  書式としては、以下のものになる。

  条件式 ? 式A : 式B

  → 条件式が成り立てば式Aが実行され、そうでなければ式Bが実行される。

 

  var score:uint;
  var result:String;


  score = X ;

        ↑ このXに入る値によって合否の判定を行う


  result = (score >= 80) ? "合格" : "不合格";
  trace(result);

 

 

5.switch文

  switch文は、if 文のような「~より小さい場合」、「~より大きい場合」といったものではなく、条件式の値に応じた細かい分岐を行うことができるもの。

 

  var month:uint;

  //月の値を代入
  month = 1;

  switch(month) {
   case 12:
   case 1:
   case 2:
         trace("冬");
          break;
   case 3:
   case 4:
   case 5:
         trace("春");
         break;
   case 6:
   case 7:
   case 8:
         trace("夏");
         break;
   case 9:
   case 10:
   case 11:
         trace("秋");
         break;
   default:
    trace("12以下の数値を指定してください");
  }

 

 

オブジェクト指向の基本的な考え方とクラス

1.オブジェクト指向言語の基本的な考え方

  オブジェクト指向言語では、オブジェクトに対してデータ操作をモデル化していきます。

                         プロパティ↑    ↑メソッド

 

  例えば車をモデル化したオブジェクトの場合

     [ 車 ]

  プロパティ → 名前 色

  メソッド → 進む 曲がる

 

 

2.継承

  継承はオブジェクト指向言語の概念の一つです。

  既存のオブジェクトのプロパティとメソッドを引き継いで、新たに別のプロパティやメソッドを追加したオブジェクトを作ることができます。

 

  例えば先ほどモデル化した車のプロパティとメソッドを継承して、新たに機能を追加したスーパーカーを作ることができます。

  [ スーパーカー ]

  プロパティ → 名前 色 金額

  メソッド → 進む 曲がる 高速走行

 

 

3.クラス

  クラスはオブジェクトの設計図のようなもので、オブジェクトの実態はクラスを基に作られます。

  そして、クラスによって作られたオブジェクトのことをインスタンスと呼び、そのインスタンスはそれぞれ個別のプロパティを持つことができます。

 

  例えば。。。

  車クラスから車A、車Bを作るとしたら、それぞれのプロパティは以下のようになります。

  インスタンス:車A            インスタンス:車B

  [ プロパティ ]               [ プロパティ ]

  名前:A                   名前:B

  色:赤                     色:青

 

  ActionScriptによるプログラムでは、ムービークリップならMovieClipクラス、ボタンならSimpleButtonクラス、テキストフィールドならTextFieldクラスという感じで、すべての要素をオブジェクトとして扱います。

 

 

ローディング画面作成(ActionScript3.0)

1.イベントリスナーの登録

  ローディングで使用するイベントは「Event.ENTER_FRAME」です。

  これにリスナー関数のloadCheakを加えて以下のようにする。

  → this.addEventListener(Event.ENTER_FRAME,loadCheak);

     //次にloadが完了するまで1フレーム目で止めておくためのstop();を記述する。

     stop(); 

 

  一先ずこれでイベントリスナー登録の部分は完了。

 

 

2.ロードされたデータのパーセンテージを求める

  function loadCheck(event:Event):void {
   var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);

  }

 

  int は整数の変数定義するために使用。(percentは変数名)

  loaderInfoはMovieClipのプロパティで、ファイルのロード状況を管理するもの。

  bytesLoaded はロードしたバイト数で、bytesTotal はムービーの総バイト数。

  最後にこれらを囲んでいる Math.ceil()は小数点以下を切り上げるメソッド。

 

 

3.求めたパーセントの値をテキストフィールドに表示する

  テキストフィールドに値を代入する基本の型は「インスタンス名.text = 値 ;」です。

  この型に値を入れ込むと以下のものになる。

  → percentArea.text = percent + "%";

 

 

4.100%ロードされたときの処理を行う

  必要なのは、この2つ。

  ⅰ.イベントリスナーの終了

  ⅱ.次のアクション(10フレーム目に移動etc)

 

  これを言葉にして言い換えると以下のものになる。

  →「もしローディングが100%になったらイベントリスナーを終了させて10フレーム目に行く

  あとは、この文章通りにスクリプトを記述すればいいだけ。

 

    もし100%ロードしたら

  → if(parcent >= 100){

    イベントリスナーの終了

    10フレーム目に移動

    }

 

  イベントリスナーの終了

  → this.removeEventListener(Event.ENTER_FRAME,loadCheak);

 

  10フレーム目に移動

  → gotoAndPlay(10);

 

if (percent >= 100) {
    this.removeEventListener(Event.ENTER_FRAME, loadCheck);
   gotoAndPlay(10);
   }

 

 

5.スクリプトを組み合わせる

  3と4で作ったスクリプトを2のvar pacent:int = ~~~; のあとに挿入する。

 


addEventListener(Event.ENTER_FRAME, loadCheck);
stop();

 

function loadCheck(event:Event):void {
 var percent:int = Math.ceil(loaderInfo.bytesLoaded / loaderInfo.bytesTotal * 100);


 percentArea.text = percent + "%";


 if (percent >= 100) {
  removeEventListener(Event.ENTER_FRAME, loadCheck);
  gotoAndPlay(10);
  }

 

}

 

 

ボタンをクリックしてリンク先にジャンプ(ActionScript3.0)

 

指定したURLにジャンプするには二つの処理が必要となる。

 

1.URLRequestのインスタンスを生成する。

 

  ◎ var 変数名 : 変数の型 = 値;

          ↑ この形に基づいて実際にリンク先にジャンプするステートメントを作成すると以下のようになる。

  var theURL : URLRequest = new URLRequest("http://yrg.yoshifumiohama.com/"); 

 

 

2.navigateToURL()関数の実行。

  

  navigateToURL()

  →URLリクエストの結果を現在のブラウザウィンドウ/新規ウィンドウに表示させることができる。

 

  引数には、1.で作った変数theURLを渡す。

  つまり、 ステートメントとしてはこのようになる。

  → navigateToURL(theURL);

 

 

ここまで来たらあとは、以下のようにボタンを押したら1.2.を実行するというスクリプトを記述すればいい。

 

  jump_btn.addEventListener(MouseEvent.Click,gotoURL);

  function gotoURL(event:MouseEvent):void{

     var theURL:URLRequest = new URLRequest("http://yrg.yoshifumiohama.com/")

     navigateToURL(theURL);

  }

 

※複数のボタンがある場合は、一つ目と異なるリスナー関数を与えて、ジャンプ先のURLを変更してあげればOK。

 

 

ActionScript3.0におけるイベント処理方法

ActionScript3.0におけるイベント処理方法はActionScript2.0と異なる。

 

ActionScript3.0では、イベントリスナーという関数をインスタンスに登録して、目的のイベント(ボタンを押すetc)を監視する方法が採用されている。

 

1.イベントリスナーの登録

インスタンス.addEventListener(イベント,リスナー関数);

 

2.リスナー関数の定義

function リスナー関数(event:クラス):void{

        実行するステートメント

}

 

 

例えば。。。

 

//startボタンがクリックされたらplaymovie()関数を呼び出す
start_btn.addEventListener(MouseEvent.CLICK, playmovie);

                                              ↑ イベント      ↑ リスナー関数

 

//ムービーを再生する
function playmovie(event:MouseEvent):void {

                                        ↑ クラス  ↑ 戻り値なし
 ball_mc.play();
}

 

 

ActionScript3.0を勉強してみたい!

と思いまして、とりあえず評判のいい入門書2冊とリファレンス1冊、計3冊を揃えてみました。。。

 

並べるとなかなかのボリュームです。

 

買って満足で終わらないためにしっかりと勉強したいなと思います。

 

ちなみに購入したのはこの3冊です。

1.ActionScript3.0 プログラミング入門 - 大津 真 [著]            

 ActionScript3.0プログラム入門

 

2.Adobe Flash CS3 ActionScript3.0 入門ノート - 大重 美幸 [著]

 Adobe Flash CS3  ActionScript3.0 入門ノート

 

3.ActionScripy3.0 ビジュアル・リファレンス - トップスタジオ [編著]                 

  ActionScript3.0 ビジュアル・リファレンス

 

 

Flash-XML読み込み(データ場所の指定方法)

読み込んだXMLから必要なデータを得るためには、その欲しいデータの場所を指定する必要がある。
目的の情報にどのようにしてたどり着くかを理解することはXMLを学ぶ上で重要となる。


◎theXML.firstChildの指定範囲

<?xml version="1.0" encoding="ISO-8859-1"?>
<car>
<honda type="carname1">S2000</honda>
<bmw type="carname2">Z4</bmw>
<mercedesbenz type="carname3">SLK</mercedesbenz>
</car>



◎theXML.firstChild.childNodesの指定範囲

<?xml version="1.0" encoding="ISO-8859-1"?>
<car>
<honda type="carname1">S2000</honda>
<bmw type="carname2">Z4</bmw>
<mercedesbenz type="carname3">SLK</mercedesbenz>

</car>


◎theXML.firstChild.firstChildの指定範囲

<?xml version="1.0" encoding="ISO-8859-1"?>
<car>
<honda type="carname1">S2000</honda>
<bmw type="carname2">Z4</bmw>
<mercedesbenz type="carname3">SLK</mercedesbenz>
</car>


◎theXML.firstChild.firstChild.attributes.typeの指定範囲

<?xml version="1.0" encoding="ISO-8859-1"?>
<car>
<honda type="carname1">S2000</honda>
<bmw type="carname2">Z4</bmw>
<mercedesbenz type="carname3">SLK</mercedesbenz>
</car>

→属性は.attributesを使うことで指定することができる


◎theXML.firstChild.firstChild.attributes.nodeValueの指定範囲

<?xml version="1.0" encoding="ISO-8859-1"?>
<car>
<honda type="carname1">S2000</honda>
<bmw type="carname2">Z4</bmw>
<mercedesbenz type="carname3">SLK</mercedesbenz>
</car>


iMac

imac-photo.jpg

去年の夏頃から今のパソコンに限界を感じており、先日やっとの思いでiMacを購入しました。

もともと私はWindowsユーザーだったのですが、今後の事も考えて(WebのMac検証、Mac操作の習得、etc)思い切ってMacに乗り換えてみました。

まぁ実は、学校に通っていた時に知り合った友人がMacユーザーで、その友人がさり気なくMacを使いこなしている姿が何となくカッコ良く見え、自分もああいう風に使いこなしてみたいと思ったことが購入の決め手になったという事は誰にも内緒だったりします笑

現在、Macを使い始めて数日が経とうとしてますが、まだまだ手探り状態です。

これから少しづつ勉強して、使いこなせるようになりたいと思います。

また何かMacでこれはオモシロイ!これはスゴい!と思ったことがあれば、アウトプットしていきたいと思います。
 
 

エラスティックレイアウト

この間購入したXHTML+CSSの本で初めて知ったことがあったので、メモついでに。

このエラスティックレイアウトはユーザーの文字サイズ(ブラウジング環境)変更に伴い、
レイアウト全体が拡大縮小するように変化するレイアウト手法で、固定幅レイアウトと可変レイアウトの中間のようなものらしいです。


【設定方法】
使えそうな割に設定方法は簡単で、固定レイアウトを可変レイアウトにする際に、
Widthの単位を「px」から「%」に変えるのと同様にWidthの単位を「em」に変えるだけで変更可能です。


【単位・単位の変換方法】
「em」は、1文字分の長さを1emとする相対的な単位で、単位の変換方法としては、
例えば文字サイズが10pxの時、Width850pxを「em」単位に変換する場合は、850÷10=85 といった感じで85emとなります。


【注意点】
まれに文字サイズを大きくした場合、横スクロールが発生してしまうことがあるそうですが、
max-widthプロパティを指定して最大幅を持たせることで回避することが出来るそうです。


本のページに変更前と変更後のイメージがあったのですが、見栄えが大分違いました。
機会があれば一度試してみたいと思います。

XHTML+CSS


xhtmlcss2.jpg

このブログをリニューアルをするにあたり、マークアップに関して復習していたほうがいいと思い、復習用に本を一冊購入しました。

MdN発行の「XHTML&CSSデザイン基本原則、これだけ。」という本で、「効果的かつ効率的なCSSレイアウトのために。これだけ読めばわかります、スタイルシートの現在。」と「初級者から今一度復習したいという中級者の復習向けに書かれている。」という謳い文句に惹かれました。笑

まぁ、なにはともあれ、せっかく買ったので買って満足という自身によくあるパターンに陥る前にしっかり復習したいと思います。







リニューアル

この度、MTの勉強ついでにいままで学校の授業で作ったまま放置していたブログをリニューアルしました。

せっかくのチャンスなので、これを機にブログに目覚めたいと目論んでます。笑

ちなみにこのブログでは、Web制作に関していろいろ学んだりしたものの記録と自身の日常生活においての驚きや発見、 又は興味を持ったものなどを書く予定でいます。

また、今後も何かいいなと思ったものがあれば、順次リニューアルしていく予定です。


RSS
Links

▲ トップページへ戻る