Sample Applications

Sample Applications One of the quickest ways to learn about Macromedia Flash Media Server 2 is to look at existing sample files to see how they were created. Flash Media Server provides you with source code (FLA files) and SWF files so you can see the examples in action. You can learn how to use the server using two kinds of examples: Tutorials are step-by-step procedures that illustrate Flash Media Server programming techniques and how to use many of the Flash Media Server objects. In general, these tutorials are simple applications that have been designed specifically to show certain individual features in context, such as recording a stream or working with a shared object. Live Sample Applications are more complex, working applications that help you understand how the server’s features can work together with the rich presentation capabilities of Macromedia Flash. These examples use server-side scripting and might include components. Before diving into this code, be familiar with the basic communication concepts demonstrated by the tutorials. Live Sample Applications Panel Presentation In this sample, you would typically create a presentation in advance. It allows for 3 speakers who can broadcast audio and video. Many more people can attend the presentation and may choose to participate via text chat. Concepts: live audio and video, shared objects In "About Flash Media Server > Writing your first application" you can follow some simple steps and in under 20 lines of code, connect to the server and send and receive video. Flash Media Server is not only for video, without a camera or microphone, you can effectively communicate with text. Use SharedObjects for distributed data management and synchronization. In Sample Applications > Tutorial 2, SharedText shows a simple use of SharedObjects to synchronize text fields for multiple users. Any user can update the text on the stage, and other users can see it immediately updated on their own stages. Guestbook This sample allows users to record audio, video and text messages in a guestbook. The guestbook extends a scroll panel to display all of the recorded messages. Concepts: record and playback Sample Applications > Tutorial 1: Recording a Stream shows how to record a stream to the server and play it back. Sample Applications > Tutorial 6: Record a List demontrates keeping a list of streams as they are recorded, and playing back a specific stream from a list. This is a key concept used in the Guestbook. Video Conference This sample shows how to manage a large number of streams for dynamic video conferencing. Note that every user of this application publishes one stream and subscribes to everyone else stream. This can provide a very effective user experience when each meeting attendee has equal importance; however, bandwidth usage of your server grows exponentially (with the number of streams) as the number of users increase. Concepts: shared state using shared objects In Sample Applications > Tutorial 3, Shared Ball: demonstrates shared context using remote shared objects to synchronize x,y coordinates of a graphical object viewed by multiple people. This concept is used in the video conference for the position and movement of the windows. Lobby and Audio Conference These samples are tied to each other. They demonstrate how you can create a portal for accessing multiple instances of an application. It uses a "room" metaphor that allows users to create named application instances or join an existing session. It also allows users who are in the lobby to chat with each other and see who else is present. Concepts: using applications instances for different groups of people In Sample Applications > Tutorial 5, Text Chat: shows a simple way to create multiple "rooms" each with a list of people and a text chat area with history. Survey and Survey Admin There are two components to this application. The first demonstrates how you can create a client application for visiting a survey, voting and viewing results. The second demonstrates how you can create one or more surveys, enter your questions and answer choices. Broadcast Presentation This sample shows how to host a presentation with one speaker and many subscribers. There is a single audio/visual piece, a questions and answers capability, and a slide show, into which other swfs can be loaded. Note Room This sample allows users to create and save notes. The notes can be viewed and edited by more than one user at the same time. This application is a great example of how to use remote shared objects for on-line and off-line editing. Camera Snapshot demostrates how to capture a single frame, save it on the server, and play it back.

Masking dengan mouse

Tutorial ini merupakan penggabungan dari masking dan menggerakan objek dengan gerakan mouse. Hasilnya berupa sebuah masking yang digerakkan dengan kursor mouse. Masking dengan kursor mouse ini juga bagus untuk interaktif. Anda dapat berkreasi melalu tutorial di bawah ini.

1. Buatlah sebuah flash document.

2. Takan tombol Insert Layer di timeline sebanyak 2 kali sehingga di timeline akan terlihat seperti gambar di bawah ini :

Tampilan pada timeline

