Requirements

We also wanted to create a box displaying a message when the video is still buffering. But there has been an issue with the NetStreamEvent. It doesn’t fire the NetStream.Buffer.Empty event when the player’s actually buffering. People from the community say that this problem is somehow related with the encoding software of the flash video files. Since we didn’t find a proper solution, we left this feature out. If someone has an idea how this problem can still be properly solved, feel free to leave us a comment.

Playlist support

Ok, let’s begin with the major new feature. Adding the playlist support is quite simple and nearly implemented the same way as in the slideshow tutorial. So we have our XML file which looks like this:

As you can see, each video has two attributes. One describes the source to the file and the other one is a short description or the title of the movie. Now it’s time to go on with coding. We changed the line which defines the source of the flash video file to the following:

Like this, flash will look for the flash variable playlist which you can add in the html file. If it’s defined, then the value will be assigned to the variable strSource. Otherwise we just assign a default location. Like this, you can use one compiled SWF file for every playlist you want to publish. In order to load this file, we need to add three more variables to our video player:

urlLoader will later be used to load and handle the loaded xml file. urlRequest is an object for the urlLoader to load the playlist file. And xmlPlaylist will then contain the loaded xml data from the urlLoader.

We’ve added these code lines add the bottom to the initVideoPlayer() function:

A new urlRequest will be created with the source location of the xml file. Then we create a new urlLoader, add an event listener when the loading is completed and finally load the file. What’s also important is that we hide the controls of the video player in the first line of the initVideoPlayer() function since we don’t want that the user can click anything if the playlist hasn’t been loaded yet. As soon as the playlist is loaded we call the playlistLoaded() function which looks like this:

As you can see, it now needs to have a video number and a boolean value if the video should be played or just be set to the strSource variable. The function also sets the new description label of the requested video with the value from the xml object and positions it to zero on the x-axis. And finally the intVid value gets assigned to the variable intActiveVid. The playNext() and playPrevious() function are now ease to implement. We just check if there there is still a video left we can skip or rewind and call the playVid function with the parameter intActiveVid + 1 or intActiveVid – 1 depending on the direction:

When a video reached it’s end, we stoped the player. But now we want to play the next video in the playlist if there’s still one left, if not, ok then we stop the player 😉 So we change this in the netStatusHandler() function:

Now there’s only the vertical scrolling of the video description label left for the playlist feature. It could be that you need an extra long title for your video. In that case, we’ve just created a very long one lined textfield that’s masked. On top of that is an invisible button that will be used to know, if the user moves the mouse over the label so we can scroll it if it’s to long. In order to know if we’re currently scrolling the label and to know in which direction the scrolling is going, we need to set two new variables:

The functions startDescriptionScroll() and stopDescriptionScroll() are simply setting the bolDescriptionHover variable to true or false depending on the mouse event. startDescriptionScroll() additionally checks, if it’s even necessary to scroll the text:

First, we check if we’re currently over the label. The we figure out, which way we move the text. Since the updateDisplay() function is called pretty often, we get a smooth motion by incrementing and decrementing the label’s x value just by 0.1. So, when moving forward, we actualy move the label to the left and check, if we’ve reached the end. If so, we invert the bolDescriptionForward value and begin to move the field to the right until it reached zero on the x-axis. If the user’s no hovering over the invisible button, we just reset the position of the label and the direction flag.

Fullscreen support

Since flash player version 9,0,28,0 you can use the fullscreen feature. In order to get this to work, you also need to set this in the HTML code. But since Flash does all the HTML stuff for you, you only need to change the mode to allowFullscreen in the publish settings of HTML

The implementing of the fullscreen support is rather simple in our case because we don’t have too much stuff on the stage we need to reposition/resize once we hit the fullscreen mode. So, first of all, we set the scale mode of the stage to no scale because we want to resize the object individualy and not everything. We also set the stage align mode to the top left corner:

Then we add two event listeners for the fullscreen button. One to enter it and one for leaving the full screen mode. We also add an event listener when the fullscreen mode changes. The visibility of the btnFullscreenOff button will be set to false. We do all of this in the initVideoPlayer() function:

So, first we check if we’re entering the fullscreen mode. If so, we switch the fullscreen buttons, align the control bar in the bottom center of the screen and size up the video display and center it on to the screen. If we’re leaving the fullscreen mode, what you can also do by pressing the ESC key on your keyboard, we reset all the stuff to how it was before. That’s was already everything for the fullscreen support 🙂

Save volume

