みなさん、「Progression」というFlash用フレームワークをご存じでしょうか。Progressionを使えば、Flashサイトであっても、HTMLサイトのようなページ構成や画面遷移といったサイト基本機能を簡単に実装することができます。すでに多くのクリエイターが利用しており、個人サイトだけでなく、企業サイトでもProgressionが採用されています。

Progressionには豊富な機能が用意されていますが、さらにProgression用拡張機能を使って様々な機能を追加することができます。そして、先頃、Progressionをもっと便利に、もっと楽しくしようと「extends Progression 拡張機能コンテスト」が開催されました。受賞作品をみると、グランプリ作品「CaptureSheetMaker」をはじめ、みなさんのFlash開発に役立つ作品ばかり。ぜひ、Progressionとともに利用していただきたい！　そこで、本記事では「CaptureSheetMaker」の開発者である池田泰延さんに、その機能と使い方を解説していただきます。

CaptureSheetMakerの機能

CaptureSheetMaker（キャプチャー・シート・メーカー）は、Flashサイトの全ページを自動的にキャプチャしてPDFとして保存するProgression拡張機能です。

みなさんも、サイトの仕様書やクライアントへの説明資料を作成する際に、各ページをキャプチャして掲載しているのではないでしょうか。HTMLサイトの場合、自動的に巡回して画像化するキャプチャツールがあります。一方、Flashサイトの場合、全ページを自動的にキャプチャするツールは今までありませんでした。それは、Flashでは表現の自由度が高いために、作り手・コンテンツで設計が統一できないことが原因です。しかし、Progressionを利用して構築したFlashサイトであれば、基本となる設計はどれも同じです。そこで、Progressionの仕組みを拡張して、CaptureSheetMakerを開発しました。

まずは、CaptureSheetMakerの機能を体験していただきましょう。下記サンプルサイトにアクセスして、右クリックから[キャプチャしてPDFに保存する]を選択してください。自動変換が始まり、変換後に表示される「Save PDF OK?」をクリックするとPDFを任意の場所に保存できます。

CaptureSheetMakerの体験サンプル。このサンプルは、トップページ、スライドショーの一覧ページ、各スライドのページ（3つ）、クレジットページの計6ページで構成されています

書き出されたPDFファイル。各ページが1つのPDFとして書き出されています

このようにCaptureSheetMakerでPDFを作成することで、開発中のワークフローを改善できます。例えば、FlashサイトをPDFにすれば、赤字を入れやすくなり、検証精度も向上するでしょう。また、クライアントとの打ち合わせの資料として利用すれば、認識共有を図ることができます。資料を一枚一枚プリントスクリーンして用意しているのであれば、その作業が自動化されることにより、検証・確認のサイクルが確実にスピードアップするでしょう。

CaptureSheetMakerは、主に以下のシーンで活用していただけると思います。

• Flash開発者：仕様書の作成。
• 検証スタッフ：PDFベースでの文言・画像のチェック。
• ディレクター：クライアントや協力会社への説明資料の作成。

CaptureSheetMakerの実装方法

使用条件

CaptureSheetMakerを利用するには、以下の環境・設定が必要です。条件が高いため、注意してください。

フレームワーク	Progression 3.1.62
開発環境	Flash CS4、またはFlex SDK 3.3
書き出し設定	Flash Player 10 / ActionScript 3.0

実装方法

CaptureSheetMakerは、ActionScriptのライブラリとして用意しているため、パブリッシュ前に組み込みます。実装するには、数行のスクリプトを加えるだけです。以下はProgression 3をすでにインストールした状態であることを前提として説明しています。Progressionのインストール方法は公式サイトを参照してください。

• STEP1　CaptureSheetMakerのライブラリをダウンロードする。
  http://clockmaker.jp/project/prog_csm/

• STEP2　Progressionプロジェクトパネルで、Flash Player 10向けを選択。

  

  ※すでに作成したＰｒｏｇｒｅｓｓｉｏｎプロジェクトに拡張機能を付与する場合は、拡張機能を付与したいflaファイルを開いた状態で、メニューから[ファイル→パブリッシュ設定→Flash（タブ）]で[Player]の箇所を「Flash Player 10」に設定してください。

