January 2011 - Ari Efendi

Advertisement

ads

Hot

Post Top Ad

Your Ad Spot

Saturday, January 1, 2011

Edit Data Mysql dengan Datagrid di Flash

January 01, 2011 4
kali ini saya akan gunakan sebuah input text untuk mengupdate sebuah datagrid di flash.

Baik kita mulai projectnya, seperti biasa langkah pertama buatlah database berikut:


CREATE DATABASE `latihan`;
USE `latihan`;

CREATE TABLE IF NOT EXISTS `datagrid` (
`no` int(11) NOT NULL,
`nama` varchar(50) NOT NULL,
`asal` varchar(30) NOT NULL
);

– Dumping data for table `datagrid`


INSERT INTO `datagrid` (`no`, `nama`, `asal`) VALUES
(1, ‘Angga’, ‘Yogyakarta’);
INSERT INTO `datagrid` (`no`, `nama`, `asal`) VALUES
(2, ‘Fauzi’, ‘Bandung’);
INSERT INTO `datagrid` (`no`, `nama`, `asal`) VALUES
(3, ‘Basilludin’, ‘Bantul’);

1. Penempatan Objek dalam Flash

letakkan objek-objek pada frame berwarna hitam:




penempatan

1. Datagrid dengan instance “dg”.

2. Dynamic text dengan instance “no”.

3. Input text dengan instance “nama”.

4. Input text dengan instance “Asal”.

5. Movie Clip dengan instance “update”.

2.Pemberian Actionscript 2