3. Klik frame 1 layer 1 dan gambarlah sebuah persegi panjang berwarna hitam dengan panjang dan lebar sama dengan stage.

4. Klik frame 1 layer 2 dan tekan Ctrl+R. Pada kotak dialog yang muncul cari gambar yang diinginkan dan tekan open. Tempatkan gambar di tengah-tengah stage. Seleksi gambar tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan picture sebagai name dan movie clip sebagai type lalu tekan ok.

Contoh gambar yang digunakan

5. Seleksi movie clip picture di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan picture di kotak instance name.

6. Klik frame 1 layer 3 dan buatlah sebuah lingkaran berwarna merah dengan ukuran yang tidak terlalu besar. Seleksi lingkaran tersebut dan tekan F8. pada kotak dialog yang muncul masukkan lingkaran sebagai Name dan movie clip sebagai type lalu tekan ok.

7. Seleksi movie clip lingkaran di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran di kotak instance name.

8. Klik frame 1 layer 3 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut :

1 2 3 4

//movie clip picture dimask oleh movie clip lingkaran _root.picture.setMask(_root.lingkaran); //movie clip lingkaran dapat didrag startDrag(lingkaran, true);

9. Tekan Ctrl+Enter untuk melihat hasilnya.

Membuat Keyboard

Mengetik menggunakan keyboard sudah biasa, tapi kali ini kita akan mengetik dengan menekan tombol yang sudah disediakan. Prinsipnya sama seperti kalkulator. Jika tombol pada kalkulator ditekan akan muncul angka, pada tutorial di bawah ini akan muncul huruf.

1. Buatlah sebuah flash document.

2. Buatlah sebuah input text di stage. Seleksi input text tersebut dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan kertas sebagai var dan aktifkan tombol show border around text.

3. Buatlah sebuah persegi berwarna merah dengan hitam sebagai warna garisnya. Seleksi persegi tersebut dan tekan F8. Pada panel yang muncul masukkan kotak_btn sebagai instance name dan button sebagai type lalu tekan ok.

4. Seleksi kotak_btn di stage dan tekan Ctrl+D sebanyak 27 kali.

5. Buatlah 27 buah static text masing-masing bertuliskan huruf abjad a-z, Space, Clear All.

6. Letakkan setiap static text tadi di tengah-tengah kotak_btn. Atur ukuran kotak_btn yang ditempati static text bertuliskan Space dan Clear All menjadi lebih besar.

7. Setelah masing-masing static text terpasang pada seluruh kotak_btn. Atur letaknya sehingga seperti gambar di bawah ini :

8. Berikan seluruh kotak_btn di stage dengan instance name seperti gambar di bawah ini :

Arahkan kursor mouse pada salah satu kotak untuk mengetahui instance namenya

9. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

//membuat variable bernama kertas dengan nilai kosong kertas = ""; //membuat array bernama yang di dalamnya berisi kumpulan huruf abjad huruf = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; //membuat variable i dengan nilai 1 sampai 26 for (i=1; i<=26; i++) { //membuat variable no di dalam i+"_btn" dengan nilai sama dengan i _root[i+"_btn"].no = i; //ketika i+"_btn" ditekan _root[i+"_btn"].onPress = function() { //menambahkan nilai pada variable kertas sesuai nilai pada array huruf yang berdasarkan nilai variable no tombol ini dikurangi 1 kertas += huruf[this.no-1]; }; } //ketika space_btn ditekan space_btn.onPress = function() { //tambahkan spasi di variable kertas kertas += " "; }; //ketika clearall_btn ditekan clearall_btn.onPress = function() { //nilai variable kertas menjadi kosong kertas = ""; }; onEnterFrame = function () { kertas.focusEnabled = true; };

10. Tekan Ctrl+Enter untuk melihat hasilnya

Actionscript

Actionscript terdiri dari 2 kata yaitu : action (aksi) dan script (tulisan/naskah) yang berarti tulisan/naskah yang beraksi

Actionscript adalah bahasa pemrograman yang digunakan di Flash. Hingga saat ini sudah mencapai 3 versi.

