「as3cannonball」というものは、DOM+HTML+CSS+Browserなどを簡単で操作できるActionScript 3オープンソースのライブラリです。公式サイトの紹介を見るとそのライブラリのソースはまだ全部テストされてないです。サンプルを参照しなら実装してみました、使いやすいですよね。ちょっとJavaScriptのExtライブラリ風があるじゃないかぁ。

※CSS解説：Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。

ActionScriptには、以下のようでHTMLLoader オブジェクトが complete イベントを送出すると、ページ内の CSS スタイルを調べたり操作したりできます。

  1. <html>
  2. <style>
  3.     .style1A { font-family:Arial; font-size:12px }
  4.     .style1B { font-family:Arial; font-size:24px }
  5. </style>
  6. <style>
  7.     .style2 { font-family:Arial; font-size:12px }
  8. </style>
  9. <body>
  10.     <p class="style1A">
  11.         Style 1A
  12.     </p>
  13.     <p class="style1B">
  14.         Style 1B
  15.     </p>
  16.     <p class="style2">
  17.         Style 2
  18.     </p>
  19. </body>
  20. </html>
as3cannonballライブラリを使うと、

CSSソース:

  1. a
  2. {
  3.         color: #00FF00;
  4. }
  5.  
  6. #content a[href$=".pdf"]
  7. {
  8.         color: #FF0000;
  9. }

XMLソース:

  1. <div id=”content”>
  2.   <ul>
  3.     <li><a href=”somedoc.pdf”>Some PDF</a></li>
  4.   </ul>
  5. </div>

ActionScript ソース

  1. import com.newgonzo.cannonball.css.CSSDocument;
  2. import com.newgonzo.cannonball.css.CSSStyleDeclaration;
  3.  
  4. var document:CSSDocument = new CSSDocument();
  5. document.parseCSS(css);
  6.  
  7. var style:CSSStyleDeclaration = document.getCascadedStyle(xml);
  8.  
  9. trace(style.color); // #FF0000

関連リンク

http://code.google.com/p/as3cannonball/　公式サイト

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Posted on Friday, 10th April 2009 by admin

Tags: , , , , ,
Posted in ActionScript, Flash Project | Comments (0) | 3,412 views

Leave a Reply