Flash stageVideo | Video Transcript

We just added close captions to the video so thought you might want to read through the transcript so here it is: stageVideo Transcript This video is all about the Flash Player 10.2 . Which introduced something that was called stageVideo. I wanted

We just added close captions to the video so thought you might want to read through the transcript so here it is:

stageVideo Transcript

This video is all about the Flash Player 10.2 .
Which introduced something that was called stageVideo.
I wanted to show you how easily and short it is. How you
can actually work with stageVideo without
getting rid of your old project. I
was going to take my time until Flash
Player 10.2 is widely available.
You definitely don't want to
lose users in the process.
To start things off I just wanted to
set up a little small project where
I just have a really a simple video that
should actually work on Flash 10.1 .
If you run the application you'll see it's just me talking.
It's just a short video of me
teaching something about Flash.
There aren't any bells and whistles
in this application. At this point
what I wanted to make sure that currently
Flash Builder is really the only place
where you could actually work on this new
feature. It wasn't introduced yet into
Flash Professional. Hopefully
it soon will be. And this part of the video will become irrelevant.
Currently in this state (while
recording this video) Flash Player 10.2
just came out. It wasn't yet released in Flash Builder Pro.
Alright, the first stuff we have to
do is make sure that we have Flash Player 10.2+.
I already have that in debugger mode.
The next thing you want to do is take is go to the project, then right click
on the project and go into it's properties.
In the properties you want to make sure that your ActionScript compiler isn't using
the 4.5 Flex Builder which obviously is
now the Flash Flex Hero.
They were using the latest stable build which is
4.5.8623 (which you could download from the Flex open source).
For the URL's you can also find them on our website EverythingFLA.com
(in the video section of this video).
I'm just gonna switch into the Flex Builder.
The latest SDK and I'm going to
click OK. That's all I really have to do.
That's why we're gonna let it
override the update because now it's going
to be updated to 10.2.
I'm going to click OK ... that's it ... it's
going update our settings.
Now we're ready to go.
We're ready to take the next step with
our application. The first thing that I
wanna know before we continue is that
our path itself is our video. There we are
actually going to use it to be
able to leverage the features of
stageVideo. It has to be H624 video.
My video was compressed that way. I
have nothing to worry about. I'm ready to start working.
Now if you look at the way I structured
it, you will see I created a new video.
Then I created the video and started
connecting you by creating the Net connection.
By the Net Stream adding the event
and starting our video to play
immediately as "our video".
What I want to do instead of that is
break the process into two different steps.
First, I want to create the stream
because it's going to happen no matter
what. I'm going to change Create Stream.
We're going to call Create Stream no
matter what you want to create in the Stream;
because it's going to be my backup - incase things don't work out.
I'm going to put it right in my construction that was creating the video moving up.
The next step is actually connecting the Stream.
Adding the video to the stage is
the two steps where I probably want to separate and take out.
Maybe put them in a separate function for now.
So let's called that function we're going to
create a new function.
I'm going to call it Show Regular Video.
For now lets just paste whatever we have here.
As you probably have guested, I'm going
to creative a regular video we're also going
to want to create another type of video
which is going to be our stageVideo.
Let me prepare that and we're going
to call it Show stageVideos.
Fantastic - we got our two functions
read. Lets first start off with making
sure that everything is still working.
I'm just going to
create the stream in and right after that
call my show Regular Video.
Just make sure that we are still seeing
everything as expected.
Everything is still fine which is
fantastic. What we really want to do
is not only call the show Regular
Video if we don't have our stageVideo.
The easiest way to do that is
basically to ask our Stage
if it has stageVideos.
Now the stageVideos is a Vector which
is more or less like an Array, only more a
smarter type Array.
stageVideo's basically will
hold how many Video
containers. We could just
ask it - it's length.
Lets just trace this out.
For a second here I'm just going to
comment out the video so we don't hear all that jitter.
While we're doing it we just want to see
that it's OK - that its not really length- here we go.
If we run it one more time,
close it, go back into our Flash
Player we will see that we have a zero videos available.
Which is good for now. Lets
continue down the line.
We're first asking if we have zero, 
then we just want to start our regular as before.
It looks like everything is
more or less the same; alright so far.
If we not I'm just going to ask if our length
equal zero; that's basically what I'm
saying here.
That is if our length equal zero
we're going to call our
show Regular Video.
If our length is longer than that, 
then we're going to call our show stageVideo.
Alright we could delete this line.
Alright we have here all the logic we
need to really to start things up.
Right now we know that we have zero
available stageVideos the difference
also. We will see how
actually when we implement it.
We don't create new stageVideos. There is
a list of them depending on our
operating system, that depends on
the browser, that depends on a few
other features.
Sometimes there will be and
sometimes there won't be -
depending also on the Flash version.Sometimes we will have stageVideo; sometimes
we won't.
Let's see how much we have here this time around.
Cause we're connecting the stream but we're
not actually running it.
Even though we're hearing the sound it's
zero. If it's zero
it's exactly the opposite. If it's not
zero we want to call the stageVideo.
Lets switch these two around.
Alright that makes sense.
Because our videos are playing, our Stream is playing
no matter what. What we actually want to say
only if we are more than zero.
Then we want to call our Show Stage
Video. If we don't, then we want to call a
Regular Video.
Fantastic now it's time for us to change
a little bit the HTML template.
To change our HTML template all we
really want to do is add
into our template. It's going to
edit it right here and open it with the text editor.
All I really want to do is add it
into our properties of our swf itself
in a few spots.
First of all let's go to classic
HTML. We're just going to add here.
Which is going to copy this property. We want to add a W mode
Window Mode.
In our Window Mode we want to set
it to be direct.
Basically telling our operating system
or whoever to start listening.
It could approach directly the
processor and work its magic behind
the scenes.
It's just going to make things run. It's
going to enable our operating system.
Actually to gain access to this feature
or Flash we should be able to access
those acceleration features that
it might not. It really just depends on
the browser implementations in latest
versions and so on and so forth.
Which means you can't really make
the video overlays - OK?
Really the only usage for stageVideo
is when you have a classic video player.
You're not making anything fancy in it.
You are just trying to play video.
Now the only last part we want to do is set it in JavaScript. I'm going  
to roll up here.
Find our Swift Object Variables
and I'm just going to add Params
Window Mode=Direct
Now if I run my application one more time ...
we should be getting ... there you go.
Now it's actually running our ... it's
running it has four it's running our
view only because we haven't done
anything yet so we can't
actually see anything.
And now it's time really to implement
our Show stageVideo.
And in our Show stageVideo what we
actually want to do is we want to grab one stageVideo.
Which we can get it just as we saw
earlier through our Stage.stageVideos .
We can select the first one
because we are really creating
based on one. We know we already have
one causes function to be called.
It wouldn't  be called if there
wasn't one.
You want to attach our Net Stream.
We want to get our Net Stream instead
of sending it to our Regular Video. We're
going to attach it to our Stage.
Now there is one thing that we have to do -
actually defined are view port for
video before we could play it. To do that
we're just going to basically tell that to the 
video player.
That we want it's view port.
It's view port to be a specific Rectangle.
And we're going to set them by creating
a new Rectangle.
Basically saying that Rectangle to be in 00.
For now let's just do our Stage width
and Stage height.
We don't really care too much about
how it is actually going to look.
'cause it's really for illustration.
There you go we set our Rectangle
we set our attached Stream.
Now we could play our video out.
We're ready for one step further.
Now we have a few things that we have to
consider while working with this new
feature. One is that even though right
now we have four videos ready sometimes that changes.
 Sometimes in devices especially mobile phones or
