tutorial portofolio

15
TUTORIAL MENGGANTI KURSOR MOUSE Written by admin Kali ini kita akan mempelajari bagaimana cara mengganti kursor mouse ketika kursor mouse berada didalam sebuah swf. Normalnya mouse akan berbentuk panah, tapi di Flash anda dapat mengubah kursor mouse menjadi bentuk apapun sesuai keinginan anda. 1. Buatlah sebuah gambar yang akan digunakan untuk mengganti kursor mouse lalu jadikan sebuah movieclip. Contoh gambar kursor mouse 2. Klik movieclip tersebut dan tekan F9 lalu masukan script berikut : 1 2 3 4 5 6 onClipEvent (enterFrame) { //kursor mouse asli akan disembunyikan Mouse.hide(); //mengganti kursor mouse dengan movieclip ini startDrag(this, true); } 3. Terakhir Test Movie dengan menekan CTRL+Enter. Sourcenya dapat didownload disini 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

Upload: nurryna-nisa-irtidyanti

Post on 22-Oct-2014

46 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Tutorial Portofolio

TUTORIAL

MENGGANTI KURSOR MOUSEWritten by admin

Kali ini kita akan mempelajari bagaimana cara mengganti kursor mouse ketika kursor mouse berada didalam sebuah swf. Normalnya mouse akan berbentuk panah, tapi di Flash anda dapat mengubah kursor mouse menjadi bentuk apapun sesuai keinginan anda.

1. Buatlah sebuah gambar yang akan digunakan untuk mengganti kursor mouse lalu jadikan sebuah movieclip.

Contoh gambar kursor mouse

2. Klik movieclip tersebut dan tekan F9 lalu masukan script berikut :

123456

onClipEvent (enterFrame) {//kursor mouse asli akan disembunyikanMouse.hide();//mengganti kursor mouse dengan movieclip inistartDrag(this, true);

}

3. Terakhir Test Movie dengan menekan CTRL+Enter.

Sourcenya dapat didownload disini

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

Page 2: Tutorial Portofolio

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

actionsdapat 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

Page 3: Tutorial Portofolio

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 :

+

-

*

/

=

-=

+=

%=

*=

/=

!=

<

<=

==

>=

Page 4: Tutorial Portofolio

++

and

or

not

stop

play

gotoAndStop

gotoAndPlay

nextFrame

prevFrame

nextScene

prevScene

onClipEvent(){}

on(){}

trace

_x

_y

_xscale

_yscale

_visible

Page 5: Tutorial Portofolio

_height

_width

_alpha

_rotation

_currentframe

_xmouse

_ymouse

_totalframes

_quality

for

if

enabled

useHandCursor

getBytesLoaded

getBytesTotal

getURL

fscommand

loadMovie

unloadMovie

loadMovieNum

unloadMovieNum

Page 6: Tutorial Portofolio

setInterval

clearInterval

stopAllSounds

startDrag

stopDrag

hitTest

random

attachMovie

dupilateMovieClip

swapDepths

getNextHighestDepth

setMask

SharedObject

Sound constructor

attachSound

setVolume

start sound

stop sound

Variable

Array

Math

Page 7: Tutorial Portofolio

Applying and Animating Filter Effects       by Jesse Marangoni aka TheCanadian  |  5 November 2005

The various filter classes that come bundled with Flash 8 are a fast way to create effective visual effects. This tutorial will teach you how to apply a filter to a movie clip instance and then animate it, all with ActionScript.

Our finished animation will look similar to the following animation:

[ hover over the text to see a filter effect in action ]

In this tutorial, I focus mainly on the Glow Filter, but all effects can be implemented similarly.

So, let's get started:

i. Okay, let’s get started by downloading the provided incomplete source below. Don't worry, the main portions of the animation have been left for us to implement:

  Download Partial Source for Flash 8

ii. Once you unzip and open the file (filterIncomplete.fla), you should see a movie clip on the stage containing some text. Give the movie clip the instance name of kTextso that we can apply methods and properties to it.

[ give your movie clip the caption kText ]

ii. Next, open up the actions panel for the first frame of the actions layer. Add this code to it:

import flash.filters.GlowFilter;

var gf:GlowFilter = new GlowFilter(0x356D83, 100, 3, 3, 5, 3,false, false);

Page 8: Tutorial Portofolio

kText.filters = [gf];

kText.onRollOver = function() {

this.onEnterFrame = function() {

if (gf.blurX < 20) {

gf.blurX++;

gf.blurY++;

} else {

delete this.onEnterFrame;

}

this.filters = [gf];

};

};

kText.onRollOut = function() {

this.onEnterFrame = function() {

this.filters = [gf];

if (gf.blurX > 3) {

gf.blurX--;

gf.blurY--;

} else {

delete this.onEnterFrame;

}

};

};

Page 9: Tutorial Portofolio

iii. If you test the animation you should see the text with a glow filter applied to it. If you roll over the text, the blur of the filter will grow and when you roll out it will shrink back down to its original size.

On the next page, I will explain the code so that you can have a better understanding of how to implement and modify this and other effects in your animations.

Onwards to the next page!

Applying and Animating Filter Effects, Pg. 2       by Jesse Marangoni aka TheCanadian  |  5 November 2005

In the previous page, you saw how your animation worked. In this page, you will learn what caused it to work the way it did.

Explanation

import flash.filters.GlowFilter;

This line imports the GlowFilter class file into your Flash document. You can find the class files at C:\Program Files\Macromedia\Flash 8\<language>\First Run\Classes\FP8\flash\filters\ assuming a default installation (on PC).

By importing these class files, we can use all of the properties and methods contained within. You’ll notice that in this tutorial, we only import the GlowFilter class since that is the only class which we will be using in this example.

var gf:GlowFilter = new GlowFilter(0x356D83, 100, 3, 3, 5, 3, false,false);

Here we create a new GlowFilter instance and store it as the variable gf. The GlowFilter class constructor requires eight parameters which are properties of the GlowFilter class. These properties, in order, are:

i. color – The colour of the glow in hexadecimal format.

ii. alpha – The transparency of the glow. Requires a number between 0 and 100.

iii. blurX – The blur of the glow on the x axis. Requires a number between 0 and 255.

iv. blurY - The blur of the glow on the y axis. Requires a number between 0 and 255.

v. strength – The amount of contrast between the glow and the background. Requires a number between 0 and 255.

vi. quality – The number of times in which the glow is applied. Requires a number between 0 and 15.

vii. inner – Specifies either an inner glow or an outer glow. Requires a Boolean of either true (inner glow) or false (not an inner glow).

viii. knockout – Specifies whether or not to knockout the instance to which the glow is applied to. Requires a Boolean of either true (knockout) or false (not a knockout).

Page 10: Tutorial Portofolio

kText.filters = [gf];

This is where we actually apply the filter effect to an object on the stage (in this case our kText movie clip). The filter property of a movie clip expects an array of filters. Here we only have one filter so we need only to enter one value.

kText.onRollOver = function() {

This is simply the event handler for the kText movie clip. Here we define a function to execute when the event occurs, in this case when the mouse rolls over the movie clip.

this.onEnterFrame = function() {

Another event handler for the kText movie clip.

if (gf.blurX < 20) {

This if statement checks to see if the blurX property of the GlowFilter instance gf is less than 20. If it returns true, the statements enclosed within the braces executes.

gf.blurX++;

gf.blurY = gf.blurX;

If the above if statement returns true, this code adds 1 to the blurX property of the GlowFilter instance gf. It then sets the blurY property to equal the blurX property.

} else {

delete this.onEnterFrame;

}

If the above if statement returns false, the code within the else statement executes. So if the the blurX property is not less than 20, the onEnterFrame handler for kText is deleted.

Page 11: Tutorial Portofolio

this.filters = [gf];

So far, the code has adjusted the blur properties of our GlowFilter instance. Now we need to re-apply them to the kText movie clip by giving its filter property an array of filter effects. And that is exactly what this code does.

kText.onRollOut = function() {

this.onEnterFrame = function() {

this.filters = [gf];

if (gf.blurX > 3) {

gf.blurX--;

gf.blurY--;

} else {

delete this.onEnterFrame;

}

};

};

This code does the exact same as the above event handler, except in reverse. So when you roll out of the kText movie clip the blur of the gf GlowFilter will get smaller until the blurX property is not less than three, at which point the onEnterFrame handler will get deleted.

That’s it. I hope this has taught you the basics of the filter effects in Flash 8 and how to manipulate them using ActionScript. If you have any questions, feel free to post them on the kirupaForums.

Good Luck!

Jesse Marangoni

tagged: auto response, email form, flash contact form, php mail function

Page 12: Tutorial Portofolio

AS2 Flash Contact Form

Posted by admin in Flash

Here is a working example of flash contact form with simple validations using ActionScript 2 and

PHP mail function. This flash email form can also immediately response back to you if the email

was sent successfully or failed. You can easily copy the contact form movie clip and paste it into

an empty frame of any flash template.

You need to replace below red line with your email address in send_email.php file.

$receiver = “[email protected]”;

If your web server does not support PHP, you will need to use any other supported server side

language for mail function instead of using send_email.php file.

UPDATES (24 June 2008): Adding Email Auto Response in send_email.php file

PLAIN TEXT

PHP:

1. &lt;?php

2. $contact_name = $_POST[‘name’];

3. $contact_email = $_POST[‘email’];

4. $contact_subject = $_POST[’subject’];

Page 13: Tutorial Portofolio

5. $contact_message = $_POST[‘message’];

6.  

7. if( $contact_name == true )

8. {

9. $sender = $contact_email;

10. $receiver = “[email protected]”;

11. $client_ip = $_SERVER[‘REMOTE_ADDR’];

12.  

13. $email_body = “Name: $contact_name \nEmail: $sender \nSubject:

$contact_subject \nMessage: $contact_message \nIP: $client_ip \nFlash

Contact Form provided by http://www.flashmo.com”;

14. $email_body_auto_reply = “Hello $contact_name, \nThis is the

auto reply message. Thank you. \nAdmin – http://www.flashmo.com”;

15.  

16. $extra = “From: $sender\r\n“ . “Reply-To: $sender \r\n“ . “X-

Mailer: PHP/” . phpversion();

17. $extra_auto_reply = “From: $receiver\r\n“ . “Reply-To:

$receiver \r\n“ . “X-Mailer: PHP/” . phpversion();

18.  

19. mail( $sender, “Auto Reply – Re:

$subject”, $email_body_auto_reply, $extra_auto_reply );    // auto

reply mail to sender

20.  

21. if( mail( $receiver, “Flash Contact Form –

$contact_subject”, $email_body, $extra ) )

22. {

23. echo “success=yes”;

24. }

25. else

26. {

27. echo “success=no”;

28. }

29. }

30. ?&gt;

UPDATES (22 July 2008): Error correction in send_email.php file

Page 14: Tutorial Portofolio

Please change $subject to $contact_subject in line number 15.

PLAIN TEXT

PHP:

1. if( mail( $receiver, “Flash Contact Form –

$contact_subject”, $email_body, $extra ) )

Feel free to drop a comment if you have any question or feedback.