This is quite an important feature and really ease to implement in flash. To save the last used volume you can use the flash cookies which will be stored on the computer of the user. They are like normal browser cookies, but can only accessed through flash. So, the first thing we need to do is creating a new shared object:

The function getLocal returns the shared object you’ve requested. In our case we want to have the playerSettings cookie/shared object. Since we want to set the volume on the start, we add the following line to the initVideoPlayer() function:

First we assign the DEFAULT_VOLUME to a temporary variable. Then we check if the user has already a cookie with the player volume. If so, we override the value from the variable. Then we update the volume bar and set the volume with the setVolume() function. In order to store the new volume in the cookie, we add the following two new lines to the setVolume() function:

The function flush() writes the new value immediately in the flash cookie.

Clickable progress/volume bar

This is just a beauty hack for the player. We want to be able to click on the progress or the volume bar to begin with the scrubbing. So, we just added two invisible buttons on the off the bars and added the function to it as when you click the scrub buttons directly:

Rafael Nünlist is currently working at orange8 as a Richmedia Developer. He will complete his apprenticeship with a swiss federal vocational diploma in information technology this summer. His strengths are Flash, Flex, Actionscript, Php/MySQL and AIR. He is also a member of the dreaminginflash team.

Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D.

User Interface Design in C# Windows Form Application From Scratch In this C Sharp tutorial you will learn user interface design in C# application. This step-by-step tutorial will help you deeply understand…

In this second part article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

Today we start a 9 part tutorial series on creating a Shoot’em’Up game. We will cover all the necessary topics to create it from scratch, which will help you to understand and apply these guidelines to other projects. Ath this first part. we look at getting the Away3D engine up and running by creating a UIComponent that will contain and initialize the necessary Away3D components.

Flash it’s a powerful application and can be really complex, but even beginners can create a cool menu for demonstration or for use in a personal site. The menu that we will create is simple, but the swirl animation is something that you don’t see everywhere, for that I’ve decided to explain one way to make an animation of growing swirls without any Action Script code.You will also learn how to import artwork from illustrator where I’ve pre-made the graphics, the work is very simple and the result will be very cool.

Possibly the hottest thing to hit the Flash community since the advent of several excellent 3D engines is the recent debut of 3D physics engines. Here we’ll examine a way of using one of the more popular 3D engines, JiglibFlash, in conjunction with the prominent 3D engine Papervision3D to create a bowling game.

thnx for the tut! The code works fine in a flash file but when I put it into a class everything is working except for the scrubber. You can move them but it has no effect on the volume and you can’t change the position of the video. So, what kind of imports do I need?

Hello guys, this is the best tutorial on flv flash players in as3, so I thank you a lot !!

Concerning the full screen mode, what’s happen wenn you have two screens with different resolution ?? By me, the fullscreen mode conserve the resolution of the first screen and don’t adapt himself to the new screen’s resolution.

Hi, For a progressive download, I am using H264 transcode mp4 and flv files with CS4. I have set the bufferTime to 5 secs, so that the video quickly loads at the start and also regains buffer quickly after the buffer.empty event in the course of video play. While my player takes buffering breaks if the buffer is emptied, I am totally taken aback with the performance of youtube. Is there something that I am missing. Please correct me if I am wrong – as per my experience, the bytesLoaded decide if the video can be seek to the point translating bytesLoaded to time, meaning, for seeking to any point within the video, the calculation is (bytesLoaded/bytesTotal >= seeked-time/total-video-time). Although, even if the bytesLoaded is equal to bytesTotal, why should the video encounter intermittent buffer empty and buffer full states? With my knowledge, I can assert that even if the bytesLoaded is equal to bytesTotal, the buffer empty and full events are entirely related with the bufferLength. Meaning, that even if the video is completed cached with a progressive download, there would still not be seamless, uninterrupted, smooth video play, if the bufferLength is small, but making it large assures a long delay in resuming video playback and also at loading. Hence a trade-off is required. Is this a wrong assumption?

Hi, very helpful tut! I need to have the player control appear/disappear on mouse event. I have Kotvi code working, but as he says it flickers between button mouse over. Is there any solution as this would be great addition to the player control, Many thanks Paul

I’m trying to add the flash video player in to our college site and want to stop auto playing at first time and auto playing of next video. i have only two videos to play so, i dont want auto play function

please tell me how to do it. im new to the flash action scripting and using the flash video player template in flashmo.com

HI EVERYONE , PLEASE i am trying to make something a bit like YouTube, i have all my music videos at the side of the page, now i want to be able to click on a video and it will enter the playlist then get played. Can this be done if so please help me Please