朝～昼

夕方

夜

WordPress Theme Demo Plugin
http://www.spotonseoservices.com/wordpress-theme-demo-plugin/

指定するパラメーターは各テーマにある「style.css」に記載されているテーマネーム(Theme name: Notepad)を指定。
ex:

http://b23.jp/demo/wordpress/?preview_theme=Notepad

[preview_theme=Notepad]がポイント。

Notepad

Notepad

Agregado

Agregado

ChocoTheme

ChocoTheme

『感ずること』

簡単にテーマを切り替えることが地味に嬉しい。

COLORS 01

COLORS 02

COLORS 03

『感ずること』

詰めが甘い甘い。

ハマっているところ

ボタンの状態でハマってる。。。
何がしたいのかと言うと、例えばAboutシーンに移動したとします。「About」ボタンはマウスオーバーした時に右にちょっとスライドする感じで動くんですが、
そのスライドした状態をキープさせ、次のシーンに移動したときに元の位置に戻り、次のボタンが同じ動きをする。

簡単そうで、なかなかツボにハマってしまっているわけですが、あと少しで出来そうな感じもしなくもない。

こんな感じです。

■お悩みの症状
メニューボタンをクリックしたときに、「現在開いているページの場所を示す」という意味でボタンの状態を変更したいけど、クリック後、一端元の位置に戻り、シーンが読込完了と同時に、ロールオーバーの状態に。

クリック後のロールオーバーの動きが余計なんだけど、どう組んだらいいのか悩んでる。。。

『感ずること』

難しいのぉぉぉ

制作環境

• Windows XP SP3
• FLASH CS4 Pro
• Progression 4.01 Public Beta 1.3

シーン構成

• Index
  • About
  • Blog
  • Portfolio
  • Contact

今回はアニメーションは使っていませんが、次回のサンプルでちょっとスパイスを加えてみようかと思います。

『感ずること』

本来はソースとか細かい解説的なことした方がいいよね、それが理解しているか、していないか分かることだし。まだ、イメージして作成できないなぁ。

内容は「Progression 4.0.1 Public Beta 1.3 | API Reference」と「Adobe ActionScript 3.0 言語およびコンポーネントリファレンス」より引用しています。

テンプレート構成

・MyIndex.as
【CastDocumentを継承】
クラス:CastDocument
パッケージ:jp.progression.casts
ExDocument クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的なドキュメント専用クラスです。
*プロジェク作成時にIndex.asとして書き出されています。

・MyCastSprite.as
【CastSpriteを継承】
クラス:CastSprite
パッケージ:jp.progression.casts
ExSprite クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。

・MySceneObject.as
【SceneObjectを継承】
クラス:SceneObject
パッケージ:jp.progression.scenes
シーンコンテナとして機能する全てのオブジェクトの基本クラスです。
*プロジェク作成時にIndexScene.asとして書き出されています。

・MyCommand.as
【Commandを継承】
クラス:Command
パッケージ:jp.progression.commands
全てのコマンドの基本となるクラスです。

・MyCastMovieClip.as
【CastMovieClipを継承】
クラス:CastMovieClip
パッケージ:jp.progression.casts
ExMovieClip クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。

・MyCastButton.as
【CastButtonを継承】
クラス:CastButton
パッケージ:jp.progression.casts
ExMovieClip クラスの基本機能を拡張し、ボタン機能とイベントフローとの連携機能を実装した jp.progression パッケージで使用される基本的な表示オブジェクトクラスです。

・MyPreloader.as
【CastPreloaderを継承】
クラス:CastPreloader
パッケージ:jp.progression.casts
ExDocument クラスの基本機能を拡張し、イベントフローとの連携機能を実装した jp.progression パッケージで使用されるプリロード処理に特化したドキュメント専用クラスです。
*プロジェク作成時にPreloader.asとして書き出されています。

・prml.xml
＊勉強必要＊
PRML リファレンス
【動的なシーンを作成するのに、PRML形式のXMLファイルが必要】

Progression 拡張元のクラス

クラス:ExDocument
パッケージ:jp.nium.display
ExMovieClip クラスに対してドキュメントクラスとしての機能拡張を追加したドキュメント専用クラスです。

クラス:ExMovieClip
パッケージ:jp.nium.display
MovieClip クラスの基本機能を拡張した jp.nium パッケージで使用される基本的な表示オブジェクトクラスです。

