Home

flabaka

福岡てら子でCOREX

3月6日(土)に開催された『福岡てら子4』に参加してきました。

そこで、COREXについてお話させて頂いたんですが、かなりグダグダな説明になってしまったので、まとめてみました。

Q1.COREXって何?

JSFLをクラス化出来るようにしたものです。

新規ドキュメントを開いて、新規asレイヤーを作って、stop();を記述したいって場合…

//新規ドキュメントを開く
fl.createDocument();

var path = fl.getDocumentDOM().getTimeline();

//新たにasというレイヤーを作成する
path.addNewLayer("as","normal",true);

//一番上のレイヤーを選択しておく
path.currentLayer = 0;

//1フレーム目に、スクリプトを記述
path.layers[0].frames[0].actionScript = "stop();";

こんな感じのコードを書いて、ファイル名を●●.jsflみたいに保存→実行するかと思います。

ですがCOREXを使うと、以下のようにAS3のクラスファイルの書式と同じような感じで、JSFLのコードを書くことが出来ます。

package{

	public class Sample1 {

		public function Sample1() {

			//新規ドキュメントを開く
			fl.createDocument();

			//新たにasというレイヤーを作成する
			fl.getDocumentDOM().getTimeline().addNewLayer("as","normal",true);

			//一番上のレイヤーを選択しておく
			fl.getDocumentDOM().getTimeline().currentLayer = 0;

			//1フレーム目に、スクリプトを記述
			fl.getDocumentDOM().getTimeline().layers[0].frames[0]
			.actionScript = "stop();";

		}
	}
}

(試しにCOREXを使わずに)このスクリプトを、●●.jsflという拡張子で保存→実行してみると…

シンタックスエラーになってしまいます。

ですが、COREXを使うと、このスクリプトをJSFLとして実行してくれます。

Q2.COREXって、どこで使われているの?

Progressionのプロジェクトの書き出し、プロジェクトのアップデートなどに使われています。

Q3.COREXを使いたい場合、どうすればいいの?

COREXを使う場合、いくつかファイルが必要になります。

  1. COREX.jsflファイル
  2. 起動用のjsflファイル
  3. クラス化したjsflcファイル
  4. jslfccファイル

それぞれ詳しく見ていきます。

COREX.jsflファイル

このファイルは、Progressionをインストールすると、自動的に作成されるファイルです。

どこにあるかは、以下のコードを実行すると、分かります。

fl.trace(fl.configURI);

起動用のjsflファイル

これは自分で作らなければいけません。

作り方は、blog.progression.jp内のF-site資料の中のファイルを参照すると良いでしょう!

COREX.jsflファイル内にも起動コードの作り方が書かれているんですが、こちらは旧バージョンのコードになっています。

ですので、起動ファイルは、F-siteの資料にあるコードを使いましょう!

さて、起動コードのString.fromCharCode以下に、謎の数字が出てきます。

何が書かれているかは、以下のソースを記述すれば、理解出来ます。

var str:String = String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,105,110,
115,116,97,108,108,101,100,46);
trace(str);

これを実行してみると、String.fromCharCode以下の数字が、COREX is not installed.だということが分かります。

つまり起動コード内を要約すると、「fl.configURIで表示されるパスにCOREX.jsflがある場合は、JSFLを実行する。COREX.jsflが存在しない場合は、COREX is not installed.を表示して、処理を中断する」ということになります。

クラス化したjsflcファイル

これも自分で作らないといけません。

先の新規asレイヤーを作って~のサンプルコードを、Sample1.jsflcという拡張子で保存します。

jslfccファイル

これはCOREXを実行すると、自動的に作成されるキャッシュファイルみたいなものです。(あまり気にしなくて良いかと…)

jsflccファイルは、fl.configURI + COREXフォルダ内に作成されます。

jsflcファイルのタイムスタンプが異なる場合に、再コンパイルが行われるみたいです。

ここまでを軽くまとめると…