different types of platforms the
availability changes as your application
is going. We (kind of) have to
figure out a way to change with it.
In our constructor, to be able to update
base, changes, and functionality.
We need to update based on changes
and functionality. We have to add a little bit more.
Put a little bit more thought into the process.
We need to add another event listener.
The event listener I'm not going to
use is a built-in class, even though I could.
I'm not going to get
more deeply into it because I don't want to
create compiler errors in Flash
or errors in general in Flash player 10.1.
I'm just going to put the Stream directly here.
This event will actually be called
as we said. Every time
our stage of video availability changes, if it started by four it might change
to zero and it might go up to 8. It really just
depends on a different scenarios such
as full screen, not full-screen, what's
written in your HTML, what browser your in, etc.
If that changes, and it's a variable ...
What we want to do, is to
add a function that basically will be able
to manage those changes. I'm going to
say I'm going to call On Change
On change Video.
Basically we're going to be changing
our video each time this happens (most chances are that we will).
It's going to create a new functions.
I'm just going to set it as a Regular
event, sowe don't get any
compiling errors.
Or run time errors in earlier versions of
Flash. We already know that if it
ever reaches this place that the stageVideos exist because
this event would never trigger if it didn't.
We could reuse this caller. Actaully we just did.
Our caller basically just said
that if our length (if we have a lengths)
then we're going to do the stageVideo.
If not we're going to do the Regular video.
Really the only thing that's left
for us to do is make sure that
we want to do is that when we're
putting one on we're getting rid of
the other one.
Alright so let's see how we're going to
do that so let's start with the regular
let's start with the stageVideo one
because it's actually easier.
And in our stageVideo one we really have
our stageVideo and really all we have
left is to really just ask if
our video has a private that means we
added it to the Stage.
And if we added to the stage that means we
already set it to the extreme as well.
So one we want to remove our child
we want to remove our video from the display.
And the next thing we want to take our Vid.
We want to attach a Stream but this time
around we're going to send it a Stream of no.
Making sure that  we won't have two
Stream running at the same time.
So we got rid of everything related to
the video and all the rest here is good.
And excellent there's no issues with
anything here.
The next step is actually to make
sure that when we show video that
will only remove the stream from
the stageVideo only if
the stageVideo actually was defined.
Now to do that what we could do is
and by the way...
If ever our stageVideo is being called
what does that mean?
When our stageVideos is called it means our
Stream doesn't exist anymore.
So our Net Stream was automatically
disconnect right so we don't really
have to worry too much about the
scenario where the stageVideo has been
removed because it doesn't exist anymore.
But what we do have to worry about is if our
video is not on the Stage we're going to
add it which were really doing that.
So actually even though it's more
complicated it's not because
automatically our stageVideo information
would be removed because
it doesn't exist anymore if we got our
Show Regular Video because the only time
we get our Show Video is a scenario of
no stageVideos.
Alright now I have one more thing that I want
to do before it can really test this fully
out and just let's run it and make
sure that we are everything is still
working before we do that.
And everything is still working perfect
there is no errors or anything.
The last thing that really what I want
to do is before you test this out on
earlier versions of Flash and fix any
issues if we encounter them.
Is we want to make sure that we're not
actually calling directly for example
stageVideos doesn't exist in Flash
Player10 only exists in Flash Player
10.2 so I'm going to get rid of this
letter I'm just going to comment to out.
And same here for here and it's going
to generate an error call this
directly so I'm going to have to
do is add another
into our if statement another Stage that
has owned property.
And I'm just going to check if it has
their property at all and if it does
that I'm going to check for the length.
So I'm just going to check that has Stage
Videos like that I'm not going to get a
compiling error.
So if it has one we could already
approach it directly and then
all the rest seems like it should be
working well so than the next step I want
to do is actually I want to
downgrade our Flash Player version and
before I downgrade our Flash Player
version I want to go into our HTML
and just create another HTML in our
bin-debug I'm just going to
create another HTML so I'm just going to
go into the browser for a second.
And it let's just go into our explorer.
And in our explorer I'm just going to go into
HTML not our template I was going to go
right into our bin-debug here just for
the sake of the sample.
I'm going to copy our HTML file paste
it again.
And I'm just going to the reason I'm
doing this I want to get rid of the
automatic update of our Flash Player.
So I'm going to call it underscore
No Update.
And in our No Update1 I'm really going
to do a more simple version
back into our flex.
What I'm going to do is and let's
just refresh.
Where are we?
And we have here no debug.
Open text editor.
And really what I'm going to do is I'm
just going to get rid of all the
Javascript and I'm just going to run the
directly in the browser.
So to do that I was going to finer Swift
object information.
And I'm going to send delete everything
because they don't really need it
for the scenario alright.
And that's fine because we're just doing
this for testing.
And I'm just going to get rid of the No
We're going to be using are No Script
And we could get rid of the No Script
right here.
And we're going to save this out.
And if I just open this file in
the browser again.
I'm just going to drop it into Firefox.
Alright so we have our No Update.
Really the next step after this is we
want to actually delete our Flash Player.
Get rid of Flash Player version 10.2 .
And reinstall version as earlier than
that so I'm just gonna quickly do that.
And I'm going to uninstall Flash Player
my browser.
Alright I just uninstalled Flash.
And the next up I want to do is actually
still in earlier version of Flash let me
just go to.
So let's go to 10 Debug version because
we really want to be able to debug this.
And let's go to the earliest feasible
one and let's say we go to
10r45 which actually I think
introduce some features that are
really needed here.
Alright so we're installing here Flash Player
10r45 which is the first one that
actually came with Flash Professional.
If I recall correctly we just installed
Flash Player 10.10 version R5.
And it's time to actually test our HTML.
And see if we don't do any updates to it.
What errors do we get and if we get any?
And here you go our browsers working as
expected our Flash played out and we're
actually running with older version of
Flash and we didn't get any error even though
running a Flash Debugger Version10.
And done in our mission is completed so now
our file is ready for the future.
So if anyone has a futuristic version of
Flash which is the one that just came out.
We'll be able to see a video in a much much
cooler way in a much better processor
and less processor intensive way.
You're more mobile friendly as well.
And at the same time you're not loosing
users are trying to force users sub grade
until their ready for it.
– go from a “zero to geek” | 02Geek.com – ©

Leave a Reply

Be the First to Comment!

Notify of