Tutorials on AS3 outside of Adobe?

Question

I'm struggling with the video code in AS 3, and none too
happy with tutorials I've found on the Adobe site, unless maybe
I've missed the right ones. Is there a resource I don't know about
that can get me comfortable with AS3 quickly?

Answer 1

funonmars,
> Hi David, Thanks for your thoughtful reply.
Sure thing!
> I would love it if you could clarify the
seekToNavCuePoint, and
> whether it is possible to use it outside of a component.
I'll do my best. :) I apologize, too, for the several days'
delay in
my response. I had a hunch on how to answer your questions,
but I wasn't
going to write anything until I had had the chance to test my
code samples.
For better or worse, it has taken me until tonight to make
the time to do
that.
On the question of seekToNavCuePoint() -- Is it possible to
use this
method outside the context of the FLVPlayback Component? --
it looks like
the answer is no; that is, no in the sense of what you're
looking for. The
method in question is a first-generation method (not
inherited) of the
FLVPlayback class, which means an FLVPlayback instance is
required in order
to use it. Technically speaking, it is not necessary to
manually drag a
copy of the FLVPlayback Component to the Stage, so it could
be argued that
only an *instance* is needed, not the Component itself -- but
that's
academic hairsplitting: any instance of the Component on the
Stage *is* a
programmatic instance as far as ActionScript is concerned.
You could
certainly extend that class in a subclass of your own, which
means you'd be
using a custom class instead of the Component, but there too,
I'm describing
a shuffle game of "Under which shell hides the pea?"
I believe what you're looking for is a simple way to load
video into a
NetStream instance (not the FLVPlayback Component) and use a
cue point's
name to seek to a location in the video. So here's one
approach.
Create a new ActionScript 3.0 FLA document and enter the
following code
into frame 1:
var cp:Array;
var v:Video = new Video(320, 240);
addChild(v);
So far, you have an Array instance named cp (just an
arbitrary name, but
to me it stands for "cue points") and a new Video object
named v (this is
the same as creating a new Video asset in the Library). The v
object is
added to the display list of the Stage -- without that third
line, the video
would load and play, but never be seen.
Next, add the following:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
v.attachNetStream(ns);
Where, you're wiring up the video. First, a NetConnection
instance, nc,
is connected to a null object -- which means the FLV file
will be delivered
via HTTP rather than a streaming service. Next, a NetStream
instance, ns,
is associated with nc. Finally, the Video.attachNetStream()
method is
invoked against the v instance and associated with ns.
The path to actually displaying video is a bit tedious, but
still fairly
straightforward. Now we'll listen for the
NetStream.onMetaData event. This
part is key, because it carries with it an array of cue
points embedded into
the FLV file. How? By way of the video import mechansim of
Flash itself.
In my test case, I imported an AVI file and used the Cue
Points tab in
Step 3 of the import wizard to specify a series of cue
points. The
interface of that tab allows me (and you) to specify a cue
point's Name,
Time, and Type (on the left side of the dialog) and then a
Parameters
property that contains a Name and Value (on the right side of
the dialog).
The easiest way to go, in my estimation, is to specify the
"name" you'd like
to use -- "squish" and "fruit" in your sample -- in the Name
field of this
dialog. The time is determined by the scrubber above the
tabs, and the Type
should technically be Navigation, which you can choose from a
drop-down
menu. The Parameters area really isn't needed, though you may
certainly use
it if you want to embed yet further metadata about each cue
point.
So, back to our onMetaData event handler:
var listener:Object = new Object();
listener.onMetaData = function(md:Object):void {
for (var i:Number = 0; i < md.cuePoints.length; i++) {
trace("name: " + md.cuePoints
.name);
trace("type: " + md.cuePoints.type);
trace("time: " + md.cuePoints
.time);
for (var prop:String in md.cuePoints.parameters) {
trace(prop + "," + md.cuePoints
.parameters[prop]);
cp = md.cuePoints;
ns.client = listener;
Okay, this may look like a lot, but it's not actually so
bad. This is
one of the few (possible the only) times in AS3 that events
are handled in
the manner in which they were in AS2. An arbitrarily named
variable,
listener, is declared and set to an instance of the Object
class. This
listener will act as a liaison on behalf of events
dispatched by the
NetStream class.
An onMetaData property is added to listener (I found this
under the
Events listing for NetStream) and associated with a function
literal. This
event carries with it an Object instance of its own, which
is passed into
the function as the variable md (meta data). This part gets
a teensy bit
dicey, because the metadeta object, itself, is a property of
the VideoPlayer
class, not Video. I honestly don't remember how or why I
thought to look up
the VideoPlayer class. Maybe it was luck. Maybe I just
searched the term
"metadata"; in any case, I found that a metadeta object --
at least, as it
appears in relation to VideoPlayer -- carries with it a
cuePoints property.
This property can be unearthed by way of the onMetaData
event, and in this
context will be a property of the md variable, which is our
representation
of the VideoPlayer.metadata property.
So ... a relatively simple for() loop steps through the
cuePoints
property of the md object, and as long as your FLV file has
cue points
embedded, you'll seem them all traced out to the Output
panel, including the
parameters property. These correspond directly with the
import wizard tab
as described earlier.
After the for() loop, which is really just there for sake of
illustration, you're setting the previously declared cp (cue
points) array
to the md.cuePoints property. Finally, the NetStream.client
property is set
to listener, as invoked against the ns instance. This is
akin to AS2's
addListener() method for wiring up listeners.
At this point, you may start up the video itself:
ns.play("myVideo.flv");
Now, at any time, you may use the NetStream.seek() method to
jump to a
cue point in the video. You'll have to test of it's possible
to seek to
areas that haven't yet loaded. My hunch is that no, you
can't -- but in any
case, you can experiment with local files, at least.
In order to summon a cue point by name, rather than a
number, you could
write a custom function like this:
function findCuePointTime(cuePointList:Array,
cuePointName:String):Number {
var i:uint, len:uint = cuePointList.length;
for (i = 0; i < len; i++) {
trace(cuePointList);
if (cuePointName == cuePointList
.name) {
return cuePointList.time;
return 0;
... which would allow you to supply the cue points array
(here, cp) and a
cue point name in order to get back its number. You could put
that into the
seek() method itself, like this:
ns.seek(findCuePointTime(cp, "squish"));
Just make sure not to call the seek() method until after the
onMetaData
event has been handled, otherwise the cp array won't be
populated.
David Stiller
Adobe Community Expert
Dev blog,
http://www.quip.net/blog/
"Luck is the residue of good design."