WEB

WEB

お仕事であるWEB制作、WEBデザイン、グラフィックデザインについてのお話

GoogleMAPとGooglePlace

Googleプレイスについて調べてみた。

GoogleMAPとGooglePlace
久しぶりにお仕事の話。お客さんからGoogleプレイスの設定ってどうやるの?という質問をうけたのでいろいろと調査してみた。

More >

AS3.0勉強するときに読んだ本まとめ

2010年の10月くらいから急速にAS3.0への興味がなくなった。
このブログへのアクセス見ると、AS3.0関連の検索とカテゴリアーカイブのアクセスが多いから申し訳ないけど。
というかほかのものに興味がわいてしまったといったほうがいいかな。
AS3.0の書籍を買っては読み、買っては読み、ある程度AS3.0に慣れてきてもう一歩進もうという段階だったけど、今のご時勢にフラッシュかー、という思いが邪魔をするんだな。結局iPhoneアプリへの書き出しできるようになったみたいだけど。

ということで一度AS3.0の学習は保留して、AS3.0関係で読んだ本を載せておこう。下の本一通り読みつつソースを打ち込んでいけば初心者レベルのAS3.0は書けるんでないかな(このブログで書いたソースくらい)と思う。

学習したのはほとんど早朝。1時間半から2時間を土日以外の平日はAS3.0のソース打ち込んで理解するように努めたよ。新しいこと学ぼうと思っている人は時間を決めて25日間くらい継続すると、習慣化するよ!

速習Webデザイン ActionScript 3.0

速習Webデザイン ActionScript 3.0
林 拓也
技術評論社
売り上げランキング: 15361

この本は良かった。この本のおかげでAS3.0が好きになった。「なんだ!簡単ジャン!」って
AS3.0にアレルギーお持ちのお客様はまずこの本一通りよむと良かろう。

[改訂版]ActionScript3.0プログラミング入門 for Adobe Flash CS4/CS3

[改訂版]ActionScript3.0プログラミング入門 for Adobe Flash CS4/CS3
大津 真
ビー・エヌ・エヌ新社
売り上げランキング: 268398

速習Webデザイン ActionScript 3.0を読んだあとにこの本読んだ。こちらの本もとっつきやすくてよかったな。うむ。

Adobe Flash CS4 詳細!ActionScript3.0入門ノート

Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)
大重 美幸
ソーテック社
売り上げランキング: 93267

この本も読んだ。以前会社でAdobe Flash CS3 詳細! ActionScript 3.0 入門ノートを読んでぜんぜん入門じゃないじゃん!と思いながらソースを打ち込んで体を慣らしたのでその書籍に比べればわかりやすく説明されていた。

ここに載せた以外の本も読んだし、プログレッションの本もよんだんだけどとりあえず個人的に好みをチョイス!

Progression4

Progression4いじってみた。

Progression4

FLASHいじりのついでに以前から気になっていたFLASHのフレームワーク、Progression4をインストールしていじってみた。

progression

使ってみた感想

WEBでのprogression4の特集記事やら参考書籍などを片手にprogressionの制作方法を学んでみた。

progressionでは、コンポーネントスタイル、タイムラインスタイル、クラススタイルの3つの開発スタイルを選べる。
こりゃたしかに楽だと思ったのが、コンポーネントスタイル。ロールオーバーボタンのコンポーネントをドラッグドロップでタイムラインにUP、OVERのラベル付きでフレームが生成されたり、ローディングバーもスクリプト一切書かずに作れたりと、簡単なフルフラッシュサイトならスクリプト無しで作れてしまう。

プログレッションはフルフラッシュサイト作成だけしか使えないかと思ったら、バナーにも使えるようなので、次回FLASHムービー制作の案件があったら使ってみようと思う。flashの仕事自体ほとんどないんだけど。

ただ1つだけ、あのことProgressionのこと知っていれば劇的に作業時間が短縮できたのに…。という案件が頭に浮かぶ。

AS3でNowLoadingを作るメモ

WEBサイトにFLASHを掲載する場合必ずと言っていいほど必要なpreLoaderというかNowLoadingの仕組み。設置や作り方がわからなくて、FLASHややこしいとか思ってる人も多いはず。

ENTERFRAMEアクションでLoaderInfo.bytesLoadedとLoaderInfo.bytesTotalを利用する方法。

