ActionScript3

ActionScript でわかりやすかったのが、「プログラマのためのFlash遊び方」の第2回 お絵かきしながら学ぶActionScript 3.0(前編) とその後編。

しかし、講座は Flex SDK 3.0 であるので、

$ mxmlc as/DrawTest1.as
設定ファイル "/home/name/flex/frameworks/flex-config.xml" をロードしています
/home/name/flex/as/DrawTest1.as: 警告: このコンパイル単位では、設定されたランタイム共有ライブラリを読み込むための、factoryClass が Frame メタデータで指定されていませんでした。ランタイム共有ライブラリなしでコンパイルするには、-static-link-runtime-shared-libraries オプションを true に設定するか、-runtime-shared-libraries オプションを削除してください。

/home/name/flex/as/DrawTest1.swf (719 バイト)
$ mxmlc -static-link-runtime-shared-libraries=true as/DrawTest1.as
設定ファイル "/home/name/flex/frameworks/flex-config.xml" をロードしています
/home/name/flex/as/DrawTest1.swf (718 バイト)

flex-config.xml を gedit で開いて書き換えました。

385 line on frameworks/flex-config.xml

    <!-- static-link-runtime-shared-libraries: statically link the libraries specified by the -runtime-shared-libraries-path option.-->
    <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
            <!-- false changed true 20100529 -->

Flash Builder 4 and Flex 4 Bible

1.000 ページを越える大部の洋書であるが、コーディング例も多いというので、amazon に注文して、夕方届いた。

ナント厚さが 56mm、目次が 16 ページ、巻末の索引が 36 ページもある。

著者サイトからコーディング例の zip ファイル (3.6MB) がダウンロードでき、さらに抄録の pdf ファイルが 8 本(全章ではない)もダウンロードできる。

FXGeditor AIR

このウェブアプリ作者は 2 週間ほど前に AIR アプリも発表していた。これは迂闊であった。(画像クリックでダウンロード・サイトへ)

7jigenFXGAIR

ウェブアプリと AIR とどちらを採るかは好みかもしれない。

AIR アプリのインストールで今までコケたことがないのに、今回はエラーが起き、PC 再起動でやっと成功した。

インストールすると、真っ白な画面が表示されるが、「ファイル」 → 「新規作成」で左に見慣れたアイコンが並ぶ。

FXGAIR48 FXGAIR

これでデスクトップ上の作業が可能になる。

さて、日本語は先の追記のようにテキスト・エディタからのコピー&ペーストで可能な訳だが、フォント・ファイルのサイズが軽めのものを試してみる。

文字数限定の「懐映体」という 550kb のフォントを ubuntu で試してみる。

このアプリの扱いにくい点は通常の画像ソフトなら、たくさんフォント名が並んだ中から選択しますが、「フォント名」を分かっていなければ、そのフォントが使えないことになる点。

フォント名は id-cinema-light となっているから、フォント名のところに i を入力すれば、i から始まるフォント名が並ぶ。

さて、この出力された mxml に hokk-idcin.mxml と名前を付けた。 コンパイルしてみる。

$ mxmlc mxml/hokk-idcin.mxml
設定ファイル "/home/name/flex/frameworks/flex-config.xml" をロードしています
/home/name/flex/mxml/hokk-idcin.mxml: エラー: 無効なコンポーネント名 'hokk-idcin' : コンポーネント名は正しい ActionScript クラス名である必要があります。

エッ、ナンデ?

先の borra と違わんはずだが。・・・・ そう思って先の borra と全く同じ構成にしてみる。borra はウェブ上で作成した。 それでもなおエラーが吐き出された。

AS の場合、クラス名とファイル名が同一でなければならないというのは知っていたが、このエラー・メッセージからファイル名にハイフンはダメとは受け取れなかった。 そんなことも知らなかったのかと言われれば、それまでだが。

さて、swftools では「重い」フォントファイルを用いるとそれなりにファイル・サイズも増えることが知られている。 これも試してみようと思う。

次には ubuntu ではフォント名が表示されなかった「全字庫説文解字」という名前のフォント。 フォントのファイル・サイズが 9.9MB もある。 AIR は windows で作業した。

使用フォント名 SF Planet Orbiter 懐映体ライト 全字庫説文解字
ttf サイズ 35kb 551kb 10138kb
swf サイズ 39,244 39,242 39,275

この結果からフォントに関しては、所謂「埋め込みフォントは重くなる」の概念は捨ててもよいかと思われます。
Flex の仕様に負うものなのかもしれません。

昨日書いた「Error #2046: 読み込まれたファイルには、有効なシグネチャがありません。」と言うエラーはどうもリロードを 5, 6 回すると、起こるようだ、私の環境では。

FXG を舐めてみる

ザラっと概要を見ると、画像の描画方法が swftools のそれに似ていると直感した。

もう少し調べると、adobe illustrator は CS4 から対応させている adobe の新しい画像フォーマットらしいが、生憎そんな高価なものには縁がない。 大体が、イラストらしきものさえ描かないのだから。 photoshop CS5 は別途プラグインで対応とのこと。

FXGeditor

しかし、世の中よくできているもので、ウェブ上のツールが既にあるではないか。

FXG Editor – Online – Free open source FXG vector editor for Actionscript – Edit

使い方のページも用意されているので、大助かり。

7 つほどのオブジェクトを Shift キーを押しながらクリックして、 Delete キーで削除すれば、全オブジェクトが消えて一からの作品を作ることができる。