ActionScript 3.0 リファレンス

クラス:MovieClip
パッケージ:flash.display
MovieClip クラスは、Sprite、DisplayObjectContainer、InteractiveObject、DisplayObject および EventDispatcher クラスを継承します。
MovieClip オブジェクトには、Sprite オブジェクトとは違ってタイムラインがあります。
MovieClip クラスのメソッドは、ムービークリップをターゲットとするアクションと同じ機能を提供します。
Flash オーサリングツールのアクションパネルのアクションツールボックスには同等のアクションがない追加メソッドもあります。
Flash オーサリングツールのステージに配置された子インスタンスは、親インスタンスのコンストラクタ内からコードでアクセスできません。コード実行の該当時点では作成されていないためです。
子にアクセスするには、親はコードを使用して子インスタンスを作成するか、子を待機するコールバック関数が Event.ADDED_TO_STAGE イベントを送出するまでアクセスを遅延させる必要があります。
モーショントゥイーンが含まれている MovieClip オブジェクトの次のいずれかのプロパティを変更した場合、MovieClip オブジェクト、alpha、blendMode、filters、height、opaqueBackground、rotation、scaleX、scaleY、scale9Grid、scrollRect、transform、visible、width、x または y の再生ヘッドが停止されます。ただし、その MovieClip オブジェクトの子 MovieClip オブジェクトの再生ヘッドは停止しません。

とりあえず、こんな感じかな。

『感ずること』

いやぁ、ホント開発者はすごい!と思う今日この頃

参考になるチュートリアルサイト
上記の本家リファレンスより「コンポーネントスタイルガイド」・「タイムラインスタイルガイド」・「クラススタイルガイド」があります。
gihyo.jp
Flashのフレームワーク「Progression3」を始めてみよう！

プログラムが苦手なら「コンポーネントスタイルガイド」・「タイムラインスタイルガイド」がオススメ!

慣れない言葉や操作があったと思うけど、2,3回繰り返していると感覚が掴めると思います。
現在Progressionのバージョンは3.1.82で、プレリリース中のProgression4 Public Betaも公開されています。

僕の場合はProg3で感覚をつかんで、Prog4を勉強する感じです。

『感ずること』

全然関係ない話だけど、アサラト(パチカ)がメチャクチャ面白い!時間があったらひたすらパチパチ鳴らしてます。

ここ最近はActionScript3.0を中心に勉強していまして、目標はクラススタイルのFLASHサイトを制作することです。
サイトを制作するにあたってFLASHのフレームワーク Progression を使いたいと思っています。

関連記事:PROGRESSION 3を使ってサイトを作ってみた

で、今回はサイトに載せたいフォトギャラリーを作ってみました。
サイトを作る順序として違う感じもありますが。。。