EnterFrameアクションでデータが読み込まれたパーセンテージを表示する。
PreLoader.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package MyAss {
	import flash.display.MovieClip;
	import flash.events.*;
	import flash.display.LoaderInfo;
	import flash.text.TextField;
 
 
	public class PreLoader extends MovieClip {
		public var totalBytes:int;
		public var loadedBytes:int;
		public var loadPercent:int;
 
		public function PreLoader()  {
 
			stage.addEventListener(Event.ENTER_FRAME, loadEnterFrame);
		}
		function loadEnterFrame(evt:Event):void  {
			totalBytes = this.root.loaderInfo.bytesTotal;
			 loadedBytes = this.root.loaderInfo.bytesLoaded;
 
			 loadPercent = Math.ceil( (loadedBytes / totalBytes ) * 100 );
			trace(loadPercent + "%");
 
			loaded_txt.text =String( loadPercent );
 
 
			if(loadedBytes >= totalBytes) {
 
					MovieClip(this.parent).gotoAndStop(2);
			}
		}
	}
}

ライブラリにダイナミックテキスト付きのムービークリップシンボルを作ってそこからこのクラスファイルにリンケージして使う。
そのムービークリップシンボルの中にあるダイナミックテキストのインスタンス名がloaded_txt。

ローダー状況を取得する

http://hakuhin.jp/as3/loader.html#LOADER_00

こちらのサイトは解説が分かりやすかったです。

digitalnatureのMystiqueというテーマに感動した。

最近はお仕事でWEBサイトを作るときWordPressを使うことも多くなってきました。

しかしいままで個人のプライベートなブログでWordPress使ったことありませんでした。
で今回ブログのテンプレートを探して研究してみたのですが、

今使っているテーマ「Mystique」というやつがすごいので感動しました。
もう、管理画面から設定がいろいろ変えられてすごく便利。もうずっとこのテーマでもいいかしらと思うくらい。

  • 背景色が変えられる。
  • サイト上部のtwitterICONの設定ができる。
  • ロゴ画像が設定できる。
  • サムネールが設定できる

あと色々。
で気に入って自分でテンプレート作るまではこのテンプレートを使おうと思ってます。
しかし、アダルト系のサイトで同じテンプレート使ってるの見つけてしまうとがっかり感がハンパねぇなぁ。

as3でTwitterつぶやき読み込み覚書き

This movie requires Flash Player 9

※APIの仕様が変わったのか、2010/10時点で上記のFLASH動きません。未調査状態です
→気のせいでしたw

TwitterとFLASHの連携について調べてみたのでメモ。
別ドメイン間(クロスドメイン)でtwitterのつぶやきを取得は
FLASHだけではできないので一度FLASHと同じドメインにあるPHPでつぶやきのXMLファイルを取得してきてから、FLASHで読み込ませる。

FLASH本体のソース

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var xmlLoader:URLLoader;
var bodyArray:Array;
var userArray:Array;
var iXML:XML;
var NowTwit:int = 0;
 
init();
 
function init():void {
	var n:int = Math.floor(Math.random()*1000000);
	var xmlURL:String = "http://yourdomein.com/proxy.php?url=http://twitter.com/statuses/public_timeline.xml?cache="+n;
	xmlLoader = new URLLoader();
	xmlLoader.addEventListener(Event.COMPLETE, traceComplete);
	xmlLoader.addEventListener(ProgressEvent.PROGRESS, xProgress);
	xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, XmlErrorHandler);
	xmlLoader.load(new URLRequest(xmlURL));
}
 
function xTimerEventHandler(evt:TimerEvent):void {
	user_txt.text =userArray[NowTwit];
	twit_txt.text = bodyArray[NowTwit];
	NowTwit++;
	if(NowTwit >= bodyArray.length ) {
		NowTwit = 0;
	}
 
}
 
function xProgress(evt:ProgressEvent):void {
 
twit_txt.text = "つぶやきロード中";
 
}
 
function traceComplete(evt:Event):void {
 
		iXML = new XML(xmlLoader.data);
		bodyArray = new Array;
		userArray = new Array;
 
		for(var t:int = 1; t <= 10; t++) {
 
			var body:String = String(iXML.status[t-1].text);
			var user:String = String(iXML.status[t-1].user.name);
			userArray.push(user);
			bodyArray.push(body);
		}
 
	var timerObj:Timer = new Timer(3000);
	timerObj.addEventListener(TimerEvent.TIMER, xTimerEventHandler);
	timerObj.start();
}
 
function XmlErrorHandler(evt:Event):void {
	trace("xmlError");
}

alt alt-scape weblog
こちらのブログの記事とソースを参考にさせていただきました。

ここにメモ書きしたソースは間違い等ある可能性があるので参考にする場合はご注意を。

proxy.php
1
2
3
4
5
6
<?php
    if(isset($_GET["url"])) {
		$file = readfile($_GET["url"]);
	return $file;
	}