FXGedit.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
  <Graphic version="2.0" viewHeight="841.89" viewWidth="595.275" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
    <Ellipse width="344.072" height="100" x="139.35" y="291.2">
      <fill>
        <SolidColor color="#565656" alpha="1"/>
      </fill>
      <filters>
        <BlurFilter blurX="69" blurY="69" quality="3"/>
      </filters>
    </Ellipse>
    <Path data="M514.385,243.586 C514.385,374.802 395.47,297.235 255.083,297.235C114.696,297.235 6,374.802 6,243.586C6,112.371 119.806,6 260.192,6C400.579,6 514.385,112.371 514.385,243.586L514.385,243.586Z" winding="nonZero" x="42.85" y="18.85">
      <fill>
        <RadialGradient x="147.785" y="115.851" scaleX="659.66" rotation="70.1537" scaleY="-682.466">
          <GradientEntry color="#FFFFFF" ratio="0"/>
          <GradientEntry color="#8FC1F6" ratio="0.5228758169934641"/>
          <GradientEntry color="#6662FE" ratio="1"/>
        </RadialGradient>
      </fill>
      <stroke>
        <SolidColorStroke color="#5E5E5E" alpha="1" weight="20.5" miterLimit="4" caps="none"/>
      </stroke>
    </Path>
    <Path data="M440.166,166.64 C440.166,258.672 337.208,204.268 215.659,204.268C94.1108,204.268 0,258.672 0,166.64C0,74.6069 98.5347,0 220.083,0C341.632,0 440.166,74.6069 440.166,166.64L440.166,166.64Z" winding="nonZero" x="86.35" y="45.05">
      <fill>
        <LinearGradient x="328.1" y="222.15" scaleX="240.1859956367149" rotation="-123.83893035950028">
          <GradientEntry color="#FFFFFF" ratio="0" alpha="0.42"/>
          <GradientEntry color="#FFFFFF" ratio="0.9934640522875816" alpha="0.12"/>
        </LinearGradient>
      </fill>
    </Path>
    <Path data="M126.071,137.566 C137.393,97.1401 206.863,85.8604 223.266,138.038" winding="nonZero" x="48.25" y="27.55">
      <stroke>
        <SolidColorStroke color="#6C6C6C" alpha="1" weight="20" miterLimit="4"/>
      </stroke>
    </Path>
    <Path data="M295.958,135.113 C307.28,94.687 374.845,89.1255 393.152,135.584" winding="nonZero" x="44.35" y="25.35">
      <stroke>
        <SolidColorStroke color="#6C6C6C" alpha="1" weight="20" miterLimit="4"/>
      </stroke>
    </Path>
    <Path data="M272.076,14.4873 C272.076,50.4658 211.169,79.6323 136.038,79.6323C60.9063,79.6323 0,50.4658 0,14.4873C0,-21.4912 62.1836,20.874 137.315,20.874C212.447,20.874 272.076,-21.4912 272.076,14.4873Z" winding="nonZero" x="176.8" y="208.45">
      <fill>
        <LinearGradient x="191.95" y="102.6" scaleX="127.35660563944062" rotation="-120.66285229596582">
          <GradientEntry color="#FF0000" ratio="0"/>
          <GradientEntry color="#8F0000" ratio="1"/>
        </LinearGradient>
      </fill>
    </Path>
    <RichText fontFamily="_sans" fontSize="30" x="126.4" y="389.6">
      <content>
        <div fontSize="32">
          <p>
            <span/>
            <span alignmentBaseline="useDominantBaseline" backgroundAlpha="1" backgroundColor="transparent" baselineShift="0" breakOpportunity="auto" cffHinting="horizontalStem" color="#8790ad" digitCase="default" digitWidth="default" dominantBaseline="auto" fontFamily="Lucida Console" fontLookup="device" fontSize="79" fontStyle="normal" fontWeight="normal" kerning="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" textAlpha="1" textDecoration="none" textRotation="auto" trackingLeft="0" trackingRight="0" typographicCase="default">edit me.</span>
            <span/>
          </p>
        </div>
      </content>
    </RichText>
  </Graphic>
</Application>

これも FXG アイコンから mxml 出力されたものをコピーして保存後、コンパイルしてみました。

$ mxmlc mxml/FXGedit.mxml
設定ファイル "/home/name/flex/frameworks/flex-config.xml" をロードしています
/home/name/flex/mxml/FXGedit.swf (41122 バイト)

成功のようだ。

もう一つ、svg で使った文字を FXG で試してみた。

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
  <Graphic version="2.0" viewHeight="100" viewWidth="300" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
    <RichText fontFamily="SF Planetary Orbiter" fontSize="36" x="6.8" y="11.95" scaleX="1.532294750213623" scaleY="1.5714285373687744">
      <content>
        <div>
          <p>
            <span>BORRA</span>
          </p>
        </div>
      </content>
    </RichText>
  </Graphic>
</Application>

35kb ほどのフォントも埋め込んであるので、39kb というファイルサイズは妥当なところだろうか。

これで日本語などの 2 バイトフォントが使えれば、言うことナシなんですがねえ。

ブラウザに表示させた時、「Error #2046: 読み込まれたファイルには、有効なシグネチャがありません。」とエラーが表示され、google 先生に訊いてもこれといった解決法が見つからない。 これにはマイッタ

一旦 ubuntu を終了し、HDD を入れ替えて windows でゴニョゴニョした後、再び ubuntu に戻ると回復していた。ヤレヤレ。


(追記)日本語はテキストエディタからコピー&ペーストで利用できる。