• STEP3　ライブラリファイル「CaptureSheetmaker.swc」をsrcフォルダ内のclassesフォルダに格納します。classesフォルダがない場合は作成してください。この作業は、プロジェクトごとに行う必要があります。

  

  また、過去のProgression 3.1以前のバージョンからアップデートした場合は、swcファイルへのパスが通っていない場合もあるので、パスを通すように設定ください。メニューから[ファイル→パブリッシュ設定→Flash(タブ)→設定(スクリプト右のボタン)→ライブラリパス(タブ)]を選択し、SWCファイルを設定できるダイアログを表示します。次に[+]のボタンをクリックして「.」「./classes/」「./libs/」を入力します。「.」と「./libs/」は、CaptureSheetMakerを使うための設定ではありませんが、Progression3.1と仕様を合わせるために入力しています。

  

• STEP4　Progression起動コードに以下のスクリプトを記述します。基本的には次の2行のスクリプトを書くだけで実装完了です。

  import jp.clockmaker.prog.*;
  CaptureSheetMaker.initialize(prog); // progはProgression インスタンス

  Progressionには3つの開発スタイルがあります。それぞれの実装方法をまとめておきます。

  【コンポーネントスタイル】
  index.flaファイルのrootのタイムライン1フレーム目に、以下のスクリプトを記述します。

  // ライブラリのインポート
  import jp.clockmaker.prog.*;
  import jp.progression.*;
  
  // Progressionの初期化を時間差で待機します
  var timer:Timer = new Timer(5000, 1);
  timer.addEventListener(TimerEvent.TIMER_COMPLETE, compHandler);
  timer.start();
  
  // タイマーによる遅延処理
  function compHandler(e:Event):void{
      // Progressionインスタンスを取得
      // idはeasycasting.xmlのルートシーンのsceneIdを指定します
      var prog:Progression = getProgressionById("index");
  
      // CaptureSheetMakerを初期化します 
      CaptureSheetMaker.initialize(prog);
  }

  【タイムラインスタイル】
  index.flaファイルのrootのタイムライン1フレーム目の_complete関数の閉じ括弧直前に次のスクリプトを記述します。
  

      import jp.clockmaker.prog.*;
      // CaptureSheetMakerを初期化します
      CaptureSheetMaker.initialize(prog);
  }

  【クラススタイル】
  index.flaのドキュメントクラスに指定しているIndex.asクラスの_onInit()関数内の閉じ括弧直前に、以下のスクリプトを記述します。

      import jp.clockmaker.prog.*;
      // CaptureSheetMakerを初期化します
      CaptureSheetMaker.initialize(prog);
  }

• STEP5　パブリッシュします。この状態で画面内の任意の場所で右クリックをすると[キャプチャしてPDFに保存する]というメニューが表示されます。これを選択すると、サイト内の自動巡回キャプチャが開始されます。

  

• STEP6　キャプチャ終了後に表示されるアラート「Save PDF OK?」をクリックすると保存ダイアログが表示されるので、PDFの保存先を指定します。ディフォルトの名前は「日付_ルートシーンのタイトル_capture.pdf」となってます。

  

  Adobe Readerで開くと、全ページのキャプチャが確認できます。

  

今後の予定

実際のWeb制作現場で役立ててほしいと思っています。今後のバージョンアップとして、ご要望があればProgression公式フォーラム内に拡張機能のトピックがあるので、そこに投稿してください。

Progression Forum > ラウンジ > 拡張機能

また、私のもう一つの応募作品「AutoSitemap」はFlashサイトに自動的にサイトマップ機能を付与する拡張機能です。CaptureSheetMakerの兄弟的な仕組みとなっており、実装方法も非常に似ています。もし興味がありましたら、ぜひこちらも利用してください。

AutoSitemapを使って表示させたサイトマップ（ページ上部の半透明レイヤー）

著者について