About the Site

This weblog is edited and run by members of reallyenglish, a company offering a total English learning solution based in London, Beijing, Shanghai and Tokyo. Visit our corporate site to know more about what we do.

Notes are posted by members from various cultural and geographical backgrounds, and the topics range from education, business and international communication to software development, the internet culture, and more.

Staff

Masatomo Nakano http://twitter.com/masatomon /m/mt-static/support/assets_c/userpics/userpic-2-100x100.png simonl davida jeremyw Go Kameda gavin b No name tomoyukis

 

Recent Comments

  • Tomoyuki Sakurai: we've been using vether(4) successfully since 4.7. http://old.nabble.com/kernel-6318:-arp-cache-problem-bridge%284%29-with-vether%284%29-td27635451.html (the bug read more
  • RofR: Hi everyone Where about to setup serveral OBSD 4.9 or read more
  • Tomoyuki Sakurai: the above configuration has been working fine since 4.6. read more
  • Jean Aumont: Hi Tomoyuki, If you capture the packets with tcpdump and read more
  • Tomoyuki Sakurai: you will not see OSPF packets on physical interface. > read more
  • Jean Aumont: Hi everyone, I have been trying to pass OSPF in read more
  • Anonymous: without any other information, all i can say is doing read more
  • Jean Aumont: I have a similar set-up, but my 2 end points read more
  • illouca: thank you for the patch !! read more
  • Go Kameda: Glad to hear that - im afraid i cannot really read more

Go Kameda Archives

Batch image exporting from .fla

| 4 Comments

Just wanted to post a small .jsfl code snippet to export .png images from each frames in the current timeline (with the currenrt .png export settings).

_ExportImages.jsfl
Download Demo Files

Although the same is possible by "Export" -> "Export Movie..." then choosing "png sequence" as the file format, jsfl can be more flexible as;

  1. It can export images from any (current) timeline
    Correction: It is also possible from "Export Movie", sorry for my ignorance.. orz
  2. It can possibly perform more complex batch processing (with a bit of code modification)
  3. The direct keyboard shortcut (with no dialog) can be assigned to it

Basic Usage

  1. Open the .fla from which you want to export the image (In the Demo, it is "ExportImagesTest.fla").
  2. From the menu, "Commands" -> "Run Command..." and open "_ExportImages.jsfl".

And, here is the Adobe Reference for how to run .jsfl in different ways;
Running JSFL files (Adobe Livedocs)

The image file names or location can be easily modified by editing the line with the comment. It saved me quite a lot of time so hopefully it could help be some help for any of you in any way.

Additional Note (1, June, 2011)

Added a simple example that exports .png files from multiple .fla files in a specified directory (tested on Flash CS4 / CS5.5 on Mac OSX 10.6)

_ExportImagesEX.jsfl
Download Demo Files

現在開いている.flaの各フレームから連番で.pngを書き出す超シンプルな.jsflスニペット、メモとして一応あげておきますね(Flash CS3とCS4で動作確認)。

_ExportImages.jsfl
Download Demo Files

実際"Export" -> "Export Movie"から.pngを連番で書き出せばいい話なのですが、jsflでならどのタイムラインからでも書き出せたり(Export Movieでもできました、知らなかったorz)、名前のコントロールが柔軟だったり、ダイアログなしで一発で終わるようにショートカットをあてがえたり、より複雑なバッチ処理にも使えたりするのがいいんじゃないかと思います。

使い方

  1. イメージ書き出し元の.flaを開く(デモでは "ExportImagesTest.fla")。
  2. "コマンド" -> "コマンドの実行"を選び、"_ExportImages.jsfl"を開く。

あとAdobeのリファレンスにいろんな方法でコマンド(.jsfl)を走らせる方法が書いてあります(一応です)
Running JSFL files (Adobe Livedocs)

超簡単なわりにわりと重宝したのでもし良ければという感じです。(とはいえjsflはしくじるとこわいのでどうぞ前もってお試しの上使ってください。。)

追記 (1, June, 2011)

指定したディレクトリにある複数の.flaから.pngファイルをExportする.jsflのサンプルを追加しました (tested on Flash CS4 / CS5.5 on Mac OSX 10.6)

_ExportImagesEX.jsfl
Download Demo Files

The other day I wanted to emphasize all the numbers in HTML text dynamically with JavaScript for some reason. First it was quite simple enough even to my RegEx-dummy brain. I just wrote something like the following;

