全画面Flash
Flashと言えば全画面がモテる（気がしている。）。
AS3では全画面をやってみるためのお勉強。
参考は天下のカヤックさんです。
上記の参考ソース（というかまるごとパクリってしまってます。すいませぬ）はフレームアクションっぽかったので、ドキュメントクラスに書いてみた。
合ってるかどうか、不明（笑）。とりあえず動く。
サンプルのデモはこれ。
データはコチラ（若干不要な記述もあります。汗）。
■ドキュメントクラス「Main.as」の記述。
package {
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.StageDisplayState;
import flash.events.Event;
public class Main extends MovieClip{
private var stageW:Number = stage.stageWidth;
private var stageH:Number = stage.stageHeight;
//最小制限の設定。普通いるよね
private var minW:int = 550;
private var minH:int = 400;
public function Main(){ //コンストラクタ
//全画面の設定
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, repos);
stage.dispatchEvent(new Event(Event.RESIZE));
}
private function repos(event:Event):void {
if (stage.stageWidth < minW) {
stageW = minW;
} else {
stageW = stage.stageWidth;
}
if (stage.stageHeight < minH) {
stageH = minH;
} else {
stageH = stage.stageHeight;
}
setpos();
}
//位置調整はここで
private function setpos():void {
_mc.x = stageW/2;
_mc.y = stageH/2;
}
}
}
※課題
・ステージに配置される表示オブジェクト（今回で言うところの青い四角）の出現に動きを加えたいな。
・画面サイズがリサイズされた際の表示オブジェクトの再配置メソッド「setpos」をカスタムクラス化した方が汎用的なのかも。
・再配置メソッドにイージングを設定して滑らかにしたいな。
・stage.dispatchEvent(new Event(Event.RESIZE));ってのが気になった。dispatchEventはAS2でもわたくし使ってなかったが、イベントを自分の決めたタイミングで発行するっぽい（参考：the cycles of activity）。たぶん（笑）。ページを開いたときには「Event.RESIZE」イベントは発行されないからね。
とりあえずそんな感じ。
飯食おう。
ドキュメントクラスパス
こにゃにゃちは。
相変わらず世の中のASerの流れに完全に取り残された私の覚書。
Tweenerなどの超頭がいい人が作ってくれたライブラリや自分で作ったカスタムクラス（まだまともなものは作ったことなし（笑））をSWFに読み込むにはimportっちゅうのをしないといけないのですが、それらのライブラリがどこにあるかflaファイルに教えてあげないといけませぬ。
AS2で非常にお世話になったFuseKit。にゃあプロジェクトさんやtrick7さんの記事を見て、あれやこれや試してみたものです。
その当時（というか最近まで）グローバルクラスパスという方法でライブラリを読み込んでおりましたが、どうやら最近（というかだいぶ前（汗））からドキュメントクラスパスを設定して、プロジェクトごとに利用するライブラリやカスタムクラスなどをひとつのフォルダ以下にまとめようという方向らしい（trick7さんより）。師匠のいないおれは知らんかったぜい。
なんならWEB Designingの一昨年の8月号に記事を書いてると…。買ってなかったぜ…。amazonにて中古でポチっとしたよ…
てなわけで今後はドキュメントクラスパス方式で行くと心に決めた。
【やり方（というほどのものでもない）】
1.新規で作ったflaファイルのパブリッシュ設定を開く
パブリッシュ設定を選ぶ
2.パブリッシュ設定画面で「スクリプトの設定ボタンを押す。」
3.ソースパスにクラスパスを通したい場所を追加する。
という感じで設定するそうな。
世の中の潮流でいうと
flaファイルの場所が
/hoge/hogehoge/test.fla
という感じであればライブラリやカスタムクラスは
/hoge/hogehoge/src/
と「src」というディレクトリを作ってぶち込んでいくそうな。
たしかにこのほうが綺麗。
ただここで一つ。
Flashのデフォルトではドキュメントクラスパスの設定画面において「.（ドット）」というパスが通っている。
これはflaファイルと同階層にクラスファイルがあれば自動的にクラスパスが通っているということである。
ではなぜ「/hoge/hogehoge/src/」というクラスパスを通したかというと先程述べた通りまとめるためということですが、単純にまとめるだけなら「src」フォルダを作りそこにライブラリなどをぶち込んで、flaファイルからimportすればいいんじゃない？と思ったりしたんですが、そうではないようです。
どうやら「package」というものが関わっているようです。
「package」に関する説明はFlashの枝さんのサイトでちらっと見ました（笑）
「クラスファイルが入っているディレクトリの事」とあります。
諸所の先人たちが作ってくださったライブラリ達はライブラリ同士が名前のバッティングをしないために、ドメイン名を元にしたフォルダ構成でなどで配布されています。（Tweenerのフォルダ構成の由来はよく知りませんが、大抵「com」や「net」などのドメインのおしりから始まっています。）
このようなフォルダに入ったライブラリをflashで読み込む際にクラスパスをデフォルトの「.（ドット）」のみの場合、
■Tweenerの「caurina」フォルダをflaファイルと同階層に置いて
import caurina.transitions.Tweener;
とflaファイルのタイムラインに記述した場合は正常に動作しますが、
■Tweenerの「caurina」フォルダをflaファイルと同階層の「src」フォルダ内に設置した場合
import caurina.transitions.Tweener;
と記述しても正常には動作しません。
flaファイルがTweenerのライブラリを見つけられないからです。
では「src」フォルダに対してドキュメントクラスパスを通さずに、flaファイルにTweenerのライブラリの場所を認識させるためにはどうすればいいかというと
まずflaファイルのタイムラインに
import src.caurina.transitions.Tweener;
と「src」フォルダまでの階層を指定してあげます。
さらにはTweenerの本体でもある「Tweener.as」のpackage宣言部分を
package caurina.transitions {
から↓
package src.caurina.transitions {
という宣言に変えなければいけません。
せっかく誰でも利用できる状態でライブラリを配布してくれているのに、ライブラリ本体に手を加えちゃうのは嫌だしめんどくさい。
なので自分が使い易い場所にクラスファイルをまとめる場合は、ドキュメントクラスパスを追加で通して、package宣言部分をさわらなくても、flaファイルにライブラリの場所をお知らせしてあげる必要があるということなのだろう。（と勝手に解釈。）
なんでこんなことを書いているかというと
flaファイルと同階層の「src」フォルダにドキュメントクラスパスを通して、さらにその中に「sub」というフォルダを作って、その中にTest.asというカスタムクラスを作ってflaファイルから読み込ませようとしました。
んでカスタムクラス内にはよくある記述例を元に
package {
class Test {
function Test() {
trace("UNCO");
}
}
}
と記述し、flaファイルから
import src.Test;
と記述すればUNCOがトレースされるのかと思いきやトレースされない…
なぜだかちんぷんかんぷんだったのですが、
カスタムクラスのpackage宣言に「package名」というのを記述するとな…
こんな基本的なことも知らんかったぜぃ。巷によくあるカスタムクラスのサンプルは「package名」を省略しているのだなと…
package sub{
class Test {
function Test() {
trace("UNCO");
}
}
}
上記のように「package名（フォルダ名）」を追記してあげることでできました。
そんなこんながあり、クラスパスをとおすということがちらっとわかった気がしました。
長々となりましたが、ドキュメントクラスパスを通す事の意味合いを把握したつもりですが、履き違えてたら誰か教えてください。
超久しぶり
いやはや、いろんな勉強をしようとこのブログを始めましたが、見事に流れ流され、放置してきました（笑）
月日は流れてもう1年以上たってますね。
その間成長したのかどうか（汗；
またこれから頑張っていきます。
外部FLVを読み込んで再生 その3 [バッファ設定]
前回の記事のものにバッファを設定しました。
至って簡単です。
前回のflaファイルのrootの1フレーム目に
var netConn = new NetConnection(); // コネクションを作成
this.netConn.connect( null ); // ローカルファイル用コネクションを作成
var netStream = new NetStream (netConn); // ネットストリームオブジェクトを作成
this.netStream.setBufferTime(5); //ネットストリームオブジェクトにバッファを設定（引数は秒数）
my_video.attachVideo(this.netStream); //ネットストリームオブジェクトをビデオに関連づける
netStream.play ("test.flv");
this.myPlay_mc.onRelease = function():Void{
netStream.pause(false);
}
this.myPause_mc.onRelease = function():Void{
netStream.pause(true);
}
this.myBack_mc.onRelease = function():Void{
netStream.seek(0);
netStream.pause(true);
}
を追記。
次回はダウンロード状況をプログレスバーで表示しよう。
外部FLVを読み込んで再生 その2 [再生・停止ボタン]
前回の記事のものに再生、一時停止、先頭へ戻るボタンを付けました。
至って簡単です。
前回のflaファイルのrootの1フレーム目に
var netConn = new NetConnection(); // コネクションを作成
this.netConn.connect( null ); // ローカルファイル用コネクションを作成
var netStream = new NetStream (netConn); // ネットストリームオブジェクトを作成
my_video.attachVideo(this.netStream); //ネットストリームオブジェクトをビデオに関連づける
netStream.play ("test.flv");
this.myPlay_mc.onRelease = function():Void{
netStream.pause(false);
}
this.myPause_mc.onRelease = function():Void{
netStream.pause(true);
}
this.myBack_mc.onRelease = function():Void{
netStream.seek(0);
netStream.pause(true);
}
を追記。
次回は再生時のもたつき（再生がストリーミングに追いついてしまう）を解消するようにがんばってみる。
外部FLVを読み込んで再生 その1 [単純に読み込み]
AS3.0を少し勉強し始めましたが、改めてAS2.0も復習をしておこう。
AS2.0ならある程度調べればできるが、技術の底上げとして。
でまず外部FLVを読み込んで再生。
単純にswfと同一階層のflvを読み込み。
- ライブラリパネルから新規ビデオを作成（Flash CS3の場合はAction Script制御の方を選択）
- ステージにそのビデオオブジェクトを配置。
- プロパティパネルからインスタンス名を設定（今回はmy_videoとする）
- rootの1フレーム目に
var netConn = new NetConnection(); // コネクションを作成
this.netConn.connect( null ); // ローカルファイル用コネクションを作成
var netStream = new NetStream (netConn); // ネットストリームオブジェクトを作成
my_video.attachVideo(this.netStream); //ネットストリームオブジェクトをビデオに関連づける
netStream.play ("test.flv");
- サーバーにアップ
以上で完成のはず。
WordPressからの画像アップでエラー
既にWordPressに飽き初めてきた…
あんまり興味がないのかな、俺。
ていうかXREAサーバーでWordPressから画像アップロードする際に、フォルダを日付で分ける設定にすると画像アップでエラーが起きる。
できれば日付で整理したいんだが、PHPのセーフモードとかいうのが絡んでいるからだろうか？
wp-contents/uploadのパーミッションは合っていると思うのだが…
また調べてみよう。
WordPress 二日目
WordPressを触り始めて二日目。
かなりの機能が使えそうな事はわかった。
ただ問題はこれを実際のサイト制作に反映させるには、WordPressをサイトのCMSとして使いこなし、独自テンプレートデザインというかサイトデザインに組み込みを勉強しないといけないな…。
機能が多すぎるのも悩みどころ。
実際サイト運営で頻繁に使うのは
- 記事の更新
- アーカイブの管理
- 上記に関わる部分の適切なタグ、CSSの設定
- アクセス解析に関する部分
- 携帯サイト
といったところをまず重点的に把握しないとな〜。
現時点では自分で簡単なCMSを作った方が、サイトの中身全体も見渡すことができて気持ち的に安心なんだが…
AS3.0やAIRももっと勉強しなくちゃいけないのに…
がんばろう。
XREAでWordpressを使う。
とりあえずXREA(plus)サーバーを借りてサーバー設定。
いままでロリポップ、チカッパ、ファーストサーバー、CPIというレンタルサーバーは触れてきたが、XREAの管理画面が一番分かりにくかった。
何が分かりにくいかというと、
管理画面のインターフェイスのデザイン、色目がどうもなじめない…
まあしょうがない。
で、Wordpressのインストールまでの道のりとして、
- value-domainにてドメインを取得。
- value-domainの管理画面の サーバー設定を押すとXREA(plus)の管理画面が開く
- XREA(plus)の管理画面のドメインウェブを選択。ドメインの設定を行う。
- とりあえずpublic_htmlにindex.htmlをアップロードして、DNSが反映されるまで待つ。（ブラウザで取得したドメインのURLを打ち込み、アップロードしたhtmlが表示されたらOK）
- XREA(plus)の管理画面のデータベースからWordpress用のデータベースを作成する。パスワードは適当に。文字コードはUNICODEで設定。
- 同じ画面の下からphpMyAdminをインストールボタンを押してインストールしておく。
- これでサーバー側は一通り準備完了。
- 次にWordpressのサイトから Wordpressをダウンロード。
- ダウンロードしたものを解凍して、その中身を任意のフォルダに入れる。
- 解凍したら、その中にあるwp-config-sample.phpを複製してwp-config.phpとして保存。
- wp-config.phpを開きデータベースの情報を書き換える。
define(‘DB_NAME’, ‘○○’); →○○には手順7で設定したDB/ユーザー名を入力
define(‘DB_USER’, ‘○○’); // 上と同じものを
define(‘DB_PASSWORD’, ‘*****’); // *****は手順7で設定したパスワードを入力 - 上記の書き換えができたらサーバーにアップロード。
例：）http://field-mount.com/でWordpressを運用したければサーバーのpublic_html直下に、http: //field-mount.com/blog/で運用したければpublic_html/blogにファイルをアップロードする。 - アップロードしたディレクトリにブラウザからアクセスする。（http://field-mount.com/blog/など）
- 表示されたパスワードをメモしてログインページからそのパスワードを用いてログイン
以上で一通りインストールはできました。
所要時間はDB設定からインストール終了まで2時間ほどでしょうか。Wordpress自体のインストールは非常に簡単でした。
が今度は画像を投稿しようとして問題が…
それはまた次回。
参考にしたサイト
XREA.COMでWordPressを使う 3.WordPressのインストール – php::log phpだったり日々の出来事だったり