?>

XML読み込むPHP。今回PHPは動けばよしということでスルー。
このスクリプト試してた時にtwitterのAPIにアクセスしまくってたら
Rate limit exceeded. Clients may not make more than 150 requests per hour.
っていうXMLが返ってきた。1時間に150リクエスト以上すると制限がかかるんだねー。

swfの再生制御:2

This movie requires Flash Player 9

swfの再生制御をswf自身にスクリプト書くんじゃなくて制御swfからloader使って読み込ませる方法を試してみた。
再生ボタンを押すとマウスの動きに合わせて波紋がでるSWFが再生される。

一応動いたけれども、読み込むSWFによっては
「TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。」
というエラーが出る場合がある。

調べてみると同様の症状の人が結構いるようだけど、現在調査検証中。

本体側SWFのフレームアクション
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
import MyAs.McLoader;
 
var McLoad:McLoader;
/*
var loader:Loader;
var url:URLRequest;
var container:DisplayObjectContainer;
*/
 
 
 
 
play_btn.buttonMode = true;
play_btn.addEventListener(MouseEvent.CLICK, xClickHandler);
play_btn.addEventListener(MouseEvent.ROLL_OVER, xRollOverHandler);
play_btn.addEventListener(MouseEvent.ROLL_OUT, xRollOutHandler);
 
 
 
function xRollOverHandler(evt:MouseEvent):void {
	play_btn.alpha = 0.8;
}
function xRollOutHandler(evt:MouseEvent):void {
	play_btn.alpha = 1;
}
 
function xClickHandler(evt:MouseEvent):void {
		play_btn.visible= false;
 
 
		McLoad = new McLoader(this, "ripple.swf");//ここはwebrootから。
		play_btn.play_btn.removeEventListener(MouseEvent.CLICK, xClickHandler);
		play_btn.play_btn.removeEventListener(MouseEvent.ROLL_OVER, xRollOverHandler);
		play_btn.play_btn.removeEventListener(MouseEvent.ROLL_OUT, xRollOutHandler);
}

で外部のSWFを読み込ませて指定のDisplayObjectに追加する外部AS。使うときimportする。
Mcハマーみたいなクラスファイルだけど、一点、McLoaderで読み込むURLは表示swfからの相対パスではなくて、webrootからのパスにすること。それ知らずにワードプレスに貼り付けたら見事に動かなかったぞ。

McLoader.AS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package MyAs  {
    import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.DisplayObjectContainer;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
 
	public class McLoader {
		private var loader:Loader;
		private var url:URLRequest;
		private var mc:MovieClip;
		private var container:DisplayObjectContainer;
 
		//コンストラクタ
		public function McLoader(Container:DisplayObjectContainer,Url:String) {
			loader = new Loader();
			mc = new MovieClip();
			url = new URLRequest(Url);
			container = Container;			
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, xLoadHandler);
			loader.load(url);
			container.addChild(loader);
		}
 
		private function xLoadHandler(event:Event):void {
			trace("OK");
		}
 
 
	}
 
}

swfの再生制御:1

This movie requires Flash Player 9

このブログで貼り付けるSWFの再生制御をしたいと思い調査研究。
再生するSWF内に直接記述したけど、本当はloaderとか使ってplayerのSWFと再生されるswfを分けるのが一般的だとおもう。使いまわしのききそうな形で作り直したい。

最初にあるグレーの幕とボタンがplay_btnだとしてクリックすると始まるのが、//再生スタートの部分って書いてあるところ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
play_btn.buttonMode = true;
play_btn.addEventListener(MouseEvent.CLICK, xClickHandler);
play_btn.addEventListener(MouseEvent.ROLL_OVER, xRollOverHandler);
play_btn.addEventListener(MouseEvent.ROLL_OUT, xRollOutHandler);
 
 
 
function xRollOverHandler(evt:MouseEvent):void {
	play_btn.alpha = 0.8;
}
function xRollOutHandler(evt:MouseEvent):void {
	play_btn.alpha = 1;
}
 
function xClickHandler(evt:MouseEvent):void {
		this.addEventListener(Event.ENTER_FRAME,growLine);//再生スタートの部分
		play_btn.visible= false;
		play_btn.play_btn.removeEventListener(MouseEvent.CLICK, xClickHandler);
		play_btn.play_btn.removeEventListener(MouseEvent.ROLL_OVER, xRollOverHandler);
		play_btn.play_btn.removeEventListener(MouseEvent.ROLL_OUT, xRollOutHandler);
}

外部ファイル版も早急に作ってみたい。