skip to:

masputih.com - OLD SITE

31 July 2007 in ActionScript 2, Tutorial | permalink

Flash, CSS & Teks Eksternal

Seperti kita tahu, dengan menggunakan objek LoadVars, kita bisa memuat konten eksternal ke dalam aplikasi Flash. Jika konten ini menggunakan tag, baik berupa XML maupun HTML, kita bisa menggunakan CSS untuk mengatur tampilannya. Dalam tutorial ini akan saya tunjukkan caranya.

.fla

Pertama, kita buat sebuah .fla dengan ukuran 400 × 400. Pada Stage kita buat sebuah dynamic textfield dengan instance name content_txt.

Kita menulis skrip di dalam sebuah file .as tersendiri yang berisi definisi class bernama CSSTest dan dalam file .fla hanya ada 2 baris skrip berikut:

Actionscript:
  1. import CSSTest;
  2. var ct:CSSTest = new CSSTest(this,"content.txt","styles.css");

Konten yang kita muat disini adalah sebuah file .txt berisi sebuah variabel bernama content yang berupa teks dengan tag html.

“content.txt” adalah file teks yang akan kita tampilkan di textfield, “style.css” untuk mengatur tampilan teks.

text:
  1. content=<h1>Airbus A380</h1>
  2. <p><img src="http://www.masputih.com/files/A380.jpg" /><span class="dropcaps">T</span>he <b><i>Airbus A380</i></b> is a <a href="http://www.answers.com/topic/double-decker">double-deck</a>, four-engined <a href="http://www.answers.com/topic/jet-airliner">airliner</a> manufactured by <a href="http://www.answers.com/topic/eads-5">EADS</a> <a href="http://www.answers.com/topic/airbus">(Airbus S.A.S.)</a>. It is the largest passenger airliner in the world. It first flew on 27 April 2005 from Toulouse, France. After lengthy delays, commercial flights are scheduled to begin in late 2007. During much of its development phase, the aircraft was known as the <b><i>Airbus A3XX</i></b>. The nickname <b><i>Superjumbo</i></b> has become associated with the A380.</p>
  3. <p>The A380's upper deck extends along the entire length of the fuselage. This allows for a cabin with 50% more floor space than the next largest airliner, the Boeing 747-400, and provides seating for 525 people in standard three-class configuration or up to 853 people in full economy class configuration.</p>
css:
  1. h1 {
  2.     color: #7F0908;
  3.     font-family: Arial,Helvetica,sans-serif;
  4.     font-size: 25px;
  5.     font-weight: bold;
  6. }
  7. p {
  8.         color: #461413;
  9.         font-family: Arial,Helvetica,sans-serif;
  10.         font-size: 12px;
  11.         text-align:justify;
  12. }
  13. a:link {
  14.         color: #AC312F;
  15.         text-decoration: underline;
  16. }
  17. a:hover{
  18.     color:#00366A;
  19. }
  20. .dropcaps{
  21.         font-size:20px;
  22.         font-weight:bold;
  23. }

Class CSSTest

Ok, sekarang kita buat file .as kita simpan dengan nama CSSTest.as. Pada bagian paling atas class ini, kita mengimpor class mx.utils.Delegate . Untuk apa class ini? hmm … nanti kita lihat.

O ya, class ini yang akan “menjalankan” aplikasi.

Pertama kita perlu melakukan inisialisasi aplikasi ini melalui constructor (ctor). Karena kita ingin class ini bisa memuat file .txt dan .css eksternal yang ditentukan di dalam .fla, maka ctor harus memiliki parameter untuk menerima url dari file .txt dan .css tersebut. Untuk itu kita buat dua variabel bertipe String masing-masing kita beri mana nama cp untuk konten dan cssp untuk .css . Dan juga sebuah variabel lain bertipe MovieClip dengan nama target untuk menampung reference ke _root timeline. Kita buat juga 4 buah instance variables yaitu:

  • _app : referensi ke Stage
  • _lv : referensi ke LoadVars objek
  • _content : referensi ke TextField yang ada di Stage
  • _css : referensi ke objek TextField.StyleSheet

Class CSSTest seperti berikut :

