< 次の5日分 | 前の5日分>

javascript開発環境をとりあえず作っておく。

Ajaxメモ

2009年03月18日

javascriptはコピペだけで何とかなるから大丈夫!?
と逃げ逃げの姿勢でやってきたんですが、
↓みたいなのを見せられるともう無視できんなと思い始めた次第でございます。

Javascript Super Mario

Wario Land: Shake It

仕事でもFlashで作った後で、javascriptで作ればよかった!って思うことがたまにあるんで少しずつjavascriptに慣れていこうと思います。
※簡単ながらも細かな修正が何回もやってきて、Flashでコンパイルするのがめんどくさい。などなど。

aptanaとjQueryでやっちゃおう

aptana

aptanaとはEclipseベースのWebオーサリングツールです。javascriptやらphpやらhtmlやら色々カバーしてて便利のようです。※個人的にEclipseベースのFlex Builderに慣れてしまってるので使いやすいだろう!という願望。

aptana01.jpg

jQuery

jQueryとはJavaScriptライブラリの1つのようです。まだ使い慣れてないけど、jQueryを使えば簡単にjavascriptが組める!&ブラウザの互換性が保てる!ってな部分を期待してみます。
※aptanaをインストールすればjQueryをインポートできるのでDLする必要なし。


aptanaでjQueryをインポート

プロジェクトウィンドウの該当プロジェクトを右クリックより、

【インポート】 > 【Ajaxライブラリ・インポート・ウィザード】

からjQueryのcheckboxをチェックすればOK

aptana03.jpg


aptanaでjQueryのコードアシストを設定

メニュー部分の【ウィンドウ】>【設定】より、

【Aptana】 > 【エディター】 > 【JavaScript】 > 【コードアシスト】

と選択し、jQueryのチェックボックスをcheckすればOK

aptana02.jpg

$と打ってコード補完されていればOK!

Flex BuilderやFlash DevelopでActionscriptを書く時もそうだけど、コードアシストによってエディタ様様様が言語をご教授してくれる気がします。良いエディタを使えばより勉強になると思います。コードアシストは自分にとって生命線なんです。。

さてjavascriptを勉強しようか!

下記2つの記事を見たら、javascript恐怖症が少し和らいだのでメモ

jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]

javascript初級者のオブジェクト指向とかプロトタイプとか

インターフェースって食べれるの?

FLASH勉強

2009年03月16日

大阪てら子 21 「AS3教えて!えらい人」にいってきました。

色々と勉強になる質問が飛び交い、先生達が勉強になる解答を示してくれて、私にとって、とっても有意義な時間になりました。

自分はinterface(インターフェース)について質問させてもらったんで、その内容をちょちょいとまとめておきます。

インターフェースってなに?

抽象的なクラスです。っと説明つきにくいので、↓を参照してください。

Java入門 | インタフェース

Javaの資料ですが、概念はActionScriptでもほとんど変わらないはずです。自分もモヤモヤっとしか理解してません。。。

もう少し具体的にどういう時に使うの?

インターフェースを実装 (implements)したクラスはインターフェースで定義されたメソッドを必ず実装しなければならない。(しなければコンパイルできない)

ってことは、複数人でコードを書く時にインターフェースを決めておけば、クラスが綺麗に統一されていくよー。みたいなことはググっていけば何となく理解できました。

ただし、システムのように大人数で開発することは余りなく、一人で実装することが多いFlashでは、インターフェースは必須ではないんじゃない?って疑問がふつふつと。

ということで、別な部分での利点を教えてください!

っていうことを質問したわけであります。

で、そのまとめを文章で説明しにくいので以下のasを!!

※車に無理矢理例えてみた。
※メソッドのok_wakattaYo1とok_wakattaYo2を見てなるほど!っと道が開ければ。。

teraco_osiete.as