stop();
var lv = new LoadVars();
var lv_update = new LoadVars();
var input:Array = new Array();
function tampil_data(){
lv.onLoad=function(){
var nama:Array = lv.nama.split(“,”);
var asal:Array = lv.asal.split(“,”);
var j=1;
for(var i=0;i<5;i++){
input.addItem({no:j,nama:nama[i],asal:asal[i]});
j++;
}
dg.dataProvider=input;
}
lv.load(“http://localhost/projek/read_DG.php”);
}
tampil_data();
var myListener = new Object();
myListener.cellPress = function(event) {
no.text = event.target.selectedItem['no'];
nama.text = event.target.selectedItem['nama'];
asal.text = event.target.selectedItem['asal'];
};
dg.addEventListener(“cellPress”, myListener);
update.onRelease=function(){
lv_update.no=no.text;
lv_update.nama=nama.text;
lv_update.asal=asal.text;
lv_update.sendAndLoad(“http://localhost/projek/update_datagrid.php”,lv_update,post);
play();
}

3.Pembuatan skrip read_DG.php, yang digunakan menampilkan data mysql ke datagrid
mysql_connect(“localhost”,”root”,”");
$tabel=”datagrid”;
mysql_select_db(“latihan”);
$data1=mysql_query(“select * from $tabel”);
$data2=mysql_query(“select * from $tabel”);
function tampil_data($resource,$fld){
echo “&”.$fld.”=”;
while($list=mysql_fetch_array($resource)){
echo $list[$fld].”,”;
}
}
tampil_data($data1,’nama’);
tampil_data($data2,’asal’);
?>

4.Pembuatan update_datagrid.php, yang digunakan mengirim data yang telah diupdate ke Mysql
$no=$_POST['no'];
$nama=$_POST['nama'];
$asal=$_POST['asal'];
mysql_connect(“localhost”,”root”,”");
mysql_select_db(“latihan”);
mysql_query(“update datagrid set nama=’$nama’,asal=’$asal’ where no=$no”);
if($update){
echo “&status=ok”;
}
?>

5.Langkah Terakhir,

letakkan script read_DG.php & update_datagrid.php di alamat http://localhost/projek/… pada folder xampp/htdocs atau www di server anda.

sehingga alamat kedua skrip tersebut adalah


http://localhost/projek/read_DG.php


http://localhost/projek/update_datagrid.php

Silahkan test hasil projek anda dengan Ctrl+Enter(Test movie) pada file flash.

Demikian projek ini, semoga bermanfaat. Hasil Projek selengkapnya ada disini:

Read More

Flash CS4 - Scrollable Text Area with External Text

January 01, 2011 0
First, create a folder on your computer to store the files for this tutorial. In that folder, create a text file called external.txt and fill it with text (I use lipsum.com to generate a bunch of dummy text).

In Flash, create a new movie, choose Flash File (Actionscript 3.0).

Use the Text Tool (T) and drag out a textarea on your stage. In the Properties (Ctrl + F3), give the textarea an Instance Name of scrolltext, choose Dynamic Text below that and make sure Behavior (under Paragraph) is set to Multiline.

Double-click the textarea (where it's editable), open the Components window (Ctrl + F7) and drag an instance of the UIScrollBar into the textarea. It should snap it to the right side of the textarea.

Save (Ctrl + S), but don't close, your flash file to the same folder as the text file you created. Now right-click the first frame of your Timeline and choose Actions.

Add the following code:

var file:String = "external.txt";
var loader:URLLoader=new URLLoader(new URLRequest(file));

loader.addEventListener(Event.COMPLETE, isComplete);

function isComplete(event:Event):void {
    var loadedtext:URLLoader = URLLoader(event.target);
    scrolltext.text = loadedtext.data;
}


The first line simply defines our file.

The second line uses URLLoader and URLRequest. URLRequest captures the information from the file. The URLLoader will load the data from that file into your movie. Note that all of the data will be downloaded before it is accessible.

The next line adds an Event Listener to listen for when the entire file is loaded (COMPLETE). When it recognizes that the file is loaded, it calls a function (isComplete in this case) which determines what will be done with the data.

Finally, the isComplete function handles the data after it is loaded into the movie, assigning it to our scrolltext textarea.



 

Demikianlah artikel singkat ini dibuat semoga bermanfaat, jika ada kesalahan pada ide dan penulisan saya mohon maaf.
Read More

Flash 4 - Loading Text Files

January 01, 2011 0
Sometimes it's a hassle to open and edit your .fla to make updates every time. Well this is a way to load external text (.txt) files into a location for quick updates.

Step 1

Create your text file in any text editor (such as Notepad). The only thing you must have is:

text=Then your text here

Step 2

If you want the text file to load upon the start of your movie, then create a layer, double click the first Keyframe and apply the following Actions:

Load Movie

In the right hand side of this window apply the following:

Load Variables Into Location
URL - Add the name of your text file, such as "text.txt", without the ". This is assuming all your files are in the same directory.
Location: Level=0

Should look like this:

Load Variables ("text.txt", 0)
If you want to load your text file through a button, then create your button, double click it and apply an OnMouseEvent, and apply the above commands in the button. Should look like this:

On (Release)
   Load Variables ("text.txt", 0)
End On


You can make your own choice for the OnMouseEvent, I prefer to use the Release method.

Step 3

Select the Text Tool, and select the Text Field button. Draw the location where you want the text file to load into.

Right click on the location and apply the following and only the following properties.

Variable:text
Multiline
Word Wrap
Disable Editing
Disable Selection

Note: When you upload, make sure you upload the text file into the same directory as your movie and HTML page. (Or whatever directory you specified in your Load Variable Action.)


Demikianlah artikel singkat ini dibuat semoga bermanfaat, jika ada kesalahan pada ide dan penulisan saya mohon maaf.
#Flash 4 - Loading Text Files #Cara Menbuat Loading Text Files #Tutorial Cara Menbuat Loading Text Files
Read More

Flash CS4 - Simple Button with AS3

January 01, 2011 0
In Flash CS4, creating a simple thing like a button is a little more complex than in versions past. Making a functional button requires a bit more coding than the simple actions that were once used. But it's not too bad, just a little but of Actionscript 3.0 will do the trick.

Let's get started by creating a new movie (Ctrl + N), and choose Flash File (Actionscript 3.0).

Next create a button by going to Insert > New Symbol (Ctrl + F8). You can create your button however you like, name it gobtn.

Now go to your Library (Ctrl + L) and drag a copy of your button on to the stage. With your button selected, go to Properties (Ctrl + F3) and give it the same Instance Name, gobtn.

On your Timeline, right click on Frame 1 and choose Actions. For the first line add stop();.

Simple function, whenever your movie runs into stop(), it stops and will not progress further until instructed to do so.

The next thing we'll do is add an Event Listener to our button. If you are unfamiliar with listeners, a listener basically sits and does just that, listens for a particular event to be broadcast and then it reacts by calling a function assigned to it. (There are differences in the way the addEventListener() method is used in Actionscript 3 versus the way it and addListener() were used in previous versions of AS, but I'm not going to get into that here.)

gobtn.addEventListener(MouseEvent.CLICK, goClick);

This Listener is waiting for a mouse event (a click in our case), and when a click is initiated, the listener recognizes it and calls a defined function, called goClick, and the function runs it's course.

The next thing we're going to do is create the goClick function being called that will handle the button action, this is what will tell Flash what to do when the button is clicked.

function goClick(event:MouseEvent): void {
   gotoAndStop(5);
}


This function tells the movie to go to and stop at Frame 5. I've simply added some text (T) with "This is Frame 5" on my Frame 5.




Working Example

And that's it. Not as simple as before, but not as hard as it seems.
Read More

Flash MX - Draggable Windows

January 01, 2011 0
Everyone who owns a computer has clicked on a window and dragged it around the desktop. Well the same interaction can be achieved in Flash and I'm going to teach you how to do it.

Step 1

The first step is to create the window that you want to be draggable. Go to Insert > New Symbol > Movie Clip, and name it dragwin. Here you can create whatever type of window you want. First create an area for the content. Then create another area that can be clicked and dragged to move the window around. Make this area a Button (Insert > New Symbol > Button) and name it dragbtn. You can see my working example below.
 

Step 2

Right click on dragbtn and click Actions. Normal Mode: From that window click the + and go to Actions >, Movie Clip Control > startDrag and make sure the on() event is press. Next, click the + button again, and go to Actions >, Movie Clip Control > stopDrag, which the on() event should be release.

You should end up with this:

on (press) {
   startDrag ("");
}
on (release) {
  stopDrag ();
}


Step 3

Go back to your main stage, Scene 1, and from your library Ctrl + L, drag your dragwin movie clip on to your stage.

Step 4

Test your movie. Control > Test Movie or Ctrl + Enter. You should be able to click on the dragbtn and move the whole movie clip anywhere you drag it. If it doesn't work, please double check your steps.


Demikianlah artikel singkat ini dibuat semoga bermanfaat, jika ada kesalahan pada ide dan penulisan saya mohon maaf.

#Flash MX - Draggable Windows #cara Membuat Flash MX - Draggable Windows #tutorial Flash MX - Draggable Windows #langkah langkah Membuat Flash MX - Draggable Windows
Read More

Flash MX - Scrollbar Component

January 01, 2011
Some of the most time saving and useful features added in Flash MX are the new drop-in components. No longer is designing and scripting certain elements necessary, now you just "drop them in."

In this tutorial, we'll focus on the scrollbar component. Within minutes you can have a fully functional scrollable area in your Flash project.

Step 1

The first thing you need to do is define your text area. Select the text tool and draw out your text field. We'll resize it later, so don't worry about that right now. In order for the scrollbar to function, the text field must be dynamic. In the Properties Inspector, (if you don't see it, you can enable it from the Windows menu), choose Dynamic Text from the drop down menu. While we're here, go ahead and give it an Instance Name, I chose scrolltext. You also want to choose Multiline so your text field will wrap the text to the next line.


Step 2

Now to handle the text for the scroll area. There are two ways: The first includes having your text embedded into the Flash movie, and the other is to load your text from an external file. If you want the external file option, go to Step 2B.

Step 2A

Click inside your text field to make it editable and type enough to extend pretty far below where you're going to want the bottom of the text field to cut (hide) the text off. That's pretty much it. You can skip to Step 2C.

Step 2B

In order to do this, we're going to use a Movie Clip (MC). Create a new MC by going up to Insert > New Symbol (Ctrl+F8). Name it whatever you want and choose Movie Clip for the Behavior. Now from the Library drag that MC on to the stage. Right click the MC and choose Actions from the menu. Toggle the view to Expert Mode:


Now paste this into the AS window:

onClipEvent (load) {
loadVariables("YourTextFile.txt
", this);
}
onClipEvent (data) {
_root.YourTextField.text = this.YourText;
}


Note: If you want to have HTML formatting, change this:

_root.YourTextField.text
to
_root.YourTextField.htmlText

Now change these in the code:
YourTextFile.txt = The text file containing your text, easy enough.
YourTextField = The Instance Name you gave your text field.
YourText = Whatever variable you added in your text file, blah=

Select the text field and go to your Properties Inspector and click the Render Text as HTML button:



Now create your file that will hold your text. Don't forget your leading variable, blah=your text.

Step 2C

If you want a border to wrap around your text field, enable the border button

from the text field properties.

If you want to disable the ability to copy text from your text field, make sure the Selectable button

isn't enabled.

Step 3

Now to resize your text field. With the text tool selected, click inside your text field as if you were going to edit the text. Hold down the Shift key on your keyboard and double-click the small square at the bottom right corner of the text field. It should now be a black square. Release the Shift key and click and drag the black square to resize the text field the way you want it.

Step 4

Now, to finally add the scrollbar. With the inside of the text field still selected (edit mode), move over to the Components window (if you don't see it, you can enable it from the Windows menu) and click and drag the scrollbar component and drop it into your text field. It should automatically snap to the side of your text field. Now test your movie!

If all went well, you should have a working scrollable area. If not, please go back over your steps and make sure you followed everything correctly.
Read More

Flash MX - Custom Cursor

January 01, 2011
This is a pretty simple tutorial to teach you how to make a custom cursor for your Flash movie. It consists of a movie clip and a little bit of Actionscript, that's it. For the Actionscript I'll walk through it in Normal Mode. For those that prefer Expert Mode, I'll provide the code for you to copy and paste right in.

The first thing you need to do is create a movie clip which will be your cursor. Go to Insert > New Symbol, give it a Name of cursor and make sure Movie Clip is selected as the Behaviour. Now create your cursor in this new MC. I simply created a triangle and rotated it a bit. The center of the MC is where your hidden cursor would be, so position the cursor you made accordingly. I positioned the point of my triangle at the center (crosshair) of my MC.

Now go back to your main stage and drag the new MC on to the stage. Right click the MC, select Actions. Click the + button and go to Objects > Movie > Mouse > Methods and select hide.

To activate the cursor, go to Actions > Movie Clip Control and select startDrag. For the target, put this and check the Expression box. Check the box for Lock mouse to center. If you want to limit the cursor movement to only a certain part of your movie, check the box for Constrain to rectangle and enter your values. If you use the Info panel (Window > Info), you can find your coordinates. The final code should look like this, with L, T, R and B the constraint values:

onClipEvent (load) {
Mouse.hide();
startDrag(this, true, L, T, R, B);
}

Test your movie. If all went well then you should end up with something similar to this.

Read More

Flash MX - Simple Tell Target

January 01, 2011
Note: Although this tutorial is written for Flash MX, the Actionscript and same basic principles can used for MX 2004, although the location(s) of things mentioned here won't be in the same place.

This tutorial will teach you an important part of creating Flash movies. Tell Target controls other movie clips inside your main movie. This results in being able to create user interaction with your movie as well as create other effects such as "rollover" animation.

Step 1

The first thing you need to do is create your Movie Clip (Insert > New Symbol > Select Movie Clip, or Ctrl+F8, and name it clip). This will be the animation that takes place when the clip is targeted. Make the animation anything you want, but to keep it simple for the tutorial, I just used a basic rectangle with a clockwise motion tween. Make sure you add a Stop Action (Actions window, + > Actions > Movie Control > stop) in the first frame of your M.C. so that it doesn't play right away, and add an Action in the last frame to Go To and Play 2, so it loops.

Step 2

When you have that done, you need to drag it from your library (Ctrl + L) on to your main stage. Position it where you want it and make sure it's selected, and in your Properties Inspector give it an Instance Name of clip.

Step 3

Now you need a way to tell the Movie Clip to play and stop. Create 2 simple buttons. For the start button, right click it, Select Actions and paste in the following code.

on (release) {
clip.play();
}

Note: The actual Tell Target action is deprecated and is unneeded.

For future reference, if you need to target a specific frame in the movie clip, you would apply the following actionscript instead, where X is the frame number in the MC:

on (release) {
clip.gotoAndPlay(X);
}

You can use any OnMouseEvent you want. On Roll Over is good for menu buttons when you want an action to occur when the cursor is over a particular button. But for this tutorial, I chose On Release because we want the Action to occur after a button has been clicked.

Step 4

Then for the stop button, use the same steps as for the start button but give it a stop Action in place of the play Action. You should end up with a movie that gives the following result.
Read More

Post Top Ad

Your Ad Spot