IntroductionWelcome| 00:00 | (Music playing.)
| | 00:03 | Hi! My name is Lee Brimelow and I work
as a platform evangelist at Adobe.
| | 00:08 | In Flash Player 10 New Features, I am
going to show you how to take advantage of
| | 00:11 | all the new features in Flash Player 10,
like native 3D support, a new text engine,
| | 00:17 | dynamic sound generation,
local file access, and much more.
| | 00:22 | By the end of this title you'll have
the knowledge and skills needed to create
| | 00:25 | cutting-edge Flash content using the
newest features the player has to offer.
| | 00:30 | Now most educational materials for
Flash are focused on a particular release of
| | 00:35 | the Flash authoring tool, such as Flash
CS4, but it's equally important for you
| | 00:40 | to know how to use the newest
features of the Flash Player.
| | 00:43 | Many of these features, which are
not even exposed yet in the authoring
| | 00:47 | environment. So with that
let's jump in and get started.
| | Collapse this transcript |
| How to use the exercise files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or
| | 00:04 | if you're watching this tutorial on a
DVD-ROM, you have access to the Exercise Files
| | 00:09 | that I use throughout this title.
| | 00:11 | So if we look at the Exercise Files,
we can see they are actually broken up
| | 00:15 | by chapter and inside of each chapter there
is a folder for each video in that chapter.
| | 00:21 | So if I go inside of this one we can see
it contains a number of different assets.
| | 00:25 | We have an image here, we have a
package of ActionScript files, we have the
| | 00:30 | FLA that I start with in the video, and we
also have a Pixel Bender filter in this example.
| | 00:36 | And you can also see that I provided
the Finished.fla and this is essentially
| | 00:41 | the finished product that we
create in this particular video.
| | 00:44 | So now if you don't have access to the
Exercise Files, you can of course follow
| | 00:49 | along from scratch and use your own assets.
| | 00:53 | So let's get started.
| | Collapse this transcript |
| Setting up your system| 00:00 | So before we get started looking at all
the new features in Flash Player 10,
| | 00:04 | you go on and make sure you've set up your
system so that you can actually publish
| | 00:08 | to this new version of the Flash Player.
| | 00:10 | So throughout this title, I am going to
be using Flash CS4 to do my development.
| | 00:14 | Now it's important to note that Flash
CS3 doesn't have any built-in way of
| | 00:19 | actually publishing for Flash Player 10.
| | 00:21 | So you're going to need to use CS4.
| | 00:24 | Now in addition to that, the first
initial release of Flash CS4 had quite a few
| | 00:29 | bugs in it and it was somewhat unstable.
| | 00:33 | Luckily the Flash team has released a
free update to Flash CS4, which you're
| | 00:37 | going to want to make sure you have installed.
| | 00:40 | To find out which version you have, you
can go to the Flash menu if you are on Mac.
| | 00:44 | If you are on PC, you can go to
the Help menu and choose About Flash.
| | 00:49 | And here it will actually
tell you, your version number.
| | 00:51 | So here I have 10.0.2 installed,
which is the latest version.
| | 00:57 | If you don't have that, you can go to
the Flash downloads site and this is at
| | 01:03 | http://www.adobe.com/
support/flash/downloads.html.
| | 01:10 | And this page just essentially has any
new downloads that relate to either the
| | 01:15 | Flash Player or Flash CS4.
| | 01:17 | We could see if we scroll down here this
Adobe Flash CS4 Professional Update 10.0.2.
| | 01:23 | So you're going to want to make sure you
download this either for Windows or for
| | 01:28 | Mac and update it, and your Flash
installation is going to be a lot more stable.
| | 01:34 | Now another tool that you're going to
want to get is the Pixel Bender Toolkit,
| | 01:37 | and this is used to create new
filters and effects for Flash.
| | 01:42 | So this can be found on the Adobe Labs website.
| | 01:46 | If you go to labs.adobe.com/
technologies/pixelbender, this will allow you to
| | 01:52 | download the free Pixel Bender Toolkit.
| | 01:55 | So if I come into this Downloads part
here and click this, we can see that I can
| | 02:01 | again choose either a Mac
or Windows installation.
| | 02:05 | So throughout this title there going
to be a few additional downloads of
| | 02:10 | things like ActionScript libraries,
but we'll deal with those when we actually get
| | 02:14 | to them in the title.
| | 02:16 | Now it's also important to note that
although I'm using Flash CS4 to do my
| | 02:20 | development, you could also use Flex
Builder or even the Flash Builder Beta
| | 02:25 | that's currently out to do your development.
| | 02:28 | You just going to have to do the little
bit of extra work of actually turning my
| | 02:31 | code into class files for use in Flex Builder.
| | 02:35 | So with these pieces installed, you are
now ready to start developing for Flash Player 10.
| | Collapse this transcript |
| Overview of Flash Player 10| 00:00 | So before we actually get started
looking at the new features of Flash Player 10
| | 00:04 | in detail, it's helpful just to have an
overview of what is actually changed in
| | 00:09 | this version of the Flash Player.
| | 00:11 | Let's start with the new native 3D support.
| | 00:14 | So this native 3D is meant for
simple 3D effects and transitions.
| | 00:19 | This isn't a full-blown 3D engine
with lights, cameras and shaders.
| | 00:24 | If you need to do simple 3D effects, this
Native 3D Support is extremely easy to use.
| | 00:30 | What this is, is essentially a set of
new 3D properties on display objects and
| | 00:36 | display objects are again
things like sprites and movie clips.
| | 00:39 | So now you just have some additional
properties like the Z property to actually
| | 00:44 | manipulate and position
display objects in 3D space.
| | 00:48 | This 3D is actually fully interactive,
so let's say I have a movie clip with a
| | 00:53 | button inside of it.
| | 00:54 | If I put that movie clip in 3D space I
can still click on that button inside of it,
| | 00:59 | so the 3D remains fully interactive.
| | 01:02 | Any 3D objects you create are also
automatically anti-aliased, so there
| | 01:06 | aren't jagged edges.
| | 01:08 | Everything looks smooth and
nice when you put it into 3D.
| | 01:12 | And again, the important thing is this
is not meant to replace 3D engines like
| | 01:17 | Papervision3D, which are
full-blown 3D environments.
| | 01:21 | If you want to create these kind of
immersive 3D worlds, you are still going to
| | 01:25 | want to use open source
engines like Papervision3D.
| | 01:29 | Flash Player 10 also has a
brand new text engine inside of it.
| | 01:33 | This text engine has been completely
rewritten, and it allows you to do some
| | 01:37 | really advanced typography and text
layouts inside of the Flash Player.
| | 01:42 | So this text engine was used to create
a set of advanced text components called
| | 01:48 | the Text Layout Framework that we're
actually going to look at that allows you
| | 01:52 | to do some really advanced things with text.
| | 01:54 | Now these components were actually
worked on by the Adobe InDesign team, and
| | 01:59 | it's basically their whole world is text.
| | 02:02 | So if you want any team in the world to
be working on these components, it would
| | 02:05 | be the InDesign team.
| | 02:07 | So the text engine is actually a
really low level ActionScript 3 API.
| | 02:12 | Now you have access to that API so if
you are really knowledgeable about text,
| | 02:16 | you can use that API.
| | 02:18 | But most people are just going to use
these new advanced text components that
| | 02:22 | basically allows you to just right out of
the box, do some advanced things with text.
| | 02:27 | So with this text engine you can easily
create right to left and vertical text,
| | 02:31 | which is really important when you are
internationalizing your Flash content, so
| | 02:36 | languages like Japanese that actually
is right to left and vertical, doing that
| | 02:41 | in previous versions of the
Flash Player was extremely difficult.
| | 02:45 | Device fonts are now equal to embedded
fonts, so every Flash developer has had
| | 02:51 | that situation where you use a device
font but then you try to animate it or
| | 02:56 | fade it and you can't do it.
| | 02:57 | Well in Flash Player 10, device fonts
can now be animated. You can change the
| | 03:03 | transparency of them.
| | 03:05 | So Pixel Bender is a brand new
technology that allows you to create your own
| | 03:10 | filters and effects for Flash.
| | 03:13 | So in Flash 8 we actually released some basic
filters like Drop Shadows, Bevels, and Blurs.
| | 03:19 | Well, this new language, a tool,
allows you to create your own.
| | 03:24 | Now these filters that you create in
Pixel Bender can be used inside of Flash
| | 03:29 | but also inside of Photoshop and After Effects.
| | 03:32 | So we've unified the actual language
that you use to write filters and effects
| | 03:36 | for all three tools.
| | 03:38 | And the place where you are going to
actually write your Pixel Bender filters is
| | 03:42 | called the Pixel Bender Toolkit, and
we're going to look at how to create some
| | 03:46 | simple Pixel Bender
filters later on in the title.
| | 03:50 | So sound has had a major
overhaul in Flash Player 10.
| | 03:53 | You now have the ability to actually create
sound from scratch inside of the Flash Player.
| | 03:59 | And the way you do this is to respond
to an event and Flash is actually going
| | 04:04 | to ask you for raw sound data.
| | 04:06 | So if you know a lot about audio or
sound, you can actually provide just raw
| | 04:11 | binary data and have it be played back by Flash.
| | 04:15 | You also have now the ability to
extract the bytes of an external sound,
| | 04:20 | let's say an external
MP3 file that you're playing.
| | 04:24 | You can extract the bytes of that file
as it's coming into the Flash Player,
| | 04:28 | manipulate those bytes before they
actually get sent to the sound card.
| | 04:31 | So this allows you to create real-
time effects and processing for sound.
| | 04:36 | There have also been several bug
fixes to the existing sound API, especially
| | 04:41 | surrounding the soundComplete event,
so your general sound APIs have been
| | 04:47 | improved in addition to having
all of these new capabilities.
| | 04:51 | Local file access is another really
big feature in Flash Player 10, and this
| | 04:55 | allows you to directly read local
files from the user's machine and it also
| | 05:01 | allows you to save files directly to the
user's machine directly from the Flash Player.
| | 05:07 | Now this saving and reading of local
files actually requires user interaction.
| | 05:12 | So you can't do it programmatically, so
the user has to actually initiate this
| | 05:18 | either through a key press or a mouse-click.
| | 05:21 | So there are no more round
trips to your server required.
| | 05:24 | So let's take an instance of you wanted
the user to be able to load in an image
| | 05:28 | from their hard drive into your Flash movie.
| | 05:31 | In previous versions of Flash you
would actually have to have them uploaded
| | 05:34 | to your web server and then you would download
it from your web server into your Flash movie.
| | 05:39 | Well, now we can do this
directly without that round-trip.
| | 05:42 | Now these new features are also part
of some new security changes to the file
| | 05:47 | reference class that we're
going to look at as well.
| | 05:50 | So there's been some major enhancements
to the drawing API in Flash Player 10.
| | 05:54 | So we now have an API for drawing triangles.
| | 05:58 | Now if you've done 3D development
before, you know that in 3D everything is
| | 06:02 | made up of triangles.
| | 06:03 | So we now have this low-level API to
be able to draw triangles in 3D space.
| | 06:08 | Now these triangles also support UV
texture mapping and this is essentially how
| | 06:14 | you would create say a
3D engine inside of Flash.
| | 06:17 | You would be drawing triangles and you'd
be mapping textures onto those triangles.
| | 06:23 | We now have the ability to do
gradient and bitmap strokes.
| | 06:26 | There is a new object-based drawing model.
| | 06:29 | So in previous versions of Flash you
would have to say line to, line to, move to,
| | 06:34 | all these commands. Now we can
actually save those commands inside of an
| | 06:38 | object, so we can easily
either change them or update them.
| | 06:42 | And the performance of the drawing
API has been greatly increased also.
| | 06:47 | And we're going to look at certain
methods that you can use that greatly enhance
| | 06:51 | the performance when you want
to draw graphics at runtime.
| | 06:55 | So there is also a whole
host of smaller features.
| | 06:58 | We have a new vector data type.
| | 07:00 | Vectors are essentially mono-typed arrays.
| | 07:03 | So in the regular array class you can
store all different types of information.
| | 07:08 | You could store a string, a movie clip.
| | 07:10 | A vector is essentially an array that
can only hold a single type of data and
| | 07:15 | the benefits are greatly increased
performance when you use vector over array.
| | 07:20 | We now have partial fullscreen
keyboard support in Flash Player 10.
| | 07:24 | In previous versions of Flash if you
went fullscreen with your application
| | 07:29 | in the browser, you couldn't accept any
keyboard input and this was for security reasons.
| | 07:33 | So this made it pretty hard to
actually create a fullscreen game in Flash.
| | 07:38 | In Flash Player we've loosened the
security restriction to allow you to accept
| | 07:43 | any non-printing keys like
the Spacebar or the Arrow keys.
| | 07:47 | So it's now a lot more likely that you would
be able to create fullscreen games in Flash.
| | 07:51 | There have been some enhancements to the
garbage collection features, especially
| | 07:56 | when it relates to cleaning up
external SWF files and content.
| | 08:01 | You can now do multi-bit rate video
streaming inside of the Flash Player and
| | 08:05 | this is in conjunction with Flash
Media Server 3.5 and this basically allows
| | 08:10 | you to on-the-fly change the bit rate
of the video that the user is seeing and
| | 08:17 | the user won't have any idea
that it's actually happened.
| | 08:19 | So it's completely sceneless, so
you are not asking them to switch to a
| | 08:23 | lower bit rate stream.
| | 08:25 | We have a microphone codec called
Speaks, which is a high-quality codec
| | 08:29 | specifically for voice.
| | 08:31 | We've also added some new
hardware acceleration features.
| | 08:34 | The goal of Flash is to try to
offload as much as we can to the user's GPU
| | 08:40 | and Flash Player 10 has increased
the amount that we're doing that, but
| | 08:44 | definitely moving forward,
that's a goal to continue to do that.
| | 08:49 | So those are the major features in
Flash Player 10 and now we can actually get
| | 08:52 | started and learning how to use these
features to create some cool content.
| | Collapse this transcript |
|
|
1. 3D EffectsUnderstanding the new 3D capabilities| 00:01 | So one of the biggest new features
in Flash Player 10 is the introduction
| | 00:05 | of native 3D support.
| | 00:07 | This is something that the Flash
community has been asking for for years,
| | 00:11 | and Flash Player 10 represents our
first attempt to add some native support
| | 00:16 | in the Flash Player.
| | 00:17 | So in this video, I'm just going to
briefly describe the capabilities of
| | 00:21 | this new 3D support.
| | 00:23 | So you can open up 3-D_overview.fla
file and let's just quickly look at the
| | 00:30 | structure of this movie.
| | 00:31 | So I have a movie clip here and I have
double-click inside of it. I just have a
| | 00:35 | simple two-frame movie with some
actions and all it does is it changes the
| | 00:41 | current frame when you
rollover or roll out of it.
| | 00:45 | So if we go back to the main timeline,
I'll just test this so you can see
| | 00:49 | it just essentially has a rollover state here.
| | 00:53 | So the easiest way to use the new 3D
capabilities is here inside of Flash CS4,
| | 00:58 | because there are some new 3D tools
that allow you to do it on the timeline
| | 01:02 | without actually having
to know any ActionScript.
| | 01:06 | So if we come down here to the fourth
tool group in the Tools panel, we can see
| | 01:10 | we have a 3D Rotation tool.
| | 01:13 | So if I select that and click on my
movie clip, we can now see we have a little
| | 01:17 | controller here that allows me
to rotate this clip in 3D space.
| | 01:22 | So I can move it on the Y-axis here.
| | 01:24 | If I move to the blue circle, I can move it on
the Z-axis and I can also move it on the Y-axis.
| | 01:33 | So now this 3D is commonly
known as postcards in space or 2.5D.
| | 01:40 | That's because when I rotate this around,
we can see that this actually has no depth to it.
| | 01:46 | So it's just like taking a
postcard and rotating it.
| | 01:49 | So when you get around to the side, you
essentially see nothing, because it has no depth.
| | 01:54 | Now, this is the same type of 3D that
you find in tools like After Effects.
| | 02:00 | So that's the 3D Rotation tool.
| | 02:02 | The other tool that's buried in
here is the 3D Translation tool.
| | 02:06 | So translation is just a
fancy word for moving something.
| | 02:10 | So here I can move it on the X-axis,
I can move it on the Y-axis, or I can
| | 02:16 | move it on the Z-axis.
| | 02:18 | When I do that, we can see it's actually
bringing it farther or closer away from the camera.
| | 02:24 | Now, the 3D Engine in Flash Player 10,
we don't have an actual camera, but
| | 02:28 | you can just take your
viewpoint as being the camera.
| | 02:32 | So again, moving this is
adjusting it on the Z-axis.
| | 02:37 | So I can also do this
inside of the Properties panel.
| | 02:40 | So we have a new section in the
Properties panel called 3D Position and View.
| | 02:45 | So inside of here, I can
now adjust it on the Z-axis.
| | 02:49 | Now, this is different than
adjusting it on the regular X and Y-axis.
| | 02:54 | So as soon as I start manipulating this
with the 3D tools, I've essentially put
| | 02:59 | this movie clip into 3D mode, and then
to adjust the X and Y, I need to do it
| | 03:03 | here in the 3D Position and View section.
| | 03:07 | Okay. So let me just undo these.
| | 03:10 | So we can also manipulate movie
clips and display objects in 3D
| | 03:15 | using ActionScript.
| | 03:16 | So what I can do here is I can
give this clip an instance name.
| | 03:20 | I'll give an instance name of Bea.
| | 03:22 | That's the name of my cat, and I
already have a locked actions layer down here
| | 03:26 | that we can use for our ActionScript.
| | 03:28 | I'll open up the Actions panel.
| | 03:30 | So now you're probably
familiar with manipulating a clip.
| | 03:34 | Say, I want to move it on
the X-axis to bea.x = 50.
| | 03:42 | Now, if I test the movie, we can see
it's moved over to an X position of 50.
| | 03:46 | Well, it's just as easy now to
manipulate this clip in 3D space.
| | 03:52 | So if I come down here and I say bea.z,
if I set it to 500, we can see it's
| | 03:59 | moved away from the camera by
500 pixels, making it smaller.
| | 04:05 | So if I were to give a positive number
for Z, it's going to push it away from us,
| | 04:09 | so it's going to get smaller.
| | 04:10 | If I want to bring it closer, I can
actually just give a negative value.
| | 04:14 | So I could say -100.
| | 04:15 | Now, you can see it's gotten closer.
| | 04:19 | So that's how you adjust the positioning
of this object, but what about the rotation?
| | 04:26 | So ordinarily, in previous versions of
Flash, if you wanted to adjust rotation,
| | 04:31 | you would just say Rotation = 20.
| | 04:33 | Now, you can see I've rotated
that movie clip by 20 degrees.
| | 04:39 | Well, in Flash Player 10, you can
still use Rotation for the normal type of
| | 04:44 | rotation that you're used to.
| | 04:45 | But we also now have it broken
out into the different axises.
| | 04:50 | So I can say rotationY = 30.
| | 04:56 | We can see it's actually rotated
that clip in 3D space along the Y-axis.
| | 05:02 | So again, I can also choose rotationX.
| | 05:06 | We can see it's actually rotated
it along the X-axis, and rotationZ.
| | 05:13 | Now it's rotated on the Z-axis.
| | 05:16 | So those are the main high-level
properties that you can adjust, the Z position,
| | 05:21 | and using the new 3D Rotation
properties to manipulate your clip in 3D space.
| | 05:28 | So that's the basic overview
of the new 3D capabilities.
| | 05:33 | In the rest of this chapter, we're going
to be going more in-depth about some of
| | 05:36 | the cool new stuff that you can do.
| | Collapse this transcript |
| Building 3D animation in Flash CS4| 00:01 | So one of the most important things
about the new 3D support in Flash Player 10
| | 00:05 | is that it's easy to use,
particularly when you're using Flash CS4.
| | 00:10 | So designers can now take
advantage of 3D without having to know any
| | 00:15 | ActionScript coding.
| | 00:17 | So in the last video, I actually
showed you a couple of the 3D tools.
| | 00:20 | In this video, I'm going to show you
how you would do simple 3D animation
| | 00:24 | inside of Flash CS4.
| | 00:27 | So go ahead and open up the 3D_
animation.fla file, and this is just a simple movie.
| | 00:33 | I have a movie clip of my cat
Bea here on the stage and now we're just
| | 00:38 | going to create some simple 3D animation.
| | 00:40 | So I'm going to grab the 3D
Translation tool and I'm just going to move this
| | 00:46 | closer to us on the Z-axis like that.
| | 00:51 | Now I'm going to get the 3D Rotation
tool and I'll just manipulate this a
| | 00:55 | little bit in 3D space,
maybe something like that.
| | 01:01 | Now, inside of Flash CS4, the whole
way in which we do animation on the
| | 01:04 | timeline has changed.
| | 01:06 | All we have to do now is to right-click
on an object and say Create Motion Tween.
| | 01:11 | So this will actually put down a
seconds worth of frames here in the timeline,
| | 01:16 | and everything is
automatically keyframed for us.
| | 01:18 | So now at frame 30, I can
start manipulating this.
| | 01:22 | So I'm going to get the Translation
tool again, and I'm going to push it away
| | 01:26 | from us in 3D space, like that.
| | 01:30 | Let me grab the 3D Rotation tool again.
| | 01:34 | Just change some of these properties,
again, just so you can see how you would
| | 01:38 | actually animate in 3D.
| | 01:39 | Now we're going to hit Enter, we can
see that clip is now animating in 3D.
| | 01:45 | Let's give it a little more rotation,
so you can kind of see it better.
| | 01:48 | We can see we have a nice, smooth effect.
| | 01:53 | Now, this 3D support in Flash Player
10 has actually built natively inside
| | 01:58 | of the Flash Player.
| | 01:59 | So this isn't an ActionScript
library, like you would use if you're
| | 02:02 | using Papervision3D.
| | 02:03 | This is actually written in C++ and
is native inside of the Flash Player.
| | 02:09 | So 3D animation is just that simple.
| | 02:12 | It's just like doing 2D animation.
| | 02:14 | You create keyframes by manipulating the
object, and we can see we can easily animate.
| | 02:20 | I'm going to undo just so we get back
to our initial state of our clip here.
| | 02:26 | So one thing that you may want to do
is to actually create something where
| | 02:30 | something rotates 360 degrees.
| | 02:33 | Well, there are some important things
you need to keep in mind if you want to
| | 02:36 | create something like that in Flash CS4.
| | 02:39 | So what I'm going to do is I'm going to
create a motion tween again on this object.
| | 02:43 | Now, let's say I want
this to rotate 360 degrees.
| | 02:48 | So I can get the Rotation tool on the Y-
axis and I can just start moving it around.
| | 02:54 | We can see there it is at 180.
| | 02:56 | I'm going to keep going until it gets to 360.
| | 03:02 | So now if I actually look at that
animation, we can see it's barely moving at all.
| | 03:09 | That's because Flash is actually
trying to be a little too smart here.
| | 03:13 | It's essentially saying Hey!
| | 03:14 | You started at this position. Even
though you went around 360 degrees, you end
| | 03:19 | up at almost the same position.
| | 03:21 | So all I'm going to do is move
that little bit that's different.
| | 03:24 | Well, that's obviously not what we want here.
| | 03:27 | That's where using the Motion
Editor actually comes into play.
| | 03:31 | So all I'm going to do is to select
this layer and open up the Motion Editor.
| | 03:36 | Again, this allows you to have a lot more
fine-tuned control over your animations.
| | 03:42 | So I can increase the number of frames
I can see here, because I want to see
| | 03:45 | my entire animation.
| | 03:47 | Here you can see the Rotation Y property.
| | 03:50 | If I click on that, it actually expands it.
| | 03:52 | We can see why we're not
getting very much rotation at all.
| | 03:55 | It's only going from 0 degrees to -2 degrees.
| | 03:59 | So what we actually want to do is to
just come in here and put 360 degrees
| | 04:04 | directly into this text input.
| | 04:07 | Now, you can see our animation is
actually moving all the way around 360 degrees.
| | 04:13 | So if I test that, we can see we
now have a nice, smooth 3D rotation.
| | 04:20 | So while the Motion Editor is a great
tool for doing all types of animation
| | 04:24 | inside of Flash CS4, it's particularly
useful and required if we're going to
| | 04:29 | be doing a lot of 3D animation.
| | 04:32 | So that's the basics of how to do
basic 3D animation in Flash CS4.
| | Collapse this transcript |
| Implementing z-sorting| 00:00 | So there is a very important limitation
of the new 3D support in Flash Player 10.
| | 00:07 | That's that we don't do any Z-sorting for you.
| | 00:10 | I'll show you what I mean
by that in this example.
| | 00:13 | So open up the zSort.fla file.
| | 00:16 | Now, this file just simply contains two
movie clips, each with a different photo in it.
| | 00:21 | So here I have a photo of Ryan Stuart,
one of my colleagues, and then a photo
| | 00:26 | of these figurines.
| | 00:27 | So I just have them
brought out onto the stage here.
| | 00:30 | So what I'm going to do is to
turn both of these into a movie clip.
| | 00:34 | So I'm going to wrap them
into a single movie clip.
| | 00:36 | I'm just going to select them both,
right-click, choose Convert to Symbol, and
| | 00:42 | I'm just going to call it Con for container.
| | 00:45 | I'll make the registration
point in the center and click OK.
| | 00:50 | Then I'm going to go to the Properties
panel and also give it an instance name of Con.
| | 00:54 | So now, I'm going to double-click
that movie clip to go into Edit Mode.
| | 00:59 | Now what I'm going to do is to
position these clips in 3D space.
| | 01:04 | So the first thing I'm going to do is to
select that photo in the background and
| | 01:09 | I'm going to put it at Z of let's say 300.
| | 01:14 | So again, that's pushing it
away from the camera, away from us.
| | 01:17 | So now, I'm going to click on this
photo on the foreground and I'll just move
| | 01:22 | it back a little bit to say 100 on the Z-axis.
| | 01:26 | So now, if I go back out to the root
timeline and I get the 3D Rotation tool,
| | 01:33 | and if I start rotating this around,
we can see that right here things are
| | 01:38 | looking the way they should.
| | 01:39 | That photo of the figurines
is in front of the other photo.
| | 01:44 | But as I bring this around past
180, you can see what happens.
| | 01:49 | That photo of Ryan should actually
have popped in front of the figurines.
| | 01:54 | So Flash isn't doing that logic for you.
| | 01:58 | It's essentially just going by
the order of the display list.
| | 02:02 | So best case scenario, we would
actually say hey, this photo of Ryan should be
| | 02:07 | in front, and we change the
order of the display list.
| | 02:10 | But that is not actually
built into Flash Player 10.
| | 02:14 | So there is a workaround for doing this,
but it requires using some ActionScript code.
| | 02:20 | Now, inside of the Exercise Files,
inside of the same folder as this FLA file,
| | 02:26 | we can see we have two ActionScript
classes. One is called SimpleZSorter,
| | 02:31 | the other is called SimpleZSortVO.
| | 02:34 | Now it's not important that you
necessarily understand what's inside of these
| | 02:37 | ActionScript classes.
| | 02:39 | You don't have to
understand them in order to use them.
| | 02:41 | These are actually written by
Ralph Howard who is a member on the
| | 02:45 | Papervision3D team.
| | 02:46 | Basically, all you have to do is just
to make sure these two classes are in the
| | 02:50 | same directory as your FLA file.
| | 02:53 | So now I'm going to go back to our FLA.
| | 02:56 | I already have a locked Actions
layer here for doing my ActionScript.
| | 02:59 | I'm just going to create a
simple 3D animation here.
| | 03:04 | So I'm going to say
addEventListener and I want to respond to
| | 03:08 | Event.ENTER_FRAME and I'm going to
have it call a function called loop.
| | 03:15 | It's not returning anything,
so we're going to say void.
| | 03:18 | So all I'm going to do inside of here is
just to rotate this container movie clip.
| | 03:23 | So I'm going to say con.rotationY,
and I'm just going to say += 3.
| | 03:31 | So every time it comes through
this function, it's going to add 3 to
| | 03:35 | the rotationY property.
| | 03:36 | So now if I test it, here you
can see we have our rotation.
| | 03:41 | What I'm going to do is I'm going to
back it up on the Z-axis a little bit so we
| | 03:45 | can see this better.
| | 03:47 | So I'll get the Translation tool, just
push it away from us in 3D space a little bit.
| | 03:51 | So now you can see there is our rotation
and it's very obvious what the problem is here.
| | 03:58 | So we're going to use the
SimpleZSorter class to actually fix this problem.
| | 04:03 | So I'm going to come back
to my ActionScript code.
| | 04:07 | Now, all I have to do here is, in this
on ENTER_FRAME loop, is I want to call
| | 04:12 | the SimpleZSorter.sortClips.
| | 04:17 | This is a static function
inside of the SimpleZSorter class.
| | 04:21 | All you do is to pass in
your container movie clip.
| | 04:25 | What it's going to do is actually go
through and sort all of the objects inside
| | 04:30 | of them, based on their Z positions.
| | 04:33 | So all I have to do is say that and
now if we test the movie, we can see it's
| | 04:38 | fixed that display list problem.
| | 04:42 | So a very easy fix and again, this
isn't requiring you to know kind of advanced
| | 04:47 | ActionScript or 3D fundamentals.
| | 04:49 | If you want to actually see how this
is done, I definitely recommend looking
| | 04:53 | inside of that SimpleZSorter class,
because it's actually not a lot of code.
| | 04:57 | So it's important to note that this fix,
there is no current fix available if
| | 05:01 | you're simply doing timeline animation.
| | 05:04 | If you're doing 3D animation on the
timeline and you run into this problem,
| | 05:09 | you're going to have to add a frame of
ActionScript that will continually call
| | 05:14 | the sortClips method as
your animation is happening.
| | Collapse this transcript |
| Creating an interactive 3D cube| 00:01 | So now that we've seen an overview of
the new 3D capabilities in Flash Player 10,
| | 00:05 | let's look at more of a real-world
example and build an interactive 3D cube.
| | 00:11 | So you can open up the
interactiveCube.fla file and let's quickly just
| | 00:15 | look over this movie.
| | 00:16 | So I don't have anything here on the stage.
| | 00:19 | I have two layers here. I have an
Empty Images layer and I have a locked
| | 00:23 | Actions layer where we're going to
actually write our ActionScript code.
| | 00:27 | Inside of the library,
I have six movie clips.
| | 00:30 | These are just some photos I took when
I used to do snowboard photography and
| | 00:34 | we're going to assemble
these six clips into cube.
| | 00:39 | So all I'm going to do is Shift+Click
to select them all and I'm just going to
| | 00:43 | drag them out onto the stage.
| | 00:45 | Okay, so now at this point, I could go
through and start giving each of these
| | 00:50 | instance names, but we don't have to do that.
In ActionScript 3, we can actually
| | 00:54 | programmatically access the
children of a container movie clip.
| | 00:58 | So I'm not even going to
give them instance names.
| | 01:01 | What I do want to do however is to
select them all and to wrap them inside of a
| | 01:07 | container movie clip.
| | 01:08 | So with them selected, I'm just going to
right-click, Convert to Symbol. I'm just
| | 01:13 | going to call it Con for container.
| | 01:16 | Again, I want the Registration point to
be in the center so that when I rotate
| | 01:20 | this around, it's actually
going to rotate from the center.
| | 01:22 | I'll click OK and then now in the
Properties panel, I want to give that
| | 01:28 | container an instance
name also of Con. Okay.
| | 01:32 | So at this point they're all just
flat, sitting on top of one another.
| | 01:35 | We're actually going to position them
using ActionScript and then we're going
| | 01:39 | to do the rotation based on your mouse position.
| | 01:43 | So now I'm going to go into the Actions panel.
| | 01:46 | I'm going to highlight that first keyframe,
and we can begin writing our ActionScript.
| | 01:51 | So the way in which we access children
of a display object is there are a few
| | 01:57 | methods, but we're going to
use the getChildAt method.
| | 02:00 | This allows us to provide an index and
we can actually reference a certain clip
| | 02:05 | inside of that display object.
| | 02:07 | So I'm going to say con.getChildAt and
now we're going to start with the first
| | 02:13 | item in the display list, which
again is going to be at position zero.
| | 02:19 | What we're going to do is to
create the left side of our cube first.
| | 02:22 | So I'm going to say rotationY = 90.
| | 02:27 | So that's going to rotate
at 90 degrees on the Y-axis.
| | 02:29 | Then I need to move it to the left, so
I'm going to say con.getChildAt, position 0,
| | 02:37 | and now I'm going to set
the X property equal to -100.
| | 02:43 | Now all of these images actually
have a width and a height of 200.
| | 02:47 | So here I'm saying -100, so I want
to move it to the left -100 pixels.
| | 02:53 | Okay. So that rotates and
positions the left side of the cube.
| | 02:59 | So I'm just going to copy these two lines,
just to save some time, paste this in.
| | 03:04 | Now we're going to access the clip
at position 1 in the display list.
| | 03:09 | Now, here I'm going to
create the right side of the cube.
| | 03:12 | So again rotationY is going to be at 90 degrees.
| | 03:15 | The X position this time
is now going to be +100.
| | 03:20 | So again, everything is centered on
the origin. The left side goes to -100,
| | 03:25 | the right side to +100.
| | 03:26 | So now I'm going to paste that in again.
| | 03:30 | Now to create the back of the
cube, I don't need to rotate this.
| | 03:35 | All I need to do is to
position this on the Z-axis.
| | 03:40 | So this is going to be position 2 and
now, I'm going to push it back away from
| | 03:45 | us on the Z-axis by 100.
| | 03:48 | This is going to push it 100 pixels away
from us, creating the back wall of our cube.
| | 03:53 | So now I'm going to keep going through here.
| | 03:57 | This is going to be the item at
position 3 in the display list.
| | 04:02 | Now, for this one, I'm going to
create the bottom of the cube.
| | 04:04 | So to create the bottom, I'm going to
need to set the rotationX property and
| | 04:09 | I'm going to want to keep that at 90.
| | 04:11 | So to create the bottom, I'm
rotating it 90 degrees along the X-axis.
| | 04:16 | Now, I need to offset it on the Y-
axis to push it down to the bottom.
| | 04:21 | So for that, I'm just going to
set its Y position equal to 100.
| | 04:26 | That's going to create the bottom of our cube.
| | 04:28 | So now again, I'm going to paste this in.
| | 04:31 | Now, we're going to create the top of our cube.
| | 04:35 | This is going to be similar to the bottom.
| | 04:37 | I'm going to set the
rotationX property to 90 degrees.
| | 04:41 | But now I actually want to
position it at -100 on the Y-axis.
| | 04:46 | So this is going to push it up,
creating the top of the cube.
| | 04:50 | So now all I need to do is to
create the front of the cube.
| | 04:55 | So this is very easy.
| | 04:56 | Let me get rid of this.
| | 04:58 | Oh and I need to actually need to
make sure that I set this properly.
| | 05:01 | So that's the fourth or the fifth
item rather in the display list,
| | 05:06 | represented by number 4 here.
| | 05:09 | For the front of the cube, I'm going to
need to change this to 5, since this is
| | 05:13 | the sixth item in the display list.
| | 05:16 | All I need to do in this case is just
to change its Z position to -100, because
| | 05:23 | right now it's sitting at 0 on the z-axis.
| | 05:26 | All we need to do is to pull it closer
to us by 100 pixels, which I'm doing here.
| | 05:31 | So now if we test the movie, we can see
obviously we're not going to be able to
| | 05:36 | tell if our work was successful or not
really, because it's kind of hard to see
| | 05:40 | a cube when you're
looking at it, directly face on.
| | 05:43 | So now what we want to do is to
actually add the interactivity.
| | 05:47 | So to do that, I'm going to create an
event listener and we're going to respond
| | 05:53 | to the event.ENTER_FRAME event.
| | 05:55 | I'm going to have that
call a function called Loop.
| | 05:59 | Let's create that function now.
| | 06:00 | We're not returning anything.
| | 06:03 | So we're going to say void.
| | 06:04 | So what we want to do inside of here is
again, we want to adjust the rotation of
| | 06:10 | that container, based on my mouse position.
| | 06:13 | So we're going to rotate it on the Y-axis,
based on the X position of our mouse.
| | 06:19 | So let's say con.rotationY.
| | 06:22 | And what we need to do here is every
time we come into this event, we're going
| | 06:26 | to add a value to its current rotationY.
| | 06:30 | So we're going to say +=.
| | 06:32 | Now, what I want to do is to find the
distance between my mouse, my mouse's X
| | 06:37 | position in the center of our movie.
| | 06:40 | So I'm going to wrap that
inside of parentheses here.
| | 06:44 | So all I need to do is to say mouseX - 275.
| | 06:47 | Now, I've hard-coded in the center of my stage.
| | 06:53 | So you can see here
it has a width of 550.
| | 06:57 | You could also use stage.stage width
divided by 2, but right here, we're just
| | 07:02 | going to hard-code it.
| | 07:02 | It just makes it easier.
| | 07:04 | So this gives us the distance between my
mouse position in the center of my movie.
| | 07:09 | Well, this value, if we were to add this
to the rotationY, it's too large of a value.
| | 07:14 | So the thing would be
rotating all over the place.
| | 07:17 | You probably wouldn't even be
able to see what was going on.
| | 07:20 | So we need to take this value
and actually make it smaller.
| | 07:22 | So all I'm going to do is to
multiply that value by 0.1.
| | 07:27 | This is just going to
make it a more usable number.
| | 07:31 | So let's test the movie now
and we can see what we have.
| | 07:34 | So now, things are looking pretty good
as far as the rotation, but we have that
| | 07:39 | zSort problem that I
talked about in the last movie.
| | 07:43 | So obviously, one of the things
we're going to need to do is to call that
| | 07:47 | SimpleZSorter.sortClips method.
| | 07:51 | So let's do this here.
| | 07:53 | So SimpleZSorter.sortClips, and
again, all we do is to pass in our container that
| | 08:01 | contains our 3D objects and that is named Con.
| | 08:04 | So now we can test it.
| | 08:06 | Now you can see we have
our clips sorting properly.
| | 08:10 | But here, so we can see the front,
the back, the left and the right are
| | 08:15 | positioned properly.
| | 08:16 | Let's actually rotate it on another axis as
well so we can see the bottom and the top.
| | 08:22 | So I'm just going to copy
this line and paste it in.
| | 08:26 | Now, I'm going to rotate on the X-axis.
| | 08:30 | So I'm just going to change that to rotationX.
| | 08:33 | I want the rotation on the X-axis to
be controlled by my mouse's Y position.
| | 08:38 | So all I have to do is to change that to mouseY.
| | 08:42 | The height of my movie is actually 400.
| | 08:44 | So half of that is actually going to be
200 and now if we test it, you can see
| | 08:49 | now I actually have full control over my cube.
| | 08:53 | I'm able to rotate it on the
different axises and things are
| | 08:57 | positioned properly.
| | 08:59 | So you can see, it's very easy to create
some kind of nice, interactive 3D effects.
| | 09:04 | Now all of these clips
are still fully interactive.
| | 09:08 | So I could click on these
and respond to mouse events.
| | 09:11 | So it enables you to create some really
kind of interesting site navigations, or
| | 09:16 | just different interactive elements.
| | 09:19 | So again, that's up the basics of
creating a 3D cube. The one really important thing,
| | 09:23 | if you want things to look
correctly, is to use the SimpleZSorter class
| | 09:28 | to actually sort your clips
based on their Z position.
| | Collapse this transcript |
| Working with low-level 3D properties| 00:01 | So in addition to the high-level APIs
in Flash Player 10 for 3D, there are
| | 00:06 | also some new lower-level classes that
allows you to have lower-level access
| | 00:11 | to the 3D engine itself.
| | 00:13 | And in this tutorial I am going to
show you an example of when you might use
| | 00:17 | these lower-level classes.
| | 00:19 | So you can open up the low_level.fla
file. This is just a simple movie with
| | 00:25 | a movie clip of a photo of my cat.
| | 00:28 | It has an instance name of bea.
| | 00:30 | And what we are going to use is the
Vector3D and matrix3D classes and we are
| | 00:36 | going to make this movie clip
actually point to wherever my mouse is.
| | 00:41 | So it's going to rotate itself in 3D space, so
that it's always looking at my mouse position.
| | 00:46 | So I am going to go ahead and highlight
the first keyframe in the Actions layer
| | 00:50 | and open up the Actions panel.
| | 00:52 | So the first thing I am going to do is to
set up the mouse move event for the stage.
| | 00:56 | So this is going to fire an event any
time I move my mouse on my Flash movie.
| | 01:01 | So I am going to say stage.
addEventListener and this is going to be of type
| | 01:08 | MouseEvent.MOUSE_MOVE.
| | 01:12 | Now I am going to have that
call a function called onMove.
| | 01:15 | So I am going to create that
function now, onMove, and the event type is
| | 01:23 | MouseEvent. We are not going to
return anything, so I am going to say void.
| | 01:28 | Okay so the first thing that I need to
create inside of here is a new instance
| | 01:32 | of the Vector3D class.
| | 01:34 | The Vector3D class just
represents a position in 3D space.
| | 01:39 | So, any object that's positioned in 3D
space is going to have three position
| | 01:43 | properties, the x-axis,
the y-axis and the z-axis.
| | 01:48 | And all Vector3D does is it
encapsulates those three values to represent a
| | 01:54 | position in 3D space.
| | 01:56 | So the first Vector3D that I need to
create is the position of my mouse.
| | 02:02 | So I'm going to call that target, since it's
going to be the target that our movie clip
| | 02:07 | is going to be looking at, and this is
going to of type Vector3D = new Vector3D.
| | 02:14 | Now here I need to put in the x, y,
and z positions for my mouse cursor.
| | 02:20 | Now obviously a mouse cursor doesn't have a z
property, so we are just going put in 0 for that.
| | 02:26 | But for the x and y, I obviously
want to use mouseX which represents the
| | 02:31 | x-position of my mouse, then mouseY,
which represents the y position of my mouse
| | 02:38 | and I am going to put in 0 for the z
property, which is the default anyway,
| | 02:42 | but it's helpful for us to actually
visualize this here and I can close that.
| | 02:47 | Now I am just going to copy this line
and we're going to need to create two
| | 02:52 | more Vector3D objects.
| | 02:55 | So let me paste this in.
| | 02:56 | Now we need to create another one and
this represents where our actual movie
| | 03:02 | clip is looking at or where it's facing.
| | 03:05 | So I am going to call this 'at' for
representing where is our movie clip
| | 03:09 | actually looking at.
| | 03:11 | So by default a movie clip is looking
at an x-position of 0, a y-position of 0
| | 03:20 | and a z-position of 1.
| | 03:23 | But in this case, it's actually
looking towards us, so it's going to be a
| | 03:26 | z-position of -1 here.
| | 03:30 | So again this vector is simply
representing the direction in which our
| | 03:33 | movie clip is looking.
| | 03:35 | So it's looking towards us which
is actually negative on the z-axis.
| | 03:41 | So now I am going to come
create another line here.
| | 03:44 | Now the next Vector3D that I need to
create is a simple Vector3D that represents
| | 03:49 | which axis or which direction is
considered up by the movie clip.
| | 03:55 | So I am going to call this up and
obviously the x-axis is not considered the up
| | 04:01 | axis for our movie clip.
| | 04:04 | The y-axis has a value of -1, so that
essentially represents the direction that
| | 04:11 | our movie clip considers up.
| | 04:13 | So if we go negative on the y-axis that is
actually the up position for our movie clip.
| | 04:20 | So now you'll notice if you change
some of these values, it's just going to
| | 04:23 | change the rotation of your object.
| | 04:25 | So if you have a simple movie clip like
this, you are going to want to put the
| | 04:29 | at with the z position of -1 and
the up vector with a y position of -1.
| | 04:36 | Okay so now I have my three Vector3Ds here.
| | 04:40 | Next thing I want to do is to actually
push my movie clip away from us in 3D
| | 04:45 | space a little bit along the z-axis.
| | 04:47 | So I am just going to say bea.z = 50.
| | 04:53 | That's just going to push it a little
farther away from us on the z-axis and
| | 04:57 | I will explain why you
need to do that in a second.
| | 05:00 | So now we've created our Vector3Ds.
Now we are ready to actually position our
| | 05:04 | rotate that movie clip
based on my mouse position.
| | 05:08 | So to do that we need to say
bea.transform, so now we are actually setting
| | 05:13 | the transform property on that
movie clip, and we are going to set the
| | 05:18 | matrix3D property, because again these
three vectors are going to combine to
| | 05:24 | create a matrix3D class.
| | 05:26 | Now this matrix3D has a method called
pointAt and this method here we actually
| | 05:34 | pass in these three vectors.
| | 05:36 | First is the target that we
actually want to point at, then what is the
| | 05:40 | direction that our movie clip is
looking at and then which direction is
| | 05:44 | considered up by that movie clip.
| | 05:46 | So here I just simply pass in target, at
and up and that's all that I need to do here.
| | 05:53 | Now anytime that you are using mouse
events if you want to see good performance,
| | 05:58 | you should always call the
e.updateAfterEvent method.
| | 06:04 | So again, e is my event object here.
| | 06:07 | By calling this you just basically
force Flash to do another render right after
| | 06:13 | this event has been called.
| | 06:14 | So now if I test the movie, we can see
that as I move my mouse around, that clip
| | 06:20 | is always adjusting itself to
basically stare at my mouse position.
| | 06:27 | So pretty cool stuff, pretty easy,
even though these classes are a little more
| | 06:31 | low level than some of the
other ones we have looked at.
| | 06:35 | Now the reason why we need to actually
set this in z space, if I comment out
| | 06:39 | this line, you could see
that we get some runtime errors.
| | 06:44 | So if I come in the Output panel here,
it says cannot access a property or
| | 06:48 | method of a null object reference.
| | 06:50 | Okay so what does that mean?
| | 06:51 | Well basically movie clips inside of
Flash CS4, they have different modes.
| | 06:57 | So if I haven't actually positioned
this clip at all using 3D properties,
| | 07:03 | it's still in 2D mode.
| | 07:05 | So what I need to do is I need to get
this thing to get into 3D mode and then it
| | 07:09 | will actually have the z
property that we can set.
| | 07:13 | So to set something into 3D mode, we can
set any of their properties, but here we
| | 07:18 | can set the z property.
| | 07:20 | So basically we needed to set this
in order to set this movie clip into 3D
| | 07:25 | mode, and when we do that, we can now
adjust these properties because from Flash
| | 07:31 | perspective this is now a 3D
object and not a 2D object.
| | 07:36 | So there are also other APIs,
lower-level APIs. Definitely look in the
| | 07:40 | documentation if you want to get more
involved with these lower-level classes.
| | 07:44 | Generally though, you can do
everything you need to do just by using
| | 07:48 | the z property and rotation y,
rotation x and rotation z.
| | Collapse this transcript |
| What about Papervision3D?| 00:00 | So one of the questions that I get the
most regarding this new 3D support in
| | 00:05 | Flash Player 10 is if people can
forget about using open-source engines like
| | 00:11 | Papervision3D now and
that's definitely not the case.
| | 00:15 | As I mentioned earlier this new 3D
support is for simple effects and transitions.
| | 00:21 | Now you're welcome to push the limits
of this native 3D, but for doing certain
| | 00:26 | types of projects you're still going to want
to use a full-blown 3D engine like Papervision.
| | 00:31 | So here is one of my favorite Papervision
sites, the Whitevoid site, their portfolio.
| | 00:38 | And here it's got really great
navigation. If I click Open, all the sections
| | 00:43 | of the site kind of pop out.
| | 00:45 | I can click Open to go into other sections.
| | 00:47 | It has a really nice clean 3D feel to it.
| | 00:51 | So something like this, you could probably
accomplish using the new native 3D support.
| | 00:56 | So there are situations like this
where it's kind of an edge case, where you
| | 01:00 | could do it in Papervision and you could
probably also do it using the native 3D.
| | 01:05 | So some sites though are unquestionably
better suited for using something like Papervision.
| | 01:11 | So the Big & Small site, which is the
BBC show, this is created by Plugin Media.
| | 01:17 | This is actually a full-
blown immersive environment.
| | 01:20 | So if I click to enter this and this
actually was created using 3D models.
| | 01:26 | So I can come here and zoom into this
and do this little finger painting thing.
| | 01:32 | I can basically go all around
this house and explore this house.
| | 01:37 | Now something like this, you would never
want to actually do this using the native 3D.
| | 01:42 | It's just not in-depth enough.
| | 01:44 | So if you want to do kind of these real,
real 3D environments, where you are
| | 01:49 | going to be importing 3D models, adding
shaders and lights, you're still going
| | 01:54 | to want to use things like
Papervision for those things.
| | 01:58 | So it's really a matter of
what type of content do you have.
| | 02:02 | And again one of the main purposes of
this native 3D is that it's easy for
| | 02:06 | designers to use, inside of Flash CS4.
| | 02:09 | If you ask a designer to go and
download Papervision and start using it,
| | 02:14 | it's basically not going to happen.
| | 02:15 | You pretty much have to be an
ActionScript developer in order to use that library.
| | 02:21 | So again, you definitely going to
want to know how to use things like
| | 02:26 | Papervision, if you want to create
these full, immersive 3D environments.
| | Collapse this transcript |
|
|
2. Text Layout FrameworkOverview of the new text features| 00:00 | So one of the areas that Flash has
never really been good at is text rendering.
| | 00:05 | People have always long complained that
text inside of Flash never looked quite right.
| | 00:10 | It was either blurry or it was misaligned.
| | 00:13 | Well this has been addressed in a
big way in Flash Player 10 with the
| | 00:17 | introduction of a brand new text engine.
| | 00:19 | Now this is a really low-level
ActionScript 3 engine for creating text.
| | 00:25 | Now if you happen to know a lot about
text, you can actually use this low-level
| | 00:29 | API, but for most of us we are going
to use what's called the Text Layout
| | 00:33 | Framework, which is a set of
advanced components for doing text.
| | 00:39 | So to get an overview of what's
possible in this new framework, we are going to
| | 00:43 | come to the Adobe Labs site, if you go to
| | 00:45 | labs.adobe.com/technologies/textlayout/.
| | 00:51 | Basically right now this is still in
beta, so once it gets finally released,
| | 00:56 | this may actually end up
in a different location.
| | 00:59 | But here on the homepage, here on the
Labs site, there is a really nice tour that
| | 01:03 | essentially takes you through a lot of
the new features that are in this engine.
| | 01:07 | So I am just going to click Next here,
and one of the big things that's been
| | 01:11 | improved upon is the
rendering of foreign-language text.
| | 01:16 | So if you've ever had to localize or
internationalize your Flash content,
| | 01:21 | you know how difficult it can be.
| | 01:22 | So here in this example, we have
some basic English text, but we can
| | 01:28 | either through this map or through
this combo box, we can change it to
| | 01:31 | different languages.
| | 01:33 | So I can change it to a right to left
language, like Arabic and we can see
| | 01:38 | not only is it rendering correctly,
but it's also selecting the way that it should,
| | 01:43 | right to left.
| | 01:44 | Now if I get even more of a complex
example here, if we change to Japanese,
| | 01:49 | which is not only a right to left
language, but also of vertical language and
| | 01:53 | we can see that the Japanese
characters are all rendering nicely.
| | 01:57 | But most importantly when I select these
characters, it's actually selecting it vertically.
| | 02:02 | It's not doing the horizontal
selection that you're used to.
| | 02:06 | So again, really advanced stuff when it
comes to localizing your Flash content.
| | 02:12 | Another big feature is the
ability to have linked containers.
| | 02:16 | So in tools like Illustrator or InDesign,
you can have two separate text fields
| | 02:21 | that are actually linked together so
that when you type in one, the overflow
| | 02:25 | will go to that next linked container.
| | 02:27 | So here, I can select this and copy it
and then come up here and paste it in and
| | 02:36 | we can see the text is nicely
wrapping around this M right here.
| | 02:40 | But if actually show the bounds of
the containers, we can see that they're
| | 02:44 | actually all individual text
fields that have been linked together.
| | 02:48 | So if I come in now and start typing,
I can see that the overflow of text
| | 02:53 | actually goes throughout the linked containers.
| | 02:58 | So another thing that's been greatly
improved is just the ability to format text.
| | 03:02 | So here I have the ability to
basically re-create what I see here.
| | 03:08 | So I can change the Orientation of the
text of Vertical and then I can rotate
| | 03:13 | this text around to 270 so that
it's a nice vertical layout, and I can
| | 03:18 | increase the tracking and again when I
increase the tracking, it's increasing
| | 03:22 | it vertically the way it should, because I've
set this text field to have a Vertical layout.
| | 03:30 | Another really helpful
thing is multicolumn text.
| | 03:33 | So this is the ability to have a single
text field that's broken into multiple columns.
| | 03:39 | So you can see here when I select it's
actually selecting one column at a time,
| | 03:44 | the way you would expect it to.
| | 03:45 | And I can actually change this at runtime.
| | 03:48 | So I can change the number of columns
to 4, to 3, to 2, to 1, and again this is
| | 03:54 | a single text field
that's allowing me to do this.
| | 03:56 | I can also change the way
we actually display numbers.
| | 04:01 | So we have the ability to change the digit case.
| | 04:04 | So I can change this to old style and it
essentially gives me this kind of where
| | 04:09 | the 6 is a little bit higher than the
3 and the 5 and I can change this to
| | 04:14 | different fonts here and you can see
we have just different options for how
| | 04:18 | numbers are displayed
inside of your Flash movie.
| | 04:22 | Now another thing that can be really
important for designers are ligatures.
| | 04:27 | So ligatures are essentially fancy ways
of connecting certain letters together.
| | 04:32 | So let me change this to Hypatia Sans
Pro, so you can kind of see this better
| | 04:38 | and here you can see that these two Fs and
the L, they're actually connected to one another.
| | 04:44 | So here are the two Fs that use a
single crossbar and that second F actually
| | 04:49 | turns into that L and we can see the
same thing here between the C and T.
| | 04:55 | So if your fonts have these kind of ligatures,
you are going to be able to display
| | 04:59 | them properly inside of Flash.
| | 05:02 | We've always had the ability to embed
images into our text in Flash, but now
| | 05:07 | we have much greater control over it.
| | 05:09 | So here we can see I have different
images that are being dropped in here.
| | 05:13 | I can change this at runtime and not
only do we have the abilities do inline
| | 05:18 | images but we can also do inline SWF files.
| | 05:21 | So let's say I had something that was
actually animated, I could put a SWF file
| | 05:25 | inline here in my text content.
| | 05:28 | And we also have the ability to
basically change things like blend modes.
| | 05:32 | I can add filters to this.
| | 05:35 | Basically just like any display object
I am able to fully control the look and feel.
| | 05:40 | So that's an overview of what's
capable with the Text Layout Framework.
| | 05:43 | Now let's actually look into how
we can create this inside of Flash.
| | Collapse this transcript |
| Installing the TLF library| 00:00 | So, the first thing that you need
to do in order to use the Text Layout
| | 00:03 | Framework is to actually
download and install it.
| | 00:06 | Now, what you actually download is depending
on which tool you're actually using to develop.
| | 00:12 | If you're using Flex Builder to do
your development, you don't want it to
| | 00:16 | download the actual open
source Text Layout Framework.
| | 00:20 | And when you click that, it brings
you to the opensource.adobe.com website.
| | 00:25 | This is essentially the site we use
for all of our open source technologies.
| | 00:29 | So, here you can actually download
the classes that you need to include in
| | 00:33 | your Flex application.
| | 00:35 | Now, if you happen to be using the
Flex 4 beta, code named Gumbo,
| | 00:40 | the Text Layout Framework is actually
automatically included in the Gumbo SDK, so you
| | 00:45 | don't need to download anything.
| | 00:47 | But in our case, we are
going to be using Flash CS4.
| | 00:50 | So what we need to do is to download
the extension for Flash CS4 and we can see it
| | 00:56 | here in the Download pod, when I
click here, it's going to ask me to
| | 01:00 | agree to some terms of use,
so I will check that off.
| | 01:04 | And now you can see that we have the
Text Layout component for Adobe Flash CS4.
| | 01:10 | So, all I am going to do is just to
right-click and I am just going to save
| | 01:14 | this to my Desktop and click Save, and let's
go the Desktop now and let me just unzip that.
| | 01:24 | And if we look inside of the folder,
now we can see that we have this MXP file.
| | 01:29 | An MXP file is essentially just
a Flash extension or component.
| | 01:34 | So what you will want to do is to
actually double-click that and this is now
| | 01:38 | going to open the Adobe Extension
Manager and this allows you to manage all of
| | 01:43 | your extensions, not just for Flash but
also the other Creative Suite products.
| | 01:48 | So now again, it's
asking me to accept the terms.
| | 01:50 | I am going to click OK and now it
has actually installed the Text Layout
| | 01:55 | component inside of Flash.
| | 01:57 | Now, it has also installed the actual
ActionScript classes if you don't want to
| | 02:01 | use a component and you want to do it
from ActionScript and we will be taking a
| | 02:04 | look at that in a little bit.
| | 02:05 | So, I can close the Extension Manager now
and let's go ahead and open up Flash CS4.
| | 02:10 | Now, if you already had it open
previously, you are going to want to restart it
| | 02:14 | in order to be able to see
this component inside of Flash.
| | 02:17 | So, I am just going to create a new
ActionScript 3 document here and I am going
| | 02:22 | to Window > Components and now we can
see under Standard Components, we have the
| | 02:29 | Text Layout component.
| | 02:31 | So, that is what you need to be able
to see to know that you've actually
| | 02:34 | installed it correctly.
| | Collapse this transcript |
| Using the TLF component in Flash CS4| 00:00 | So, in the last video I showed you how
to download and install the Text Layout
| | 00:04 | component for Flash CS4.
| | 00:07 | So, now let's take a look at how you
would actually use this inside of Flash to
| | 00:10 | take advantage of some of
these new text features.
| | 00:13 | So, I am going to create a new
blank ActionScript 3 document.
| | 00:16 | Now, you need to use ActionScript 3 in
order to access the Text Layout Framework.
| | 00:21 | So, if you're still using ActionScript 2,
this is yet another reason for you to
| | 00:26 | transition over to the
new version of ActionScript.
| | 00:29 | So, to use the component, I
need to open the Components panel.
| | 00:32 | So, I am just going to go to Window >
Components and then under the Standard
| | 00:36 | Component section, we can
see the Text Layout component.
| | 00:39 | So, all I have to do is to drag that
onto the stage. Now this is going to create
| | 00:44 | a text container that's exactly the
same width and height as my stage.
| | 00:47 | So, I am just going to align that
component to the top and to the left, just so
| | 00:53 | it fits nicely here.
| | 00:54 | So, now in order to edit the properties
and the text of this component, I'm going
| | 01:00 | to go into Window > Other Panels
and choose the Text Layout panel.
| | 01:05 | So this panel allows me to
essentially changed the text that's in this
| | 01:10 | component and it also allows me to kind of
modify the properties of how this component looks.
| | 01:16 | So, if I double-click the component, we can
see I am now in Edit Mode for the component.
| | 01:21 | Now, I already have some Lorem Ipsum
text on the clipboard that I am going to use.
| | 01:26 | I am just going to paste that in.
| | 01:27 | So, now I see the text inside of the
Editor, but in order to see those changes
| | 01:31 | on the stage, I need to click the Send
to Stage button and now you can see the
| | 01:36 | text has been updated here on the stage.
| | 01:39 | And this component already has things
like a built-in scrollbar if your text
| | 01:42 | exceeds the dimensions of the component.
| | 01:45 | So, now at this point I can start
adjusting some of the properties.
| | 01:50 | So, I can select all of the text here
and let's just change the font. I will
| | 01:54 | change it to a Trebuchet and again, if
I want to see that, I need to click Send
| | 01:59 | to Stage in order to see that text.
| | 02:01 | So, now I can start using some of the
new features in the Text Layout Framework.
| | 02:06 | If I go through the Stack panel and if
I come down to Container, here you can
| | 02:11 | see I can adjust the number of
columns that are in this text field.
| | 02:14 | So right now, it's set to Auto, but I
can change this to a certain count and
| | 02:20 | let's say I change this to 2 and you
can see automatically the text field has
| | 02:25 | been broken into two columns.
| | 02:28 | So, I will send that to the stage.
| | 02:30 | Now, if I test my movie, one of the
things with the Text Layout component,
| | 02:33 | it takes a little while to
compile, so just be aware of that.
| | 02:37 | Now from here, we can see it's in
two columns and but as I select,
| | 02:41 | it's selecting properly.
| | 02:42 | It's going one column at a time.
| | 02:45 | So, all of that is built-in for you.
| | 02:48 | Now, when we come back I
can start fine-tuning this.
| | 02:50 | So, I have my two columns,
but there's no gap in between.
| | 02:54 | So, you can see these essentially are
butted right up against one another.
| | 02:57 | So, I can come in here and adjust the
spacing in between the columns and I can
| | 03:02 | also choose to instead of setting a
certain number, I can say make Auto columns
| | 03:10 | and then it's going to be
dependent on the width that I set.
| | 03:13 | So let's say I want to set it to 200 pixels.
| | 03:17 | It's only get a break to another column
if my actual size is greater than 200.
| | 03:22 | And we can see if we go through some of
these other things, I could change the
| | 03:25 | Orientation of this text to Vertical.
| | 03:29 | So now for English language text, this
is a little strange, but when we look at
| | 03:33 | Japanese text in a little bit,
this will obviously make a lot more sense, but
| | 03:37 | we can see that the selection is happening
vertically as well, which is really important.
| | 03:42 | And again, I can come through, I can
change Left to Right to Right to Left.
| | 03:46 | Again, if you are dealing with things
like Arabic or right-to-left languages.
| | 03:50 | So, going through here you can see
all of the different properties that are
| | 03:54 | available to you with this new component.
| | 03:58 | Now, this component that we are
looking at right now is a very early beta build.
| | 04:01 | The next version of Flash, Flash CS5, is
going to have all of this stuff built into it.
| | 04:07 | So, you are not going to have
to download a separate component.
| | 04:10 | If you want to start using it now in
Flash CS4, you have to use this component
| | 04:14 | or you have to do it from ActionScript
which is what we are going to talk about next.
| | Collapse this transcript |
| Adding basic text| 00:00 | So, now that you have seen how to use
the Text Layout component for Flash CS4,
| | 00:04 | let's look at how you would use these
new text features from ActionScript,
| | 00:09 | because you are going to have the most
control if you use ActionScript to use
| | 00:13 | this new text engine.
| | 00:14 | So, to create some basic text,
| | 00:16 | again, I am going to create a blank
ActionScript 3 document and we are going to
| | 00:20 | do everything here using ActionScript.
| | 00:22 | So, we are not going to do
anything on the stage here.
| | 00:24 | So, I am just going to create a locked
Actions layer and we will open the Actions panel.
| | 00:29 | So, the first thing we need to do in
order to use the classes in the Text Layout
| | 00:34 | Framework is we need to actually
add the component to our project.
| | 00:39 | So, I am going to open up the Library
here and then now I need to go to my
| | 00:43 | Components panel, so I will open that
up and the easiest way to do it is to
| | 00:48 | simply take the Text Layout
Component and drag it into the Library.
| | 00:52 | Now you could drag it out onto the
stage and then delete it, but it's just
| | 00:56 | easier to just drag it
directly into your Library panel.
| | 01:00 | So, just by doing this, I now have
access to all of the ActionScript 3 APIs for
| | 01:05 | the new text engine.
| | 01:07 | So, just like any other ActionScript
libraries that you use, we first need to
| | 01:12 | import the classes that we are
going to use into our project.
| | 01:15 | So, I am going to say Import.
| | 01:18 | Now all of the Text Layout Framework
is in the flashx.textLayout package.
| | 01:25 | Now, the first package I need to
import is the container package.
| | 01:29 | I am just going to import the entire
package and this package has the different
| | 01:34 | types of containers that
can hold your text content.
| | 01:36 | So, I am just going to copy
this to save time and paste it in.
| | 01:40 | Now, the next package is the elements
package and this contains the different
| | 01:46 | elements that can hold text in the text engine.
| | 01:50 | The next package is the formats package
and this contains different classes that
| | 01:56 | essentially handle how you are
going to format your text fields.
| | 02:00 | So, it includes things like
character format, paragraph format.
| | 02:04 | The next package we need to
include is the edit package.
| | 02:08 | So, the edit package has classes like
SelectionManager and EditManager and
| | 02:13 | this essentially sets up the different
levels of interactivity that you want
| | 02:17 | to have in your text field.
| | 02:19 | So the last package we need to import
is the actual text engine itself and
| | 02:25 | that's under flash.text.engine and we
are going to import all of that package
| | 02:32 | just with the .* syntax.
| | 02:35 | So, in order to do just basic text
fields you are going to need to import at
| | 02:39 | least these five packages.
| | 02:41 | Now, as we go through and create this
basic Hello World for the text engine,
| | 02:46 | you are going to notice that this is a lot
of code in order to do something very simple.
| | 02:50 | Well, in this example we are going to
do something simple, but you're really
| | 02:53 | going to see the benefits in the later
videos when we start looking at some of
| | 02:57 | these more advanced features.
| | 02:59 | So, the first thing I need to do
here is to create a new instance of the
| | 03:02 | configuration class.
| | 03:03 | So, the configuration class
is exactly what it sounds like.
| | 03:07 | It's essentially an object that contains
configuration details for your text component.
| | 03:12 | So, I am going to say var.
I am going to call it config.
| | 03:15 | It's an instance of Configuration.
| | 03:18 | Now, one thing you are going to note
here is that we're not getting any code
| | 03:22 | hinting for this Text Layout engine.
| | 03:25 | So, inside of Flash CS4 for right now
anyway, we are not going to get any code
| | 03:30 | hinting for this.
= new Configuration.
| | 03:35 | Now, the next thing we need to create
is an instance of the CharacterFormat
| | 03:39 | class and this essentially sets up all the
properties for how you want your text to look.
| | 03:44 | Things like Color, Font Family,
Kerning, all of those things.
| | 03:49 | So, I am going to name this charFormat:
CharacterFormat = new CharacterFormat and
| | 04:02 | very much similar to
CharacterFormat is the ParagraphFormat class.
| | 04:06 | That sets up how you want your
paragraph to look and behave.
| | 04:10 | So, I am going to create one of
those and I am going to call it
| | 04:13 | parFormat:ParagraphFormat
= new ParagraphFormat.
| | 04:25 | Now, the next thing we need to
do is to create an instance of the
| | 04:28 | SelectionManager class.
| | 04:30 | So, by default if when you create text
with the Text Layout Framework, you can't
| | 04:35 | select the text or edit it.
| | 04:37 | So, if we want to make the text
selectable, we need to create an instance of the
| | 04:42 | SelectionManager class.
| | 04:43 | So, I am going to do that.
| | 04:44 | I'm going to call it sm for Selection Manager.
| | 04:49 | = new SelectionManager.
| | 04:55 | Okay, so now that we've created kind
of our configuration and our formatting classes,
| | 04:59 | now we can actually start going
through and use these classes to set up
| | 05:03 | how we want our text field to look and behave.
| | 05:06 | So, let's start with the CharacterFormat.
| | 05:09 | So, I call that charFormat and what we
want to do is let's first set the color
| | 05:14 | and we are just going to use again the
standard hexadecimal color format that
| | 05:18 | ActionScript uses. So we will
say 0x and then the hex color.
| | 05:22 | So let's just make it red and the next
thing I want to set is the Font Family.
| | 05:30 | So CharacterFormat.fontFamily.
| | 05:35 | And here I would just provide a
string name for which font I want to use.
| | 05:38 | I am going to keep it really simple right now.
| | 05:40 | I am just going to use Aerial, but
just like in HTML, I could say Aerial,
| | 05:44 | Verdana, Helvetica and things like
that, but we will just keep it simple.
| | 05:48 | The next thing I want to do is
to actually set the Font Size.
| | 05:52 | So charFormat.fontSize,
let's make it a size of 30.
| | 05:58 | Now, I can adjust things like Kerning.
| | 06:01 | So again, Kerning is the
spacing in between individual letters.
| | 06:05 | I want to say charFormat.kerning = and then
we would use a constant from the Kerning class.
| | 06:14 | So, we say Kerning, here we are getting
a little code hinting, so you can either
| | 06:18 | have it On, Off or Auto.
| | 06:20 | I am just going to turn it on.
| | 06:22 | Again, I'm not setting all of the
properties that you have available to you;
| | 06:25 | just setting a few so you
can see what it looks like.
| | 06:28 | And now we can set the font style as well.
| | 06:31 | So charFormat.fontStyle.
| | 06:36 | In order to set Italics, you would want
to go to the FontPosture class and here
| | 06:41 | I can set either Italic or
Normal. We will just set Italic.
| | 06:45 | So, now we've set up how the actual
characters are going to look in this text field.
| | 06:50 | Now, the next thing I can set up is by
setting properties of the ParagraphFormat
| | 06:55 | class and remember I
created an instance of that.
| | 06:58 | I called it paraFormat and what I
am going to do is set the alignment.
| | 07:02 | So, textAlign = TextAlign, and then now
essentially I have to choose a constant
| | 07:11 | from the TextAlign class
and they are pretty obvious.
| | 07:14 | So Left is if you want it left, Center
or Right, you definitely want to look in
| | 07:19 | the documentation for the Text
Layout Framework if you want all the
| | 07:23 | nitty-gritty details.
| | 07:24 | But just to do basic left
aligned text here, I am just going to
| | 07:27 | say TextAlign.LEFT.
| | 07:28 | Okay, so now we've set some properties
first on the CharacterFormat and then on
| | 07:33 | the ParagraphFormat.
| | 07:35 | So, now what we I need to do is I need
to tell this configuration object that I created,
| | 07:40 | to use this CharacterFormat
and this ParagraphFormat instance.
| | 07:45 | So, to do that we come down and I call
that Configuration object config and now
| | 07:52 | in order to set the
CharacterFormat for that,
| | 07:54 | I'd say textFlowInitialCharacterFormat.
| | 08:00 | So, it's probably the longest property
name you ever going to have to deal with.
| | 08:04 | So, essentially this is telling the
configuration which CharacterFormat instance
| | 08:09 | to use and I want to use that
charFormat class that I created.
| | 08:15 | Just so I don't have to type all of
that again, I am going to copy that line
| | 08:18 | and paste it in and now all I have to
do is to change this to Paragraph and
| | 08:25 | change this to para.
| | 08:27 | So, now I have told that Configuration
object which CharacterFormat and which
| | 08:30 | ParagraphFormat class to use.
| | 08:32 | So, now the object that we need to
create that's actually going to hold our
| | 08:36 | text is an instance of the TextFlow
class and the TextFlow class literally just
| | 08:42 | contains some text in order to display.
| | 08:45 | So, I am going to come down and
let's say var and I will just call it
| | 08:50 | textFlow:TextFlow = new TextFlow and
to the constructor of this, we actually
| | 09:00 | send in that configuration object.
| | 09:03 | So, it's telling that
TextFlow how to configure itself.
| | 09:07 | So, I send that in like that.
| | 09:09 | Okay, so now that we have this, we are
still not done. We can't just add this textFlow
| | 09:14 | to the display list.
| | 09:16 | Now, we have to actually set up the
internals of this textFlow of what text we
| | 09:20 | are actually going to display in there.
| | 09:22 | So, inside of a textFlow object
you can have paragraph elements.
| | 09:27 | So a paragraph element is
literally just a paragraph of text.
| | 09:31 | So, I am going to create that.
| | 09:33 | I am going to say var p:ParagraphElement
= new ParagraphElement and now inside
| | 09:45 | of a paragraph element, you can
have instances of the span element.
| | 09:50 | Now the span element is the element
that's actually going to contain your text.
| | 09:55 | So, I need to create that though.
| | 09:56 | So, I am going to call it span and this is
going to be span:SpanElement = new SpanElement.
| | 10:07 | Now this is where I can actually set the text.
| | 10:10 | So, in order to do that I would just
say span.text = whatever string I want to
| | 10:16 | put in the text field.
| | 10:18 | So, here I am just going to put Hello World!
| | 10:21 | Okay, so now I have the
span and I have this paragraph.
| | 10:24 | Well, now since the paragraph is made
up of multiple spans, now I just need to
| | 10:29 | add this span to that paragraph
element and to do that I would just say
| | 10:33 | p.addChild(span) and now since a
textFlow can contain multiple paragraph
| | 10:41 | elements, I now just need to add
that paragraph element to my textFlow.
| | 10:47 | So textFlow.addChild and I am
going to add that paragraph.
| | 10:53 | Now again, if I had multiple paragraphs
I could continue adding children to the
| | 10:57 | textFlow, but right now I only have one.
| | 11:00 | Okay, so now I have set up
everything about my component.
| | 11:04 | I've set up the way the characters
look, the way the paragraph looks and
| | 11:07 | behaves, I have created my
configuration object, I have created my actual
| | 11:12 | textFlow passing in that configuration object.
| | 11:15 | Now, I have created a paragraph with a
single span inside of it that says Hello World!
| | 11:20 | And I've added them as children to the textFlow.
| | 11:23 | So, now we are ready to finally think about
displaying this inside of our Flash movie.
| | 11:27 | So, to do that we need to add this
to some type of display object.
| | 11:33 | So, I am just going to create
a sprite here to display this.
| | 11:36 | I will just call it sp:Sprite = new
Sprite() and I am just going to set it's x
| | 11:44 | and y a little bit, so it's not
right up against the side of the stage.
| | 11:47 | I will just set it to 200 and I will
set the y also equal to 200 and now I will
| | 11:54 | add this sprite to the stage using addChild.
| | 11:58 | Okay, so now here is my display
object that is going to hold that text.
| | 12:02 | So, now in order to get that text flow
into this sprite now I need to actually
| | 12:07 | set a couple of other things here.
| | 12:09 | So, the first thing that we need to do
in order to make this text selectable and
| | 12:13 | remember we created this instance
of the SelectionManager class here.
| | 12:19 | So, what I need to do is to
actually tell the textFlow to use
| | 12:22 | that SelectionManager.
| | 12:23 | So, I say textFlow.interactionManager = sm.
| | 12:31 | So, this is essentially saying use
that SelectionManager as the interactive
| | 12:35 | manager for the textFlow.
| | 12:37 | So, now I want to tell the textFlow
which display object to be put into.
| | 12:42 | So, for that I say textFlow and then
we use the FlowComposer property and
| | 12:48 | this property deals with how to actually
send your text out to the display world.
| | 12:53 | And now I'm going to say addController.
| | 12:57 | So, this is essentially where we are telling
the text flow which display object to go into.
| | 13:01 | Now inside of here,
we create a new instance of the
| | 13:05 | DisplayObjectContainerController and
now into this constructor we put the
| | 13:14 | display object we want to put this
text into and that's the sp Sprite that I
| | 13:19 | just created a minute ago.
| | 13:20 | And now we can give it the width and
height that we want this text field to be.
| | 13:24 | I am just going to 500x200.
| | 13:28 | I can close that
DisplayObjectContainerController and close the
| | 13:32 | addController method here. Okay.
| | 13:35 | So, now at this point I have my
text field added to the display list.
| | 13:39 | Now, I just want to tell the text flow
to update all the various containers.
| | 13:45 | So, any time you make a change to this
you need to update all of the containers,
| | 13:49 | because this one text flow could
actually be displayed in multiple display
| | 13:53 | objects throughout your movie.
| | 13:54 | So, I am going to say
textFlow.flowComposer and then just call the
| | 14:00 | updateAllContainers method.
| | 14:04 | Okay, so you can see 39 lines of code just
to display a text field that says Hello World!
| | 14:10 | So, now obviously if you wanted to do
something this simple, you would never use
| | 14:13 | the Text Layout Framework.
| | 14:15 | But this is kind of the basic template you
need in order to get some basic text out.
| | 14:20 | So, now if we test this, you can see
it's going to take a second and we have our
| | 14:25 | text displayed here.
| | 14:27 | And it's selectable because
we have that SelectionManager.
| | 14:30 | Now, let's say we wanted to actually
be able to edit this text, so that's
| | 14:35 | really simple to do.
| | 14:36 | All we have to do is instead of using a
SelectionManager, we can actually use an EditManager.
| | 14:42 | Now obviously an EditManager has all
the capabilities of the SelectionManager
| | 14:48 | but you have the ability to
actually edit the text as well.
| | 14:51 | So, now inside of here you can see I
can actually edit the text and now it's an
| | 14:56 | editable text field.
| | 14:57 | So again, this is a lot of code to do
something really simple but in the next videos
| | 15:01 | we will look at how to take this
code and take advantage of some of the
| | 15:05 | more advanced features of
the Text Layout Framework.
| | Collapse this transcript |
| Vertical and RTL international text| 00:00 | So in the last video I showed you how
you can create simple Hello World text
| | 00:05 | field using the Text Layout Framework.
| | 00:07 | Now this was a lot of code to write
just to do some simple text display.
| | 00:12 | Well, now let's look at how we can
expand on that to look at some of the more
| | 00:15 | advanced features in the framework.
| | 00:17 | So we are going to start with the
same file that we finished with in the
| | 00:21 | last tutorial, and I already have that for
you in the Exercise Files called basicText.fla.
| | 00:27 | So you want to open that up.
| | 00:28 | If we look in here, it's the same exact
code that we did in the last tutorial.
| | 00:33 | So let's just take a look
at what that looks like.
| | 00:35 | So when it exports, we just simply
have an editable text field here with
| | 00:40 | the text Hello World.
| | 00:41 | So now we are going to look at how
we can actually display languages like
| | 00:45 | Japanese that are right to left
languages in addition to being vertical.
| | 00:50 | So they are actually displayed
in vertical columns rather than in
| | 00:53 | horizontal columns.
| | 00:56 | So let's come into our code here.
| | 00:58 | Now the first thing we need to do is
we're going to need to use a font that
| | 01:01 | actually has the Japanese characters in it.
| | 01:04 | Now you could use any font you want
here, but a font that everybody has on
| | 01:08 | their system is Arial Unicode MS and
this font contains all of the glyphs
| | 01:15 | needed to display Japanese.
| | 01:18 | So let's change some of these properties.
| | 01:20 | I am going to change this to Black.
| | 01:22 | I am going to reduce the font size a little bit.
| | 01:25 | We're going to remove Italics.
| | 01:26 | I don't want this to be Italics text.
| | 01:29 | And now what we need to do is we need
to start to configure this text flow so
| | 01:34 | that it will properly
display the Japanese characters.
| | 01:37 | So under my charFormat here, what I am
going to do is to come under here and now
| | 01:43 | I need to create a new instance
of the container format class.
| | 01:47 | So very much similar to the
character format and paragraph format.
| | 01:51 | The container format class allows me to format
how my container is going to look and behave.
| | 01:56 | So I am going to say var, I am just
going to call it contFormat, and that's of
| | 02:02 | type ContainerFormat
= new Container Format.
| | 02:09 | Now, to the constructor here we need to pass in
the current container format for our textFlow.
| | 02:15 | Well, in the last example we didn't
create our text Flow until we were down here.
| | 02:20 | So what I am going to do is I am going
to move these lines up, like that, just
| | 02:25 | above the declaration for this container format.
| | 02:28 | So that way our textFlow
already have been configured. Okay.
| | 02:31 | So now to pass in to the constructor of
this container format I am simply going
| | 02:36 | to say textFlow.container format.
| | 02:42 | Again that's passing in whatever the
current container format is for my textFlow.
| | 02:47 | So now we can come down here and we can
see where I am setting the properties of
| | 02:51 | my paragraph format.
| | 02:52 | We have paraFormat.textAlign,
TextAlign.LEFT, we can leave that.
| | 02:57 | But now we want to add some
more properties. So paraFormat.
| | 03:02 | Now we want to set the Direction property,
and for the Direction property we are
| | 03:07 | going to say Direction.LTR.
| | 03:12 | Now another paragraph format
property we are going to need to set is
| | 03:16 | paraFormat.justificationRule.
| | 03:21 | So this controls how our
text is actually justified.
| | 03:24 | Now the default actually uses the
standard justification for Latin languages.
| | 03:29 | We need to give the justification rule
for East Asian languages since we are
| | 03:34 | dealing with Japanese.
| | 03:35 | So I am going to say
justificationRule, and we want to choose EAST_ASIAN.
| | 03:43 | Now it's telling it to use the proper type
of justification for East Asian languages.
| | 03:49 | One of the things actually now that I
look back we should have changed,
| | 03:51 | this text align shouldn't
actually be TextAlign.LEFT.
| | 03:55 | This should be TextAlign.JUSTIFY
because we want the text to be justified,
| | 04:01 | not left aligned here.
| | 04:02 | Now what we want to do is set
the text align last property.
| | 04:07 | So again this is going to be
paraFormat.textAlignLast, and now this is
| | 04:14 | essentially going to be the actual
last line, how is it going to be aligned.
| | 04:18 | And for this we want to say TextAlign.START.
| | 04:24 | It's going to align it to the start.
| | 04:25 | Okay, so now what we need to do is we
need to set the block progression property
| | 04:32 | of our container format and this is
going to basically control how columns of
| | 04:37 | text are going to be laid out.
| | 04:39 | So the normal way in which we display
Latin columns is obviously left to right,
| | 04:44 | but this is a vertical language.
| | 04:45 | So it's actually going to be right to left.
| | 04:47 | So I am going to come here and we are
going to say contFormat and then we want
| | 04:53 | to set the blockProgression
property = BlockProgression.RL.
| | 05:03 | Now since we've manipulated this contFormat,
I simply need to now apply that to my text flow.
| | 05:09 | So textFlow.containerFormat = contFormat.
| | 05:17 | And now here we create our
paragraph element and our span element.
| | 05:21 | Now we need to put in some
actual Japanese characters.
| | 05:23 | So I actually have some Japanese
characters on the clipboard, so I am just
| | 05:27 | going to paste those in, and you could also
put in Unicode characters here if you wanted.
| | 05:34 | But now I have basically some Japanese
text that's going to go into that text field.
| | 05:38 | Okay, so now if we actually test it,
we can see how this is going to look.
| | 05:43 | Once it launches up, we can see I
need to do a little adjustment to how my
| | 05:47 | actual sprite here is positioned.
| | 05:50 | So I am not going to move it on the x-axis and
I'll just move this over by 30 on the y-axis.
| | 05:57 | For the actual size of my container, I am
just going to make it 375 wide by 350 tall.
| | 06:06 | Now we can test it and we should see
our Japanese text displaying properly.
| | 06:10 | So now you can see we have
it displaying vertically.
| | 06:13 | When I select it's actually selecting
vertically, the way it should, and things
| | 06:18 | looking pretty good.
| | 06:19 | So still little bit cut off here, so
let me set the X property to set it to 100
| | 06:25 | so we can see it better.
| | 06:27 | So now remember this is an
actual editable text field as well.
| | 06:30 | So it's selecting the way it should
vertically, but I can come in here and as I
| | 06:34 | start typing, we can see that it's
typing vertically and everything is flowing
| | 06:39 | over to the next column vertically,
and you can see what's happening to the
| | 06:43 | regular Latin text.
It's displaying sideways.
| | 06:46 | So obviously you could do this if you
wanted to do some kind of funky text
| | 06:49 | fields in English text, but
generally speaking if you want to do kind of a
| | 06:53 | vertical right to left
languages, this is the way you do it.
| | 06:56 | And again doing this in previous
versions of Flash took an immense amount of
| | 07:01 | custom ActionScript
code in order to accomplish.
| | Collapse this transcript |
| Advanced ligature support| 00:01 | So one area of the Text Layout
Framework that's really going to make designers
| | 00:04 | happy is the support for advanced ligatures.
| | 00:08 | And again ligatures are just
special ways in which certain letters are
| | 00:13 | connected in the font.
| | 00:14 | So when a type designer creates a
font, sometimes he'll create a special
| | 00:18 | character for when two
characters are next to one another.
| | 00:23 | So again I am going to be starting
with that basicText.fla file from the
| | 00:27 | Exercise Files, and again this is just
the basic Hello World example that I'll
| | 00:32 | run here and it just says
Hello World! in red text.
| | 00:36 | So I am going to change a couple of things here.
| | 00:38 | I am just going to change that to black text.
| | 00:42 | I am going to make the text quite a bit larger.
| | 00:44 | So I'll make it 60.
I'll get rid of the Italics.
| | 00:49 | So now in order to see these advanced
ligatures, you need to make sure you are
| | 00:54 | using a font that actually
has these ligatures in them.
| | 00:57 | Well, one of the fonts that actually
comes with Creative Suite is called Adobe
| | 01:01 | Caslon Pro and it has a lot
of nice ligatures in them.
| | 01:05 | So for Font Family, I am going to
change this to Adobe Caslon Pro.
| | 01:10 | And now if I want to enable these kind
of fancy ligatures, it's just another
| | 01:15 | property I need to set on
the character format class.
| | 01:18 | So I am going to say charFormat, and
the property is called ligatureLevel, and
| | 01:25 | now you need to set that equal to a
constant from the ligatureLevel class.
| | 01:30 | So ligatureLevel and you can choose to
not display ligatures, None, Minimum,
| | 01:40 | Uncommon, or Exotic.
| | 01:43 | Now you're going to need to actually
look at the glyphs and your different fonts
| | 01:47 | to choose which level you want to use.
| | 01:49 | I am going to choose Exotic just
because it has some really kind of dramatic
| | 01:53 | ligatures that you can really tell.
| | 01:55 | So here now I've set this ligature level.
| | 01:58 | Now in the actual text field, I need to
pick a couple of letters that actually
| | 02:03 | have ligatures connecting them.
| | 02:05 | So one of them that is
always usually in fonts is FFL.
| | 02:10 | So anytime you have the characters FFL
together, I mean in a lot of these fonts,
| | 02:14 | there is kind of fancy ways in
which to draw those three characters.
| | 02:18 | So I am just going to write, 'I like waffles',
just because it actually has an FF and L in it.
| | 02:27 | Let's go ahead and test that.
| | 02:30 | We should see that this is
actually using an exotic ligature.
| | 02:35 | So this is kind of drawn as a
single character, where there is a single
| | 02:39 | crossbar for both the Fs.
| | 02:41 | The top of this first F connects with the
second F, which connects with the L character.
| | 02:47 | Now another thing we can do is since
this is an editable text field, I can
| | 02:51 | just type right in here.
| | 02:53 | So also when you connect a C and a T
together, so let's say I type 'fact.'
| | 02:58 | You can see as soon as I type that, we now
have this fancy way of connecting the C and the T.
| | 03:04 | Here's the normal C, which if I just
type characters you see there, but as soon
| | 03:08 | as I type the T, Flash has recognized
there is an exotic ligature for connecting
| | 03:14 | the C and the T and it's displayed here.
| | 03:18 | So we can look at some of
the different ligature levels.
| | 03:20 | So let's say a Minimum.
| | 03:23 | We can see what that is going to look like.
| | 03:25 | Again, different fonts are going to
have different kind of levels of ligatures.
| | 03:29 | So here you can see it's
a lot less dramatic effect.
| | 03:33 | This first F is separate.
| | 03:34 | It's just connecting the second F
with the L. And when I do CT now, it's
| | 03:41 | not showing anything, because again this is
just kind of a minimum level of ligatures.
| | 03:46 | So it's important if you want to use
these ligatures to actually look through
| | 03:50 | the glyphs, and whatever font you
are going to use to determine which
| | 03:53 | ligature level to select.
| | Collapse this transcript |
| Multicolumn text| 00:01 | So another advanced feature of the
Text Layout Framework is the ability to
| | 00:04 | easily create multicolumn text in your
text fields and this is really important
| | 00:10 | if you have a lot of text, you are
trying to reproduce more of a newspaper or
| | 00:15 | the feel of a magazine.
| | 00:16 | Well it's really easy to add that into
your text fields using the framework.
| | 00:22 | So again, we are going to be
starting with that basicText.fla file.
| | 00:26 | Let's go ahead and open up that ActionScript.
| | 00:29 | Again, we've used this a few times
now. It basically just adds a text field
| | 00:33 | that says Hello World!
| | 00:34 | So now we are going to make
some modifications to this.
| | 00:38 | So first, I actually have some text that
I just copied out of the Flash Help files.
| | 00:42 | I am just going to paste that in just so we
have some text that we can work with here.
| | 00:47 | So now I am going to come
up to the charFormat class.
| | 00:49 | I am just going to change that text to Black.
| | 00:53 | I can leave the font at Arial. That's fine.
| | 00:56 | I am going to make the font a little bit smaller.
| | 00:59 | So let's say maybe 18.
| | 01:01 | I want to get rid of the Italics.
| | 01:04 | Okay, so now, what I want to do is
since I have a lot of text, I want to
| | 01:07 | increase the size of my text component.
| | 01:09 | So all I am going to do for the
container Sprite, I am just going to offset it
| | 01:13 | by 10 pixels on that X and 10 pixels on
the Y and now I am going to make my text
| | 01:19 | component basically fill
up the rest of my stage.
| | 01:23 | So my stage is 550. So -20 from that.
| | 01:27 | So I am going to make it 530 and here,
the height of my stage is actually 400.
| | 01:34 | So I am just going to subtract 20 from
that and I am just going to make it 380.
| | 01:38 | Okay, so now let's test it just so we can
see what it looks like with all that text.
| | 01:46 | Here you can see the text in a single column.
| | 01:49 | So now we want to break
this up into multiple columns.
| | 01:53 | So first, let me go through.
| | 01:55 | That font size is a little bit big.
| | 01:57 | Let's change it to 14.
| | 01:59 | So now what I want to do is come down
here after where I add my paragraph to
| | 02:05 | the textFlow and what I want to do is to
set the columnCount property of my textFlow.
| | 02:11 | So all I have to do is say textFlow.
columnCount and this just expects a number
| | 02:18 | for how many columns I want to display.
| | 02:21 | So I can say 2 and we'll test it and
now we should have our text content broken
| | 02:26 | into two columns and you can see it's
selecting properly down the first column first,
| | 02:31 | and then up to the second column.
| | 02:33 | So really, it's just that simple
once you have the basic template to
| | 02:38 | create multicolumn text.
| | 02:40 | Now there was no space in between those columns.
| | 02:43 | So what I can do now is to come down
and let's come under here and we can set
| | 02:49 | textFlow.columnGap and this is
essentially the gap in between the columns.
| | 02:57 | So let's say I make that 15.
| | 02:59 | We should now see a 15-pixel
gap in between those two columns.
| | 03:04 | Again, I can keep going through
here. I can adjust the column gap.
| | 03:08 | Let's say I wanted to turn this
into four columns. I could do that.
| | 03:13 | You can also again at runtime, if you
respond to the stage resize event, you can
| | 03:19 | adjust any of these runtime as
somebody is using your application.
| | 03:24 | So once you have the initial code here
from our basicText.fla, it's really easy
| | 03:30 | to go ahead now and to start breaking it
up into different columns to adjust
| | 03:34 | the layout of your text.
| | Collapse this transcript |
|
|
3. Pixel BenderOverview of Pixel Bender| 00:00 | So when we've released Flash 8,
Adobe included some basic filters and effects.
| | 00:05 | So these were things like
Blurs, Drop Shadows and Bevels.
| | 00:09 | But with Flash Player 10, we've introduced
a brand-new technology called Pixel Bender.
| | 00:14 | Now this is a combination between a new
programming language, the Pixel Bender
| | 00:18 | programming language, and a new IDE
for creating pixel bender filters.
| | 00:23 | And what you do is once you create
your filters, you can actually use them
| | 00:27 | inside of Flash just like you use
things like Drop Shadow, Bevel and Blur.
| | 00:32 | So here I am in just a simple Pixel
Bender viewer just to help visualize some of
| | 00:37 | the things that you can do with Pixel Bender.
| | 00:39 | So here I have just a simple image and I
can choose from some of these basic filters.
| | 00:44 | So I am going to choose this Crystallize filter.
| | 00:47 | You can see I have a parameter here
called size and when I adjust this slider,
| | 00:52 | you can see that it's
actually crystallizing that image.
| | 00:55 | The further I go with the slider
the bigger the crystals actually are.
| | 00:59 | So this was actually written in
Pixel Bender and incorporated into Flash.
| | 01:04 | So this enables you to do all types
of different bitmap effects. You can
| | 01:09 | generate purely generative artwork
using Pixel Bender, and the range of things
| | 01:15 | that are possible are really amazing.
| | 01:17 | So let me show you a couple more of
these. Here is a Spherize one, that
| | 01:21 | essentially creates a bulge.
| | 01:24 | So I can adjust some of these parameters.
| | 01:27 | When you're in Pixel Bender, you can
set certain properties to be external
| | 01:31 | parameters, so that when you're inside
of your Flash movie at runtime, you can
| | 01:36 | manipulate these and they
get some pretty crazy effects.
| | 01:40 | Here is this Tube View that if I
center it, basically it creates this tunnel
| | 01:44 | effect, drop the radius down a little
bit, and you can see all of these things
| | 01:49 | can be animated at runtime to
create some really cool effects.
| | 01:52 | So I can come and adjust the turbulence,
which is essentially how much twist is
| | 01:57 | actually in this effect.
| | 01:59 | Now the really cool thing is that
since we can apply Pixel Bender filters to
| | 02:04 | any display objects, we can also apply
them to vector animations. So here is a
| | 02:10 | vector animation with that filter applied,
and of course, we can also apply it to video.
| | 02:16 | So here is actual video file with this
filter running on and you can see it's
| | 02:21 | just as easy to apply these effects
to video as it is to any other display
| | 02:26 | object in your Flash movie.
| | 02:29 | So again, the main thing you're going
to need to download, I talked about this
| | 02:33 | earlier, is the Pixel Bender Toolkit.
| | 02:36 | And once you have that installed, the
place to get that is on the Adobe Labs site.
| | 02:41 | So if you go to labs.adobe.com/
technologies/pixelbender and then come down in
| | 02:48 | the Download pod and it says get the
Pixel Bender Toolkit, and from there you
| | 02:52 | just download either to the Mac version
or the Windows version,= and install it.
| | 02:57 | So once you have that set up, in the
next video, we'll look at how to create a
| | 03:01 | very simple Pixel Bender filter
using the Pixel Bender Toolkit.
| | Collapse this transcript |
| Creating your first filter| 00:00 | So now that you've downloaded and
installed the Pixel Bender Toolkit, let's look
| | 00:04 | at how you can create the
simplest possible Pixel Bender filter.
| | 00:08 | So when you launch the tool,
this is what you'll see.
| | 00:11 | So now this tool, again, it's
still on the Adobe Labs site.
| | 00:14 | So it's still being worked on, but
essentially, we can take a quick tour of the UI.
| | 00:18 | This blank section up here is
essentially where you're going to import an image,
| | 00:23 | so that as you're writing your filter,
you can see how it affects this image.
| | 00:27 | The actual code editor is down here under that.
| | 00:30 | Now in the right-hand side, this panel
here is used for a couple of different things.
| | 00:34 | First, if you create any parameters in
your Pixel Bender filter, you'll actually
| | 00:39 | see a UI develop here.
| | 00:41 | So you'll actually see a slider that
allows you to manipulate that parameter.
| | 00:46 | If you have any errors in your code, you'll
also see that printed out here in this panel.
| | 00:52 | Now, many people when they start
developing for Pixel Bender have a hard time
| | 00:56 | kind of finding the help and documentation.
| | 00:58 | Well, it's actually located right here
in the Help menu, and there is two PDFs.
| | 01:03 | One is the Language Specification
and one is a Developer Guide and this
| | 01:07 | is essentially the best place for you to
come to get documentation about Pixel Bender.
| | 01:12 | So the first you're going to want to
do when you're creating a filter is you
| | 01:16 | want to load an image in here so as
you're writing it, you can actually see how
| | 01:20 | this Pixel Bender filter is affecting it.
| | 01:22 | So I am going to go to File
and then choose Load Image 1.
| | 01:27 | Now when you install Pixel Bender,
it installs a bunch of sample images for you
| | 01:31 | that you can use.
| | 01:32 | So I am just going to choose
this YellowFlowers.png file.
| | 01:37 | So now I have an image
here inside of the Toolkit.
| | 01:40 | Now I need to create a new filter.
| | 01:42 | Inside of Pixel Bender, these
are actually known as kernels.
| | 01:46 | So you just basically exchange the
word kernel for filter while you're
| | 01:50 | inside of the Toolkit.
| | 01:51 | So we can see here 'Create a new
kernel,' so I am going to click that and
| | 01:55 | basically what it's done is it's
put in essentially what is the simplest
| | 02:00 | possible Pixel Bender filter there is and
it basically has no effect on the image at all.
| | 02:06 | One of things to know when you
start getting into this is this is
| | 02:09 | not ActionScript 3.
| | 02:11 | This is using the Pixel Bender language.
| | 02:14 | So this is based off of other pixel
shader languages that are out there.
| | 02:18 | So if you have experience with
writing pixel shaders, this is going to look
| | 02:22 | very familiar to you.
| | 02:23 | If you've only done ActionScript
before, this is going to be considerably
| | 02:26 | different than doing ActionScript code.
| | 02:29 | So the text editor in here is pretty bare bones.
| | 02:32 | You don't really have code hinting.
| | 02:34 | We do have color coding in here, we can
adjust things, if we go into the Preferences.
| | 02:39 | I can go into Editor, and I can change the font.
| | 02:43 | So maybe I want to bump
that font up a little bit.
| | 02:46 | You can add in your vendor, your namespace.
| | 02:49 | So here is essentially the simplest
filter and if we come down here, we can see
| | 02:55 | that there is an input
and then there is an output.
| | 02:58 | So the input is whatever
image you want to manipulate.
| | 03:02 | So here, we have this image called
YellowFlowers.png. That's the input to this filter.
| | 03:08 | So the way a Pixel Bender filter works
is it goes through every pixel in the
| | 03:13 | image one-by-one and for each
of those pixels, it calls this
| | 03:17 | evaluatePixel() function.
| | 03:19 | Now this function does exactly what it
says you need to evaluate that current pixel
| | 03:24 | and just determine a
new output value for that pixel.
| | 03:28 | Now how you come up with the new
output value, that's where all the
| | 03:33 | creativity comes in.
| | 03:34 | But essentially for every pixel
in this images, it's going to call
| | 03:37 | evaluatePixel() and ask me to provide a
new value for that pixel, and that new
| | 03:43 | value is put into this output
variable which is called dst for destination.
| | 03:50 | So we're going to create a very simple
filter that's going take an image and
| | 03:53 | basically make a grayscale version of it.
| | 03:56 | So with the top, we have the
languageVersion, this is just the version of the
| | 04:00 | Pixel Bender language that we're using.
| | 04:02 | The kernel here, this is
where we give it the name.
| | 04:05 | So I am just going to call it Grayscale
and then we see a section of metadata.
| | 04:10 | So this is essentially where you can put,
if you have a lot of filters and you
| | 04:14 | need namespaces, you can
put it a namespace, vendor.
| | 04:18 | I could put in Adobe here,
description, turns an image into grayscale.
| | 04:23 | I am just going to leave everything at
the default, but this is essentially just
| | 04:25 | metadata for your Pixel Bender filter.
| | 04:28 | So again, here are the two
variables that are defined:
| | 04:32 | the input, which is of type image4
which means it's an image that has four
| | 04:36 | channels, alpha, red, green, and
blue, and then the output is a pixel4.
| | 04:42 | So a single pixel that has four channels:
| | 04:45 | alpha, red, green and blue.
| | 04:47 | So now inside of this evaluatePixel(),
we can see that we're setting the
| | 04:52 | destination or the output value for
that pixel equal to the result of this
| | 04:57 | sampleNearest function.
| | 04:59 | So what the sampleNearest function does
is you provide first which image do you
| | 05:05 | want to sample from, and then the
coordinate of what pixel you want to sample.
| | 05:11 | So this coordinate needs to be
two values, one for X and one for Y.
| | 05:16 | Now if you want to get the X and Y
position of the current pixel that
| | 05:21 | we are dealing with in the
evaluatePixel() function, you can use this
| | 05:24 | outCoord() function.
| | 05:26 | So all this is essentially saying, this
line, is whatever the value of the input
| | 05:31 | pixel is, just send that directly out
to the destination without modifying it.
| | 05:36 | So now, if we want to test this
Pixel Bender filter, I can just click Run
| | 05:41 | and it's now running.
| | 05:42 | So you can see it says "The filter is
running." I didn't get any errors up here.
| | 05:46 | But of course, nothing is actually
changed in this image because I haven't done
| | 05:50 | anything different to the pixel.
| | 05:53 | So now what I want to do is I want to
start adjusting the channels of that pixel.
| | 06:00 | So grayscale image is an image where
each of the channels is the same value.
| | 06:05 | So you have a single number for
the red, green, and blue channels.
| | 06:10 | So this dst, after this line here
contains the current value for the pixel.
| | 06:15 | Now I can just start manipulating it.
| | 06:17 | So I can say dst.r, which gives me the
r channel for that pixel, is equal to
| | 06:25 | dst.g is equal to dst.b and now we can
set them all equal to the same value.
| | 06:35 | And so what I can do is I can set
them all equal to say the red channel.
| | 06:40 | So all of those are equal to dst.r and
now when we run it, we can see all of the
| | 06:47 | channels inside of that pixel now have
the same value and the value is the value
| | 06:52 | that was in the red channel.
| | 06:53 | So now I could change this to g, and
we can see we have a different look to
| | 06:57 | that grayscale image.
| | 06:59 | I can change this to b to see what
the blue channel would look like but
| | 07:03 | ordinarily, if you want to do just a
standard grayscale, you want to take an
| | 07:07 | average of all three pixels and use
that for each of the channel values.
| | 07:12 | So to do that, all I have to do is
to set these three equal to, then in
| | 07:17 | parenthesis, I am going to say dst.r
plus dst.g plus dst.b and when I add those
| | 07:28 | altogether, now I want to divide that by 3.
| | 07:32 | Now this is going to give me an error
but I just want to-- I'll put in some
| | 07:37 | spaces so it's easier to see here.
| | 07:40 | So now I am dividing those by 3, but
now if I run it, we can see I get an error
| | 07:45 | and that's because inside of Pixel
Bender, we're dealing with float values.
| | 07:50 | So floats are essentially floating point
numbers, numbers that can have decimal
| | 07:55 | point with a certain number of
precision numbers after that.
| | 07:59 | So right here, a pixel4
value is made up of four floats.
| | 08:04 | What's happened is I have these
values here and I am dividing by 3.
| | 08:08 | So to Pixel Bender, 3 is not a float.
| | 08:11 | 3 is just an integer.
| | 08:13 | So in order to make that float,
I need to actually put on the .0.
| | 08:18 | So Pixel Bender is not going to be
smart enough to know, okay, 3 is actually
| | 08:23 | 3.0 so it is a float.
| | 08:25 | I need to explicitly put in that .0.
| | 08:28 | And now when we run this, we can see we
now have a traditional grayscale image
| | 08:32 | where each value in the
pixel is an average of all 3.
| | 08:38 | So now I can come through and let's
say I wanted to say dst.r. Let's do times
| | 08:44 | equal 2.0 and run this.
| | 08:49 | We can see now we're actually
doubling the red channel inside of here.
| | 08:53 | We are doubling the value
because we multiplied it by 2.
| | 08:56 | But basically, this is the
simplest type of filter you can create.
| | 08:59 | You take the current value of the pixel
and manipulate it in some way to create
| | 09:05 | a new output value for that pixel.
| | 09:07 | In the next tutorial, we'll look at
creating a more complex filter that actually
| | 09:10 | has some settable parameters.
| | Collapse this transcript |
| Creating a waterfall filter| 00:00 | So, now that you have seen how to create
a really simple filter in Pixel Bender,
| | 00:04 | let's take a look at a
little more in-depth example.
| | 00:07 | I am going to start the same way.
| | 00:08 | I am going to first load in an
image and I am going to choose that
| | 00:11 | YellowFlowers.png file again.
| | 00:13 | Then we'll go ahead and create a new kernel.
| | 00:16 | So what we are going to create in
this example is kind of a classic effect
| | 00:21 | called Waterfall and essentially it's
going to streak the pixels along the
| | 00:27 | Y-axis based on the amount of a
parameter that we are to create.
| | 00:33 | So for the name of the filter,
I am just going to call it waterfall.
| | 00:37 | Again I am going to leave the metadata
just at the default values here and then
| | 00:42 | come down to our evaluatePixel function.
| | 00:45 | So what I first want to do is I want
to store the coordinates of whatever
| | 00:50 | current pixel that we are dealing with.
| | 00:52 | So I am going to get rid of this.
| | 00:53 | I am going to create a float2
variable called pos for position.
| | 00:59 | So remember, position has two values.
| | 01:02 | It has an x and a y, so we need
to store it in a float2 data type.
| | 01:06 | So I am going to set that equal to
that outCoord function and again the
| | 01:11 | outCoord function returns to us the x and y
value of the current pixel that we are working with.
| | 01:17 | So now that I have the position, what I
need to do now is I want to test if the
| | 01:23 | current position is greater
than a certain value on the Y-axis.
| | 01:28 | So I am going to say if pos.y is
greater than and for right now, I am just
| | 01:36 | going to hard code a number in here.
I am going to say 200.0 and remember we
| | 01:41 | have to put in that 0.0, so we tell
Pixel Bender that this is actually a
| | 01:45 | floating point value.
| | 01:48 | So, if the y position is greater than
200, we are going to set the destination
| | 01:54 | or the output value equal to and again
we are going to use the sampleNearest
| | 02:00 | function and the first parameter is
which image we want to use, obviously we
| | 02:05 | want to use the source image.
| | 02:08 | Now we want to provide an x and y
position which pixel we want to sample.
| | 02:13 | So I am going to create a float2 here
and for the x position, I want to always
| | 02:19 | keep the x position of the current pixel.
| | 02:22 | So I am just going to say pos.x. Now
for the y position, if the y position is
| | 02:29 | greater than 200, I just
want to use the pixel value
| | 02:34 | that's at 200 and that's essentially
going to cause a streak vertically.
| | 02:38 | Now I am going to say
200.0 and now I can close that.
| | 02:43 | So, now we need to create the else
block, so I am just going to copy the if,
| | 02:48 | paste it in and I just have to change
this to else and now for the else block,
| | 02:54 | I don't want to do anything special.
| | 02:55 | I just want to do the normal thing
where I just pass out the input pixel value.
| | 03:00 | So I can just pass in pos because that
has the current coordinates for this pixel.
| | 03:05 | So now if we run this, we can see
that on the Y-axis, it's now actually
| | 03:12 | streaking after it gets to 200.
| | 03:15 | So while this might be kind of a cool
effect, obviously we want to be able to
| | 03:19 | make it so that we can adjust that value.
| | 03:22 | We don't always want it to be hard coded
at 200 because then we are not going to
| | 03:27 | be able to adjust it. We are not
going to be able to animate it.
| | 03:29 | So here is where creating parameters comes in.
| | 03:31 | So I am going to come up here under
these two variable declarations and
| | 03:36 | I'm going to create a new parameter.
| | 03:40 | So I say parameter and then I need to
give the type that this parameter is going
| | 03:44 | to be, this is going to be of type
float, and I am going to call it amount,
| | 03:48 | because it's going to hold the
amount that we want to streak.
| | 03:52 | So we use a special syntax for this.
| | 03:55 | We open with angle brackets
and close and use a semicolon.
| | 04:00 | Now inside of here we provide three properties:
a min value, a max value and a default value.
| | 04:08 | So I say min value and then I give what
I want the minimum value of this to be.
| | 04:14 | So I am going to say 0.0 and for max
value I just want to use the height of the
| | 04:22 | image which we can see up here is 375.
| | 04:26 | So 375.0 and for default value, I am
just going to make the default be at 0.0.
| | 04:35 | So, now I have created this parameter.
If we run this now, we can see what's
| | 04:41 | happened when I run it.
| | 04:42 | It's actually created a slider for
me that's set up to go from 0 to 375.
| | 04:48 | so this is going to allow me to
actually test this inside of the Toolkit.
| | 04:53 | So now all we need to do is take this
parameter value and replace this 200 with
| | 04:59 | that value, called amount.
| | 05:05 | Now when we run it,
| | 05:06 | you can see when I start at 0, this is
essentially nothing. We are sampling a pixel at 0.
| | 05:11 | But as I move this now, you can see
that it's kind of streaking down and
| | 05:17 | this could be kind of good for doing
transitions between different things.
| | 05:20 | We can imagine an image viewer that
transition using this waterfall filter.
| | 05:25 | But this just shows you how you can
externalize certain values and then once we
| | 05:30 | get over to Flash, we are actually
going to be able to at runtime adjust the
| | 05:34 | amount property to create animations.
| | 05:38 | So this is an example of a
slightly more complex filter.
| | 05:42 | In the next tutorial, I am going to
show you how you can actually take this
| | 05:45 | filter now and export it
for use in the Flash Player.
| | 05:49 | But first go ahead and save this.
| | 05:51 | So we are going to choose Save Filter As
and I am just going to save this to the
| | 05:55 | desktop as waterfall.pbk.
| | 06:00 | So pbk is the actual source
file for your Pixel Bender filters.
| | 06:05 | In the next tutorial we are actually
going to export a pbj file, which is
| | 06:09 | the binary format that Flash expects when you
want to incorporate them into the Flash Player.
| | 06:15 | So, I am just going to save that
and in the next tutorial, we will
| | 06:18 | incorporate this into Flash.
| | Collapse this transcript |
| Exporting and using filters in Flash| 00:00 | So, in the last tutorial we created
this simple Waterfall filter here in the
| | 00:04 | Pixel Bender Toolkit where we
essentially can adjust this parameter to cause
| | 00:10 | this streaking effect in the photo and
we export it or saved this filter just
| | 00:16 | to the desktop as waterfall.pbk.
| | 00:19 | Again the pbk format is your
source format where you actually will be
| | 00:24 | storing your source code.
| | 00:25 | So now what we need to do if we want to
use this inside of the Flash Player is
| | 00:29 | we need to export it as a pbj file and that is
the byte code file that Flash can actually read.
| | 00:36 | So to do that I am going to go to File
and then Export Filter for Flash Player.
| | 00:42 | So when I do that it's
asking me where I want to save it.
| | 00:45 | I am going to save it also to the desktop,
and you can see it's going to save it
| | 00:49 | as a Pixel Bender Byte Code file.
| | 00:52 | So it's important to know that not
all of the features in Pixel Bender are
| | 00:56 | supported by the Flash Player.
| | 00:58 | One of the things that's not supported
is loops, so I couldn't come down here
| | 01:03 | and create a For loop inside of here.
| | 01:05 | If I did that it would actually
give me a warning when I try to export
| | 01:09 | the filter for Flash.
| | 01:10 | Now remember, Pixel Bender filters can
also be used in Photoshop and After Effects.
| | 01:16 | Now, in those tools you have the
full capabilities of the Pixel Bender
| | 01:20 | language available to you.
| | 01:21 | So now if we look on the desktop we
have our pbk which is our source file and
| | 01:26 | the pbj which is the file that we
are going to incorporate into Flash.
| | 01:30 | So I am going to go on to Flash CS4
and you are going to want to open up the
| | 01:34 | waterTest.fla file and what I am going
to do is I am going to save this to the
| | 01:40 | desktop, just so that it makes it easy
for me, because I want it to be in the
| | 01:44 | same directory as my Pixel Bender file.
| | 01:46 | We will just take a real quick look at this.
| | 01:50 | This is basically just a movie clip of an image.
| | 01:53 | Again this is the same image that we
were using in the Pixel Bender Toolkit and
| | 01:57 | this has an instance name of image here.
| | 01:59 | So now what we are going to do is using
ActionScript we are going to import that
| | 02:05 | pbj file and actually apply it to this image.
| | 02:08 | So now it's important to note that
Pixel Bender Filters are not available via
| | 02:14 | the Filters panel here.
| | 02:15 | So if you wanted to add a standard
Flash filter like a Bevel or Glow, we can do
| | 02:20 | it here using this UI.
| | 02:22 | Pixel Bender filters need to
actually be embedded using ActionScript.
| | 02:26 | So I am going to highlight the first
keyframe of the Actions layer and open
| | 02:30 | up the Actions panel.
| | 02:31 | So now there is a couple of
different things you can do here.
| | 02:35 | You can actually load in Pixel Bender
files at runtime using the URLLoader class.
| | 02:41 | But most of the time you are going
to want to actually embed the Pixel
| | 02:45 | Bender filter into your SWF file, and to do
that we use the Flex Metadata tag to do that.
| | 02:52 | We will use the embed tag that
actually comes from the Flex framework.
| | 02:56 | So this is a new feature in Flash CS4
that allows you to take advantage of some
| | 03:01 | of the Flex framework features and
actually compile using the Flex SDK.
| | 03:06 | So the syntax for that embed tag is you
start with a square bracket and then we
| | 03:12 | say embed and then in parenthesis, we
put source =, and now the path to our
| | 03:20 | actual pbj file, which is in the same
directory and it's just waterfall.pbj.
| | 03:26 | The next thing we have to set is the
mimeType. Essentially we need to explicitly
| | 03:32 | set the mimeType to an octet stream,
which is essentially just a binary stream.
| | 03:38 | So to do that, I am going to say
mimeType="application/octet-stream". Now I can
| | 03:54 | close the parenthesis and
close the square brackets.
| | 03:57 | So now this will actually embed the pbj
file into my SWF, but I need to provide
| | 04:02 | a class that will actually hold that.
| | 04:05 | So, if I want to use this pbj file,
I need to assign a class to it.
| | 04:09 | So to do that right under here, I am
going to give it a class. I am just going
| | 04:13 | to call this pbj and it
needs to be of type class.
| | 04:18 | So again all this is doing is doing is
it's taking that pbj file, embedding it
| | 04:22 | into my SWF and giving it a name of pbj.
| | 04:25 | Now if I want to use that
filter, I just use the name pbj.
| | 04:29 | Okay so in order to use this what I
first now need to do is to create an
| | 04:33 | instance of the Shader class.
| | 04:35 | So I am going to save var and I am
going to call it shader and I want to data
| | 04:41 | type it to Shader, is equal to new Shader and
now inside of here you can see it's actually
| | 04:48 | expecting a ByteArray.
| | 04:50 | So, that pbj file that we
embedded is actually a ByteArray.
| | 04:54 | So all I have to say is new pbj, so
I am creating a new instance of that pbj
| | 05:00 | class which holds my external file.
| | 05:02 | Now I just need to cast this to a
ByteArray, so I'm going to say as ByteArray.
| | 05:07 | So now I have my Shader object created.
| | 05:12 | Now what I can do is I can start to
adjust the value of that amount parameter
| | 05:17 | that we created in the Pixel Bender Toolkit.
| | 05:20 | So to do that we say Shader and now we
want to go to the data property, which
| | 05:26 | holds all of my parameters. I only
had one in that file and that was called
| | 05:30 | amount and then I want to set its value =,
and I will just hard code for right now, to 100.
| | 05:38 | So when you're setting values on a
parameter you always need to pass it in as an array.
| | 05:44 | So even though I have one value here,
I still need to pass it in square
| | 05:48 | brackets as an array.
| | 05:50 | Now this is of course because a
parameter can have multiple values. If I were to
| | 05:54 | set a float2, I would
actually send in two values to this.
| | 05:58 | Okay, so now that I've created my Shader
and have adjusted the value of the parameter,
| | 06:03 | now I want to apply it
to my image as a filter.
| | 06:08 | So to do that I need to create a new
Shader filter based off of that Shader.
| | 06:12 | So I am going to say var filter:
ShaderFilter = new ShaderFilter and now I will
| | 06:24 | simply just pass in that shader object.
| | 06:26 | So now the shaderFilter can be treated
just like Blurs, Drop Shadows and Bevels.
| | 06:33 | So that image on the stage has an
instance name of image, so I just set the
| | 06:38 | filters property equal to an array of
the filters that I want to set and I just
| | 06:43 | want to set this filter to my filters array.
| | 06:48 | So if we test this now, we can see that
it's now working. So it's actually going
| | 06:52 | to streak that value
starting at a hundred pixels.
| | 06:57 | So what if we wanted to make
this a little more interactive?
| | 06:59 | Well actually I can make
this follow my mouse position.
| | 07:03 | So to do that I'm going to
create an event listener on my image.
| | 07:08 | So image.addEventListener and I want
to listen for MouseEvent.Mouse_Move.
| | 07:18 | So anytime I move my mouse I want to
adjust the amount parameter in that shader.
| | 07:23 | So let me create this now, function
onMove, event type is MouseEvent and
| | 07:31 | not returning anything.
| | 07:34 | So this line now could be moved into
the onMove event and now what I need to do
| | 07:39 | is every time I move my mouse
I want to a just this value.
| | 07:44 | So let me bring this now down here.
| | 07:48 | So what I want to set the value of
this too is the Y position of my mouse.
| | 07:55 | So I want to say image.mouseY.
| | 07:57 | Since this is a mouse event in order
to get a good response of action, I am
| | 08:05 | going to say e.updateAfterEvent.
| | 08:10 | So let's test this now and now you
can see we have a nice action on here
| | 08:16 | and actually let me change this to
just regular mouseY. There we go.
| | 08:23 | So now it's actually following my mouse.
| | 08:25 | So, we can see now we have a Pixel
Bender filter, we have it imported and
| | 08:29 | we have it applied to our image and I
can animate it or interact with it,
| | 08:34 | the same exact way that I do with
filters, Blurs, Drop Shadows and all those
| | 08:38 | standard Flash effects.
| | Collapse this transcript |
| Creating blend modes| 00:00 | So not only can you create new filters
for Flash using Pixel Bender, but you can
| | 00:05 | also create new blend modes.
| | 00:07 | I am going to show you how
to do that in this tutorial.
| | 00:10 | So from the Pixel Bender Toolkit, we
want to do the same thing we did last time.
| | 00:14 | We want to load in our image so I am
going to choose this YellowFlowers.png.
| | 00:19 | But now since this is the blend mode,
we also want to bring in another image so
| | 00:24 | that I can see how the blend mode
looks when that has something underneath it,
| | 00:29 | because that's essentially what blend modes are.
| | 00:31 | It determines how something is
going to blend into its background.
| | 00:34 | So now I am going to load an Image 2
and now I can choose a different image to import.
| | 00:41 | I am just going to choose his
Canyonlands.png and now I basically have
| | 00:46 | this image in the front and then I
have the yellow flower behind that.
| | 00:50 | So I am going to go ahead and create
a new kernel and I am just going to
| | 00:55 | call this BlendMode.
| | 00:57 | Now you can see here currently in the
default, we only have one input, while in
| | 01:02 | this case we actually have two inputs.
| | 01:04 | So first I am going to call this first
input back, so it's essentially the photo
| | 01:10 | that's in the back and now I'm going to
create another input. This is also going
| | 01:15 | to be of type image4 and we are going
to call this front for the front image.
| | 01:19 | So now, down in my actual evaluatePixel
function what I want to do is just
| | 01:25 | create a simple blend mode effect.
| | 01:28 | All I am going to do is I'm going to
take whatever value the current pixel is in
| | 01:33 | this front image, but I'm to change the
red channel to use the red channel from
| | 01:38 | the image that's underneath.
| | 01:40 | So here I am setting just
the output equal to the input.
| | 01:44 | So I am going to say dst.r = then I am
going to use this sampleNearest function,
| | 01:53 | and one of the things I have to change
is since I changed the name from source
| | 01:57 | to back and front, I need to change that here.
| | 02:01 | So the main image I'm dealing with is the front.
| | 02:04 | So here I want to calculate the incoming
pixel color value from the front image.
| | 02:09 | But now I want to change the red channel
equal to the red channel in the back image.
| | 02:16 | So I am going to say back and now just
to get to the red channel all I could do
| | 02:21 | is to say .r. So now I am essentially
swapping the red channel from the front to
| | 02:27 | the one that's in the back image.
| | 02:30 | So now if I run this, you
can see that it's working.
| | 02:33 | One of the things that you will notice
here though is the image in front was
| | 02:36 | actually larger than the image underneath.
| | 02:38 | So you can see here now this piece here
that isn't over the image is basically
| | 02:43 | lost its red channel altogether.
| | 02:46 | So we get a simple way around that.
| | 02:48 | We can just say if and then I can grab this.
| | 02:54 | What I am going to do is I am going to
check the alpha of the pixel underneath.
| | 03:00 | So I am going to say if the alpha is
greater than 0.0 then go ahead and sample this.
| | 03:08 | So what that's going to do is if there
is no image underneath this front image
| | 03:12 | we are not going to do
anything to the red channel.
| | 03:14 | So now if we run it, we can see it's
only done that blend mode effect when there
| | 03:20 | is actually something underneath it here.
| | 03:22 | So this is obviously kind of a crazy
blend mode, but it's just an easy one to
| | 03:26 | give you an understanding
of how you would create it.
| | 03:29 | So now to use this in Flash, we are
going to do the same thing we did with the
| | 03:33 | Waterfall filter. I need to export
this filter for Flash Player and I am just
| | 03:37 | going to save this to the Desktop.
I am just going to call it blend.
| | 03:42 | So it will be blend.pbj.
| | 03:43 | So I am now going to go over to Flash
CS4. Now here I'm going to use that same
| | 03:48 | waterTest.fla file that
we used in the last video.
| | 03:53 | So now one of the things that I need to
do in order to test the blend mode here
| | 03:57 | is I need to bring in or put something
else underneath this image, so that I
| | 04:02 | can see how it looks.
| | 04:03 | So I am just going to move that out of
the way for a second and I am just going
| | 04:06 | to draw a rectangle in here with this
kind of multicolored gradient selected.
| | 04:12 | So I am going to just draw that and
that's just so that we can have something
| | 04:17 | underneath this image.
| | 04:19 | So we can see how the blend mode actually looks.
| | 04:22 | Again this has an instance name of image.
So let's highlight the first keyframe
| | 04:26 | of the Actions layer.
| | 04:27 | Open up the Actions panel and now we
can start writing our ActionScript.
| | 04:31 | So it's going to be the same thing we
did last time, so I need to create an embed tag.
| | 04:35 | The source is equal to blend.pbj and we can set
the mimeType="application-octet" and we'll close that.
| | 04:50 | And now we need to create a class
that's going to hold that filter.
| | 04:55 | So again I'll just call it pbj and much
like we did for the Waterfall, we need
| | 04:59 | to create a new instance of
the shader class. So var shader:
| | 05:04 | subtype Shader = new Shader and then we
pass in a new instance of that pbj class
| | 05:13 | and we need to cast it to a ByteArray.
| | 05:19 | So now at this point when we've
dealt with the filter, we actually had to
| | 05:22 | create a Shader filter.
| | 05:24 | So we don't have to do that if we
were going to be using a blend mode.
| | 05:28 | What we have to do for a blend mode is we
need to set the shader property of our image.
| | 05:36 | So this is essentially going to tell it
when we use a blend mode created from a
| | 05:41 | shader which shader to actually use.
| | 05:43 | So to do that we are going to say image,
which again is the instance name of that
| | 05:47 | movie clip on the stage, and I am going
to set the blendShader property and now
| | 05:54 | we actually tell it which shader we are
going to use for the Shader blend mode.
| | 05:58 | So obviously we would want to
use that shader we just created.
| | 06:01 | So now to actually set this blend mode,
all I have to do is, just like setting
| | 06:06 | any other blend mode here, I can say
image.blendMode and then we use a constant
| | 06:13 | from the blendMode class. So blendMode.
| | 06:17 | and here are all the blend modes we can choose.
| | 06:20 | If we come down we can see we have
this shader option, so we are using
| | 06:24 | the Shader blend mode.
| | 06:26 | And now I can test this and I have an
error here. See what the problem is, oh!
| | 06:36 | we need to put octet stream.
| | 06:38 | So yeah this is not correct. This should be
application/octet-stream and now let's test it.
| | 06:47 | Now you can see here is our
image with that blend mode applied.
| | 06:51 | So again, this is not a blend mode I
think you be using very much but this just
| | 06:55 | shows how the workflow actually works.
| | 06:58 | So inside of Pixel Bender you are going
to be dealing with two inputs instead of one,
| | 07:01 | and then when you get over to Flash,
you basically embed your Pixel Bender
| | 07:07 | blend mode, create a Shader object, set
the blendShader property of your display
| | 07:12 | object to that shader and then simply
set the blendMode to blendMode.Shader.
| | 07:17 | So that's the basics of creating a new
blend mode for Flash using Pixel Bender.
| | Collapse this transcript |
| Pixel Bender strokes and fills| 00:00 | So we looked at a couple of different
ways that you could take a Pixel Bender
| | 00:03 | filter and apply it to a display object,
very much like Blurs, Bevels, and Drop Shadows.
| | 00:10 | Well, we can also use Pixel Bender
filters to fill objects created with the
| | 00:15 | drawing API, so we can either use
it as a fill or actually as a stroke.
| | 00:19 | So if you open up the stripes.pbk
file from the Exercise Files, this is an
| | 00:25 | example of a filter that's
purely generating artwork.
| | 00:29 | So this does have an input image, but
essentially we are disregarding the actual
| | 00:34 | values that are coming in from that image.
| | 00:36 | All I am doing here is essentially
using the Modulus function and I am testing
| | 00:40 | whether the X position divided by 10,
the remainder, is it greater than one and
| | 00:47 | is it less than five?
| | 00:49 | So the Modulus function essentially
just takes two numbers, divides them
| | 00:53 | together, and returns the remainder.
| | 00:56 | So essentially I am just testing that
if the remainder is between one and five.
| | 01:00 | If it is, then I am going
to output a yellow color.
| | 01:03 | If not, I am going to output a black color.
| | 01:06 | So it creates this black
and yellow stripe effect.
| | 01:09 | So now what I want to do is I want to
export this for use inside of Flash.
| | 01:14 | So I am going to go to File > Export
Filter for Flash Player, and I am going to
| | 01:18 | save it into that same
directory in the Exercise Files.
| | 01:22 | So we now have our PBJ file there.
| | 01:25 | So now if we go over to Flash CS4.
If you open up the stripes.fla file,
| | 01:31 | that's also in that directory,
this is just a regular blank FLA file.
| | 01:34 | I will rename the first layer to Actions
and lock it and open up the Actions panel.
| | 01:42 | So now from here it's
going to be a similar workflow.
| | 01:45 | So we need to create our Embed tag.
| | 01:48 | So the source is in the same
directory as this FLA. It's stripes.pbj.
| | 01:57 | Then the mimeType.
| | 01:59 | Again, it's going to be application
/octet-stream. We can close that.
| | 02:08 | Now I need to create a class to hold it.
| | 02:11 | I am going to call it pbj again of type Class.
| | 02:15 | Now I need to create my shader object.
| | 02:17 | I am going to call it Shader=new Shader.
| | 02:22 | Created a new instance
of pbj as a ByteArray.
| | 02:28 | Okay. So now if I actually want to use the
Shader as a fill, I can just create a fill
| | 02:38 | using the new features of the Drawing API.
| | 02:40 | So what I am going to do is I am going
to first just create a shortcut to the
| | 02:45 | Graphics property of the stage.
| | 02:48 | So to get that, all I have
to do is create a variable.
| | 02:51 | I am just going to call it g. This is going to
be of type Graphics, is equal to this.graphics.
| | 03:00 | This is just a shortcut, so I don't
have to keep writing this.graphics.
| | 03:05 | Another little side benefit is if I type
this.graphics, I don't get any code hinting.
| | 03:10 | So by creating this little alias,
it makes it easy to get code hinting.
| | 03:14 | So now I am just going to say g and
now in order to set up that Pixel Bender
| | 03:19 | Filter as a fill, I am just
going to choose beginShaderFill.
| | 03:24 | Now it's asking me to
provide which shader I want to use.
| | 03:28 | So obviously I want to use
that shader that I created.
| | 03:32 | And now I can just start drawing
like I normally do with the Drawing API.
| | 03:36 | So let's say g. Let me go ahead and choose
drawCircle and I will put it at let's say 200.
| | 03:47 | 200. I will just give it a Radius of 100.
| | 03:50 | So now if we test that, sometimes
when you are using this Flex metadata,
| | 03:57 | this will actually pop-up, and it's
essentially just asking you to update the library
| | 04:01 | path to the Flex SDK.
| | 04:03 | If you ever see this message, all you
have to do is click Update library path
| | 04:08 | and then relaunch your SWF file.
| | 04:09 | So now you can see I have my circle and its
being filled with that Pixel Bender filter.
| | 04:16 | So now if I want to use an actual stroke
that's based on my Pixel Bender filter,
| | 04:22 | what I have to do here is first,
I need to set up the line style, so
| | 04:26 | g.lineStyle, like we normally have to do.
| | 04:31 | I am just going to give it a thickness
of let's say 10 and under that then
| | 04:37 | we need to call the lineShaderStyle
method and pass in our shader.
| | 04:44 | Now, it's important that you
actually set the lineStyle first and then
| | 04:48 | the lineShaderStyle.
| | 04:49 | If you don't do this first, you are
essentially not going to have any stroke
| | 04:53 | whatsoever on your object.
| | 04:56 | So now what I want to do is I
am going to say g.drawCircle.
| | 05:01 | We will just do the same thing, 200,
200 for the Position, and 100 for the Radius,
| | 05:08 | and now you can see the actual stroke
of that circle is being filled by Pixel Bender.
| | 05:14 | So this is just an
alternate use of Pixel Bender.
| | 05:17 | So not only can you use it to apply
filters to display objects, but we can also
| | 05:22 | use it for fills and strokes
that we create with the Drawing API.
| | Collapse this transcript |
| Using filters in Photoshop and After Effects| 00:00 | So when you create a Pixel Bender filter,
you can also use it not only in Flash,
| | 00:05 | but also inside of
Photoshop CS4 and After Effects CS4.
| | 00:10 | So the Pixel Bender support inside of After
Effects CS4 comes built-in with the product.
| | 00:16 | For Photoshop CS4, you are going
to need to download the Pixel Bender
| | 00:19 | plug-in for Photoshop CS4.
| | 00:22 | So here we are back on the Pixel
Bender homepage, on the Adobe Labs site, and
| | 00:26 | you want to again go to that
Download pod and click on this link.
| | 00:30 | You will see down here you can download
the Pixel Bender plug-in for Photoshop CS4.
| | 00:36 | So there is a 32-bit version for Mac and
Windows and also a 64-bit version for Windows.
| | 00:41 | So now I have already downloaded this
to my Desktop and this is just like the
| | 00:46 | Text Layout Framework.
| | 00:48 | So I am going to double-click this
and now I can install the extension.
| | 00:52 | Now, I already have it installed,
so I am just going to Decline here.
| | 00:55 | What this now enables you to do is to
put your Pixel Bender filters so that they
| | 01:00 | show up inside of Photoshop and After Effects.
| | 01:03 | So I have already copied that waterfall.
pbk file into the Directories, but let
| | 01:09 | me actually show you.
| | 01:10 | For After Effects CS4, you are
going to want to go to, on Mac,
[00:01:1420]
into Applications, to the After Effects CS4 folder.
| | 01:18 | If you are on Windows, you are going to go
into Program Files and then After Effects CS4.
| | 01:22 | Then you will see a Plug-ins folder and
inside of that you will see an Effects folder.
| | 01:28 | This is where all the different
effects are for After Effects.
| | 01:31 | So if we scroll down, here you can
see that PBK file, that waterfall.pbk
| | 01:36 | file that we created.
| | 01:37 | Now, it's important to note that the
PBJ format, that's specific for Flash.
| | 01:43 | So when you are actually using Pixel
Bender filters in After Effects and
| | 01:46 | Photoshop, you simply use the PBK
format, which is that source format that
| | 01:51 | we created directly in the Toolkit.
| | 01:54 | So that's where you put it for After Effects.
| | 01:56 | For Photoshop, it's going to be similar.
| | 01:58 | So you are going to go to
Applications/Photoshop CS4.
| | 02:01 | If you are on Windows,
Program Files/Photoshop CS4.
| | 02:05 | Here we can see there's actually a
Pixel Bender Files folder right in the top
| | 02:10 | level directory here, and inside of
there the Photoshop plug-in actually comes
| | 02:15 | with a bunch of Pixel Bender Filters with it.
| | 02:18 | I have just added the
Waterfall filter to the rest of them.
| | 02:22 | So now let's look at how we actually use
these Pixel Bender filters in each of these tools.
| | 02:27 | So let's start in Photoshop.
| | 02:29 | So I have imported just a photo of my
cat and now I am going to go to Filter.
| | 02:35 | Then you can see we have a Pixel
Bender entry here and I can launch the
| | 02:39 | Pixel Bender Gallery.
| | 02:40 | So this is an actual separate window
that's going to pop-up that's going to
| | 02:44 | allow me to preview my image
with the different filters.
| | 02:48 | So here is a CircleSplash filter that I
could use to create some kind of crazy effects.
| | 02:53 | Definitely some cool ones in here.
| | 02:56 | Kind of a 3D effect, the Fisheye effect.
| | 02:59 | Kaleidoscope, which actually creates
a kaleidoscope of the different things
| | 03:04 | sampling from my image.
| | 03:06 | But if we go down to the bottom here, we
can see my Waterfall filter that I created.
| | 03:10 | So now I can come through here and
actually adjust it, because remember,
| | 03:14 | I created that parameter.
| | 03:17 | Let's say I wanted it like this.
| | 03:18 | I am going to click OK, and now we
have been able to use that Pixel Bender
| | 03:22 | filter to manipulate our images in
Photoshop, very similar to other filters that
| | 03:28 | you find in Photoshop.
| | 03:29 | So now inside of After Effects, I have
created just a very simple comp here and
| | 03:35 | now just so we have some type of
video footage on here. I am going into the
| | 03:39 | Animation Presets, into Backgrounds.
| | 03:42 | I am just going to drag out one
of these stock background effects.
| | 03:45 | If I do a RAM preview, we can see
that's the basic Circuit effect.
| | 03:50 | So now to actually use my Pixel Bender
filter, I do it just like I do with other
| | 03:55 | effects in After Effects.
| | 03:56 | I go to the Effect menu and then you
can see there is a Pixel Bender entry and
| | 04:01 | there is my Waterfall filter.
| | 04:02 | When I select it, we can see it's
automatically being applied here.
| | 04:07 | If I come to my Effects window, let me
just collapse some of these, this is for
| | 04:12 | the background, and now I can adjust
this so I get that Waterfall effect.
| | 04:17 | Now, since I am inside of After Effects,
this can easily be animated as well.
| | 04:22 | So I can keyframe this Amount parameter.
| | 04:26 | Now, let's say I go to 5 seconds and
make it go all the way to the bottom and
| | 04:32 | now I do a RAM preview, and now you can
see it's actually animating that Pixel
| | 04:37 | Bender filter here inside of After
Effects, to create kind of a streak effect.
| | 04:43 | There we can see it kind
of playing in real time.
| | 04:46 | So again, once you have the Pixel
Bender filter, applying them to either your
| | 04:50 | Photoshop or After Effects content is
really no more difficult than using the
| | 04:54 | regular effects and filters
that come with those tools.
| | Collapse this transcript |
|
|
4. New Sound APIsOverview of the new sound APIs| 00:00 | So with the release of Flash Player 10,
you've seen some amazing new sound
| | 00:04 | features being put into the player.
| | 00:07 | Now these features allow you to do
things like generate sound entirely from code,
| | 00:11 | as well as extracting the
bytes of an external audio file and
| | 00:16 | manipulating the bytes
before they reach the sound card.
| | 00:18 | So I am actually going to show
you a couple of examples of this.
| | 00:21 | If you go to hobnox.com, this is a
general portal site, but one of the
| | 00:27 | features is this Audio tool, and it
just simply known as the Hobnox AudioTool,
| | 00:32 | and this is created by Andre Michelle and Joa
Ebert who are Flash developers from Germany.
| | 00:37 | Essentially this application is a
complete electronic music studio that has
| | 00:42 | been created in Flash, and all the
sound that you hear in this tool is actually
| | 00:46 | purely generated from code. It's not
actually playing external samples or
| | 00:51 | anything like that.
| | 00:52 | So from here I can basically
choose a preset to start with.
| | 00:56 | So I am just going to
choose this Tone Matrix preset.
| | 00:58 | And now it's creating my project and not
only is this just an awesome example of
| | 01:03 | these new sound features, but just
this application in general is just an
| | 01:06 | amazing piece of Flash work, all the design.
| | 01:09 | It's just really beautiful.
| | 01:10 | So essentially from here I can zoom out
a little bit so I can see my workspace.
| | 01:15 | Now I can also add other instruments
and effects, so I can pull out this little
| | 01:20 | panel here, and I can
drag out different pedals.
| | 01:24 | Let's say I wanted a bass machine here.
| | 01:27 | Now I am by no means a music expert, so I
wouldn't know what to do with most of these things.
| | 01:32 | But the sound that's actually played
again is purely generated from code and
| | 01:36 | it's really quite amazing.
| | 01:37 | So if I just play the standard track here.
| | 01:40 | (Music Playing.)
| | 01:46 | So all of that is using the
new sound APIs in Flash 10.
| | 01:50 | Now with this ToneMatrix,
essentially I can click in here to create tones
| | 01:54 | anywhere on this grid.
| | 01:56 | So I can just lay down some tones like that.
| | 01:58 | (Music Playing.)
| | 02:02 | And actually as it's
going I can be adding sound.
| | 02:05 | (Music Playing.)
| | 02:09 | So this is probably the ultimate use of this
dynamic sound generation in Flash Player 10.
| | 02:15 | Another example, and this was also
created by Andre Michelle on his blog,
| | 02:19 | essentially showcases the ability to
play an external MP3 file and actually
| | 02:25 | extract the bytes as they come into the
Flash Player and manipulate them before
| | 02:29 | you actually hear them.
| | 02:31 | So in this example he's allowing the
user to actually slow down or speed up an
| | 02:36 | MP3 file based on a slider.
| | 02:39 | So here is a slider. Once the music
starts playing, I'll be able to adjust the
| | 02:44 | speed and the pitch of the sound.
| | 02:46 | (Music Playing.)
| | 02:52 | So you can see I can completely slow
down this sound, which is of course also
| | 02:56 | adjusting the pitch of the
sound and I can also go up.
| | 03:03 | You can see as I can move the slider
very quickly, it's very responsive and
| | 03:07 | the quality is really good.
| | 03:08 | And he also has the source
code for this available here.
| | 03:12 | So again these new sound features
allow you to basically do whatever you want
| | 03:17 | now with sound inside of the Flash
Player and in this chapter we'll look at just
| | 03:20 | a few other things that
we are able to do with it.
| | Collapse this transcript |
| Generating dynamic sound| 00:00 | So one of the key new sound features
in Flash Player 10 is the ability to
| | 00:04 | generate sound dynamically using
nothing more than code and I am going to show
| | 00:08 | you how to do that in this video.
| | 00:10 | So I am just going to create a blank
ActionScript 3 document here and again
| | 00:14 | everything we are going to do in this
tutorial is going to be in the Actions panel
| | 00:17 | because we are going to be using all code.
| | 00:19 | So I'll just rename that layer to
Actions and highlight the first keyframe and
| | 00:25 | open up the Actions panel.
| | 00:27 | So the first thing we do
is we create a sound object.
| | 00:30 | So I am just going to create a
sound object called S = new Sound.
| | 00:35 | Now here typically if you're playing an
external MP3 file, you would now put in
| | 00:39 | a new URLRequest object
with the URL to your MP3.
| | 00:43 | Well, in this case we are going to
create just an empty sound object because
| | 00:47 | we're going to be providing Flash
with the actual sound data ourselves.
| | 00:51 | So I am just going to go ahead
and create an empty sound object.
| | 00:55 | Now we need to respond to an event
called SampleData and this event is
| | 00:59 | essentially, if we start playing an
empty sound, Flash is going to fire this
| | 01:04 | event and say hey, I need some sound data for
this sound object which you can then provide.
| | 01:09 | And this SampleDataEvent will be called
continuously whenever this sound object
| | 01:14 | needs new sound data.
| | 01:16 | I am going to say
s.addEventListener and the event is of type
| | 01:21 | SampleDataEvent.sample_Data.
| | 01:26 | And I am going to have this
call a function called SampleData.
| | 01:30 | So I will create that function now.
| | 01:34 | Now the event object type is going
to be SampleDataEvent and we are
| | 01:40 | not returning anything.
| | 01:41 | So we are going to put void.
| | 01:44 | So what we need to do inside of this
SampleData is we need to create a whole
| | 01:49 | bunch of sound samples.
| | 01:51 | Now, the amount of sound samples that
you create is you basically have a range
| | 01:56 | which you can choose from.
| | 01:57 | So the smallest amount you can create
is somewhere around 2500 and basically
| | 02:03 | the more samples you have, the
higher quality the sound will be.
| | 02:07 | But the more resources it's actually
going to take up in order to play that sound.
| | 02:12 | So we are going to create
these samples inside of a for loop.
| | 02:15 | So I am going to say var i,
data type it to :int=0.
| | 02:19 | And then I am going to do i is less than 2500.
| | 02:23 | Again, you can experiment here.
| | 02:25 | If you put a really high number of
samples again you are going to get a
| | 02:27 | higher-quality audio, but it's going to
take up considerably more processor and RAM.
| | 02:32 | So we will just increment i. So again,
inside of here now, we are coming in here
| | 02:38 | and we are going to create 2500
samples to send back to the sound card.
| | 02:43 | So one other thing we need to do is
to increment the current position.
| | 02:49 | So when this event calls, part of this
event object is actually the position of
| | 02:54 | where we are in the sound.
| | 02:56 | And what we need to do is
increment that for each sample.
| | 03:00 | So I am just going to create a variable here.
| | 03:02 | I'll call it Position, and this is
just going to be a number, and I am going
| | 03:07 | to say i + e.position.
| | 03:11 | So again, the e.position is going to
basically tell us what position we are
| | 03:16 | in this sound data.
| | 03:17 | So when the SampleDataEvent fires, this
e.position is going to be greater each time.
| | 03:23 | But for each sample, we also
need to increment the position.
| | 03:26 | So now that we have that variable, now
we actually need to calculate the sample.
| | 03:33 | So the actual value that we are going
to provide to the empty sound object.
| | 03:38 | So I am going to create a
variable. I am going to call it Sample.
| | 03:42 | Again, this is going to be a number.
| | 03:44 | So now for this sample, what we need
to actually do is to create a wave.
| | 03:48 | So all sound is made up of
oscillating waves, typically a sin wave.
| | 03:53 | So in order to create that wave effect,
we need to actually use the Math.sin
| | 03:59 | function and now inside of the sin
function, we want to put in this position
| | 04:04 | variable that we have up here.
| | 04:06 | Again, this is incremented for every sample.
| | 04:08 | So I am going to put that in.
| | 04:11 | Now remember that the Math.sin
function actually expects a value in radians.
| | 04:16 | So what we need to do is
now convert this into radians.
| | 04:20 | The way we do that is to divide
that by Math.PI, divided by 2.
| | 04:26 | So now we've taken that position
variable and we have converted it into radians.
| | 04:30 | Now if we were to just now play this
resulting value, the sound would be way
| | 04:36 | too loud. The amplitude.
| | 04:38 | That's another thing to know, when
you are playing with these audio APIs,
| | 04:41 | definitely don't start out your
experimentation by turning your speakers all the
| | 04:45 | way up with your headphones on because
you can generate some pretty loud and
| | 04:49 | obnoxious sounds as I'm about to demonstrate.
| | 04:52 | So now from here we want to essentially
bring down the amplitude of this sound,
| | 04:55 | so it's not quite so loud.
| | 04:56 | So I am just going to multiply that
by 0.25, just so that it's more of
| | 05:01 | a comfortable volume.
| | 05:02 | But it is important to note that this
is how you could adjust the amplitude by
| | 05:06 | just multiplying it either by
a greater or a smaller number.
| | 05:09 | So now we have this sample calculated,
now we are ready to actually send this
| | 05:14 | back to the sound object to play.
| | 05:16 | Now, we need to actually write two
samples, one for the left channel and one
| | 05:20 | for the right channel.
| | 05:21 | So if you wanted to create sounds that
had different things going on in each
| | 05:25 | channel, you could do that.
| | 05:26 | But we are simply going to write
the same sample to both channels.
| | 05:30 | So we actually use this event
object to write the data back.
| | 05:34 | So we say e.data.writeFloat because
this again is a floating-point number.
| | 05:41 | So now we are simply going to write
that sample value into the left channel.
| | 05:47 | Now, all I have to do is to copy this
and paste that in for the right channel,
| | 05:52 | and that's all that it takes.
| | 05:53 | So essentially all the logic is
right here and by changing some of these values,
| | 05:58 | you can create some
wildly different sound effects.
| | 06:01 | So we have created our sound object.
We have set up the SampleDataEvent.
| | 06:05 | Now all there is left to do
is to simply play this sound.
| | 06:09 | So all I have to do is say s.play.
| | 06:12 | And when we test it, we should hear some audio.
| | 06:14 | (Beeeeep.)
| | 06:17 | So you can hear that steady tone.
| | 06:19 | Again, that steady tone is created by
the oscillating effect created by using
| | 06:23 | the Math.sin function.
| | 06:26 | So now let's say we wanted to change
some properties of this to make it a
| | 06:30 | higher or a lower tone.
| | 06:33 | So what I can do is I can wrap this
position in radians here in parentheses and
| | 06:38 | now I can just multiply this by let's say 0.2.
| | 06:43 | (Beeeep.)
| | 06:44 | Now, you can see I have a lower tone.
| | 06:45 | If I multiply it by let's say 1.2,
| | 06:49 | (Beeeep.)
| | 06:50 | we have a higher tone.
| | 06:52 | So again, adjusting this value that's
inside of this Math.sin function will give
| | 06:57 | you different tones and effects.
| | 06:59 | Now what you can also do is, let me
just back that up, you can also get
| | 07:03 | different effects by
choosing different functions here.
| | 07:06 | So let's say I did the Math.tan function.
| | 07:08 | (Nreeee. High pitched beep.)
| | 07:09 | Now, we are getting to the obnoxious stage.
| | 07:11 | But by adjusting these values,
manipulating the different functions that you are
| | 07:16 | using to call, you can create all
types of different effects using these new
| | 07:20 | features in Flash Player 10.
| | Collapse this transcript |
| Extracting bytes from external sounds| 00:00 | So in addition to being able to
generate sounds dynamically at runtime, we also
| | 00:05 | now have the ability to extract the
bytes of an external sound file and
| | 00:11 | manipulate those bytes and
send them to the sound card.
| | 00:14 | So we can create things
like real-time audio effects.
| | 00:16 | Well, in this tutorial, I am going to
show you the basics of how to extract the
| | 00:20 | bytes from an external sound
and pass them to the sound card.
| | 00:24 | So you can open up the extraction.fla
file from the Exercise Files. Essentially
| | 00:29 | this is just a blank Flash
document with a locked Actions layer.
| | 00:33 | So I am going to highlight that first
keyframe and open up the Actions panel.
| | 00:37 | So what I first need to do here is to
create a new sound object that's going to
| | 00:41 | start loading in that external sound.
| | 00:44 | So I am just going to say var and I am
going to call it external and it's going
| | 00:49 | to be of type Sound = new Sound.
| | 00:53 | And again, since I am playing an
external sound file, I need to create a
| | 00:56 | new URLRequest here.
| | 00:59 | I am going to be using a sound
file with the name of april20.mp3.
| | 01:04 | This is some music created by
Trioptic from hiphopproduction.com.
| | 01:10 | So I am just going to put that in
there and you could use any mp3 file you
| | 01:13 | have in your system.
| | 01:15 | So now what I need to do is this line
is essentially going to start loading
| | 01:19 | in this audio file.
| | 01:20 | What I need to know is when that
sound file has been completely loaded in.
| | 01:25 | It's important to note that you can only
extract the bytes of the file once it's
| | 01:29 | actually loaded in, and the reality is
we are not actually extracting bytes per se
| | 01:34 | but we are extracting
samples from the audio file.
| | 01:37 | So what I need to do is to respond to an
event and that event is Event.COMPLETE,
| | 01:47 | and this is going to fire as soon as
that loading operation has finished.
| | 01:51 | And I am going to have that
call a function called onLoaded.
| | 01:54 | Okay, so now what I also
need is an empty sound object.
| | 01:59 | So in the last tutorial I showed you
how we create an empty sound object,
| | 02:03 | we respond to the SampleDataEvent in which we
need to provide Flash with some sound data.
| | 02:08 | Well, we are going to be doing the
same thing here except we are going to be
| | 02:11 | providing the data from that external
sound. We are not gong to be coming up
| | 02:14 | with it from scratch.
| | 02:15 | So I am going to do the same thing,
I am going to call this var Empty, and
| | 02:20 | this is going to be my empty
Sound object = new Sound.
| | 02:24 | And just like the last tutorial,
I am going to need to respond to the
| | 02:28 | SampleDataEvent.SAMPLE_DATA.
| | 02:35 | I am going to have that call
a function called SampleData.
| | 02:37 | So now I need to create this event
listener here, so I need to create
| | 02:41 | that onLoaded function.
| | 02:43 | So function onLoaded. I am not
going to be returning anything.
| | 02:51 | So all that I need to do in this
onLoaded function is to simply start playing
| | 02:56 | the sound, which will then trigger
the calls to the SampleDataEvent.
| | 03:00 | So the reason why I have to wait in
order to do that is like I mentioned before,
| | 03:04 | we have to wait until this file is
completely loaded in before we start
| | 03:07 | extracting samples from it.
| | 03:10 | So inside of here, all I have
to do is simply say empty.play.
| | 03:13 | So now we need to create
that sampleData event handler.
| | 03:18 | So function sampleData and again this
is going to be of type SampleDataEvent.
| | 03:23 | We're not going to be returning anything.
| | 03:29 | So the first thing I need to do inside of
here is to create a new byte array instance.
| | 03:34 | This byte array is essentially going
to hold whatever samples that I extract.
| | 03:38 | So I am just going to call it BA for byte array.
| | 03:41 | It's going to be of type
ByteArray = new ByteArray.
| | 03:46 | So now, I'm ready to actually extract
some samples from that external file.
| | 03:52 | The way in which we do that is by using
the extract method of the sound class.
| | 03:57 | So my external file is called external,
and I want to call the extract method.
| | 04:03 | Now, you will notice the code hinting in here.
| | 04:06 | That's just Flash CS4 for you.
| | 04:07 | Sometimes it works
correctly, sometimes it doesn't.
| | 04:10 | But you want to call the extract method
here and you can see the first thing I
| | 04:13 | need to pass in is which byte array
do I want to store these samples in?
| | 04:17 | Well, I want to store it in the
byte array that I just created, so BA.
| | 04:22 | The next thing I need to do is I need
to basically say how many samples do I
| | 04:26 | want to extract from that sound file?
| | 04:29 | So kind of the magic number for this is 4096.
| | 04:34 | Now, you can extract more than that
but that's pretty much the minimum number
| | 04:38 | of samples to extract, and in most examples
you are going to see most people use 4096.
| | 04:42 | So it's essentially going to, every
time it comes in here, extract 4096 samples
| | 04:49 | from that external sound file.
| | 04:52 | So now that I have those samples
stored in this ByteArray object, now all I
| | 04:55 | need to do is to simply write these bites to
that empty sound object, so they can be played.
| | 05:01 | So we did that in the last tutorial, but
it's just e.data.writeBytes, and now we
| | 05:08 | need to provide which bytes do we
actually want to write and we just want to
| | 05:11 | write that byte array.
| | 05:12 | So now again when we load this Flash
movie, it's going to load in this MP3 file.
| | 05:19 | As soon as it's done loading completely,
it's going to call this onLoaded function.
| | 05:23 | Then we know that file is fully loaded in.
| | 05:26 | Then we can start
playing the empty sound object.
| | 05:29 | When that happens, the
SampleDataEvent gets called and now we are actually
| | 05:33 | extracting a certain number of samples
from that external file and providing it
| | 05:38 | to the empty sound object. So let's test it.
| | 05:41 | (Music Playing.)
| | 05:46 | So you can see that's now playing.
| | 05:48 | Now in this example, obviously we
haven't done anything to the bytes.
| | 05:53 | All we're doing is simply extracting
the bytes and passing them to the empty
| | 05:57 | sound object unchanged.
| | 05:59 | So there would be no reason to actually
do all of this work if you didn't want
| | 06:02 | to manipulate the bytes in some way.
| | 06:05 | But this is essentially the workflow
for extracting the bytes, passing them to
| | 06:09 | an empty sound object, and then playing them.
| | 06:11 | Now in the next tutorial, we are
actually going to do something with the bytes
| | 06:14 | and manipulate them to create
kind of real-time audio effects.
| | Collapse this transcript |
| Creating real-time audio effects| 00:00 | So, in the last tutorial I showed
you how you can extract the bytes of an
| | 00:04 | external MP3 file and pass those bytes to
an empty sound object to play them back.
| | 00:10 | Well, in this tutorial I will show
you a real world case for why you might
| | 00:13 | actually want to do that and that's to
manipulate the bytes before you actually
| | 00:17 | send them to the empty sound object.
| | 00:19 | So you open up the effects.fla file
from the Exercise Files and this is
| | 00:24 | essentially the finished
product from the last tutorial.
| | 00:28 | Here I've created an external sound
object, I am playing in that music into
| | 00:32 | this empty sound object.
| | 00:35 | Again, we haven't manipulated the
bytes whatsoever here. So if I test this.
| | 00:39 | (Music playing.)
| | 00:41 | It's just playing the music
exactly as it came into the Flash Player.
| | 00:45 | So now let's look at how we
can manipulate these bytes.
| | 00:48 | So down here we have this function
where we are writing the bytes to that empty
| | 00:53 | sound object to be played back.
| | 00:55 | What we can do is to before we actually
send this ByteArray to the empty sound
| | 01:01 | object, we can manipulate it.
| | 01:03 | So let's create a function, and I am
going to call this function, upOctave, and
| | 01:07 | it's essentially going to bump up
the sound in that file by an octave.
| | 01:12 | I am going to make it
essentially higher pitched.
| | 01:14 | This function will actually be called
before it's actually sent to the sound card.
| | 01:18 | So I am going to create that
function now. It's upOctave.
| | 01:25 | Now to this function we are actually
sending this byte array, so I need to have
| | 01:29 | a byte array instance here to catch that.
| | 01:31 | And I will just call it bytes and
this is going to be of type ByteArray.
| | 01:36 | Now when we're done with this function
we are actually going to be returning a
| | 01:39 | byte array back to the writeBytes method.
| | 01:42 | So I need to specify a
return type also of ByteArray.
| | 01:45 | Okay, so the first thing I need to do
is to create a new ByteArray instance
| | 01:52 | that I'm going to use to send
back to the writeBytes method here.
| | 01:56 | So I am just going to do that and I'm going to
call this returnBytes:ByteArray = new ByteArray.
| | 02:08 | Okay, now what I want to do is this
incoming ByteArray, I want to make sure the
| | 02:11 | position in that byte array is
actually set to 0, so we are starting at the
| | 02:15 | beginning of the byte array.
| | 02:17 | To do that all I have to do
is to say bytes.position = 0.
| | 02:23 | So again, as we deal with byte arrays,
as we go through it, there is essentially
| | 02:27 | a pointer that will be there, so we
know where we left off the last time we
| | 02:31 | dealt with it and setting the position
property essentially to 0 will reset that
| | 02:35 | pointer back to the beginning of the file.
| | 02:37 | Okay, so now I want to iterate over the
bytes that were sent in to this function.
| | 02:42 | To do that, I am going to use a While loop.
| | 02:44 | So I am going to say
while(bytes.bytesAvailable > 0).
| | 02:54 | This essentially means so long as there
are more bytes to deal with in this file.
| | 02:58 | Then inside of here I am
going to create a block.
| | 03:01 | Now what we want do is to read two float
values from the incoming byte array and
| | 03:07 | write them to this returnBytes byte array.
| | 03:10 | Again, we are reading two floats, one for
the left channel, one for the right channel.
| | 03:14 | So to do that I just say returnBytes.
writeFloat, and we are going to write
| | 03:22 | essentially the values that we
read from the incoming byte array.
| | 03:26 | So to get those we just
simply say bytes.readFloat.
| | 03:31 | So again, here I'm reading in a float
value from the incoming byte array and
| | 03:38 | I'm simply writing it to the
returnBytes byte array that I am going to be
| | 03:42 | sending back up here.
| | 03:44 | Now again, we need to do this for both
channels, so I am just going to put this
| | 03:48 | in here again for the right channel.
| | 03:51 | Now here's the part where we are
actually going to skip 8 samples so that
| | 03:55 | basically we are going to
make the sound go up an octave.
| | 03:58 | So the way we do that is we can
say if(bytes.bytesAvailable > 0).
| | 04:08 | So again, we are doing
the same thing we did here.
| | 04:10 | Since, we are going to be reading two
float values here, we still need to make
| | 04:13 | sure that there are
actual bytes still available.
| | 04:17 | If that is the case then we want to
move the pointer in this byte array
| | 04:22 | eight places forward.
| | 04:24 | So essentially we are skipping over an octave.
| | 04:27 | So, bytes.position += 8.
| | 04:33 | So here we retrieved the two floats and
then basically we are skipping over eight
| | 04:37 | samples before we start
going and read some more.
| | 04:41 | And the act of skipping over those
eight samples is going to raise the pitch of
| | 04:44 | the sound by an octave.
| | 04:46 | Now it will also increase the
speed of the sound obviously.
| | 04:50 | Now if you wanted to increase the pitch
of a sound without increasing the speed
| | 04:53 | of the sound, that's a lot
more of a complicated process.
| | 04:57 | So now that I have done this, now all I simply
need to do is just to return the returnBytes.
| | 05:05 | Again, when I say return
returnBytes it's essentially going to now pass
| | 05:09 | the manipulated bytes back here and that
will then get sent to that empty sound object.
| | 05:15 | So you can test it now.
| | 05:16 | (Music playing.)
| | 05:19 | So we can see it's a much higher
pitched sound and it's a lot faster as well.
| | 05:23 | So the act of skipping over those
eight samples not only has the effect of
| | 05:28 | raising it by an octave, but also speeds it up.
| | 05:30 | Now again, adjusting the number of
samples that you skip over, you can create
| | 05:34 | all kinds of different effects.
| | 05:36 | You can make it go a lot faster.
| | 05:37 | You can make it go a lot slower.
| | 05:39 | You can also by manipulating the bytes in
this way easily do things like make a rewind.
| | 05:44 | You could play in reverse, and fast reverse.
| | 05:46 | So there are definitely some
very good uses of this technology.
| | 05:50 | So that's the main method of extracting
an external sound file, manipulating the bytes,
| | 05:55 | and then sending
it out to the sound card.
| | Collapse this transcript |
|
|
5. Reading and Writing Local FilesLoading a local file into the player| 00:00 | So there has long been a security
restriction in Flash that didn't allow you to
| | 00:05 | read and write local files
directly from the user's machine.
| | 00:09 | Now of course, this sounds
like it would be a security issue.
| | 00:13 | Well, in Flash Player 10 we now have the
ability to actually load in local files
| | 00:18 | as well as save local files
directly from the Flash Player.
| | 00:22 | And the reason why this isn't a
security concern is that the user actually
| | 00:26 | always has to initiate one of these
actions via either a click or a key press.
| | 00:32 | The other thing is that they're
always going to see their operating system
| | 00:35 | dialog window asking them to
either open or save a file.
| | 00:40 | So there's no way to programmatically
in ActionScript just start deleting or
| | 00:44 | loading files on the user's machine.
| | 00:47 | So I am going to show you in this
example how you would load in an image file
| | 00:50 | directly from the user's local machine.
| | 00:53 | In previous versions of Flash, if
you would wanted to do this, you would
| | 00:56 | actually have to upload the image to
your web server, then download it from the
| | 01:00 | web server into your Flash movie.
| | 01:02 | And these new enhanced
features actually eliminate that step.
| | 01:05 | So go ahead and open up the load_file.fla file.
| | 01:10 | And this is just a simple application here.
| | 01:12 | I have a single button component on the
stage with an instance name of loader.
| | 01:17 | And then I have a locked actions layer.
| | 01:19 | So I am going to highlight the first
keyframe in the actions layer and open
| | 01:22 | up the Actions panel.
| | 01:24 | Okay, so the first thing I need to
do is to set up the click event for
| | 01:28 | that button component.
| | 01:29 | So again, it has an instance
name of loader, so I am going to say
| | 01:32 | addEventListener and I want
to respond to MouseEvent.CLICK
| | 01:39 | and I'm going to have that
call a function called onClick.
| | 01:43 | I am going go ahead and just
stub out that function really quick.
| | 01:46 | So, onClick(e.MouseEvent) and
we are not returning anything here.
| | 01:55 | So when we want to deal with the
user's actual local file system, we use an
| | 02:00 | instance of the FileReference class and
that hasn't changed in Flash Player 10.
| | 02:04 | So the first thing I am going to do
here is to create a new instance of the
| | 02:07 | FileReference class.
| | 02:08 | So I am going to say var fr:
FileReference = new FileReference.
| | 02:18 | So now that I have this new
FileReference object, I can now start interacting
| | 02:23 | with the user's local file system.
| | 02:26 | So inside of this onClick what I want to
happen when I click on this button is I
| | 02:30 | want a operating system browser window
to pop-up, so that the user can choose
| | 02:35 | what file on their local system they
want to load into the Flash Player.
| | 02:39 | So to do that I need to add an event
listener to the FileReference. I need to
| | 02:44 | listen for the Event.SELECT event and
that's going to fire as soon as the user
| | 02:49 | actually selects the file to import in.
| | 02:52 | It's going to trigger the Event.SELECT event.
| | 02:56 | So what I am going to do is say
fr.addEventListener(Event.SELECT).
| | 03:06 | Now when this event fires, all I am
going to do is I am going to tell the
| | 03:09 | FileReference to go ahead and start
loading that file into the Flash Player.
| | 03:14 | So since, I only have one basic
command that I need to run, I am just going
| | 03:18 | to put an anonymous function inside of here
instead of creating an additional function.
| | 03:22 | So I am just going to say function, catch the event
object with e, fr.load, and actually that's a method call.
| | 03:35 | And that's all there is inside of this function.
| | 03:37 | It's just easier to do an
anonymous function here.
| | 03:41 | The other event I need to listen for is
the Event.COMPLETE event and this event
| | 03:46 | is going to fire as soon as the file
that the user selected has finished loading
| | 03:51 | into the Flash Player.
| | 03:52 | And then I can actually get the
raw bytes that were loaded in and do
| | 03:56 | something with them.
| | 03:58 | So again I am going to say fr.
addEventListener and I'll use Event.COMPLETE.
| | 04:03 | And for this one I'm going to have
it call a function called onComplete.
| | 04:09 | Okay, so now what I need to do is I
actually need to trigger that Browse window
| | 04:13 | to pop-up so the user can select their file.
| | 04:16 | To do that, it's very simple.
| | 04:17 | I just say fr.browse.
| | 04:20 | Now I can restrict the file types that
I want the user to select by passing in
| | 04:25 | an array of file types.
| | 04:26 | But in this example I am just
going to leave at the default.
| | 04:28 | Okay, so this will launch the browse
window and have my event set up. Now I just
| | 04:33 | need to go ahead and
complete this event handler here.
| | 04:37 | Now remember it calls a
function called onComplete.
| | 04:39 | I just need to create that, onComplete,
and I am not going to return anything,
| | 04:47 | so I am going to put void.
| | 04:50 | So now what I need to do is I
want to create a new loader object.
| | 04:53 | Now the loader class is essentially
also a display object, so once I can
| | 04:58 | basically get the bytes that came in
from that external file and load it into
| | 05:02 | this loader class, which I can then put
on the display list so the user can see it.
| | 05:07 | So I am just going to
create var l:Loader = new Loader.
| | 05:15 | And now in order to get the bytes from
the FileReference into the Loader, I just
| | 05:20 | have to say l.loadBytes.
| | 05:23 | And now it's asking me for a byte array.
| | 05:25 | Well, that data that came in through the
FileReference actually is a byte array.
| | 05:29 | So in order to get that, all I
need to say is e.target.data.
| | 05:36 | So this will get to the actual byte
array data that came in when I did
| | 05:40 | this FileReference load.
| | 05:42 | So now I have those bytes inside of my
loader, now all I have to do is just
| | 05:47 | add the loader to the display list.
| | 05:49 | So just addChild(l).
| | 05:52 | And now let's test it.
| | 05:53 | So now I have my button component here.
| | 05:55 | Let me pull this out.
| | 05:57 | So I have my button component and when
I click on this, you can see it's now
| | 06:02 | prompting me to actually load in a file.
| | 06:04 | So what I am going to do is go into
the Exercise Files and inside of here I
| | 06:10 | have an image, a JPEG image, of Bea.
| | 06:12 | And I am just going to click Select,
and we can now see it's loaded that file
| | 06:16 | through the FileReference directly and
I've got access to those bytes, put it
| | 06:21 | into a loader and then
added it to the display list.
| | 06:24 | So again, doing this with previous
versions of Flash would have required me to
| | 06:27 | upload this image to my web server
and back down into the Flash movie.
| | 06:31 | So if you need in your application
for the user to load in their own local files,
| | 06:36 | this new feature, the FileReference
class, is going to come in really handy.
| | Collapse this transcript |
| Saving a file to the user's machine| 00:00 | So in the last tutorial we looked at
how we could load a file directly from
| | 00:04 | the user's hard drive into the Flash Player.
| | 00:07 | Well now I am going to show
how you can go the other way.
| | 00:09 | So this is taking something from your
Flash movie and saving it directly to
| | 00:13 | the user's hard drive.
| | 00:16 | So go ahead and open the save.fla file
from the Exercise Files and I've already
| | 00:20 | create just a simple Flash movie here.
| | 00:23 | I have a UI button here called Save
with an instance name of saver, and in the
| | 00:29 | Actions panel I've created what
basically amounts to a simple drawing program.
| | 00:34 | So I'm basically creating an
alias to the graphics object.
| | 00:37 | I'm setting a lineStyle of five.
| | 00:39 | I have set up the onMove event, the
Mouse_Move event, and when I move the mouse
| | 00:45 | I'm just simply drawing a
line to wherever my mouse is.
| | 00:47 | I've also set up the click
event for that Save button.
| | 00:53 | So if test this now, you can see it's
drawing to wherever my mouse position is.
| | 00:58 | So the idea of this is that when I'm
finished drawing, I can click on the Save
| | 01:03 | button and it's going to take a
snapshot of whatever I've drawn and save it out
| | 01:07 | to the user's hard drive.
| | 01:09 | So to accomplish this, we need to use a
class out of the AS3 core lib library.
| | 01:15 | I've already put that in the Exercise Files.
| | 01:18 | So if we look in here, we can see inside
of here, we have a com folder, an adobe
| | 01:24 | folder and then all the APIs that
come with the Core Lib libraries.
| | 01:27 | Well inside of here is a folder
called images and we can see we have a
| | 01:32 | JPEGEncoder and we have a PNGEncoder.
| | 01:35 | So this allows you to pass some bitmap
data to one of these classes and it will
| | 01:40 | actually generate either a JPEG or PNG file.
| | 01:44 | So the first thing we've to do in our
ActionScript code is we need to import
| | 01:48 | the PNGEncoder class.
| | 01:50 | So we're actually going to encode to PNG.
| | 01:52 | So I am just going to say import and
then com.adobe.images and PNGEncoder.
| | 02:02 | So now I've imported that
class that I can use it.
| | 02:04 | You see in the onClick function--
remember this is going to be fired when the
| | 02:09 | user clicks on that Save button.
| | 02:11 | The first I have to do is I need to
create a new file reference object, so much
| | 02:16 | like I did in the last tutorial.
| | 02:17 | Anytime you want to interact with the
user's file system you need to do it
| | 02:21 | through the FileReference class.
| | 02:23 | We want to go into the onClick function,
var fr, data type to FileReference =
| | 02:32 | new FileReference and now what I need
to do is to create a new BitmapData
| | 02:38 | object, and this is going to store whatever is
out on the stage when I click the Save button.
| | 02:43 | So I am going to say var, I am
going to called bmd for BitmapData.
| | 02:49 | It's equal to new BitmapData.
| | 02:51 | Now here I am going to have to actually
pass in the width and the height that I
| | 02:54 | want this BitmapData to be.
| | 02:56 | I am going to make it the same
size as the stage. So 550x400.
| | 03:02 | So now to take a snapshot of whatever is
actually present on the stage, all I have
| | 03:06 | to do is called the bmd.draw method.
| | 03:10 | I need to pass in which display object
I actually want to take a snapshot of.
| | 03:15 | I just want to take a snapshot of the
stage, so I am just going to pass in this.
| | 03:19 | Okay, so now we have the bitmap data.
Now we actually need to encode it into
| | 03:24 | an actual PNG file.
| | 03:26 | So for this we need to create a ByteArray.
| | 03:27 | So I am going to say var ba for ByteArray.
| | 03:30 | It's going to be of type ByteArray and
now what we want to do is we need to use
| | 03:36 | the static encode
function of the PNGEncoder class.
| | 03:41 | So PNGEncoder.encode and to this
function, we simply pass in which bitmap data
| | 03:50 | do we want to turn into a PNG file, so bmd.
| | 03:54 | And now this is essentially going to
create a PNG and stored into this byte array.
| | 03:59 | So now here comes the new stuff for
Flash Player 10 is how do we actually save
| | 04:03 | this file directly to the user's machine?
| | 04:05 | Well, this couldn't be any easier.
| | 04:07 | All we've to say is fr.save and then
essentially which data do we want to save.
| | 04:13 | What we want to save that ByteArray,
which is actually in the PNG format.
| | 04:18 | So we just say ba and then close this.
| | 04:22 | So now again, when we say fr.save,
it's not going to save it without the user
| | 04:26 | actually knowing about it,
because it's going to pop up some things.
| | 04:29 | It's going to allow them to choose the
file name and the location of where to save this.
| | 04:34 | So let's test the movie and now I can
start drawing my masterpiece here, little
| | 04:40 | house and something like that.
| | 04:43 | It almost looks like a face at this point,
but let's say I am really happy with that.
| | 04:47 | I click on Save and now you can
see it's launched the Save dialog.
| | 04:51 | So there is no way to avoid launching
that and that's the difference between
| | 04:54 | Flash Player and technologies like
Adobe AIR, which does allow you to read and
| | 04:59 | write files programmatically.
| | 05:00 | But remember AIR applications are
real desktop application, so there's a
| | 05:05 | looser security context.
| | 05:07 | So what I am going to do is I am
going to save this to the desktop.
| | 05:10 | I'll just call it masterpiece.png and save it.
| | 05:16 | And now if we go to the desktop we
can see here is the PNG file and when I
| | 05:21 | launch it up, you can see it's encoded
that now to a PNG file and it's actually
| | 05:25 | even included the Save button here,
because I literally just took a bitmap data
| | 05:29 | shot of the entire stage.
| | 05:31 | But essentially this new workflow with
the FileReference class makes things a
| | 05:35 | lot easier when you want the user to interact
with your Flash movie using their own files.
| | 05:41 | And in the next tutorial, I'll show
you kind of a full example of creating a
| | 05:45 | simple photo editor using
these new file reference features.
| | Collapse this transcript |
| Creating a simple photo editor| 00:00 | So in the last two tutorials I showed
you both how to load in files directly
| | 00:04 | from the user's machine as well as how
to save content from your Flash movie
| | 00:10 | directly to people's hard drives.
| | 00:12 | So now I am going to put the two
together and create just a simple photo editor.
| | 00:16 | So I already have built a simple UI
here and I am in the photoEditor.fla file
| | 00:22 | and I do have some UI
components here out on the stage.
| | 00:26 | I have a Slider component with an
instance name of slyda, and I have a Loader
| | 00:31 | button and a Saver button.
| | 00:33 | So what we're going to do is we're
going to load in an image file directly and
| | 00:38 | then we're going to apply that
waterfall Pixel Bender filter that we created in
| | 00:43 | the Pixel Bender chapter and this
essentially creates a waterfall effect.
| | 00:47 | Now I am going to be able to control
the amount of that effect based on the
| | 00:50 | value of this slider, and then what
we're going to be able to do is once we have
| | 00:54 | the effect we want, we can click the
Save button and it's going to go ahead and
| | 00:58 | generate a PNG file of that modified image.
| | 01:02 | So if we look in the Actions, I've
set up quite a bit of this already.
| | 01:05 | So here we're embedding the Pixel Bender Filter.
| | 01:09 | Again, if you need to brush up on this, you
can look back in the Pixel Bender chapter.
| | 01:13 | I have it stored in a class called pbj.
| | 01:15 | I am creating a new shader based off
of that pbj class and then creating the
| | 01:20 | shader filter based on that shader.
| | 01:23 | And then here are my event
listeners for my three UI components.
| | 01:27 | Here is a slyda change event and this
is going to fire any time the slider is
| | 01:31 | moved or anytime the
value changes on the slider.
| | 01:35 | And then I have two click events,
one for each of the buttons.
| | 01:38 | And then in the onChange event for the
slider, all I am doing is changing that
| | 01:43 | amount parameter that was set in Pixel Bender
based on the value that the slider is set to.
| | 01:49 | So now what I want to do is to load in that
image whenever this Load button is clicked.
| | 01:56 | So I want to go into the loaderClick
function and what I first need to do is to
| | 02:00 | create a FileReference instance.
| | 02:04 | So = new FileReference and much like we did
before, we need to set up the Event Listener.
| | 02:14 | So fr.addEventListener and now I want
to respond to the SELECT event and again,
| | 02:23 | I am going to put in an anonymous
function here, that basically all it does is
| | 02:28 | just start the load operation for
the File Reference. So fr.load.
| | 02:34 | I can close that anonymous function
and close the event listener and just
| | 02:39 | going to copy this.
| | 02:40 | Again, we need to do Event.COMPLETE this time.
| | 02:43 | This is going to fire as soon as the
Load operation is complete and I'm going to
| | 02:48 | have it call a function called onComplete.
| | 02:53 | Okay, so now I am going to come on to here.
| | 02:54 | I'll create that function onComplete.
| | 03:02 | And in this onComplete function,
this is where I would create my loader.
| | 03:07 | But since I'm going to need to be able
to access this loader from outside of
| | 03:12 | this event handler, I am just going to go
ahead and create it outside of this function.
| | 03:16 | So it's available anywhere on this timeline.
| | 03:19 | So I am going to say
var l is equal to Loader.
| | 03:22 | Okay so now in the onComplete,
I've already created the loader here.
| | 03:28 | So now I can just do what we did in
the earlier tutorial, which is to call
| | 03:32 | loadBytes, and then get e.target.data
and add that loader to the display list.
| | 03:41 | So we could test it to
make sure it's working here.
| | 03:46 | So now when I click Load, oh, and the
one thing that I did forget is I need to
| | 03:50 | call fr.browse in here, which is very
important or you are not going to see the
| | 03:56 | Browse dialog window.
| | 03:57 | Let's try that again and click Load and
now I've actually put an image in here,
| | 04:04 | of course, of my cat.
| | 04:05 | It's a JPEG file, so I'll just
select that and now it's actually this in.
| | 04:09 | Now you can tell that it's actually covering up
my UI components, so that's not going to work.
| | 04:14 | So I need to actually
just move this a little bit.
| | 04:16 | So before I add it to the display list,
I'll just say l.x and maybe we'll move it
| | 04:22 | over 50 pixels on the x. l.y. Let's move it 100
on the y and then it should be out of the way.
| | 04:30 | So I'll select that again and
probably moved a little too much.
| | 04:33 | Let's back that off a little bit.
| | 04:35 | So we'll say 25 and 50, and we load that in.
| | 04:43 | That looks about right now.
| | 04:44 | Okay, so now I have the image inside
of here. Now when I adjust this slider,
| | 04:48 | I need to apply that Shader filter to this image.
| | 04:52 | So inside of the onChange event, again,
this is fired anytime the slider is changed.
| | 04:57 | I am going to come down here and I
am going to set l.filters is equal to filter.
| | 05:07 | That's essentially going to set to
shader filter to be the filter for my loader.
| | 05:12 | I am going to try that now and let me
load in the image and now as I change it,
| | 05:20 | you can now see I can apply that
waterfall filter to this image.
| | 05:24 | Okay so now the last step is let's
say I get the effect I'm looking for,
| | 05:29 | maybe just ears and now I want to be able to
actually save this to the user's hard drive.
| | 05:35 | Again, this is going to be a similar
process to what we did in the last tutorial.
| | 05:39 | So now I want to come into the
saverClick function and now inside of here like
| | 05:45 | we did in the last one, we're
going to use the PNGEncoder class.
| | 05:48 | So I am going to need to import that.
| | 05:50 | So we're going to come up to the top
here and say import com.adobe.images and
| | 05:57 | I'll just import all the
classes in there, just to save time.
| | 06:01 | And when I come down here, I am
essentially going to follow that same thing.
| | 06:05 | I am going to create another
FileReference = new FileReference.
| | 06:14 | Now I need to create a BitmapData.
| | 06:16 | So var bmd for BitmapData is equal
to new BitmapData and now I want this to
| | 06:24 | be the same width and height as my image.
| | 06:27 | So for right now I'm just going
to figure out what it is instead of
| | 06:31 | actually trying to read it. So it's 500x334.
| | 06:34 | Okay now I actually want to
draw the contents of that loader.
| | 06:43 | So I am going to say bmd.draw and I
want to draw l. So now what I want to do is
| | 06:53 | I want to create a Byte Array, so ba
for ByteArray = PNGEncoder.encode and pass
| | 07:05 | in that bmd BitmapData.
| | 07:08 | Lastly, I just want to say fr.save to
initiate the Save action and I want to
| | 07:13 | save that ByteArray.
| | 07:15 | Okay so let's test it now.
| | 07:17 | So I am first going to load in my
image and I am going to manipulate it the
| | 07:22 | way I want it, so maybe just so the nose
streaks like that and then I want to save this file.
| | 07:29 | So I'll just save it to the
desktop as bea.png and click Save.
| | 07:36 | So now when I go out to the desktop
and we could see a PNG file has been
| | 07:42 | generated and we have our manipulated image.
| | 07:46 | So essentially this whole workflow of
taking the image locally from the user's
| | 07:50 | hard drive, manipulating it and
saving it back out, is now very easy to do.
| | 07:55 | Again, there are no real security
implications to this because as you can see
| | 08:00 | for both the Load operation and the
Save operation I was prompted to choose a
| | 08:05 | file to load and then prompted for a file
name and location in which to save my file.
| | 08:11 | But these new features of the
FileReference class make it much, much easier for
| | 08:15 | you to deal with your user's local files.
| | Collapse this transcript |
|
|
6. New Drawing APIsCopying graphic objects| 00:00 | So one of the areas in Flash Player
10 has been changed pretty dramatically
| | 00:04 | is the drawing API.
| | 00:06 | Now there has been a host of new APIs
that have been added as well as the
| | 00:11 | performance of the API has
also greatly been increased.
| | 00:15 | So in this tutorial, I am going to show
you one of the new features and that's
| | 00:18 | the ability to copy graphical objects
from one display object to another, which
| | 00:25 | can be really helpful so you don't have
to repetitively write drawing API code.
| | 00:30 | So I am just going to create a
blank ActionScript 3 document here.
| | 00:34 | Now everything we're going to be doing in
this is going to be in the Actions panel.
| | 00:38 | So I'll just create a locked actions
layer, like I always do for it to hold the
| | 00:41 | ActionScript and I'll open up the Actions panel.
| | 00:44 | So what I am going to first is I am just
going to create a just a random kind of
| | 00:49 | shape with the drawing API.
| | 00:51 | Now a little known thing that people
don't seem to use that often is when they
| | 00:55 | wanted to draw things using the drawing
API they will usually create a sprite.
| | 01:00 | Well, a sprite is good but if you just
want to draw a graphic the best thing to
| | 01:05 | use is the shape class.
| | 01:07 | The shape class is essentially just that.
| | 01:09 | You can just draw into it, but
you can't add event listeners to it.
| | 01:14 | You know it's not interactive, but
if you just need to draw graphics
| | 01:18 | actually there is a lot less
overhead than using a sprite.
| | 01:21 | So that's all I am going to do here in
this is create a new shape and now I am
| | 01:29 | going to set up the graphics object.
| | 01:31 | So I am going to s.graphics and I'll
set the lineStyle and I am just going to
| | 01:37 | set it to a thickness of five.
| | 01:39 | I'll leave everything else at the default.
| | 01:41 | So now I am just going to create a curve here.
| | 01:44 | So I am going to s.graphics.curveTo and
to this function we need to pass in two
| | 01:52 | control points, and pretty much it's
just going to be a random shape here.
| | 01:57 | So I am going to put in 200, 50 for the
control points and then for the anchor
| | 02:01 | points I am going to put in 150, 120.
| | 02:05 | Now this could be anything.
| | 02:06 | It's really not the purpose of this
tutorial to draw some masterpiece.
| | 02:11 | So now what I want to do is actually position
that shape object in the center of the stage.
| | 02:15 | So I am just going to s.x and since I
know the width and height of my stage,
| | 02:22 | I am just going to split them in half.
| | 02:23 | So I am going to put 275 for the x
and for the y, I am going to put 200.
| | 02:31 | Lastly I am going to add
that to the display list.
| | 02:35 | So if we test it now,
| | 02:37 | we can see I've this kind of
random curve here added to the display list.
| | 02:43 | Well let me actually put a button in here.
| | 02:46 | So I am going to go on to Components
panel and I am just going to go into
| | 02:50 | User Interface and just drag a Button out.
| | 02:54 | And I need to actually create a layer for this.
| | 02:55 | This will make it easier for you to see.
| | 02:58 | So I am going to drag that button now
and we'll give this an instance name.
| | 03:03 | I'll just call it copy and I'll
just change the label on this to Copy.
| | 03:13 | So now every time I click on this Button,
we're going to copy that shape or the
| | 03:17 | graphics that are in that shape and
we're going to rotate it to create kind of a
| | 03:21 | circular effect here.
| | 03:22 | So let me go back to the actions
and now I am going to set up an event
| | 03:27 | handler on the button.
| | 03:28 | So it has an instance name of copy.
| | 03:30 | So addEventListener and I want to
respond to MouseEvent.CLICK and I am going to
| | 03:41 | make the function name be onClick.
[00:03:44.00
So let's create that function and the
event type is going to be MouseEvent.
| | 03:49 | Not going to be returning anything here.
| | 03:54 | So every time I click on this button,
I essentially want to create a new shape
| | 03:58 | and I want to copy the graphics
object from this shape into this new shape.
| | 04:03 | So I am going to create a new
shape. I'll call it ns for new shape.
| | 04:07 | It's going to be of type Shape = new Shape.
| | 04:12 | So now in order to copy the graphics
from this shape into my new shape all I have
| | 04:17 | to use is the copyFrom
method of the graphics object.
| | 04:21 | So I can say ns.graphics.copyFrom and
now I pass in the graphics object that I
| | 04:30 | want to copy from and that is s.graphics.
| | 04:33 | Now what I want to do is actually
each time I click or create a new one
| | 04:37 | I actually want to rotate that shape a little bit.
| | 04:41 | So what I am going to is come out here
and just create a variable called count,
| | 04:46 | just make it of int, and every time
I create a new shape, I am going to
| | 04:51 | increment this value, so that I know
how much to rotate the new shape by.
| | 04:55 | So every time I come in,
I am going to say count += 10.
| | 05:01 | So it's essentially every new shape is going
to be rotated 10 degrees more than the last shape.
| | 05:06 | So to rotate it that's easy.
| | 05:07 | I can just say ns.rotation = count.
| | 05:12 | Okay so now again, just like I did
with this shape, I want to put it in the
| | 05:16 | center of the stage.
| | 05:17 | So ns.x = 275, ns.y = 200 and now
I just need to add it. addChild(ns).
| | 05:31 | So now let's test this and here we can
see I've my single shape and when I click
| | 05:36 | on the Copy button, it's
creating a new version of that shape.
| | 05:40 | Copying the graphics from the
original shape and rotating it.
| | 05:44 | So it kind of creates this pinwheel effect.
| | 05:48 | So again, the main benefit of this
copyFrom method is that, let's say I drew
| | 05:52 | something that actually was really
complex in shape and I didn't want to have
| | 05:57 | to redraw everything again
when I created another shape.
| | 06:02 | So I can quickly just copy the graphics
object from one display object to another.
| | Collapse this transcript |
| Creating bitmap strokes| 00:00 | So Flash Player 10 also brings with
it the ability to enhance the way in
| | 00:05 | which we draw strokes.
| | 00:07 | So we can now do bitmap and
gradient strokes using the Drawing API.
| | 00:12 | So in this tutorial I am going to
show you how we can do bitmap strokes.
| | 00:15 | So you can open up the bitmap_strokes.
fla file from the Exercise Files, and
| | 00:22 | essentially this is just a blank
ActionScript 3 document, but you can see in the
| | 00:26 | library I have this bitmap here.
| | 00:29 | And if I go to Properties and we
can see it's just a bitmap with
| | 00:33 | horizontal black stripes.
| | 00:35 | And it's at 1000x1000 here, and
also if we go into to the Properties and
| | 00:41 | if we come into Advanced, I have also
set it to Export for ActionScript with a
| | 00:46 | class name of lines.
| | 00:48 | So we are actually going
to attach this at runtime.
| | 00:51 | Okay so now I have a locked actions layer.
| | 00:54 | So I am going to highlight that first
keyframe in the actions layer and open
| | 00:57 | up the Actions panel.
| | 00:59 | Now like I did in the last tutorial we
are actually going to create a new shape
| | 01:02 | object in which to draw to, and as I
mentioned before this has less overhead
| | 01:07 | than using a sprite or a movie clip.
| | 01:09 | So I am going to say var s, it's going
to be of type shape is equal to new shape,
| | 01:16 | and one of the really important
things you are going to use in bitmap line
| | 01:20 | styles is that you first need to set
the thickness of the line using the
| | 01:25 | regular lineStyle method.
| | 01:27 | So I need to s.graphics.lineStyle and
I am going to give it a thickness of 10.
| | 01:33 | So again you need to set that first
or else when you set the bitmap style
| | 01:39 | for the line, if we didn't set the
actual line style first, you wouldn't have
| | 01:43 | any stroke whatsoever.
| | 01:44 | So now I am ready to actually
setup the bitmap style for the line.
| | 01:50 | So again I am going to
say s.graphics and now
| | 01:53 | I'm going to call
the lineBitmapStyle method.
| | 01:58 | Now to this we actually
pass in a bitmap data instance.
| | 02:03 | Now that line's image that I have in
the library actually contains bitmap data.
| | 02:08 | So all I need to do to pass into
this is say create a new lines object.
| | 02:13 | Now to the bitmap data I need
to pass in a width and height.
| | 02:17 | It doesn't really matter in
this particular situation.
| | 02:20 | So I can just pass in one and one.
| | 02:22 | It doesn't really make a difference here.
| | 02:24 | So now I have passed that in
to the lineBitmapStyle method.
| | 02:29 | And now finally I just need to add this shape
to the stage to the display list using addChild.
| | 02:35 | So I am going to create just a very
simple drawing application where wherever I
| | 02:40 | move my mouse on the stage
I'm going to draw a new line to.
| | 02:44 | So I am just going to say stage.
addEventListener and I want to respond to
| | 02:51 | the MOUSE_MOVE event, so MOUSE_MOVE,
and I am going to have that call a
| | 02:58 | function called onMove.
| | 02:59 | So anytime I move my mouse on the stage
it's going to call this onMove function.
| | 03:05 | So let's create that now, onMove, the
event object is of type mouse event and
| | 03:11 | we're not returning anything.
| | 03:12 | So all I need to do in here is
just the typical drawing API code.
| | 03:17 | So I am going to say s.graphics.
lineTo and I am going to draw a line to
| | 03:22 | wherever my mouse is.
| | 03:24 | So mouseX and mouseY.
| | 03:28 | And again any time you using the
mouse move event, you always want to call
| | 03:32 | updateAfterEvent on your event object here.
| | 03:35 | So e.updateAfterEvent.
| | 03:41 | So now we can test this and you can see
now wherever I move mouse it's actually
| | 03:47 | drawing the stroke using that
bitmap that I have in the library.
| | 03:53 | Now it's important that your
bitmap actually be large enough.
| | 03:56 | So if my bitmap was only say this wide,
| | 04:00 | I would actually see a break here,
so it wouldn't look exactly seamless
| | 04:04 | like you're seeing here.
| | 04:05 | So I need to make sure your bitmap
is large enough to cover whatever area
| | 04:10 | you're actually going be drawing, but
that's the basics of creating a bitmap
| | 04:15 | stroke in Flash Player 10.
| | Collapse this transcript |
| Drawing paths| 00:01 | So the traditional way of using the
Drawing API inside the Flash Player is that
| | 00:05 | you draw things one at a time.
| | 00:07 | So, typically you would do things like
move to, line to, line to, line to, where
| | 00:13 | essentially you're drawing each
segment of a shape separately.
| | 00:17 | Well, in Flash Player 10 we now have the
ability to also do object based drawing.
| | 00:23 | So this is the ability to essentially
create an array of points and then we can
| | 00:29 | draw them all at the same time as a path.
| | 00:32 | I am going to show you how
to do that in this tutorial.
| | 00:35 | So I am just going to create a blank
ActionScript 3.0 document and I will just
| | 00:40 | again like always, I'll
rename this to actions and lock it.
| | 00:45 | So what I am going to do here is just
open up the Actions panel. Everything
| | 00:48 | we're going to be doing is going to
happen inside the Actions panel here.
| | 00:52 | Now what you need to do in order to
create paths in Flash Player 10, you need
| | 00:56 | to actually use a new class or a new data type
that's been introduced which is called vector.
| | 01:02 | Now I also have a tutorial later in
this title which will go into a little more
| | 01:06 | detail about the vector class and data
type, but essentially a vector is just an
| | 01:11 | array that can only hold a single type of data.
| | 01:15 | So in the regular array in
ActionScript it can hold strings, number, movie
| | 01:21 | clips, all in a single array, while a
vector is just literally an array that can
| | 01:27 | only hold a single type
of data that you tell it.
| | 01:31 | The benefits are pretty great when
it comes to performance, because Flash
| | 01:35 | doesn't have to worry about testing what's
inside of that array to see what type it is.
| | 01:41 | It knows what type it is
when it's inside of a vector.
| | 01:44 | So the way in which you draw paths is
you need to create two vectors. One holds
| | 01:49 | the actual commands that you want to
use and this is common commands that you
| | 01:53 | use to like move to, line to, curve to and
then you need to create a second vector
| | 02:00 | which is essentially the
actual data for those commands.
| | 02:04 | So for move to and line to, it's going
to be a sequence of X and Y positions.
| | 02:10 | Then when you have those two vectors,
you then pass that to the drawPath method.
| | 02:14 | So let's go ahead and get started.
| | 02:16 | So I'm going to first create the
vector that contains the commands.
| | 02:20 | So I will just call it commands.
| | 02:22 | Now this is going to be of type vector.
| | 02:25 | Now here's where the syntax
is different than an array.
| | 02:28 | So we don't just need to data type it
to a vector; we also need to tell it what
| | 02:32 | type of object is going to
be held inside of that vector.
| | 02:35 | And to do that we put a period and then an open
angle bracket and then we put in the data type.
| | 02:42 | So the commands are just going to be
integers, so I am going to put an int.
| | 02:46 | Then I can close that angle bracket
and then I need to say = new Vector and
| | 02:53 | again put a period, angle bracket,
the datatype, close the angle bracket and
| | 02:58 | then close the vector.
| | 02:59 | So now I am just going to copy this line
and paste it underneath, and now I need
| | 03:05 | to create second vector that's going
to hold the actual data for the path.
| | 03:09 | So I am going to rename this one to pathData
and this is actually going to hold numbers.
| | 03:17 | So this could potentially be
floating point numbers here.
| | 03:20 | So let me change that to Number.
| | 03:22 | So, now I have created my two vector
objects. Now I need to fill it with the
| | 03:27 | actual information for my path.
| | 03:29 | So I am going to draw just a simple triangle.
| | 03:33 | So the vector has all the same
methods that you used to with an array.
| | 03:38 | So once you create a vector, you can
basically use it just like you use the array class.
| | 03:42 | So I am going to say commands.push, which is
going to push some values into that vector.
| | 03:50 | So now for the actual commands
we want to use constants from the
| | 03:55 | GraphicsPathCommand class.
| | 03:57 | So GraphicsPathCommand and then inside
of here, you can see constants for all
| | 04:04 | the main Drawing API
features that you're used to.
| | 04:06 | So first let's do a Move_To command
which is going to move us towards the
| | 04:11 | center of our movie.
| | 04:13 | Now essentially we just can copy this and just
put in the other commands that I am going to use.
| | 04:19 | So graphics command and I am
going to do three Line_Tos.
| | 04:24 | So I will paste that in, paste
another one in and paste that last one in.
| | 04:30 | So now, I have essentially put in
the commands that I am going to use to
| | 04:35 | draw this triangle.
| | 04:36 | So now I need to do a similar
thing for the actual path data.
| | 04:40 | So I am going to say pathData.push
and now here we are going to pass in
| | 04:47 | obviously the X and Y
positions for each of these calls.
| | 04:51 | So first the Move_To, I am going to
put it into the center of my Flash movie,
| | 04:55 | which is 275x200, and now I just need
to provide the X and Y coordinates for
| | 05:01 | these Line_To calls.
| | 05:03 | So I am going to go to (175, 100), then
I am going to go to (370, 100) and then
| | 05:12 | finally to (275, 200), which is going to
bring me back to the center of my movie.
| | 05:19 | So now at this point you may be
asking, well, why would I do this?
| | 05:22 | Why wouldn't I just create actual Move_To
and Line_Tos using the typical Drawing API?
| | 05:29 | Well, the performance is actually a
lot greater when you use this method.
| | 05:33 | So essentially you're creating all of
these values for the shape, but you are
| | 05:38 | only ever calling the Drawing API one
time and that's what I am going to show
| | 05:42 | you in a second, but this has much
better performance than repetitively drawing
| | 05:47 | each segment of a path separately.
| | 05:50 | So now I have this data here. Now I need
to just create a shape that I can draw into.
| | 05:54 | So I am going to say
var s: Shape = new Shape.
| | 06:01 | Now I am going to set the line style of this.
| | 06:05 | So s.graphics.lineStyle and I will
just give it a line thickness of 5.
| | 06:13 | Now I want to fill this just so we can see it.
| | 06:15 | So I am going to say s.graphics
beginFill and I will just give it a color of red.
| | 06:21 | So I am ready to actually draw this path
using these two vectors that I created.
| | 06:28 | So to do that, it's simple.
| | 06:30 | All I have to do say s.graphics.drawPath.
| | 06:35 | Now it's asking me to pass in
the commands and the actual data.
| | 06:38 | So I will pass in that commands
vector and then the pathData.
| | 06:44 | Now finally all I need to do is to
add this shape to the display list.
| | 06:48 | So I will just say addChild(s).
| | 06:51 | Now if I test it, you can see
there's my red triangle on the stage.
| | 06:57 | So now let's say this was a
really complex object or drawing.
| | 07:01 | So I wanted to actually
change some of this data.
| | 07:05 | Well, let me just create a simple
mouse move event here on the stage.
| | 07:09 | So stage addEventListener and I want
respond to mouse event, the Mouse_Move event,
| | 07:16 | and I am going to have this
called a function called onMove.
| | 07:19 | I will create that function really quick.
| | 07:23 | The event object is going to be
of type mouseEvent and we are not
| | 07:28 | returning anything.
| | 07:30 | So what I want to do is each time I
come into the Mouse_Move event, I want to
| | 07:33 | clear whatever graphics are
currently inside of this shape.
| | 07:37 | So to do that, it's simple.
| | 07:39 | I will just say s.graphics.clear,
and this actually hasn't been
| | 07:44 | changed in Flash Player 10.
| | 07:46 | It's still the way in which
you clear graphic objects.
| | 07:49 | But when I clear a graphic object,
remember that it also clears the formatting.
| | 07:53 | So I need to repeat these two lines, so that
I can reset the line style and the fill style.
| | 08:02 | So now what I want to do is to actually
change some of the points inside of this
| | 08:07 | pathData vector, so that it
actually changes the shape.
| | 08:10 | So here is where I can just manipulate
this vector and all I am going to do is I
| | 08:15 | am going to change this point to be my
mouse X and Y instead of being hardcoded.
| | 08:22 | So again I can access
vectors just like I do arrays.
| | 08:25 | So just say pathData, then I want to go
to the first element in that array which
| | 08:30 | is always represented by zero and
I want to set that equal to mouseX.
| | 08:37 | Then pathData, the second element.
| | 08:40 | I want that to be mouseY.
| | 08:41 | So now I've manipulated that
vector and now all I have to do is just
| | 08:46 | simply redraw that path.
| | 08:50 | Again since I'm using a
Mouse_Move event, you always want to call
| | 08:55 | updateAfterEvent just so you
have a good performance here.
| | 08:57 | So it forces a refresh.
| | 08:59 | Now if I test it, you can see that
as I move around it's actually, that
| | 09:04 | particular piece of pathData is
actually being controlled by my mouse position.
| | 09:08 | And again I didn't have to
repetitively again call Line_To, Line_To, Move_To.
| | 09:13 | But the main benefit of doing this
again is performance, because while we are
| | 09:17 | creating all these Line_Tos a Move_Tos
here, we are only ever calling the actual
| | 09:22 | Drawing API a single time and it has
a lot better performance than doing
| | 09:27 | multiple calls to the Drawing API.
| | Collapse this transcript |
| Drawing triangles| 00:00 | So, one of the most important
enhancements to the Drawing API in Flash Player 10
| | 00:05 | is the new API that
allows you to draw triangles.
| | 00:08 | So if you've done 3D work before, you
know that 3D objects, when you boil them
| | 00:13 | down are nothing more than triangles.
| | 00:16 | So this API is one that most people are
probably not going to use on a daily basis.
| | 00:21 | It's more of an advanced API, but if
you're creating maybe some complex 3D stuff
| | 00:26 | or you're writing a 3D engine, this API
is going to come in tremendously handy for you.
| | 00:32 | So I want to create a new
blank ActionScript 3.0 document.
| | 00:35 | I will just rename this
layer to Actions and lock it.
| | 00:39 | We're going to be doing everything
inside of the Actions panel in this tutorial.
| | 00:43 | So the first thing I want to do like I
have done in previous tutorials in this
| | 00:47 | chapter is just create a shape
in which to draw my graphics into.
| | 00:51 | So I am going to create a new
shape called S. Now I'm just going to
| | 00:56 | position this a little bit.
| | 00:57 | So I am just going to say s.x = 125
just to move it on the X-axis a little bit.
| | 01:03 | s.y = 50 just to push it down and
finally I need to add this to the display list.
| | 01:11 | So I am going to say addChild(s).
| | 01:15 | In the last tutorial where we were actually
drawing a path, we had to create two vectors.
| | 01:19 | Well, when you draw triangles, it's a very
similar thing. You need to create two vectors.
| | 01:25 | I'll show you in the next tutorial when
you actually want to map textures onto
| | 01:29 | these triangles, you
actually create a third vector.
| | 01:32 | But for right now we need to create
two vectors, one contains the actual
| | 01:36 | points for where I want to draw the
triangle and then the second is what's
| | 01:41 | known as indices and it basically
says for a certain triangle, which data
| | 01:47 | points do I want to use.
| | 01:49 | So, I am going to first create a vector
called Points and again this is going
| | 01:54 | to be of type vector and then I need to
data type the type that's going to be
| | 01:58 | inside the vector and that's going to
be of type Number = new Vector, and again
| | 02:04 | I need to do the same thing here.
| | 02:06 | It's going to be of type Number and now I
am just going to copy this and paste it in.
| | 02:13 | This one is actually going to be the indices.
| | 02:16 | So I will rename it to indices and
this can just be an int data type, since
| | 02:23 | these aren't going to be floating point values.
| | 02:25 | So now I have created the two vectors.
| | 02:27 | Now I actually need to populate it
with the data for these triangles.
| | 02:31 | So I am going to draw two triangles that
are essentially going to make up a square.
| | 02:37 | So what I want first to do is
deal with the points vector.
| | 02:39 | So I am going to push a set of
values into the points vector.
| | 02:43 | Now these values are going to be the
actual points that make up the triangles.
| | 02:49 | So I'm going to start at 0.00 and again
this is the location inside of my shape.
| | 02:56 | So I am going to a start at the upper
left-hand corner at 00, then I am going to
| | 03:00 | go over to (300, 0).
| | 03:05 | So I am going to make a
triangle that's 300 pixels wide.
| | 03:07 | So now I am along the top of the triangle.
| | 03:11 | Now I am actually going to go to (0, 300).
| | 03:15 | So now this is bringing it down to the
bottom left, so you can kind of visualize
| | 03:20 | the triangle that I am creating here.
| | 03:22 | Now what I want to do is
for the second triangle,
| | 03:27 | all I need to do is to provide one
point and that's because the second triangle
| | 03:32 | can actually share some of the other
points that I've created for this first
| | 03:37 | triangle and this is where
the indices actually come in.
| | 03:40 | So the only point that I need to
create for the second triangle is the
| | 03:46 | bottom right-hand corner, because I can use
the existing points from that first triangle.
| | 03:52 | When we actually test this, I'll be
able to explain it a little bit better.
| | 03:55 | So all I need to do is to put in a
single point for that second triangle which
| | 03:59 | is the bottom right-hand corner.
| | 04:00 | So now I need to put in the values
for the indices, so again indices.push.
| | 04:08 | Now what I'm saying is for each point
in the triangle, I want to provide a
| | 04:14 | number that references which point in
the points vector I actually want to use.
| | 04:20 | So for the first triangle
I want to use 0, 1, and 2.
| | 04:25 | So, again this is the first point
which is referenced by 0, here is the
| | 04:31 | second one which is referenced by 1, and
here is the third one which is referenced by 2.
| | 04:36 | So this is essentially just saying for
each point in the triangle which data
| | 04:40 | point up here do I want use?
| | 04:43 | Now for the second triangle, again I
want to reuse some of these data points.
| | 04:48 | So what I am going to do is put in 1,
so I want to start with this one
| | 04:53 | right here, 2 and then 3.
| | 04:57 | So for this second triangle,
I'm reusing two of the points up here.
| | 05:02 | The only one I'm adding is that
third one which basically creates the
| | 05:06 | bottom right-hand corner.
| | 05:07 | But let's finish this up so we can
actually see it, so I can explain it better.
| | 05:11 | So now before we actually draw this
triangle, I need to set up the graphics
| | 05:15 | object like we've done before.
| | 05:18 | So I am going to say beginFill.
I am going to give it a red fill.
| | 05:22 | Now I am going to give it a stroke just
so we can visualize the actual triangles.
| | 05:27 | So I am going to say lineStyle and
I will just give it a thickness of 1.
| | 05:33 | And now we are ready to
actually draw these triangles.
| | 05:35 | So I am going to say s.graphics and
now I just use the drawTriangles method.
| | 05:42 | And into this I need to pass in those
two vectors that I created, first the
| | 05:46 | points and then the indices.
| | 05:49 | So let's test this now.
| | 05:51 | Now you can see here is my two
triangles and we can tell because of the stroke
| | 05:56 | how these are setup.
| | 05:57 | So when we actually look at the data
points now, here's this first point which
| | 06:03 | is at (0,0), then I go over to
(300, 0) which brings me here.
| | 06:08 | Then I go to (0, 300)
which brings me down to here.
| | 06:13 | So that essentially
finishes this one triangle here.
| | 06:17 | Now the second triangle, I didn't have
to put in these two points here, because
| | 06:21 | I already have them.
| | 06:23 | So the second triangle can share
the points with this first triangle.
| | 06:27 | The only point I needed to add for the
second triangle is this one down here.
| | 06:32 | So this method of sharing points
between different triangles greatly
| | 06:37 | decreases the amount of overhead
and you could continue now building an
| | 06:42 | entire mesh in this fashion.
| | 06:44 | So the indices are essentially saying
for this triangle I want to use this
| | 06:49 | point, this point, and this point.
| | 06:53 | Then for the second triangle, I want to
use this point, this point, and this point.
| | 06:59 | Then we simply pass these two vectors
to the drawTriangles method to draw them.
| | 07:05 | So this was drawing triangles without
any textures on them, but the real power
| | 07:09 | comes in when you want to apply a
bitmap texture to your triangles and that's
| | 07:14 | what I am going to show
you in the next tutorial.
| | Collapse this transcript |
| UV texture mapping| 00:01 | So in the last tutorial I should you how
to used the new drawTriangles method to
| | 00:05 | actually draw some
triangles made up of two vectors.
| | 00:10 | Well, in this tutorial we are going to
expand on that and actually map a bitmap
| | 00:14 | texture to those triangles, and
that's really where the power of this new
| | 00:17 | triangle API comes in.
| | 00:19 | So you're going to open up the uv.fla
file from the Exercise Files and this is
| | 00:25 | essentially the exact thing
that we created in the last movie.
| | 00:29 | So we have our shape, we have our points and
indices, then we simply draw the triangles.
| | 00:35 | Now I've also included an image of
my cat and it's in the library here.
| | 00:40 | If we go to Properties, we can see
it's set to Export for ActionScript with
| | 00:45 | a class name of bea.
| | 00:48 | So let's go back to the ActionScript.
| | 00:51 | So what am I going to do first of all
is we need to create like I mentioned
| | 00:55 | before another vector which
contains be uv texture points.
| | 01:01 | I will explain what that is in the
second, but first let's just create that.
| | 01:05 | So I am just going to copy this vector and
paste it in and I am just going to call it uv.
| | 01:12 | Now the type that it's going to hold is
a number, because these can actually be
| | 01:18 | floating point numbers rather than integers.
| | 01:21 | Now here where I push the actual points
of the triangle on to the indices I want
| | 01:26 | to do the same thing for the uv points.
| | 01:29 | So I am going to say uv.push.
| | 01:33 | So the way in which uvs work is I have a
bitmap which is that images that's in the library.
| | 01:39 | Now for each of the points that are
inside of this vector, I need to tell Flash
| | 01:44 | which parts of that image that's in the
library map to each of these points, and
| | 01:50 | the way in which we do that is
providing a number between zero and one.
| | 01:54 | So let's take the X for example.
0 would be the left side of the image,
| | 01:59 | 1 would be the right edge of the image
and I could map to smaller points, if I
| | 02:05 | just provide a decimal like 0.5 would
actually be the center of that image
| | 02:10 | that's in the library.
| | 02:11 | So for this first point, remember
that's the upper left-hand corner of the
| | 02:16 | first triangle, that maps to the upper left-
hand corner of the image that's in the library.
| | 02:22 | The second point, which is (300, 0),
that's the top right-hand corner of my square,
| | 02:28 | which is made up of the two
triangles, that's going to be the right edge
| | 02:34 | on the X-axis and 0 on the Y-axis.
| | 02:37 | So it's going to be the upper right-hand
corner of the image that's in library here.
| | 02:42 | Now for the third point that's (0, 300)
and now the uv points for that are
| | 02:49 | going to be (0, 1).
| | 02:52 | So this is an immediate bottom left-
hand corner of the image in the library.
| | 02:58 | Now the last point which is (300, 300),
well, that's going to be obviously at
| | 03:03 | (1, 1) which is the bottom right-
hand corner of the image in the library.
| | 03:08 | So again we are just telling it, each of
these points, where it is actually mapped to in
| | 03:13 | the bitmap that we are going
to texture this with. Okay.
| | 03:15 | So now if I come down, here where
I'm setting up the graphics object I am
| | 03:21 | creating a beginFill.
| | 03:23 | So this is a solid color fill.
| | 03:24 | What I need to do is I need to
change that to beginBitmapFill.
| | 03:31 | And now I need to give some bitmap
data of what I want to fill it with.
| | 03:35 | So I have that image in the
library with an export name of bea.
| | 03:38 | So I am going to say new bea and I am
going to give the width and height of 300,
| | 03:44 | because that's the width and height of
the actual square that I'm creating out
| | 03:48 | of those two triangles.
| | 03:49 | So I can close this now and
I leave the lineStyle at 1.
| | 03:54 | Now here under drawTriangles before
I only passed in the points in the
| | 03:59 | indices. Well, now we actually have uv
texture coordinates, so I just need to
| | 04:03 | also pass in that uv vector.
| | 04:06 | So let's go ahead and test this now
and we can see that image has now been
| | 04:11 | textured to those two triangles.
| | 04:13 | Well, we can visualize this a little
bit better if we actually manipulate the
| | 04:18 | points of that triangle.
| | 04:21 | So what I am going to do is to
create an event listener on the stage.
| | 04:26 | So addEventListener.
| | 04:27 | I am going to respond to the Mouse_Move
event, call a function called onMove
| | 04:32 | and I can create that function now.
| | 04:35 | The event object is going
to be of type mouseEvent.
| | 04:41 | So all I want to do inside of here is
much like we did when I showed you how to
| | 04:45 | draw paths, we are just simply going
to first clear the graphics object.
| | 04:51 | So graphics.clear and then since it
removes the formatting, we just need to
| | 04:57 | reapply this and now inside of here
we basically want to change two of the
| | 05:04 | points in these triangles.
| | 05:06 | I am going to change the fourth
and the fifth point, which is the
| | 05:08 | bottom left-hand corner.
| | 05:11 | So all I have to do to do that is to
say points and it's actually the fifth and
| | 05:16 | sixth point, but it's
represented by four and five.
| | 05:18 | I am going to say s.mouseX.
| | 05:23 | Then point,s the sixth
element is equal to s.mouseY.
| | 05:29 | Now all I have to do is just to
call that drawTriangles method again.
| | 05:33 | Now let's test that and now
you can see what's happening.
| | 05:38 | I have the image that's actually mapped
into these two triangles, but because I
| | 05:43 | have those uv texture coordinates as
they move this lower left-hand corner of
| | 05:47 | this point, the texture is always kind
of contorting itself to fit within this
| | 05:53 | square, even when I go outside of here,
you can get some kind of funky effects.
| | 05:56 | But this is how you can see
how an actual 3D engine works.
| | 06:00 | If I wanted to rotate this on the Y-
axis, well, I could manipulate this point
| | 06:05 | and the upper left-hand corner point,
continuously animate those to create some
| | 06:10 | animation, but again once you set up a
texture coordinates, any adjustments that
| | 06:15 | you make to the actual triangle points,
that texture will always adjust itself
| | 06:20 | to fill in between those triangles.
| | Collapse this transcript |
|
|
7. Additional FeaturesThe new Vector data type| 00:00 | So if you watched the chapter on the
changes to the drawing API, you'll have
| | 00:04 | seen the use of vectors come up often.
| | 00:07 | So we wanted to talk a little bit
more about this new vector data type.
| | 00:11 | So vectors are essentially like the
regular arrays that you have in ActionScript
| | 00:15 | 3.0 except that they can only
contain a single type of data.
| | 00:19 | So in a regular array I could have string,
an integer, a movie clip. Inside of a vector
| | 00:25 | I can only have a single type.
| | 00:27 | The benefits of this are essentially
two things. The first is type safety.
| | 00:32 | So if you want to make sure you only
have a single type of data, using a vector
| | 00:36 | is a way to do it, because it will
actually give you errors if there are
| | 00:39 | multiple types of data in it.
| | 00:41 | The other big benefit is performance.
Since you are telling a vector that you're
| | 00:46 | only to put a single type of data into it,
Flash doesn't have to do as much work
| | 00:51 | when it comes to dealing with it.
| | 00:52 | It doesn't have to test the contents to
see what type of data it is and that can
| | 00:56 | greatly increase performance.
| | 00:58 | So I am just going to create a blank
ActionScript 3.0 document and just open
| | 01:01 | up the Actions panel.
| | 01:03 | The syntax for creating a
vector is a little bit strange.
| | 01:07 | It looks a little different than
anything you've seen before in ActionScript 3.0.
| | 01:11 | So I will just create it, I will
call is v. The first part is simple.
| | 01:15 | I data type it to vector.
| | 01:17 | That's data typing the actual v variable here.
| | 01:20 | But I also need to specify data type
for the type that's going to be inside the
| | 01:24 | vector and for that I hit a
period and an open angle bracket.
| | 01:29 | Now for this I can put in any data
type, but let's say I put in integer.
| | 01:33 | So now I've created a variable called
v which is of type Vector and I've also
| | 01:38 | said that inside of that
vector can only have integers.
| | 01:42 | So again I create it with a new keyword.
| | 01:44 | So I just say = new Vector, and again I use
the .< to tell it that that's an integer.
| | 01:52 | So now I can use this vector data type
pretty much the same exact way that I
| | 01:58 | deal with regular arrays.
| | 02:00 | So I can say v, go to that first element
in the array, put in 200, because again
| | 02:06 | it's expecting an integer, v, I will
put in the second element, then put in 50,
| | 02:12 | and now I can trace out this vector.
| | 02:14 | You can see down here in Output panel 200, 52.
| | 02:19 | So very similar to using a regular array.
| | 02:22 | Now let's say I came in here and I changed
that second element to a "Hello," a string.
| | 02:28 | Now test it and you can see I've got
a compile error down here and implicit
| | 02:34 | coercion of a value of type
String to an unrelated type int.
| | 02:38 | So here it's not allow me to compile,
because they're two different types of
| | 02:43 | content now inside of this vector.
| | 02:45 | So if change that back to 50, I am now
complying with essentially the definition
| | 02:49 | of what a vector is.
| | 02:51 | So now there are a couple of
parameters I can actually send to the
| | 02:54 | constructor for the vector.
| | 02:56 | The first is if I want to have a
predefined number of elements in the vector and
| | 03:02 | I don't want to go over that.
| | 03:04 | So say I only want to have two elements
in this vector, I can put in a 2 there
| | 03:09 | and I can say whether this
is a fixed number or not.
| | 03:13 | If I say true for that second
parameter here, I'm not going to be able to add
| | 03:18 | more than two items to this vector.
| | 03:21 | So if I test this, we can see this
works, because I only have two elements.
| | 03:25 | If I come down here and add
another element, let's say 30,
| | 03:30 | we can see here now I get a runtime error
that says the index 2 is out of range 2.
| | 03:36 | So it's essentially trying to go to
the third element, but I told this vector
| | 03:40 | that it could only hold
two elements here, not three.
| | 03:44 | So those are just some of the things to
look out for when you're dealing with vectors.
| | 03:48 | Let me get this back to the start here.
| | 03:51 | Now another thing that's important to
note is let's say I do something like this.
| | 03:55 | Say for the type I want to say DisplayObject.
| | 04:00 | Now remember DisplayObjects are
things like movie clips, sprites.
| | 04:03 | So let's say I put inside of here Sprite.
| | 04:07 | We can see I get another runtime error that
basically is saying that it can't do that.
| | 04:12 | So even though Sprite is a subclass of
DisplayObject, I can't actually put that in here.
| | 04:18 | So whatever value I put here
needs to actually be put here.
| | 04:22 | So these need to be identical.
| | 04:24 | So it doesn't care that Sprite is a
subclass, because it needs to be exactly the
| | 04:29 | same when I do that.
| | 04:31 | So again that's the basics of
working with the Vector class.
| | 04:33 | It's not really much different at all
from the Array class, but anytime you have
| | 04:38 | an array and it's only going to hold a
single type of data, you should always use vector,
| | 04:43 | because it's always going
to run faster and be more performing.
| | Collapse this transcript |
| Device font animation| 00:00 | So another new feature in Flash
Player 10 that's sure to make every Flash
| | 00:03 | developer happy is that now device
fonts can do all of the same things that
| | 00:08 | embedded fonts can do.
| | 00:10 | So whether that be changing
the opacity or animating them.
| | 00:14 | In previous versions of the Flash
Player, essentially, you couldn't do any of that
| | 00:18 | and it was pretty frustrating to
deal with and it led to a lot of times
| | 00:21 | where you embedded fonts, simply
because you needed to animate them.
| | 00:25 | So I am going to create a blank
ActionScript 3 document here and I'll just get
| | 00:29 | the Text tool and I will put in some text,
I will just put Hi there, and let me
| | 00:36 | make this a Dynamic Text field.
| | 00:39 | So it already is here, Dynamic text,
and I am using just a device font.
| | 00:44 | So I am just going to use the Sans device font.
| | 00:46 | And I have a pretty large
size here just so we can see it.
| | 00:51 | So now, what I want to do is first
let's change the Publish Settings to Flash
| | 00:55 | Player 9, so we can kind
of see how it was before.
| | 00:57 | So we go into the Profile, changing
the player to Flash Player 9 and click OK.
| | 01:02 | So, now I am going to take this text
field, I am going to give an instance
| | 01:06 | name of dt, so I can reference it from
ActionScript and I will just open up the Actions panel.
| | 01:11 | So now, I am just going to
create an event listener.
| | 01:14 | I am going to create an enter
frame event, so event.ENTER_FRAME.
| | 01:18 | I have it call a function called loop.
| | 01:20 | I will create that now.
| | 01:28 | Okay so inside of here, all I want to do
is to fade out that dynamic text field.
| | 01:33 | So I am going to say dt.alpha and every
time I come into the Enter frame,
| | 01:39 | I am going to subtract a certain
amount and I am going to subtract 0.01.
| | 01:44 | Remember in ActionScript 3
alpha values go from 0 to 1, not 0 to 100.
| | 01:48 | Okay, so now that I have this, let's go
ahead and test the movie and we can see
| | 01:53 | it's not fading at all, and here is
the problem again with Flash Player 9.
| | 01:57 | It's that it can't do that with device fonts.
| | 02:01 | So, now let's go ahead and let's
change the Publish Settings back to Flash
| | 02:05 | Player 10, click OK and now test the
movie and now you can see our device font
| | 02:12 | is actually fading out the way that it should.
| | 02:15 | So again, just a small feature but it's
one of those things that developers and
| | 02:19 | designers have wanted for a long time
and it's finally here in Flash Player 10.
| | Collapse this transcript |
| Enhanced hardware acceleration| 00:00 | So, one of the things that the Flash
Player team is always trying to do is to
| | 00:04 | offload as much of the processing as
possible to the user's graphics hardware.
| | 00:10 | Now this is particularly challenging
because Flash Player has to be so cross-platform.
| | 00:14 | I mean it can't really be seen
to have any difference among the
| | 00:17 | different platforms.
| | 00:19 | But in Flash Player 10 there are
some new features as relate to hardware
| | 00:22 | acceleration that I want to talk about.
| | 00:25 | So, essentially we have two new Wmodes.
| | 00:27 | Now WModes are things that
you put in your HTML embed code.
| | 00:32 | Now in Flash CS4 in your Publish
Settings, you also have a UI to select one
| | 00:37 | of these new WModes.
| | 00:38 | So the two modes are GPU and Direct and
I'll talk in a second about kind of what
| | 00:44 | the differences are between those.
| | 00:47 | So, again the primary use of these two
new WModes is to try to take advantage of
| | 00:51 | the user's graphics processor and of
course that frees up more resources for you
| | 00:56 | to do cool stuff in your Flash projects.
| | 00:59 | So, there's always a
software rendering fallback.
| | 01:02 | So, if you enable one of these
WModes and the user doesn't have graphics
| | 01:06 | hardware that's capable of supporting it,
it's always going to go back to the
| | 01:10 | traditional software
rendering that the Flash Player does.
| | 01:13 | Now one of the things to
note is it's not always faster.
| | 01:17 | In fact in many, many cases it will
actually cause your content to run slower.
| | 01:23 | So, these two new WModes, you don't
just want to enable them all the time
| | 01:27 | thinking your stuff is going to run
faster. You need to be careful about the
| | 01:30 | situations in which you use them.
| | 01:32 | So let's now take a look at WMode =
Direct. So the Direct WMode essentially
| | 01:38 | tries to use the fastest rendering
path to the screen that there is possible.
| | 01:43 | Now, when it does this, it
actually bypasses the browser rendering.
| | 01:48 | So any additional things where the
browser kind of interacts with the Flash Player
| | 01:52 | and these are things like compositing
HTML menus over your Flash content,
| | 01:58 | things like that will actually
be ignored by the Flash Player.
| | 02:01 | So, the main use for WMode =
Direct is for basic video playback.
| | 02:06 | So if you are playing back say some HD
video, there's not a lot of other things
| | 02:10 | going on in your Flash movie, you are
going to see some enhanced performance if
| | 02:14 | you use WMode = Direct.
| | 02:16 | But primarily this is only
good for displaying video.
| | 02:20 | And again, just keep in mind that you
are going to lose some features like HTML
| | 02:24 | menus and things like that.
| | 02:25 | Wmode = GPU, in this Wmode, it tries
to do all of the compositing using the
| | 02:32 | user's graphics card.
| | 02:34 | Whenever possible any video is
actually scaled with the GPU.
| | 02:39 | On Windows, the technology it uses to do
this hardware acceleration is Direct 3D
| | 02:44 | and on OS X and Linux it uses OpenGL.
| | 02:48 | So, this is again a good step forward
in hardware acceleration for the Flash Player,
| | 02:53 | but this definitely is not an
enhancement that is necessarily going to
| | 02:57 | make your content run faster.
| | 02:59 | In certain cases, it definitely will,
but you definitely need to be careful
| | 03:03 | and just like always, you want to test
your content when you use one of these
| | 03:07 | new WModes just to make sure you
actually are seeing a performance increase
| | 03:11 | rather than a decrease.
| | Collapse this transcript |
| New cursor features| 00:00 | So Flash Player 10 also includes
some enhancements to the mouse class and
| | 00:05 | specifically when you're dealing with cursors.
| | 00:08 | So we can now at runtime
programmatically change the cursor type.
| | 00:12 | Now I will show you how to
do that in this tutorial.
| | 00:14 | So I am going to create just a blank
ActionScript 3 project and I am just going
| | 00:18 | to open up the Actions panel.
| | 00:20 | We will do everything here in the
Actions panel and what I am going to do is
| | 00:24 | just create a simple application
that's going to just basically cycle through
| | 00:28 | the different cursors.
| | 00:30 | So I am going to create a timer.
| | 00:32 | So var t = Timer, and to the
constructor I need to pass in how often I want
| | 00:39 | this timer to fire.
| | 00:40 | I will just put in 100
milliseconds, so 10 times a second.
| | 00:44 | Then I need to add an event
listener of TimerEvent.TIMER.
| | 00:50 | I'll have it call a function called onTimer
and then I'll just start that timer going.
| | 00:55 | So let's create that function
onTimer, and I am not going to be
| | 01:02 | returning anything.
| | 01:04 | I want to actually cycle
through the different cursor types.
| | 01:07 | So to do that, I am going
to create an array down here.
| | 01:10 | I'll just call it C and datatype it to
an array, and now I will just pass in the
| | 01:16 | different cursor types.
| | 01:17 | So the different cursor types are in a
class called MouseCursor, dot, and then we can
| | 01:22 | see the different cursor
types that we can choose.
| | 01:25 | So I am going to have MouseCursor.
ARROW, MouseCursor.BUTTON, which is
| | 01:32 | essentially just the hand cursor, and
then we will do one more MouseCursor.IBEAM,
| | 01:39 | which is the text editing cursor.
| | 01:41 | So I am going to close that array, and
now every time we come into this timer,
| | 01:45 | I am going to change the actual cursor
that the user sees and this is the new
| | 01:50 | feature that's in Flash Player 10.
| | 01:51 | So to do that, all I have to do is to
say Mouse and then I want to set the
| | 01:56 | cursor property of the mouse.
| | 01:59 | So what I need to do is to pick
a random element from this array.
| | 02:04 | So let's do that really quick.
| | 02:06 | So I am going to say Math.random()* 3.
| | 02:10 | That will give me a
random number between 0 and 3.
| | 02:14 | Now, in order to make this be a random
integer between 0 and 2, which is what I
| | 02:19 | need for an array, I am just going
to wrap that in a Math.floor call.
| | 02:25 | Then now I just want to say C and I want
to go that random element in that array.
| | 02:31 | So if I test this now, you can see that
as I hold my mouse there, it's actually
| | 02:36 | creating a random cursor or switching
to a random cursor 10 times a second.
| | 02:41 | So this could be really good if you want
to confuse your users as to what's going on.
| | 02:45 | You could be just randomly swapping out
the cursor type as they were trying to
| | 02:49 | interact with your application.
| | 02:51 | But again the main purpose of this is
let's say you wanted the text editing
| | 02:55 | I-beam cursor when you went
over a button for some reason.
| | 02:59 | You could now do that pretty easily.
| | 03:01 | So I could even make this faster, and
you can see this thing is flickering on
| | 03:05 | and off pretty quickly here.
| | 03:06 | So again, that's just a simple new
feature in Flash Player 10, but it could come
| | 03:10 | in handy if you want to
dictate a specific cursor.
| | Collapse this transcript |
| Speex audio codec| 00:00 | So Flash Player 10 also brings with it
a new microphone codec that you can use
| | 00:05 | which is called Speex.
| | 00:06 | Now the old microphone codec, which is
Nellymoser, that is still in the Flash Player.
| | 00:12 | So this is an additional
codec that you can choose.
| | 00:15 | So the benefits of Speex, and you can
tell by the name that it's specifically
| | 00:20 | geared for speaking.
| | 00:21 | And it does things like detect when
there is no speaking going on and will
| | 00:26 | actually reduce the bandwidth because
there is nothing that actually needs to be
| | 00:29 | sent if the person is not speaking.
| | 00:31 | So it's a better quality codec to use
if you're just doing voice, which you
| | 00:37 | traditionally are when you're
dealing with the microphone.
| | 00:39 | But again, it has some nice kind of
advanced features specifically for speaking.
| | 00:44 | So I will just quickly show
you how you would enable that.
| | 00:46 | So I just created a blank
ActionScript 3.0 document.
| | 00:49 | I am just going into the Actions panel
and traditionally when you're setting up
| | 00:52 | a microphone in Flash, you just
create a variable of type Microphone.
| | 00:57 | And then you call the Microphone.
getMicrophone static function and you could
| | 01:03 | pass in an index if you have multiple
microphones, but to get the default you
| | 01:06 | just pass in nothing.
| | 01:08 | So this is still the way
you set up a microphone.
| | 01:10 | So the new step in which you could do is
you can actually say Microphone.codec =
| | 01:21 | SoundCodec, and here you can
choose between Nellymoser and Speex.
| | 01:26 | Now Nellymoser is the default so
there's really no need to set that unless
| | 01:31 | you've previously set it to Speex
and now you want to change it back.
| | 01:34 | But to set up the Speex codec that's all you do.
| | 01:36 | So essentially you just set the codec
static property of the Microphone class
| | 01:40 | equal to a constant from the
SoundCodec class. In this case it's Speex.
| | 01:45 | So again, you always want to when you
are trying different codecs test it out
| | 01:49 | with whatever application you're using it for.
| | 01:51 | But again, if you're doing just a lot
of speaking stuff, you will find that the
| | 01:55 | bandwidth can be greatly reduced
if you use the new Speex codec.
| | Collapse this transcript |
| Partial full-screen keyboard support| 00:00 | So one of the major limitations of
previous versions of the Flash Player were
| | 00:04 | that when you were in the browser
and you went into Full Screen mode,
| | 00:08 | you couldn't accept any keyboard input.
| | 00:11 | This basically was there for security
reasons because theoretically somebody
| | 00:16 | could launch a full screen Flash
application that looked like the user's
| | 00:20 | browser, and then direct them to
enter in their personal details and
| | 00:25 | basically things like that.
| | 00:26 | Well, in Flash Player 10 that
restriction has been lessened a little bit, and
| | 00:31 | we can now actually accept non-
printing keys into our Flash application.
| | 00:36 | So these include the
Spacebar and the arrow keys.
| | 00:39 | So now it's much more possible to
create a full screen game in the browser
| | 00:44 | using Flash Player 10.
| | 00:46 | So go ahead and open up the
fullscreen.fla file from the Exercise Files.
| | 00:51 | This is a really simple application.
We just have a single movie clip with an
| | 00:55 | instance name of guy, and it's
just this little binary guy down here.
| | 01:00 | If I open up the actions in the Actions
panel, essentially what this application
| | 01:04 | does is the main part of it just
listens for the left and the right arrow key,
| | 01:10 | and depending on which it
moves the little guy on the X-axis.
| | 01:14 | So if I test this, you can see as I
hold down the right arrow key,
| | 01:18 | it's moving on the right.
| | 01:19 | The left Arrow key, it's moving on the left.
| | 01:21 | So basically, the start of a game
here, pretty lame game nonetheless.
| | 01:26 | So now what I've also added here is
when you click on the stage, I'm actually
| | 01:31 | making this application
go into Full Screen mode.
| | 01:34 | Now, when you're testing it inside
of Flash, that's not going to work.
| | 01:37 | So you actually need to test
the SWF in order to see that.
| | 01:41 | So I'm going to go into the
Exercise Files where this FLA is.
| | 01:46 | I'll open up the SWF file, and here you
can see again I'm able to hold down the
| | 01:51 | arrow keys in order to move this little guy.
| | 01:54 | If I click on the stage, now
I'm actually in Full Screen mode.
| | 01:57 | Of course, I can still accept keyboard input.
| | 02:01 | Now the area in which you couldn't
do this was inside of the browser.
| | 02:05 | So let's look to see how that's changed now.
| | 02:07 | So I'm going to go to File > Publish
Settings, and basically I'm going to
| | 02:13 | publish the HTML version of this.
| | 02:15 | So I'm just going to
click Publish and click OK.
| | 02:19 | Now we'll look inside of this folder,
and it's generated the HTML file for me.
| | 02:24 | So I'm going to go ahead and just open this up.
| | 02:27 | I'm going to open it up in BBEdit.
| | 02:28 | You can open it up in any
text editor that you want.
| | 02:31 | So, now this is the normal
source that's generated by Flash.
| | 02:35 | So what I'm going to do is I'm going
to strip this down quite a bit, so I'm
| | 02:37 | going to get rid of this noscript tag
and just use this from my embed code and
| | 02:43 | I'll get rid of all of this.
| | 02:44 | You should be using SWFObject anyway
to embed your Flash. Don't rely on the
| | 02:49 | code that Flash generates.
| | 02:50 | So here is just the kind
of classic Flash embed code.
| | 02:54 | So now one of the things you're going
to need to do is you're going to need to
| | 02:56 | enable Full Screen in your actual embed code.
| | 03:00 | So you can see here this parameter
allowFullScreen, it's set to false.
| | 03:04 | So what I need to do is
actually set that to true.
| | 03:08 | I also need to set it, if we come here
in the embed tag, allowFullScreen, again
| | 03:13 | it's set to false, so I'm
going to set that to true.
| | 03:16 | Okay, so I'm going to save this now, and
let's go ahead and launch this in the browser.
| | 03:23 | So when I launch this up,
here we can see our little guy.
| | 03:27 | Actually, before I go into to
Full Screen mode, I'll show you.
| | 03:29 | So here again, I can hold the Arrow keys
down to move this little guy along the X-axis.
| | 03:34 | If I click to go into Full Screen mode, you
can see I can now also move it along the X-axis.
| | 03:40 | This was something that wasn't allowed
in previous versions of the Flash Player.
| | 03:44 | Now one thing, which is kind of a bug
it appears, is that I can't hold down the
| | 03:49 | arrow key in order to repetitively fire
that key down event, like I can just in
| | 03:54 | the regular Flash Player.
| | 03:55 | So I have to repetitively hit the arrow
key, so just be wary of that limitation
| | 04:01 | when you go Full Screen in Flash Player 10.
| | 04:03 | Where here I can hold it down, when I go
into Full Screen I have to repetitively
| | 04:08 | hit that arrow key in order
to trigger the key down event.
| | 04:12 | So with this loosening of the
security restrictions surrounding full screen
| | 04:16 | keyboard input, it's now much more
likely that you're going to be able to create
| | 04:20 | more interactive full screen experiences.
| | 04:22 | Particularly, for things like games,
where if you're limited to only using the mouse,
| | 04:27 | there is only so many games
you can create that only use the mouse.
| | 04:31 | Again, this is not really creating kind
of a security problem because people are
| | 04:35 | not going to be able to input their
passwords and things like that, since we
| | 04:39 | only are accepting non-printing keys.
| | Collapse this transcript |
| Larger bitmap support| 00:00 | So many times in Flash applications
there is the need to use large bitmap files.
| | 00:05 | Now there are many different
reasons why you'd want to do that.
| | 00:08 | Well, the size of bitmaps that you
can actually use now in Flash Player 10
| | 00:13 | has actually increased.
| | 00:14 | So I will quickly show you what these
new limits are, so I'll create just a
| | 00:18 | blank ActionScript 3.0 document
and go into the Actions panel.
| | 00:21 | I'll just go ahead and
create a new bitmap data object.
| | 00:25 | I'll just call it bmd:
BitmapData = new BitmapData.
| | 00:32 | Here I have to pass in the width and the height.
| | 00:34 | So now inside of Flash Player 10 we can
now create bitmaps or use bitmaps that
| | 00:40 | are 4095 pixels wide x 4095 pixels high.
| | 00:46 | So that's essentially now the new maximum size.
| | 00:49 | So you can see, if I test this,
it's not giving me any errors.
| | 00:53 | If I were to change my Profile to Flash
Player 9, so I'll come in here and click OK,
| | 00:59 | and now test this.
| | 01:01 | We can see that I get a runtime error.
| | 01:03 | It basically says Invalid
BitmapData, because it's too large.
| | 01:07 | If you're wondering the actual
total number of pixels, this size would
| | 01:11 | be 16,769,025 pixels.
| | 01:16 | So that's the maximum number of pixels
that you can use now, which is quite a bit.
| | 01:21 | In Flash Player 9 or in previous
versions, the largest you could go was 2880.
| | 01:28 | So we have a considerable
increase now in the size of bitmaps.
| | 01:32 | So now if I test this, we can
see it now works in Flash Player 9.
| | 01:36 | Basically, the total number of
pixels allowed previously was 8,294,400.
| | 01:42 | So it's pretty much a little over
double the number of pixels that you can now
| | 01:47 | use when it comes to using
bitmaps in Flash Player 10.
| | Collapse this transcript |
| Clipboard context menu| 00:00 | So for a while now in Flash, we've had
the ability to right-click on some text
| | 00:05 | inside of our Flash movie and we then
see basically the clipboard menu which
| | 00:10 | contain things like Copy, Paste
and we've had that ability with text.
| | 00:14 | Well, in Flash Player 10 now, we can
actually show that clipboard menu over any
| | 00:20 | type of item, including just regular
display objects and then we can respond to
| | 00:25 | the events of the clipboard items.
| | 00:28 | So you go ahead and open up the
clipboard.fla file. This is just a simple
| | 00:33 | movie with some selectable text here,
and then just a box movie clip with an
| | 00:38 | instance name of box.
| | 00:40 | So if I test this movie now, we can
see here is my selectable text field and
| | 00:44 | again, I've always been able to do this.
| | 00:46 | I can right-click on this selected
text and choose Copy in order to copy this
| | 00:51 | text to the clipboard.
| | 00:52 | But you see when I right-click on this
movie clip, I don't have that and this
| | 00:57 | is what's new in Flash Player 10 is I
can actually add that when I right-click
| | 01:01 | over this movie clip.
| | 01:03 | So I already have a locked actions layer here.
| | 01:05 | So I am going to open it up and the
first thing I am want to do is to create
| | 01:09 | a new context menu.
| | 01:11 | So essentially, we're creating a new menu to
replace the default menu for that movie clip.
| | 01:15 | So I am going to say var cm for
ContextMenu and create a new context menu, and
| | 01:24 | now we've had the ability to do this
in previous versions of Flash Player.
| | 01:27 | I can do things like hideBuiltInItems
which will essentially get rid of the zoom
| | 01:32 | and other things inside of the menu and
then when I want to actually apply this
| | 01:36 | ContextMenu to that box movie clip,
all I have to do is say box and then set the
| | 01:42 | contextMenu property equal
to that new context menu.
| | 01:46 | So if I test that now, you can see I've
gotten rid of all but these three items
| | 01:51 | which basically you
can't remove these items.
| | 01:55 | Now we need to deal with, how do we get
those clipboard items into that menu?
| | 01:59 | So the first thing we need to do
is we need to set the clipboardMenu
| | 02:03 | property equal to true.
| | 02:06 | So by default, the clipboardMenu is not
shown except in selectable text fields.
| | 02:11 | So we set it equal to true here.
| | 02:14 | Now, if we actually test this, I right-
click on this movie clip, you can see the
| | 02:18 | menu is there, but everything is grayed out.
| | 02:20 | So here, I need to actually go through
and individually say which of those items
| | 02:25 | do I actually want to display.
| | 02:27 | So to do that, I say cm and then
clipboardItems and now inside of here,
| | 02:33 | essentially, I can set all of
those items to either display or not.
| | 02:38 | So I can set the copy item equal to true.
| | 02:42 | So that basically means that the copy
command is now going to be in this context menu.
| | 02:47 | So you can see when I right-click, now
the copy item is actually activated, and
| | 02:52 | I could do the same thing
with Cut, Paste and Clear.
| | 02:55 | So now I have that contextMenu but I
am probably going to want to respond to
| | 03:01 | that event when that happens, so that I can
perhaps add some custom stuff to the clipboard.
| | 03:07 | So when I do that, all I have to
do to make that happen is just say
| | 03:10 | box.addEventListener, and now to respond
to the copy event, I just say Event.COPY.
| | 03:20 | Now I can just create a function called
onCopy, which I'll create really quick.
| | 03:24 | We're not going to return anything and
all I am going to do is simply trace out
| | 03:32 | a message that says "copied."
| | 03:35 | So again, now when I select that copy
item from the contextMenu, I am just going
| | 03:40 | to call this onCopy function, and
I am going to trace that value out.
| | 03:44 | So let's test it tested and now when I
right-click on that movie clip and choose Copy,
| | 03:48 | you can see in the Output
panel we've traced out copied.
| | 03:51 | So it basically enables you to use
those clipboard menu items anywhere in your
| | 03:57 | Flash projects, where before you were
restricted to just using them within text fields.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | All right, so that's it.
| | 00:01 | Throughout this title, I've shown you
all of the new features that are inside
| | 00:05 | of Flash Player 10.
| | 00:06 | Now, some of the areas that we
covered, particularly surrounding the new
| | 00:10 | text engine and the drawing API, these
actually go a lot lower level than what I showed you.
| | 00:16 | So if you're interested in kind of
taking Flash to a much lower level,
| | 00:20 | you should definitely look at the documentation
for Flash Player 10 to find out everything.
| | 00:25 | So if you want some more help or you
wanted to find out more about me, you can
| | 00:28 | go to my blog at theflashblog.com.
| | 00:31 | Thanks for watching.
We'll see you next time.
| | Collapse this transcript |
|
|