package {
																																																																																																							import flash.display.Sprite;
	import flash.display.Sprite;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Loader;
	import flash.display.LoaderInfo;

	public class FlickrPhoto extends Sprite {

		//FLICKR API PARAM
		private var _userId        :String = "～Flickr User ID～";
		private var _apiKey        :String = "～Flickr API KEY～";
		private var _setId         :String = "～Flickr SET ID～";
		private var _url           :String = "http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=" + _apiKey + "&photoset_id=" + _setId;

		//取得したXMLデータを配列に格納
		private var _flickrId      :Array   = new Array();
		private var _flickrFarm    :Array   = new Array();
		private var _flickrServer  :Array   = new Array();
		private var _flickrSecret  :Array   = new Array();
		private var _flickrUrl     :Array   = new Array();
		private var _thum          :Array   = new Array();

		//リクエスト用のURLを生成
		private var _myURLReq      :URLRequest   = new URLRequest(_url);
		private var _myURLRequest  :URLRequest;

		//リクエストを発行
		private var _myXMLLoader   :URLLoader    = new URLLoader();
		private var _myLoader      :Loader;
		private var _thumLoader    :Loader;

		//ステージサイズに合わせて表示する画像の枚数
		private var _thumNum       :uint    = Math.floor(stage.stageWidth/80);

		//画像どうしの間隔
		private var _thumInterval  :uint    = 10;

		//FLICKR画像を表示するサイズの指定
		private var _flickrSize    :String  = "s";

		//その他
		private var _thumContainer :Sprite  = new Sprite();
		private var _imgContainer  :Sprite  = new Sprite();
		private var _myXML:XML;

		public function FlickrPhoto() {
			setStageProperty();
			setStageEvents();
			layout();
			this.addChild(_thumContainer);
			this.addChild(_imgContainer);
		}

		internal function setStageProperty():void {
			//ステージの伸縮を「拡大・縮小なし」に設定(必須)
			stage.scaleMode = StageScaleMode.NO_SCALE;
			//ステージの位置を「左上」に設定(必須)
			stage.align = StageAlign.TOP_LEFT;
		}

		private function setStageEvents():void {
			//ステージリサイズ時のイベントリスナー登録
			stage.addEventListener(Event.RESIZE,onStageResize);
		}

		private function layout():void {
			_myXMLLoader.addEventListener(Event.COMPLETE,setPhotoXML);
			_myXMLLoader.load(_myURLReq);
		}

		private function setPhotoXML(e:Event):void {
			_myXML = new XML(_myXMLLoader.data);
			for each(var xmlObj:Object in _myXML.photoset.photo) {
				_flickrId.push(xmlObj.@id);
				_flickrFarm.push(xmlObj.@farm);
				_flickrServer.push(xmlObj.@server);
				_flickrSecret.push(xmlObj.@secret);
			}
			for(var i:uint = 0; i < _flickrId.length; i++) {
				_flickrUrl.push("http://farm" + _flickrFarm[i] + ".static.flickr.com/" + _flickrServer[i] + "/" + _flickrId[i] + "_" + _flickrSecret[i] + "_" + _flickrSize + ".jpg");
				_myURLRequest = new URLRequest(_flickrUrl[i]);
				_thumLoader   = new Loader();
				_thumLoader.load(_myURLRequest);
				_thumLoader.x = 12 + (i  % _thumNum) * 83;
				_thumLoader.y = 12 + Math.floor(i / _thumNum) * 83;
				_thum.push(_thumLoader);
				addChild(_thumLoader);
				stage.addEventListener(Event.RESIZE,onStageResize);
			}
		}

		private function onStageResize(e:Event):void {
			var _w  :uint = stage.stageWidth;
			var _h  :uint = stage.stageHeight;
			var _num:uint = _w/80;
			for(var i:int = 0; i < _thum.length; i++){
				_thum[i].x = 12 + ( i % _num ) * 83;
				_thum[i].y = 12 + Math.floor( i / _num ) * 83;
				addChild(_thum[i]);
			}
		}

	}

}

『感ずること』

オブジェクト指向のイメージがなかなか掴めない、霧がかかった状態。。。

まぁ、何と言いますか、あれです。そう、アウトプットしてみようかなと。。。
自分が何を考えてるのかサッパリ分からなくなることがあって、今年は何を考えてるのかを考えてそれを吐き出していこうかと。

そして、今年第一弾のアウトプットは「プログラムについて」です。

ActionScriptに限らず言えるのは色んなプログラムを読んで、自分で組み直してプログラムに「慣れる」ことだと思う。

難しいと感じるのはプログラムの量と見慣れない単語（関数名等）、for文やif文に圧倒されるからテンションが下がってしまう。
でも、読む癖をつけてしまえば問題は無いし、分からない単語があればリファレンスを読んで勉強する。

プログラムの読み方のポイントは、「プログラムは上から下へ」と処理される事を頭に入れて、上から順序良く読んでいく。
プログラムも語学も似ていて分からない言葉があったら辞書で調べる。プログラムだったらリファレンスを読む。
すると、初めはなんとなくだけどイメージが付いてくると思う。
それに慣れてきたら、値を変えてみたり、その部分を消して、実行して、プログラムの変化を感じながら、このプログラムのイメージをする。

もう一つのポイントは「もっといい方法があるはず！」と考えながら読むことが大切。
なんか分かりにくい流れだなとか、読みにくいとか、些細なことでいいんです。それが向上する第一歩。
それの繰り返しで僕は勉強をしています。

プログラムを組んでいて分かったことは「難しいのはプログラムを組むことではなくて、プログラムの設計が難しい」ことだと最近は思う。
一言でまとめると「何を作りたいのか？」

それが明確でないとグズグズになってしまうし、作っていて面白くない。「一体何がしたいんだ」って頭の中でループすることも。

まぁ難しく考えず、自分に合った勉強法を見つけることが大事なんでしょうね。どこかで聞いたことがあるフレーズですが、その通りだと思います。

『感ずること』

今年こそはBboyingを始める！その前に体力づくり。。。