(JavaScript)
function emphasizeNumbers(){
  var elmText = document.getElementById("text");
  elmText.innerHTML = elmText.innerHTML.replace(/(\d)/g, "<em>$1</em>");
  return false;
}

(HTML)
<p id="text">You have finished 3 lessons. Your score was 80/100. This is end of Stage 1. Please proceed to Stage 2. (By the way my number is 012-345-6789).</p>

So far it was simple enough. However when I looked at the consequence, I noticed that we did not want to emphasize the numbers followed by the word "Stage", as in "1" in "Stage 1" and "2" in "Stage 2". And I did not know the way how to exclude only these from the RegEx matches to be replaced.

Without too much consideration, first I tried the following;

function emphasizeNumbers(){
  var elmText = document.getElementById("text");
  elmText.innerHTML = elmText.innerHTML.replace(/[^(Stage )](\d)/g, "<em>$1</em>");
  return false;
}

Here I tried to mean "match with any digits which are preceded by anything other than the string 'Stage ' (as well as trying to exclude the grouped characters 'Stage ' from back-references)". However the result was miserable. Honestly I still cannot even explain what exactly happened here. Anyways, I understood that grouping with parenthesis ("()") in character class square bracket("[]") does not work (does it?).

After a while of googling, I found that there is an RegEx expression called "negative lookbehind". It took me about an hour to even vaguely understand the concept, but this seemed to be the answer. So anyways, I tried the following just mimicking the tutorial page;