Progressionを既にインストールしている方は、起動用のJSFLファイルとクラス化したJSFLCファイルを作成すれば、COREXを使えるよ! ということになります。

先のサンプルでいうと、起動用のJSFLファイルはこんな感じになります。

$={u:fl.configURI+"COREX.jsfl",c:false,$:function(){alert(String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,
105,110,115,116,97,108,108,101,100,46))}};(eval(FLfile.read($.u))||$).$
( "Sample1", [] )

あとは、この起動ファイルを実行してあげればOKです。

F-siteの資料の起動用JSFLの説明

%SCRIPT%

起動用のJSFLの( “クラス化したファイル名”, [] )の第三引数に、%SCRIPT%と指定すると、実行中のスクリプトのパスを、出力パネルにfile:///URIの形式で表示してくれます。

%COREX%

第三引数に%COREX%を使うと、COREX.jsflのある場所を基準にパスの設定が可能になります。

COREX.jsflの基本的な使い方の箇所にも、説明が書かれています。

デバッグモード

第四引数のデバッグモードを有効にすると、パッケージ情報などを出力パネルに表示してくれます。

Q4.COREXを勉強するには?

以下のものを参考にすると良いと思います。

  • fl.configURI + COREX.jsflファイル
  • fl.configURI + Progression/JSFL以下のファイル
  • blog.progression.jp内のF-site資料
  • JSFLのオンラインマニュアル&PDF

Q5.クラス化出来るということは、継承も可能なの?

可能です。F-siteの資料内にあるサンプルでも、継承が使われています。

先の例でいうと、Sample1を継承したSample2を作ってみると…

●起動用のjsflファイル

$={u:fl.configURI+"COREX.jsfl",c:false,$:function(){alert(String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,
105,110,115,116,97,108,108,101,100,46))}};(eval(FLfile.read($.u))||$).$
( "Sample2", [] )

●クラス化したjsflcファイル

package {

	//Sample1をインポートする
	import Sample1;

	public class Sample2 extends Sample1 {

		//変数を定義(データ型の指定は不要)
		private var _path = fl.getDocumentDOM();

		public function Sample2() {

			//ライブラリにフォルダを追加
			_path.library.newFolder("hoge");

		}
	}
}

こんな感じにしてあげると、Sample1に新たな機能を付け加えることが可能になります。

気をつけることは何かある?

データ型の指定

COREX.jsflのコメント部分にも書かれていますが、変数や関数のデータ型の指定は不要です。

文字列内のコメント

文字列の中に、コメントを入れたいという場合、注意が必要です。

package{

	public class Sample1 {

		public function Sample1() {

			(略)

			//1フレーム目に、スクリプトを記述
			fl.getDocumentDOM().getTimeline().layers[0].frames[0]
			.actionScript = "stop();";

		}
	}
}

このコードを、以下のように変更して、実行してみると…

(略)

//1フレーム目に、スクリプトを記述
fl.getDocumentDOM().getTimeline().layers[0].frames[0].actionScript = '//stopをかけておく\n\nstop();';

これだと、JSFLが起動してくれません。

(略)

//1フレーム目に、スクリプトを記述
fl.getDocumentDOM().getTimeline().layers[0].frames[0].actionScript = '\/\/stopをかけておく\n\nstop();';

コメント部分は、エスケープ処理してあげる必要があります。

他にもいくつか…

(今回のサンプルでは出てきませんでしたが)他にもいくつか注意点があります。

詳しくは、COREX.jsflのコメント部分をご覧下さい。

サンプルをダウンロード

今回作成したサンプルを、ちょっと試してみたいという方は、こちらからDLしてください!

まとめ

こんな感じでCOREXを使うと、AS3っぽくJSFLを書くことが出来ます。

興味がある方は、一度、使われてみては如何でしょうか?

面白そうなFlashのイベントが…

来週の土曜日(3月6日)は、二都市(名古屋と福岡)で、面白そうなFlashのイベントが開催されますよねぇ…

WCAN mini ActionScript Vol.14

今回は、テーマがデバイス。

