|
Speaker: Paul Colton
View this screencast to see how to create a new web project based on the AFLAX JavaScript library.
|
Hi, this is Paul. Today I'm going to show you a demo of using the Aptana
IDE with the AFLAX 1.0 AJAX library. Let's get started.
I'll go over here to the Project view and I'll right click and say New Project.
I'll select the AJAX library project and hit Next. We'll call this aflax_demo,
Next. You can see I have a choice of libraries that are included with Aptana,
but of course I'll just choose AFLAX 1.0 and do Finish.
What's created by default for you, as you can see here, is a simple example
of some of the drawing commands exposed in AFLAX. What we'll do, for the sake of
this demo, is cut some of this away and kind of start over from scratch. So I'll
expand our editor so you can see more, and I'll make this a little smaller. What
I'll do is I'll delete this line and save. Notice that right away, the view below
updates on the fly. Whenever you save the source code, the preview at the bottom automatically updates.
Again, so we have a little bit more room, what I'll do, is I will delete some of
these lines so we can see what's going on down there.
Now let's go to our Go function to get started. I'll start by creating a new
movie clip. I'll say "var mc = new." Notice I can see the AFLAX object, dot, I'll
find MovieClip. There it is. And notice that MovieClip as its first parameter,
requires a reference to the AFLAX object. Well, fortunately, we've already created
one there using our Project Wizard. So mc AFLAX. Then I'll just save. Nothing so far.
I'll start with setting the beginFill property. This accepts an RGB color value,
so we'll say, how about, 0x99, make some numbers up here, ee00. Then we'll set the
line style of the movie clip. Notice the Content Assist here is showing me what this
does and the parameters available. So I'll do lineStyle and then we'll say we want
a thickness of 2, a color of whatever that is and finally, alpha of 100. So we'll
start by drawing by doing an mc.moveTo, that just moves to an XY coordinate, so we'll
say -60, 50. At this point if I save, still nothing, because we need to move to
another location. So now we'll say lineTo 0, -50. At this point, if I save, we still don't
see anything yet, because we have to complete the shape. So I'll do another one lineTo,
and this will give us our first actual shape here, which will be a straight line. There's
the beginning of it.
We'll say MovieClip endFill and then we'll move it, since we drew it kind of centered on 0, 0.
So we'll say set_x. This is an internal function. 300. This sets the X property of MovieClip and
then also set_y sets the Y property of MovieClip. Now if we save, you'll see there it is rendered.
What's interesting, of course, is we can move it a little bit left, hit Save, everything gets updated.
We can tweak these numbers a little bit. Let's say, make that 90. We can make this perhaps 40.
You can see as we adjust it, maybe we make it 90 as well, there it is.
The other thing we can do is we can use JavaScript to move some of these values over time.
We'll do a setInterval and we'll say call the rotate function, which we haven't written yet,
but we will in a second, and call that every 100 milliseconds. Now we'll just come here below
this function and we'll just say function rotate. And in this case, we'll say MovieClip
set_rotation. Then we'll say MovieClip get_rotation. This gets the current value. Then we'll
just add 5 to that. What's important, is because we use MovieClip outside of this function,
we'll have to declare it globally there and delete it there. Now if we save, notice that
automatically it starts rotating. Again, what's really interesting is because this is all
done via JavaScript and HTML, you can change these values on the fly and see their results.
So, for example, we can change the beginFill color here, hit Save. Now notice it's a new color.
We can make the line thicker, and there it is. We can, for example, rotate it the other way by
subtracting 5. Now it reverses the rotation.
So you can see what's real interesting about
developing with AFLAX with the Aptana IDE, is that you can develop in HTML and JavaScript and
see the immediate results of what you're doing. There's no compile step. There's no other step
other than typing and preview as you type. It makes it easy to see what you're doing. It makes
it easy to catch errors and it's a lot of fun. Thank you.
[End of Video]
|