Actionscript:
  1. import mx.utils.Delegate;
  2. class CSSTest{
  3.     private var _app:MovieClip;
  4.     private var _lv:LoadVars;
  5.     private var _content:TextField;
  6.     private var _css:TextField.StyleSheet;
  7.  
  8.     function CSSTest(target:MovieClip, cp:String,cssp:String){
  9.         _app = target;
  10.  
  11.                 /*content_txt adalah nama instance
  12.            dynamic textfield yang ada di Stage*/
  13.         _content = _app.content_txt;
  14.         _content.html = true;
  15.     }   
  16. }

Memuat .css & .txt

Langkah selanjutnya adalah membuat method untuk memuat .css dan .txt. Method ini nanti dipanggil secara berurutan, method untuk memuat .css harus dipanggil terlebih dahulu.

Actionscript:
  1. function loadCSS(cssp:String){
  2.         _css = new TextField.StyleSheet();
  3.         _css.load(cssp);
  4.         _css.onLoad = function(){}
  5. }
  6. function loadContent(cp:String){
  7.         _lv = new LoadVars();
  8.         _lv.load(cp);
  9.         _lv.onLoad = function(){}
  10. }

Sebaiknya kita menghindari penggunaan Anonymous callback , jadi kita gunakan Delegate untuk “memindahkan” scope onLoad callback dari _css dan _lv ke class instance. Kedua onLoad callback kita ubah menjadi seperti berikut:

Actionscript:
  1. function loadCSS(cssp:String){
  2.         ...
  3.         _css.onLoad = Delegate.create(this,onCSSLoaded);
  4. }
  5. function loadContent(cp:String){
  6.         ...
  7.         _lv.onLoad = Delegate.create(this,onContentLoaded);
  8. }

Karena menggunakan Delegate, kita membutuhkan 2 method lagi untuk menghandel onLoad event.

Actionscript:
  1. function onCSSLoaded(ok:Boolean){
  2.         if(ok){
  3.                 _content.styleSheet = _css;
  4.         }
  5. }
  6. function onContentLoaded(ok:Boolean){
  7.         if(ok){
  8.                 _content.htmlText = _lv.content;
  9.         }
  10. }

Class CSSTest selengkapnya adalah sebagai berikut.

Actionscript:
  1. import mx.utils.Delegate;
  2. class CSSTest {
  3.         private var _app:MovieClip;
  4.         private var _lv:LoadVars;
  5.         private var _content:TextField;
  6.         private var _css:TextField.StyleSheet;
  7.  
  8.         function CSSTest(target:MovieClip, cp:String, cssp:String) {
  9.                 _app = target;
  10.                 _content = target.content_txt;
  11.                 _content.html = true;
  12.  
  13.                 loadCSS(cssp);
  14.                 loadContent(cp);
  15.         }
  16.         function loadCSS(cssp:String) {
  17.                 _css = new TextField.StyleSheet();
  18.                 _css.load(cssp);
  19.                 _css.onLoad = Delegate.create(this, onCSSLoaded);
  20.         }
  21.         function onCSSLoaded(ok:Boolean) {
  22.                 if (ok) {
  23.                         _content.styleSheet = _css;
  24.                 }
  25.         }
  26.         function loadContent(cp:String) {
  27.                 _lv = new LoadVars();
  28.                 _lv.load(cp);
  29.                 _lv.onLoad = Delegate.create(this, onContentLoaded);
  30.         }
  31.         function onContentLoaded(ok:Boolean) {
  32.                 if (ok) {
  33.                         _content.htmlText = _lv.content;
  34.                 }
  35.         }
  36. }

Test Movie

Demikian, semoga bermanfaat.

Source code bisa didonlod di sini : FlashCSSTxt.tgz

Comments [3]

1. emil , 1093 days ago #

q masih gak ngerti yg bwt CSS & Text

2. anggie bratadinata (author) , 1093 days ago #

@emil:
Bagian yg mana ? CSSnya kan sama dgn css biasa yg buat styling html. Textnya juga pake tag html.

3. yuda , 846 days ago #

tiap browswer belum tentu seragam nampilin css, pengalaman mas sendiri mesti gimana, maksudnya,, contoh OPACITY, di IE sama OPERA beda transparansinya,,(saya udah tes )mohon petunjuknya

Commenting is closed for this article.