function emphasizeNumbers(){
  var elmText = document.getElementById("text");
  elmText.innerHTML = elmText.innerHTML.replace(/[^(?<!Stage )(\d)/g, "<em>$1</em>");
  return false;
}

It did not work at all and ended up in a JavaScript error. Soon after that, I found that I missed out one important line in the tutorial page;

Finally, flavors like JavaScript, Ruby and Tcl do not support lookbehind at all, even though they do support lookahead.
OK great, (negative) lookbehind is NOT supported in current JavaScript (as of 2010 Jan, JavaScript 1.8.1) RegEx.

After all, I resolved the problem by doing the following.

function emphasizeNumbers(){
  var elmText = document.getElementById("text");
  elmText.innerHTML = elmText.innerHTML.replace(/(?:Stage\s)?(\d)/g, function(str, p1){
    if(str.indexOf("Stage ")!=-1) return str;
    else return "<em>" + p1 + "</em>";
  });
  return false;
}

This finally worked. I did not know that the String.replace method accepts a function instead of a replacing string as the second parameter.
String.replace (MDC Core JavaScript 1.5 reference) - Specifying a function as a parameter

However I'm not sure if this is the best solution - is there better and easier way to do the same?

How I made my Flash dead silent

| No Comments

どうでも良い失敗談なのですが、先日.flaからswfをPublishしてもActionScriptが全く認識されずtraceもエラーも出力されず、本当にうんともすんともいわないという状態に陥りました。(Publishは成功するがActionScriptが全く認識されないという状態)

本当にうんともすんとも言わないので原因の手がかりが掴めず、classpath、document classのリンケージのチェック、ASO削除、TextMateでASファイルにBOMを加えてみるなどいろいろ試したんですが全然駄目で、数時間を無駄にしようとしていたそのとき、自分のミスに気がつきました。

Killer.png

画像のように、どうやら何かの拍子で誤ってLibraryのMovieClip Symbolのひとつに、(Base Classにではなく直接)flash.display.Spriteをリンケージしてしまっていたようです。

何故自分でもこんなことをやってしまったのかわかりませんが、これをやってしまうと上記のようにCS4(Mac版)だとpublishはするものの出力が完全沈黙するので、下手をするとはまります(因みにCS3で試したところIDEがクラッシュしました)。たぶんこんなアホなことをやるのは自分だけだろうと思いつつも、もし同じ症状に出くわしたら、一応各Symbolのリンケージをチェックしてみてください。。

This is one of my trivial horror stories - the other day I made changes on some Flash stuff I was working on and published the .fla as usual. However, it suddenly stopped working and even worse, it also stopped spitting out any trace/error messages at all. It published fine, but it's broken and dead silent. It seemed to stop recognizing all the ActionScript class files suddenly.

Since everything is dead silent I had no clue why it went wrong, I just blindly tried a couple of things I could think of, like checking class pathes/document class linkage, deleting ASOs, and trying to add UTF-8 BOM to the AS files (via TextMate). None of them worked. After wasting a couple of hours like this, I found my mistake.

Killer.png

Like the image above, somehow I mistakenly made a linkage to flash.display.Sprite from one of my hundreds of MovieClip symbol. I typed in flash.display.Sprite not in its Base Class field, but in the Class field. This was the cause of everything.

I had no idea why I did this, but anyway I wasted a couple of hours because of the mistake. Usually you don't do something like this but once you did it it may be hard to locate as Flash goes completely silent (In the case of CS4 Mac - when I tried the same on CS3 for testing, it simply crashed). I wrote this note hoping it might help someone who got into the same trap as I did. Perhaps no one else is ever gonna be as dump as me but anyways...

On Having Layout

| No Comments

いまさらかもしれんですが感動しました、これを知っているだけでいままで「なぜ?」と戸惑いながらいろいろ思考錯誤してみるしかなかったIE6(と7)のCSSの問題が結構な確率で解決するように思います;  

On Having Layout (http://www.satzansatz.de/cssd/onhavinglayout.html)

ものすごくおおざっぱに理解したところを反芻させてもらうと;

  • IEにおいてはHTMLの要素に専用の「隠し」パラメータ "hasLayout"というものが存在する
  • これがある要素に対してOn(true)になっているかなっていないかで、その要素の挙動が大きく変化する
  • hasLayoutはデフォルトでは決められた少数の要素でしかOnになっていない(詳しくは本文参照)。何といっても、一番よく使われると思われるdiv要素でOnになっていない
  • hasLayoutは特定のCSSのプロパティを指定してやることでOnにできるので、hasLayoutがOffになっている要素でこれを恣意的にやってやることによってIEにおける他のブラウザとの表示不一致の問題の矯正が可能な場合がある(その逆も真)
といった話だと思います。hasLayoutのOn/Offが実際にどのような影響を及ぼすかについては本文にいくつかの例がリストとしてあがっています(まだincompleteな状態とのことです、具体例を全てあげていくのは困難なのではないでしょうか)。自分も良くわからないままに実際に試してみただけなのですが、div要素やp要素のhasLayoutをOnにしてやることで、IE6/7でのFirefox3との表示の不一致の問題の多く(margin, float関連)が解決したので驚きました。今では、CSSの編集時にIEで何か問題が起こると、ひとまずこのhasLayoutのOn/Offを試すようにしています。

FAQ for SWFObject is a must-read

| No Comments

SWFObjectのFAQはいけてますね、FlashをHTMLにembedするにあたっての陥りやすい罠が網羅されている印象です。実質、FAQの項目の多くが SWFObject自体の問題というよりはブラウザのバグ等が原因のため、同ライブラリを使う使わないに関わらず起こるもののような気がするのですが、SWFObjectが非常に多くの人達に使われているため、ここにそのあたりの質問とその応答の結果として蓄積されたノウハウが一番端的に集まっているように思います。日々様々な(時にはいわれのない)「おい、これ動かんぞ」の問い合わせに開発者の方やコミュニティーのみなさんが反応してくれている状況を想像するに、様々なライブラリ一般を公開して維持してくれている全てのみなさんへの尊敬の念が深まります。

Learning .mxml (as a .fla guy)

| No Comments

他のActionScriptを(も)書いているtechチームメンバーと違い、.flaファイルを使ったFlash IDEを用いてのコンテンツ制作しかろくにできなかった自分ですが、ここ数日、非常に小さいながらもFlex Framework/.mxmlを使った仕事(.mxmlで書かれたテスティングツールのUIデザイン)をやらせてもらっていて、今更なんとか勉強しているところです。

Flex Builderは稀にASエディタ/デバッガとしてしか使うくらいでしたし(今は主にFDTFlashDevelopをつかってます)、reallyenglishに参加させてもらう前はどちらかというと表現重視のものをつくってきた経緯から、傲慢にも自分がFlexを覚えるメリットは大してないだろうと考えていました(実際.mxml主体の制作方法ではものすごく難しい制作ケースがほとんどだったと思います)。しかし今回Flex Frameworkを実際に少し勉強してみて、逆にこの充実したFrameworkの恩恵をうまく使えばいろいろなことが本当に楽にできそうだ(逆にいうと恩恵をうけないと大変すぎて無理そう)といったケースが多くあるだろうということも実感しました。

このAdobeのチュートリアルなどをみるとおおこれは簡単そう、と感動しましたし、何よりも.mxmlを使えばソースがテキストだけで完結できるケースが増えるので見通しがよくなるのが魅力だと思います。これからは二つの制作方法の使いどころを把握してうまいこと組み合わせて使っていけるようになれたらなと考えています。

(。。という流れからもXFLには超期待しているんですが最近どうなっているのでしょうか? あと最初はなんじゃこりゃと思っていたFlash Catalystも今はぜひ使ってみたいと思っています。)

さて本題です。Flex FrameworkのHTMLライクなレイアウトの仕組みもぱっと見思ったより簡単そうでよかったのですが、Flex用のCSSもちゃんと充実してるんですね。検索したら非常にありがたい参考サイトがあったので、紹介させてもらいます。

追記:
Flex BuilderがFlash Builderと再ブランディングされることになり、ますます用語の使い方に迷いますが、下記の記事はFlexって結局なんだったっけ、と再勉強するにあたって非常に助けになりました。

Highlighting Text in TextField

| No Comments

Manipulating text presentation in a Flash interface is a very common task when developing a interface for learning applications at reallyenglish. "Highlighting" a certain parts of the text in a Flash TextField is just one of them and unlike doing it in HTML, it could be a bit cumbersome task sometimes. This time I tried to modularize the functionality.

View Demo
Source files (.zip, 356KB)

Rough description of how to use (please refer to the demo and the source code as well);

 // Create a TextHiliter class instance, passing references for the TextField and a Sprite to draw hilighting marker;
_textHiliter = new TextHiliter(refTextField, refCanvas);

// Hilight the 1st to 4th letters, with #C4E1FF (100% alpha) marker
_textHiliter.hilite(0, 4, 0xC4E1FF, 1);

// Hilight the letters "unable to stop herself to assist her" between "Margaret, " (please note the spaces)  and ", was involuntarily" with #D3FD2D (100% alpha) marker
// The current implementation hilights the 1st match only
_textHiliter.hiliteByLetters("unable to stop herself to assist her",  0xD3FD2D, 1, "Margaret, ", ", was involuntarily");

Although it's still under improvement, I think that the logic for extracting area of certain part of the text can be applied to some other purposes. (And please enlighten me if you know a better way of doing it..!)

2009/12/20:
Made the following changes.

  • Changed hilite() method so that it does not include the character specified by the argument "end(index)". Now it takes effect to the part specified by start and all characters up to end - 1, just like String.substring() method.
  • Changed the Demo so that the text can be highlighten just by selecting a certain part of it.

reallyenglishに参加してから、ActionScriptでのテキストの加工(特に表示面での加工)を行うことが多くなりました。ダイナミックテキストの特定の複数箇所をハイライト(マーキング)するといった処理もその一つです。HTMLだと楽勝ですが、Flashの場合やってみたらかなりめんどくさい感じだったのでこの機能を切り出したものをつくってみました。

View Demo
Source files (.zip, 356KB)

TextHiliterクラスのおおまかな使い方(詳しくはデモ及びソースコードを参照);

// TextField、及び描画用Spriteの参照を引数にTextHiliterのインスタンスをつくる
_textHiliter = new TextHiliter(refTextField, refCanvas);

// 1文字目から4文字目までを、#C4E1FF、100%アルファでハイライトする場合
_textHiliter.hilite(0, 4, 0xC4E1FF, 1);

// "Margaret, " と ", was involuntarily"(スペースに注意) という文字列に挟まれた "unable to stop herself to assist her" という文字列を、#D3FD2D、100%アルファでハイライトする場合
// (現状の実装では、条件を満たすものが複数あった場合も、一番初めにマッチしたものにしか適用されないです)
_textHiliter.hiliteByLetters("unable to stop herself to assist her",  0xD3FD2D, 1, "Margaret, ", ", was involuntarily");

まだ発展途上ですが、TextField内の文字列のエリアを取得する部分のロジックは他の用途にも応用できると思うので、何かの参考にでもなれば嬉しいです。あともっといいやり方があれば教えてください。。!

2009/12/12 追記:
下記を変更しました。

  • hilite()メソッドをString.substring()メソッドと同様、startで指定したindexからendで指定したindexの一文字前までハイライトするように変更(以前はendで指定したindexの文字を含んでました、ごめんなさい)
  • デモにおいて、テキストをセレクトするとセレクトした部分がハイライトされるよう変更

Wording matters

| No Comments

Quite belated, I bumped into this article on "tech lingo invented by marketers" by Mike Elgan.

Stop Dishonest Tech Lingo!

In the article, his heat on the term "follow" which was “invented“ for Twitter goes;

“The word is designed to appeal to narcissists who always wanted a "following." It lets users think that people out there are hanging on every word, anticipating every quip and mobilizing in response to the brilliant missives of the genius tweeter.“