マウスやキーボードだけではつまらない!デバイスの可能性を探りたい!そんな勢いで、今回のテーマは『デバイス』になりました!みなさんでネタを持ち寄りでワイワイやりたいと思います!
Flash / AS 以外でも、デバイス的な何かであれば全然OKです!気軽にご参加ください!ネタは5分〜20分を目安にお願いします!

イベントの詳細&申し込みは、ATNDからどうぞ!

参加しようかなぁ…とお考えの方は、お早めにお申し込みください!

福岡てら子 4 「Now Loading(エロいの)」

こちらは、ローディングネタです。

今回はFlashでの外部読み込みには欠かせないローディングネタを作ってきてもらいます。読み込み後のコンテンツがエロかったり、ローディングバー自体がエロかったり、とにかくエロければ何でもOKです。

イベントの詳細&申し込みは、ATNDからどうぞ!

参加しようかなぁ…とお考えの方は、こちらもお早めに!

軽~いノリで…

「美味しいラーメンを食べに、福岡行っちゃおうかなぁ…」という軽~いノリで、来週、福岡に行くことにしました!

ということで、福岡てら子に参加しちゃいます。

某旅行雑誌(「る」から始まって、「ぶ」で終わる)の福岡版を購入して、あれこれやっておりますが、「福岡に来たら、これは見ておかないと!」とか、「お土産は、これがいいんじゃない?」とか、「●●を食べるなら、この店がオススメ!」なんていう有力情報がありましたら、この記事にコメントを付けて頂くか、twitterで@flabaka宛につぶやいて頂けると、非常に助かります。

ということで、来週は、福岡てら子の皆様、お世話になります!

a-blog cmsでgoogle-code-prettifyを使ってみる

google-code-prettifyをa-blog cmsで試してみました。

導入方法は、SyntaxHighlighterのときとほぼ一緒です。

ダウンロードしてくる

google-code-prettifyをダウンロードしてきます。

ちなみにですが、google-code-prettifyはApache License 2.0となっております。

zipを展開しておいて、フォルダ名をprettifyみたいにしておきます。

index.htmlに追記・1

使用中のテーマのindex.htmlに、以下を追記します。

<script type="text/javascript" src="prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

cssとかsqlとかの場合は、別途フォルダ内のjsを読み込んであげます。

index.htmlに追記・2

マニュアルみたいなのには、bodyタグの所にonload=”prettyPrint()”って書いてね! とあります。

a-blog cmsはjQueryが使える状態になっているので、今回は以下のようにしてみました。

<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
	$(function(){
		prettyPrint();
		})
</script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

テーマフォルダにアップロード

使用中のテーマフォルダ内に、prettifyフォルダ&index.htmlファイルをアップロードします。

a-blog cms側の設定

a-blog cmsにログインして、管理ページ>カスタマイズ管理>コンフィグ>(エントリーの)編集設定に移動します。

テキストタグセレクトの箇所に、prettify用のタグを追記します。

タグ
pre.prettyprint
ラベル
prettyprint

ここまで終わったら、保存ボタンを押しておきます。

あとはエントリの際に、prettyprintを選択してあげればOKです。

マニュアルみたいなのには、ASは対応していないと書かれていたんですが、試してみたら、意外といい感じになってくれました。(javaやmxmlはOKだから?)

カラーを変更したい! とかは、prettify.cssを編集すればいいんじゃないかと…

個人的にはSyntaxHighlighterの方が好きなんですが、google-code-prettifyでも(割と)いい感じになるということで…

Excluded File Typesに拡張子を追加

ツール>フォルダオプション>表示から、縮小版をキャッシュしないにチェックを入れてあるんだけど、FlashDevelopで新規プロジェクトを作成した際、Thumbs.dbファイルがプロジェクトパネルに表示されてしまって、何か嫌だなぁって場合。

毎回手動で消すのはちょいと面倒。

そんな時は、F10>Settingsパネル>Project Manager>Excluded File Typesの箇所に、拡張子(今回だと「.db」)を追加してあげます。