Actionscript 1.0 (tahun 2000 - tahun 2003) mulai dipergunakan pada Flash 5 dengan minimal dimainkan di Flash Player 5

Actionscript 2.0 (tahun 2003 - tahun 2006) mulai dipergunakan pada Flash MX 2004 dengan minimal dimainkan di Flash Player 7

Actionscript 3.0 (tahun 2006 sampai sekarang) mulai dipergunakan pada Flash CS3 dengan minimal dimainkan di Flash Player 9

Di Flash actionscript ditulis pada panel actions. Penulisan actionscript di panel actions dapat dilakukan pada 3 tempat yaitu pada movie clip, button, dan frame. Ketiga buah tempat tadi memiliki aturan penulisan yang berbeda.

1. Untuk menjalankan event pada button, script pada button penulisannya diawali dengan on(){}

2. Untuk menjalankan event pada movie clip, script pada movie clip penulisannya diawali dengan on(){} atau onClipEvent(){}

3. Untuk menjalankan event pada frame, script pada frame penulisannya diawali dengan onLoad=function(){} atau onEnterFrame=function(){} atau onPress=function(){} atau onRelease=function(){} dsb.

Ketiga cara penulisan script tersebut memiliki kekurangan dan kelebihan. Kami lebih merekomendasikan menulis script pada frame karena apabila terdapat kesalahan/error pada script yang anda tulis anda dapat cepat memperbaikinya. Coba bandingkan apabila anda menulis script pada movie clip atau button, jika sampai muncul kesalahan/error pada script yang anda tulis, tentunya anda harus mengeceknya satu per satu mana yang error.

Untuk mengecek apakah terdapat kesalahan pada script yang anda tulis anda dapat menggunakan tombol Check syntax pada panel actions. Ketika tombol Check syntax ini ditekan, apabila script yang anda tulis terdapat kesalahan maka akan muncul kotak dialog beserta panel output yang di dalamnya berisi informasi kesalahan pada script anda. Apabila script yang anda tulis sudah benar maka akan muncul kotak dialog bertuliskan This script contains no errors.

Seperti dalam kehidupan nyata tulisan pada selembar kertas harus ditulis dengan rapi agar enak membacanya. Begitu juga penulisan script, apabila kurang rapi penulisannya tentunya anda akan tidak enak membacanya atau malah sampai bingung bagaimana membacanya. Untuk itu di Flash sudah disediakan fasilitas untuk merapikan script yang anda tulis. Caranya cukup mudah, apabila anda sudah yakin tidak ada error pada script yang anda tulis, silahkan anda menekan tombol Auto format pada panel actions. Jika anda menekan tombol tersebut maka script yang tadinya penulisannya kurang rapi (ada yang terlalu kekanan, ada yang terlalu banyak spasinya dsb) akan menjadi teratur dan rapi secara otomatis.

Berikut ini beberapa actionscript yang sering digunakan :

+

-

*

/

=

-=

+=

%=

*=

/=

!=

<

<=

==

>=

–

++

and

or

not

stop

play

gotoAndStop

gotoAndPlay

nextFrame

prevFrame

nextScene

prevScene

onClipEvent(){}

on(){}

trace

_x

_y

_xscale

_yscale

_visible

_height

_width

_alpha

_rotation

_currentframe

_xmouse

_ymouse

_totalframes

_quality

for

if

enabled

useHandCursor

getBytesLoaded

getBytesTotal

getURL

fscommand

loadMovie

unloadMovie

loadMovieNum

unloadMovieNum

setInterval

clearInterval

stopAllSounds

startDrag

stopDrag

hitTest

random

attachMovie

dupilateMovieClip

swapDepths

getNextHighestDepth

setMask

SharedObject

Sound constructor

attachSound

setVolume

start sound

stop sound

Variable

Array

Math

Efek salju

Efek yang dibuat kali ini adalah efek salju. Salju yang muncul akan kita buat dengan menggunakan attachMovie. Dimana nantinya sebuah lingkaran akan di attach ke dalam stage dengan posisi, ukuran, dan kecepatan yang di acak. Lingkaran ini akan bergerak turun terus. Apabila keluar dari stage maka lingkaran ini akan dihapus.

