Hi, udah lama nggak nulis.. biar nggak dipenuhin sarang laba dan tunawisma colek dikit ah.. :)
Sabtu, 17 Mei 2014
Minggu, 27 Desember 2009
MEMbUAT game flash dengan joystick
Multidmedia (MDM) Zinc 2.5 has some great features to expand the power of your swf file. In this tutorial we will find out how to create a game controlled with a joystick.
Before you start, you will need to download the Joystick_Game_Tutorial.zip which contains the accompanying pig.fla and also screenshots to help you along with this tutorial. Click Here to Download the File.
Let's get started. Open the pig.fla: (fig1) This file has already some movie clips and visual elements inserted (fig2)
STEP ONE � Moving Characters
Select the first frame of the layer named Actions and open the Actions panel (F9)
Type this code:
function move_farmer() { this._y -= Math.ceil(Math.random()*0.5); if (this._y<-100) { this._y = (660); } if (this.hitTest(_root.pig_mc)) { _root.lost(); } } |
The code creates a function called 'move_farmer' and will be responsible for the movement of the farmer in the game.
The first line in this function defines the y position of the element that will call this function (which we will later assign) and will be the actual value of this position minus (-=) a random number that will be generated to make the farmer go to the top of screen).
In the second line we have a conditional situation - if the value of the y position of our element becomes less than �100 (so the farmer will pass the top of the screen), it will adjust the position of the element to 660, putting the farmer below our screen to restart his movement.
The final function in this code example, is a conditional situation that will check if our element (the farmer) has collided with the character named pig_mc (the collision is detected with the hitTest method). If this situation occurs, it will execute a function named lost, which we will create later in the tutorial.
After the end of our function we will type the following code:
_root.farmera1.onEnterFrame = move_farmer; _root.farmerb1.onEnterFrame = move_farmer; _root.farmerc1.onEnterFrame = move_farmer; |
This will associate the function named move_farmer to the EnterFrame event handler of our movie clip instances. If you test your file you should now see the farmers moving.
STEP TWO � Creating a Loop
Next, type this code:
function start() { for (x=2; x<=3; x++) { farmera1.duplicateMovieClip("farmera"+x, x*1, farmera1); _root["farmera"+x]._y = _root["farmera"+(x-1)]._y+200; farmerb1.duplicateMovieClip("farmerb"+x, x*2, farmerb1); _root["farmerb"+x]._y = _root["farmerb"+(x-1)]._y+200; farmerc1.duplicateMovieClip("farmerc"+x, x*5, farmerc1); _root["farmerc"+x]._y = _root["farmerc"+(x-1)]._y+200; farmerd1.duplicateMovieClip("farmerd"+x, x*7, farmerc1); _root["farmerd"+x]._y = _root["farmerd"+(x-1)]._y+200; } |
This code will begin a loop (using the 'for' statement) that starts with a variable named x with an initial value of 2 and the final value of 3.
Inside this loop we first duplicate a movie clip with the named "farmera1" and we give to this duplicate an instance name formed by the text "farmera" and the value of x (creating "farmera2" when x value is 2 and "farmera3" when x value is 3). After the comma we have the depth of this copy and after the next comma we have an optional parameter of duplicate MovieClip that will also duplicate the actions that this clip (in this case the movie_farmer function).
In the second line we are adjusting the y position of the copy _root["farmera"+x]._y (when x is equal to 2 this will be evaluated to root.farmera2._y and when x is equal to 3 root.farmera3._y) to receive as value the result of the following expression: _root["farmera"+(x-1)]._y+200 that is the y position of the previous clip (_root["farmera"+(x-1)]._y) plus 200.
In the following lines we have the same for our others clips (farmerb1,farmerc1 and farmerd1).
STEP THREE � Creating Variables
After this function type the code:
_root.anima = 0; _root.lifes = 4; _root.points = 0; _root.info.lifes_txt.text = _root.lifes; _root.info.points_txt.text = _root.points; _root.pig_mc._x = 49.7 _root.pig_mc._y = 316.5; _root.dead_mc._x = -500; |
This code is creating variables (_root.anima, root.lifes,root.points) and adjusting their values. We are defining the text of the instance named lifes_txt as the variable _root.lifes, and we are also defining that the text of our instance named points_txt (inside a movie clip named info) will be the variable _root.points.
In the last 3 lines we are adjusting the initial position to our clips pig_mc and dead_mc
STEP FOUR � Creating & Deducting Lives
>
Now type:
lost = function () { _root.lifes--; _root.info.lifes_txt.text = _root.lifes; _root.dead_mc._x = _root.pig_mc._x; _root.dead_mc._y = _root.pig_mc._y; _root.dead_mc._rotation = _root.pig_mc._rotation; _root.dead_mc.swapDepths(988); _root.pig_mc._x = -1500; _root.dead_mc.gotoAndPlay(2); }; |
Here we have a new function named 'lost' that when called will decrease the value of the root.lifes variable and place the instance named dead_mc in the same position and rotate the pig_mc. It will then change the Depth position of our clip dead_mc to make sure that the clip will be above the farmers clips. We then place our clip pig_mc in the x position �1500 to make sure that it is out of the stage to only let our dead_mc clip in his place. The final line is the timeline of our clip dead_mc to frame 2. The dead_mc movie clip has an animation inside (fig3).
We have some actions inside this clip (that are already typed in the fla that you downloaded). In frame 1 we have the action stop() which prevents this clip playing until it goes to frame 2. In frame 2 we have the action (_root.anima=1) that will change the value of the variable _root.anima to 1.
When this clip reaches its final frame we have the following actions:
this._x=-1500 _root.anima=0 _root.restart() |
This changes the position of our dead_mc clip (represented by "this") to �1500 (placing him outside the stage), and will change the value of _root.anima variable to 0 and call the function named restart (which we will create later).
Go back to the root of our movie and open again the Actions panel (with the first frame of Actions layer selected). After the existing code, type the following:
restart = function () { if (_root.lifes>0) { _root.pig_mc._x = 49.7; _root.pig_mc._y = 316.5; _root.pig_mc._rotation = 0; } else { var Result = mdm.Dialogs.promptAdv("Restart ?", "alert") if (Result == true) { start(); } else { mdm.Application.exit(); } } }; |
This will create a function named Restart that will ask if the number of lives represented by the variable root.lifes is bigger than 0. In this situation it will place our pig_mc to the original position and rotation ready to restart the game.
When a user has lost all of his lives, the code will move on to the else statement which will display a prompt using mdm.Dialogs.promptAdv. This command will ask the user if they wish to restart. If the user selects �OK� it will return true, or if the user selects �Cancel� it will return false. If True, the function start() will be called to begin the game again, otherwise it will close the application with the action mdm.Application.exit();
The next step is to make the game controls. After our code type:
mdm.Input.Joystick.enable(1, "keyboard"); |
This command is assigning an id of the joystick (in this case, joystick 1) and also assigns the type of emulation to execute. In this case, we are using keyboard emulation which maps the movement of the joystick to the keyboard cursor keys.
STEP SEVEN � Assigning Joystick Functions
Now enter the code:
function onJoystick1Move(xjoy, yjoy) { movement = 20; if (xjoy>0) { // right if (_root.anima == 0) { _root.pig_mc._x += 117; _root.pig_mc._rotation = 0; if (_root.pig_mc._x>=751.7) { _root.points += 10; _root.info.points_txt.text = _root.points; _root.pig_mc._x = 49.7; _root.pig_mc._y = 316.5; } } } if (xjoy<0) { // left _root.pig_mc._x -= 117; _root.pig_mc._rotation = 180; if (_root.pig_mc._x<49.7) { _root.pig_mc._x = 49.7; } } if (yjoy>0) { // down _root.pig_mc._y += 117; _root.pig_mc._rotation = 90; if (_root.pig_mc._y>=559.5) { _root.pig_mc._y = 559.5; } } if (yjoy<0) { // up _root.pig_mc._y -= 117; _root.pig_mc._rotation = 270; if (_root.pig_mc._y<=74.5) { _root.pig_mc._y = 74.5; } } } |
When you move the joystick to the right the xjoy will have a positive value up to 100, when move to left the value will be negative up to �100, when moving the joystick up the yjoy will be a positive value up to 100 and when down it will be a negative up to �100 (fig4)
Our event is called every time the user moves the joystick. When the user moves the joystick to the right (xjoy is greater than 0) It will first ask if the value of the variable root.anima is equal (==) to 0 (this variable will only have a different value when the dead_mc is playing his internal animation).
In this situation, it will increase the actual value of the x position of pig_mc in 117 pixels, adjust the rotation of this mc to 0 (to stay with the face turned to the right), and will also ask if the x position of this clip is equal or bigger than 751.7 (the right area of the stage).
When the user moves the joystick to the left (xjoy is smaller than 0) it will decrease the actual value of x position of pig_mc in 117 pixels, adjust the rotation of this mc to 180 (to stay with the face turned to the left), and will also ask if the x position of this clip is smaller than 49.7 (the left area of the stage).
In this case it will put our clip pig_mc at the position 49.7(preventing this clip from going to the left beyond the visible area).
When the user moves the joystick down (yjoy is bigger than 0) it will increase the actual value of y position of pig_mc in 117 pixels, adjust the rotation of this mc to 90 (to stay with the face turned to down), and will also ask if the y position of this clip is bigger than 559.5 (the bottom area of the stage).
In this case it will put our clip pig_mc at the position 559.5 (preventing this clip from going down beyond the visible area).
When the user moves the joystick up (yjoy is smaller than 0) it will decrease the actual value of y position of pig_mc in 117 pixels, adjust the rotation of this mc to 270 (to stay with the face turned to up), and will ask if the y position of this clip is equal or smaller than 74.5 (the upper area of the stage).
In this situation it will put our clip pig_mc at the position 74.5 (preventing this clip from going up beyond the visible area).
STEP EIGHT � Creating a SWF File
You can now save your file and press Control + Enter to generate a swf file. First thing that we will do is open Zinc and create a new file. In the input file tab, in the Input Source choose our swf file generated (pig.swf) (img5)
Go to Input Devices Tab and choose the Joystick area. Check the Enable Joystick option of Joystick 1 and choose the Emulation Type menu the option Keyboard Emulation.(fig6)
The final step is creating your executable file by clicking on the Build button and testing your file.(fig7) You have now created a Flash game complete with joystick control using Zinc!
membuat jam
Berikut ada sedikit tutorial basic pembuatan aksesoris jam kayak di clocklink.com, hihihihi… tudepoin aja yak… begini ceritanya… Tung ting tung ting : Jam Dinding *Doraemon Mode ON*
Pertama, buat dokumen di flash dengan ukuran 120x120 pixel.
Di stage, buat gambar persegi panjang seperti dalam contoh di bawah ini. Gambar ini nantinya akan kita gunakan sebagai jarum penunjuk jam (jarum yang pendek :P). Kemudian ubah gambar tsb menjadi movieclip dengan cara : seleksi gambar tsb >> pada keyboard tekan tombol F8, maka akan muncul dialog box "Convert to Symbol". Pilih type-nya "Movie clip", abis itu pilih Registration pointnya seperti pada gambar di bawah ini. Letak Registration point sangat penting untuk menentukan pusat putaran dari sebuah movieclip :)
Beri nama symbol movieclip ini sesuai selera Anda, nama ini gak begitu penting karena sebenarnya yang dibutuhkan nanti dalam pemrograman adalah nama instance name-nya.
Setelah movieclip ini jadi, pada properties beri nama instance name untuk movieclip ini dengan nama "jam_mc".
Berikutnya buat movieclip untuk jarum penunjuk menit dengan cara yang sama seperti diatas, yang terpenting adalah memberi nama instance name movieclip ini dengan nama "menit_mc".
Terus buat juga untuk jarum detiknya, beri nama instance namenya "detik_mc".
Abis itu susun ketiga jarum tersebut sehingga registration pointnya menempati
titik yang sama :)
Langkah terakhir masukkan Actionscript di bawah ini pada frame dengan cara klik frame, abis itu pada keyboard tekan tombol F9 sehingga akan muncul panel Actionscript :), yup, masukkan disitu… ;))
Terus kita tinggal buat background jamnya aja… btw informasi waktu jam ini mengambil dari jam yang ada di PC client yang mengakses jam tsb._root.onEnterFrame = function() {
//membuat variabel Date object
tanggal = new Date();
//rotasi movieclip "jam_mc"
jam_mc._rotation = tanggal.getHours()*30+(tanggal.getMinutes()/2);
//rotasi movieclip "menit_mc"
menit_mc._rotation = tanggal.getMinutes()*6+(tanggal.getSeconds()/10);
//rotasi movieclip "detik_mc"
detik_mc._rotation = tanggal.getSeconds()*6;
};
Berikut adalah preview dari hasil tutorial diatas :
Memanfaatkan MDM Zinc Untuk Membuat Aplikasi Database Berbasis Flash
Yup, third party flash ini sangat powerful banget bagi yang pengin mencoba membuat aplikasi database berbasis flash (hasilnya berformat EXE). Dengan memanfaatkan MDM Zinc, kita tidak butuh lagi software macam Visual Basic, Borland Delphi ataupun software-software serupa untuk membuat sebuah aplikasi database. Jadi jangan dikira dari flash kita tidak bisa "berulah" membuat software pembukuan, accounting layaknya VB/Delphi. Karena pada MDM Zinc juga support perintah SQL maka kita bisa leluasa membuat program apapun yang berhubungan dengan database. Database favorit macam Microsoft Access, MySQL, dan ADO pun sudah compatible dengan MDM Zinc.
Kelebihan dari MDM Zinc yakni kita melakukan scriptingnya melalui panel actionscript flash yang kemudian digabung dengan script-script {mdm}Script (di-embed kayak PHP/ASP ke HTML). Terus untuk mendapatkan sebuah aplikasi yang dapat langsung connect ke database kita cuman meng-generate SWF yang berisi actionscript + script mdm zinc tadi menjadi EXE melalui software MDM Zinc. Aplikasi EXE hasil dari generate ini pun langsung bisa berkomunikasi dengan database layaknya sebuah program dari VB/Delphi. Perlu diperhatikan, file EXE hasil generate melalui software MDM Zinc berbeda dengan file EXE hasil publish dari Flash (biasanya icon filenya berubah).
Menyenangkan bukan??? kita bisa bermain2 dengan animasi pada program buatan kita… *hihihihi… saya dulu males banget belajar VB/Delphi di kampus karena kesannya hasil program dari software tersebut kaku banget, terus struktur bahasa pemrogramannya pun bagi saya pribadi kurang menarik. Maaf banget bagi yang maniak VB/Delphi hihihihi… kabuuur :P*
Sebenarnya dengan MDM Zinc kita bisa membuat aplikasi apapun layaknya pada VB/Delphi karena berbagai fungsi pada scripting di {mdm}Script dapat kamu explore sesuai kebutuhan aplikasi yang akan kamu buat. Dulu bahkan saya pernah mencoba aplikasi chatting mirip messenger-nya Yahoo! via jaringan yang terbuat dari MDM Zinc. Dan hasilnya pun mengesankan… *Hihihihi… dulu nyoba aplikasi tersebut bareng Pak RW :D*
Anyway, berikut contoh kecil pemanfaatan scripting MDM Zinc untuk koneksi database :
Koneksi database Microsoft Access/MySQL
//koneksi ke Access
mdm.Database.MSAccess.connect("namadatabase.mdb", "passwordnya");
//koneksi ke MySQL
mdm.Database.MySQL.connect("localhost", "3306", true, "usernamenya", "passwordnya", "namadatabase");
Pemanfaatan SQL ke Database
//query ke Access
mdm.Database.MSAccess.runQuery("DELETE * FROM namatabelnya WHERE maxNumber > 0");
//query ke MySQL
mdm.Database.MySQL.runQuery("SELECT * FROM namatabelnya");
Yup, selanjutnya tinggal di-explore sendiri perintah-perintah SQL lainnya macam INSERT, UPDATE dan DELETE :)
NB : Untuk mendapatkan/download software demo MDM Zinc versi terbaru beserta tutorial-tutorialnya silakan berkunjung ke situs resmi MDM Zinc di http://multidmedia.com