package {
	import flash.display.DisplayObject;
	import flash.display.Sprite;

	public class teraco_osiete extends Sprite
	{
		public function teraco_osiete() {
			ok_wakattaYo1();
			ok_wakattaYo2();
		}
		
		public function ok_wakattaYo1():void {
			//var car:Car = new Car();
			//っとするところを抽象的に
			//var car:IMachine と変数宣言してみる。
			var car:IMachine = new Car();
			
			//そのままcarをaddChildするとIMachineはDisplayObjectでは
			//ないので怒られる。なんでキャストする。
			addChild(DisplayObject(car));
			
			//上記2つと同様。
			var carlogo:IMachine = new CarLogo();
			addChild(DisplayObject(carlogo));
		}
		
		public function ok_wakattaYo2():void {
			//Car(Sprite)とCarLogo(TextField)をインスタンス化して、配列にぶっこむ。
			var machines:Array = [];
			var car:Car = new Car();
			var carlogo:CarLogo = new CarLogo();
			machines.push(car);
			machines.push(carlogo);
			
			//配列の中身をfor eachでまわす時、受け取る変数をIMachineと定義する。
			//IMachineにはdrawが定義されているので問題なくdrawできる。
			//※抽象クラスを使うことによりSpriteを継承しているCarでもTextFieldを継承しているCarLogoでも
			// 変数に格納できる。
			for each (var obj:IMachine in machines) {
				trace(obj);//1ループ目[object Car] , 2ループ目[object CarLogo]
				obj.draw();
			}
		}
	}
}

import flash.display.Sprite;
import flash.text.TextField;
import machine1.IMachine;

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarクラス
 */
class Car extends Sprite implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarLogoクラス
 */
class CarLogo extends TextField implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」
 * 抽象メソッド「draw」のシグネチャを定義
 */
interface IMachine {
	function draw():void;
}

私と同じぐらいのas理解度の人はなるほどー!!ってなるはず。

shadowboxでHTML表示のメモ

Ajaxメモ

2009年03月03日

Lightbox風なやつで、HTMLやswfを表示できるjavascriptを探してたわけですが、
LightWindow →同じドメインのHTMLが開かない(IE6)
multibox →IE6で上手く開かない
MOOdalBox →IE6で上手く開かない
と、ことごとく玉砕されたため、
今流行りのshadowboxに目をつけてみました

がしかし、 shadowboxでHTML表示を行うことだけに約2、3時間ハマることに。。

失敗:'iframe'無し

  1. Shadowbox.loadPlayer(['html'], 'js/player');

成功:'iframe'有り

  1. Shadowbox.loadPlayer(['html' , 'iframe'], 'js/player');

ここでいう、「iframe」の意味がいまいち分からないのだが、「iframe」つけたらshadowboxで上手くHTML表示が出来たのでめでたしめでたし。

透過png画像が綺麗に表示されない!回避方法メモ

FLASH勉強

2009年02月25日

Flash Player10まで進んでしまってる昨今でございますが、ポータル向けのバナー制作などではレギュレーションによりFlash Player6書き出しでなければいけなかったりします。

Flash Player6書き出し&透過png画像使用時に、Flashタイムライン上では綺麗に表示されているのにパブリッシュしたら汚くなってしまっていて多いにハマったのでメモ。

Flash Player6とFlash Player9での書き出し例

Flash Player6書き出し

pngTestfp6.jpg

左側問題なし、右側は汚い

Flash Player9書き出し

pngTestfp9.jpg

両方問題なし

使用したpng画像

詰め詰めで切り出ししたpng画像(汚くなる)

pngNG.jpg

Flash Player7,8,9では問題なかったが、Flash Player6書き出しで画像が汚くなった。

1px間を空けてで切り出ししたpng画像(問題なし)

pngOK.jpg

Flash Player6,7,8,9どれも問題なし

回避方法まとめ

Flash Player6(7もたまにあるかも?)書き出しにて、透過png画像を使用する時は、切り出し時に隙間を空けるべし。