1. Buatlah sebuah flash document.

2. Buatlah sebuah lingkaran kecil berwarna putih tanpa garis.

3. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan salju sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

4. Hapus movie clip salju di stage kemudian tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip salju dan pilih linkage,

5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan salju sebagai identifier lalu tekan ok.

6. Buatlah sebuah persegi berwarna biru tua tanpa garis dengan panjang dan lebar sama dengan panjang dan lebar stage.

7. Letakkan persegi tersebut di tengah-tengah stage.

8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//membuat variable bernama jumlah_animasi dengan nilai 0 jumlah_animasi = 0; //perintah yang dijalankan ketika frame ini dimainkan onEnterFrame = function () { //jika jumlah_animasi kurang dari 30 if (jumlah_animasi<30) { //memasukkan movie clip berlinkage salhu ke dalam stage dengan instance name salju pada posisi x sama dengan nilai acak panjang stage dan posisi y sama dengan 0 salju = attachMovie("salju", "salju"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:0}); //nilai ukuran salju sama dengan nilai acak 30 ditambah 60 salju._xscale = salju._yscale=random(30)+60; //membuat variable kecepatan di dalam movie clip salju dengan nilai acak 10 ditambah 2 salju.kecepatan = random(6)+2; //varibale jumlah_animasi ditambah 1 jumlah_animasi += 1; //perintah yang dijalankan ketika frame movie clip salju dimainkan salju.onEnterFrame = function() { //koordinat y movie clip ini ditambah nilai variable kecepatan movie clip ini this._y += this.kecepatan; //jika nilai koordinat y movie clip ini lebih dari nilai lebar stage if (this._y>Stage.height) { //hapus movie clip ini dari stage this.removeMovieClip(); //nilai variable jumlah_animasi dikurangi 1 jumlah_animasi -= 1; } }; } };

9. Tekan Ctrl+Enter untuk melihat hasilnya.

Scene

Scene ini bisa diartikan semacam membuat flash document baru namun dengan settingan flash document pertama yang anda buat. Scene ini cocok digunakan bagi anda yang membuat presentasi, pembelajaran interaktif, game yang membutuhkan pembagian beberapa menu seperti opening, main menu, ending. Sebenarnya hanya dengan menggunakan 1 buah scene bisa dilakukan tetapi nanti framenya akan terlihat panjang sekali. Oleh karena itu apabila anda menggunakan beberapa menu sebaiknya gunakan scene tambahan. Karateristik scene yang perlu anda ketahui adalah ketika frame pada timeline scene pertama habis untuk dimainkan maka secara otomatis akan langsung berpindah ke frame pada timeline scene kedua. Apabila frame pada timeline scene kedua habis untuk dimainkan maka otomatis akan memainkan frame pada timelinescene ketiga dan begitu seterusnya. Untuk mengatasinya anda perlu menggunakan actionscript, misalnya stop().

Untuk menggunakan scene ini, pertama hal yang anda lakukan adalah memunculkan panel scene terlebih dahulu dengan menekan Shift+F2 atau melalui menu bar Window>Other Panels>Scene.

Gambar panel scene

• Setelah panel scene muncul anda dapat menambahkan scene pada flash document anda dengan menekan tombol + pada panel scene tersebut.
• Untuk menduplikasi scene yang sudah ada anda dapat menekan tombol duplicate scene yang berada di sebelah kiri tanda +.
• Untuk membuka scene, klik sekali nama scene yang diinginkan pada panel scene.
• Untuk mengubah nama scene, klik dua kali (double klik) nama scene pada panel scene yang ingin dirubah namanya. Kemudian rubah namanya sesuai keinginan anda.
• Untuk menghapus scene, seleksi terlebih dahulu scene yang anda ingin hapus dengan mengkliknya pada panel scene. Kemudian tekan tombol delete scene yang terletak disebalah kanan tombol + pada panel scene.

