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 Script. We're going to be using are No Script version. 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!