stage幅取得のタイミングをテストしてみた

FLASH勉強

2009年02月01日

Flashはブラウザに依存しない!!って思っていたいが、
SWFObject v2.1を使用し、stage.stageWidthやstage.stageHeightを 取得しようとした時にどうもFirefoxにて上手く取得できない。


ということで
テスト
してみた。

FirefoxとSafariでの結果

Firefox

stageTest_firefox.jpg

Safari

stageTest_safari.jpg

実行したactionscript

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldAutoSize;
  6.  
  7.     [SWF(backgroundColor="0xFFFFFF",frameRate="30",width="640",height="480")]
  8.     public class stageTest extends Sprite
  9.     {
  10.         private var _tf:TextField;
  11.         public const STAGEADDCHILD:String = "stageaddchild";
  12.         
  13.         public function stageTest()
  14.         {
  15.             _tf = new TextField();
  16.             //_tf.multiline = true;
  17.             _tf.autoSize = TextFieldAutoSize.LEFT;
  18.             //_tf.wordWrap = false;
  19.             addChild(_tf);
  20.             addEventListener(Event.ADDED_TO_STAGE , addStageHandler);
  21.             addEventListener(Event.ENTER_FRAME , enterframeHandler);
  22.             addEventListener(this.STAGEADDCHILD , stageAddChildHandler);
  23.         }
  24.         
  25.         private function addStageHandler(e:Event):void {
  26.             var str:String = _tf.text;
  27.             str += "Event.ADDED_TO_STAGE --" + "stageWidth = "+ stage.stageWidth + " -- " + "stageHeight = " + stage.stageHeight + "\r";
  28.             _tf.text = str;
  29.         }
  30.         
  31.         private function enterframeHandler(e:Event):void {
  32.             var str:String = _tf.text;
  33.             str += "Event.ENTER_FRAME --" + "stageWidth = "+ stage.stageWidth + " -- " + "stageHeight = " + stage.stageHeight + "\r";
  34.             _tf.text = str;
  35.             
  36.             if(stage.stageWidth>0) {
  37.                 removeEventListener(Event.ENTER_FRAME , enterframeHandler);
  38.                 dispatchEvent(new Event(STAGEADDCHILD));
  39.             }
  40.         }
  41.         
  42.         private function stageAddChildHandler(e:Event):void {
  43.             var str:String = _tf.text;
  44.             str += "stageOK";
  45.             _tf.text = str;
  46.             
  47.         }
  48.     }
  49. }

結果を踏まえて

Event.ADDED_TO_STAGEでイベント待ちすればOKとか、 Event.ENTER_FRAMEを一回ループすればOKと思っていたのですが、 どちらもダメのようです。

stage.stageWidthが取得できるまで待ち、dispatchEventしたほうがよさげ。

SWFObject v2.1の問題な気もしますが、みんなどういう対処しているのかな。。

< 次の5日分 | 前の5日分>
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
クラスで書けるようになった。配列のpushとかspliceとかsliceとかややこしい部分の辞書代わりにも使ってます。XML関係もこれで覚えた。
ActionScript 3.0 アニメーション
vx,Math,cos,sinとか???な数学的な部分をこの本で理解できた気がします。逃げたいジャンルだけどFLASHに必須なジャンルなのよね。。
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
ActionScript応用への第一歩。ただこれを読む前に入門ノート1を先に読んでおいた方がよさそう。ASの世界が広がった気がする本です。
Flash Creative Workshop
FLASHを始めて右も左も分からない時に救世主となった本。FLASHサイト制作法がなるほど!っと。ActionScriptバリバリの人はスルー。
FLASH OOP for ActionScript 3.0
FLASHの「今の主流」を知ることが出来る本。筆者の方々は総勢10人以上でかつ現在活躍中の方々ばかりなんでミーハー的な読み方もありかも。