Untuk contoh penggunaannya silahkan lihat contoh berikut ini :

1. Buatlah sebuah flash document.

2. Buatlah 1 buah dyanmic text bertuliskan Pindah Scene. Seleksi dyanmic text tersebut dan tekan Ctrl+F3. pada panel properties yang muncul nonaktifkan tombol selectable dan aktifkan tombol show border around text.

3. Pastikan anda masih menyeleksi dyanmic text tadi kemudian tekan F8. Pada panel yang muncul masukkan pindah_btn sebagai name dan button sebagai type lalu tekan ok.

4. Seleksi button pindah_btn dan pada panel propertiesnya masukkan pindah_btn sebagai instance name.

5. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7

//menghentikan jalannya frame stop(); //ketika pindah_btn ditekan pindah_btn.onPress = function() { //mainkan frame 1 Scene 2 gotoAndPlay("Scene 2", 1); };

6. Tekan Shift+F2 dan pada panel scene yang muncul tekan tombol + sekali maka akan muncul scene baru bernama Scene 2 sekaligus anda akan berpindah ke scene baru tersebut.

7. Pada stage scene baru buatlah sebuah static text bertuliskan Ini adalah scene 2.

8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2	//menghentikan jalannya frame stop();

9. Tekan Ctrl+Enter untuk melihat hasilnya.

Membuat gelembung air

Animasi yang akan kita buat berikut ini berupa gelembung udara yang bergerak ke atas. Apabila kita menyentuh gelembung udara tersebut dengan kursor mouse maka gelembung udara itu akan otomatis menghilang.

1. Buatlah sebuah flash document berwarna biru.

2. Buatlah sebuah lingkaran berwarna biru dengan putih sebagai warna garisnya dan buatlah juga seperempat garis lingkaran berwarna putih yang ditempatkan ditengah lingkaran tersebut seperti gambar di bawah ini :

3. Seleksi lingkaran dan seperempat garis lingkaran tadi kemudian tekan F8. Pada panel yang muncul masukkan gelembung sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah.

4. Hapus movie clip gelembung dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gelembung dan pilih linkage.

5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan gelembung sebagai idetifier lalu tekan ok.

6. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

//perintah yang dijalankan ketika frame ini dimainkan onEnterFrame = function () { //jika nilai acak 10 bernilai 5 if (random(10) == 5) { //masukkan movie clip berlinkage gelembung ke dalam stage dengan posisi x sesuai nilai acak panjang stage dan posisi y sesuai lebar stage ditambah 20 gelembung = attachMovie("gelembung", "gelembung"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:Stage.height+20}); //membuat variable waktu di dalam movie clip gelembung dengan nilai acak 40 gelembung.waktu = random(40); //perintah yang dijalankan ketika frame di dalam movie clip gelembung dimainkan gelembung.onEnterFrame = function() { //koordinat y movie clip ini dikurangi 5 //movie clip gelembung bergerak ke atas this._y -= 5; //variable waktu movie clip ini ditambah 1 this.waktu++; //jika nilai variable waktu kurang dari 20 if (this.waktu<20) { //koordinat x movie clip ini ditambah 1 //movie clip gelembung bergerak ke kanan this._x++; } //jika nilai variable waktu lebih dari 20 dan jika nilai variable waktu kurang dari 40 if (this.waktu>20 && this.waktu<40) { //koordinat x movie clip ini dikurangi 1 //movie clip gelembung bergerak ke kiri this._x--; } //jika nilai variable waktu lebih dari 40 if (this.waktu>40) { //ubah nilai variable waktu menjadi 0 this.waktu = 0; } //jika koordinat y movie clip ini kurang dari -20 if (this._y<-20) { //hapus move clip ini removeMovieClip(this); } }; //ketika mouse berada di atas movie clip gelembung gelembung.onRollOver = function() { //hapus movie clip ini removeMovieClip(this); }; } };

7. Tekan Ctrl+Enter untuk melihat hasilnya.

Coba sentuhkan kursor mouse ke salah satu gelembung.