こうしておけば、新規プロジェクトを作成しても、プロジェクトパネル上にThumbs.dbが表示されなくなります。

忘れないように、メモ。

Progression4とa-blog cmsの連携(後編)

a-blog cmsの設定を変更

ではa-blog cms側をカスタマイズしていきます。

画像サイズ

まずは、アップロードする画像のサイズを変更したいので、管理画面→カスタマイズ管理→コンフィグ→エントリー→編集設定に移動します。

今回使う画像は、サムネイル画像(200px×100px)と詳細ページに表示する大きめの画像(400px×200px)なので、サイズセレクト→イメージサイズ選択肢の値を以下の様に変更してあげます。

画像URLサイズ選択肢の方も同じ様に変更しておきます。

続いて、イメージ編集→モバイル用画像の最大幅の値も変更してあげます。

イメージサイズや画像URLサイズを200pxに設定しても、ここのモバイル用画像の最大幅が160pxだった場合、画像をアップロードすると作成されるtinyの画像が、160pxになってしまいました。

なので、ここの値も200pxに変更してあげます。

圧縮率は画像編集ソフトの方で設定しているので、a-blog側では100%に設定してあります。

カスタムフィールドの作成

詳細ページから、「→もっと詳しく」のボタンを押した際に遷移するブログ記事のURLを格納しておくカスタムフィールドを作成します。

作り方は、a-blog cmsのカスタムフィールドを使う際の注意点の記事をご覧下さい。

ソースだけ掲載しておきます。(テーマフォルダ\themes\vicuna\admin\entry\entry.html)

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN step#apply -->
(略)
<tr class="detail-fade-body">
    <th>トラックバック</th>
    <td><textarea name="trackback_url" cols="30"></textarea>
    <input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="detail-fade-body">
    <th>Blogの記事へ</th>
    <td><input type="text" name="blogpost" size="50" class="entryFormInputText" />
    <input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
<!-- END step#apply -->
<!-- BEGIN step#reapply -->
(略)
<tr class="textM detail-fade-body">
    <th>トラックバック</th>
    <td><textarea name="trackback_url" cols="30">{trackback_url}</textarea>
    <input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="textM detail-fade-body">
    <th>BlogURL</th>
    <td><input type="text" name="blogpost" size="50" value="{blogpost}" />
    <input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
(略)
<!-- END step#result -->
<!-- END_MODULE Admin_Entry_Edit -->

このファイルもテーマフォルダ内に階層構造を保ったまま、アップしてあげます。

エントリする

ここまで終わったら、あとは記事を投稿してくだけです。

画像をアップする際、400×200pxのものを事前に用意し、サイズは「そのまま」でアップロードします。

すると、●●●●.jpg(400×200px)とtiny-●●●●.jpg(200×100px)がアーカイブフォルダ内に作成されます。

こうしておくと、昨日のテンプレートのpathと設定しているところには、●●●●.jpg(400×200px)へのリンクが。tiny_pathと設定しているところには、tiny-●●●●.jpg(200×100px)へのリンクが、それぞれ作成されることになります。

あとは、ファイル名をPRMLのscene nameに。BlogURLを、ブログの詳細記事へのリンクとして使いたかったので、それぞれ以下の様に設定していきます。

ここまで出来たら、投稿を保存します。

a-blog cmsのディレクトリ/ファイル名.xmlにアクセスしてあげて、投稿した値がXML側に反映されていれば、OKです。

吐き出されるFeed(XML)を、Progression側で読み込んであげる

ここら辺りも、MTやWPの場合と同じですね。

override protected function atSceneLoad():void {
    addCommand(
        new LoadURL( new URLRequest( "a-blog cmsのディレクトリ/ファイル名.xml" ) ),
        function() {
            trace(this.latestData);
        }
    );
}

Progression4の場合だと、LoaderListという便利なものがあるので、それを使ってあげるといいかと思います。

Home

Search
Feeds
Meta

Return to page top