Tech Pedia » Flash

Everything You Need to Know about Flash Video Player

David Wetzel — Sat, 26 Jul 2008 05:58:14 +0000

Flash video (FLV) player is sometimes referred to as flash media player. This is a free software program which allows you to watch movies, play games, and view animations on the Internet.

FLV player is a standard program which plays Shock Wave Flash (SWF) files. It is provides multilingual support for over 33 different languages. It also has the ability to act as a screen saver, if you find a favorite movie you would want displayed on your computer screen when not in use.

Advantages of Flash Video Player

FLV player provides the ability to:

FLV player does not have:

Features of Flash Video Player

The extended features of FLV player include:

Flash Video Player File Downloading

You can search for FLV player files (SWF) on any website and these popular websites:

FLV player requires that you have Windows 2000, XP, or Vista to view SWF movie files. This is a low bandwidth service which provides high quality movies for anyone that has access to the Internet to view.

Fixing the IE EMBED, OBJECT and APPLET Problem: Dynamic Embedding with JavaScript

Ben — Thu, 20 Apr 2006 15:27:53 +0000

The IE Nightmare A Reality
First you should read this quote from microsoft.com about Internet Explorer:

“…Internet Explorer 6 includes many new and enhanced features that can simplify the daily tasks that you perform…Internet Explorer 6 gives you the freedom to experience the best of the Internet…”

I can’t believe they would claim this.

What Is The Problem
Microsoft has decided to break every web-page that is using an EMBED, OBJECT or APPLET tag by forcing the user to click each time the page is loaded to “allow activation” of the content. That means that any user with the latest build of IE will be required to activate the navigation each time the load a page that contains that navigation. Might not seem like a big deal until you actually have to click EVERY page of a website to get it to do what it used to do perfectly.

What Is The Solution
The remainder of this article will explain how to get around this BUG (yes - I will continue to call this a bug even though they are doing it intentionally) in Internet Explorer. I’m going to detail two solutions, the first of which I believe to be the best answer for all.

Solution 1: Start using Firefox.
This sounds simple I know, but the reality of the matter is this: Firefox is better in every way than Internet Explorer. It’s free, it’s fast, it’s been two or three steps ahead of IE for the past few years, and you will not regret installing it. Likewise, you will not regret uninstalling Internet Explorer (although I’m sure Microsoft makes it virtually impossible to uninstall IE).

Unfortunately, we’d all have to start using it, and we’d all have to get all of our customers to start using it… So, while this does seem to solve the problem, it is a bit unrealistic.

Solution 2: Dynamic JavaScript Embedding
I know that sounds complicated, but believe it it’s not. Here’s the HTML for a simple website that used to work great (until Microsoft went and changed the rules on everyone):

[Example 1] (just “view source”)

This is the default output when you publish from the Flash development application, so there’s a good chance your Flash movies are embedded like this. Here’s a quick way to fix the problem:

[Example 2] (again, “view source”)

So what did we do? In English, we simply created a JavaScript function in the header section of our web-page that writes the html embed and object tags at the time the page is loaded. Then we call that function in the body section. This allows us to bypass the Internet Explorer bug.

Now, keep in mind that this is a very simplistic solution. It’s designed to give you an idea on the direction to head. While this code will work in most cases, know that it does require JavaScript to be enabled on the user’s browser. Another problem with this solution is that you have to put this function in every file with Flash embedded, and you have to create it specifically for each Flash movie (it’s not very modularized). We could go through the explanation of how to link to an external JavaScript file and how to pass parameters to JavaScript functions, but that is beyond the scope of this article and there are plenty of examples out there that explain these things.

I do want to point you to a free tool put out by the team at deconcept.com. It’s called “FlashObject” and it allows you to dynamically embed Flash movies in your html. It also provides a lot of other very nice features. It’s quite slick, read about it and download it here:

blog.deconcept.com

In Conclusion
I just want to say that I think Microsoft is really shooting themselves in the foot with this move. All the website developers out there can’t stand Internet Explorer because of it’s flakey interpretation of the W3C standards. Everything is more complicated for us because of the way that Internet Explorer works. I would really ask that you consider using Firefox. You won’t regret it!

Getting Started With ActionScript: Flash Tips for Basic Motion

Ben — Tue, 18 Apr 2006 15:08:10 +0000

Using ActionScript
This article is an attempt to convince some of you new Flash keyframers that there are some very compelling reasons to consider using ActionScript for your next Flash project. Even if you’re not a programmer with a degree in Computer Science, you can speed up your work and speed up your download times with a few simple, reusable pieces of ActionScript. Trust me, it’s not as tough as you might think…

Why ActionScript?
Why use ActionScript you ask? I can give you two very simple reasons:

Reason #1: Your Time
Creating a few pieces of ActionScript that can be reused will save you time in the development phase of your Flash work. Once you’ve created an ActionScript function, you can use it in multiple projects without having to solve the same problems over and over. Let’s face it, your time is worth money - it’s time you started acting like it…

Reason #2: Your User’s Time
Most Flash developers don’t stop to think that every time they add a new layer and all of the frames that go along with it, they are also adding size to their SWF. Using ActionScript will allow you to substantially limit the size of your SWF files. This saves your users time on download, not to mention that your clients will always be happier with smaller file sizes. Check out this quick test (click to download the FLA’s):

Keyframe Animating 1 Clip: 514 Bytes
ActionScript Animating 1 Clip: 369 Bytes

Keyframe Animating 2 Clips: 839 Bytes
ActionScript Animating 2 Clips: 388 Bytes

At first glance these file sizes might not seem like a big deal to you. After all they are all less than 1K. However, what is important to look at is the relationship between the sizes. Using keyframes and doubling the complexity of an animation gives you a 60% increase in file size (from 514 Bytes to 839 Bytes), while doing the exact same thing with ActionScript only gives you a 3% increase (from 376 Bytes to 388 Bytes)! The animation using keyframes with 2 MovieClips is more than 115% larger than the exact same animation using ActionScript. Imagine how this could impact your file size on a large, production-scale project. Numbers like these are hard to deny…

Getting Started
The first thing you need to understand in order to take advantage of ActionScript for moving a MovieClip is how Flash refers to your MovieClip’s position. This is done with the x and y properties of the MovieClip. If we say “ball1_mc is located at an x of 50 and a y of 100″, we mean that the registration point of ball1_mc is 50 pixels from the left of the Stage, and 100 pixels from the top of the Stage.

ActionScript provides you with two properties of every MovieClip that let you change (or just read) its location. Here’s how you’d set the location of a MovieClip with the name “ball1_mc” to an x position of 100 and a y position of 200:


  ball1_mc._x = 100;
  ball1_mc._y = 200;

Not too bad huh? Any MovieClip object has these properties associated with it, but remember that in order to use them, you need to give the object instance a name. This is done in the Properties panel by selecting the object on the Stage and then entering a name in the Instance Name edit box of the Properties panel.

Creating an ActionScript Function
Now we need to figure out how to write a function in ActionScript. Functions allow you to associate a group of commands together into a block of code and then call that group of functions from other places in your ActionScript. A function that would set the x and y position of a MovieClip would look like this (line numbers are added for later explanation):


 1.    setXandY = function(theMovieClip_mc, newX, newY)
 2.    {
 3.      theMovieClip_mc._x = newX;
 4.      theMovieClip_mc._y = newY;
 5.    }

This might look a little confusing, but lets look at it one line at a time.

Line 1 is the Function Definition. This line basically says “Create a function called ’setXandY’ that accepts three parameters called ‘theMovieClip_mc’, ‘newX’, and ‘newY’. A parameter is a variable (remember that high school algebra class?) that allows us to pass different data into the function. This will make a little more sense below when we discuss actually calling the function, so for now, just think of parameters as a way to make the function work on multiple MovieClips in multiple cases.

Line 2 and Line 5 are open and close curly braces. Any block of code is always contained in curly braces. In a Function definition, they allow you to specify where the code for the Function starts and where it ends.

Lines 3 and 4 contain the actual code. They are simply taking the MovieClip that is passed into the “theMovieClip_mc” parameter and setting it’s “_x” and “_y” Properties to the two other parameters that are passed into the Function: “newX” and “newY”. This is just like the first code example above where we set the position of “ball1_mc”, but it’s dynamic - meaning it can change depending on what parameters you pass to the Function when you call it.

Calling an ActionScript Function
The previous code snippet is great, but by itself, it won’t actually set the position of anything. All it really does is create the Function. In order to use the Function, you have to call it later on in your code. So, how do you do that? It’s really quite simple:


  setXandY(ball1_mc, 100, 200);

This one line (coupled with the Function Definition above) will do exactly the same thing as the first two lines of code we looked. It will set the x and y position of the “ball1_mc” MovieClip to 100 and 200 respectively. The really cool part is that you could set the x and y position of ANY MovieClip with this function simply by passing a different MovieClip name as the first parameter:


  setXandY(square5_mc, 50, 25);

This code would set the x and y position of the “square5_mc” MovieClip to 50 and 25 respectively. Hopefully this is all starting to make sense, because it’s time to start moving things…

Defining the onEnterFrame Function
Flash Movies all have a Timeline that is made up of a series of Frames. The Framerate of a Movie determines how long Flash will wait before moving to the next Frame. Think of this in the same way as a film that you would see in a movie theater. In the USA, the standard framerate for film is 24 fps (or Frames Per Second). By default, Flash sets the framerate to 12 fps. You’ll notice that things look a little choppy at this framerate, so I’d recommend setting it to at least 20 fps (I typically use 24 fps) to smooth things out a little. You can change this in the Properties panel for the Stage. Simply click on the background area outside the Stage and then type “24″ in the Frame Rate edit box. Remember that Flash is dependent on the processor of the local machine, so anything over 30 fps can really start to bog a user’s machine down.

So what does this have to do with moving a MovieClip? We’re going to define a Function for our MovieClip that actually will get called each time a new Frame is entered. So, if we have our framerate set to 24 fps, this function will get called 24 times each second (assuming the user’s processor can handle that amount of work). Let’s look at the code, and then step through it a line at a time again:


 1.    moveClip = function(theClip_mc)
 2.    {
 3.      theClip_mc.onEnterFrame = function()
 4.      {
 5.        this._x = this._x + 1;
 6.      }
 7.    }
 8.
 9.    moveClip(ball1_mc);

This is a bit more complicated than the last Function, but let’s take it a bit at a time.

Line 1 just defines the Function with one parameter (the MovieClip we want to move).

Lines 2 and 7 group the lines of code to include in the Function.

Line 3 is where things start to get interesting. Here we’re using a special Function that Flash recognizes for each MovieClip on the Stage called “onEnterFrame”. Quite simply, this is the Function that will be executed at each new Frame (or 24 times each second if our framerate is 24 fps). This Function is not defined by default, so our defining it here is enough for Flash to know that it’s supposed to be executed each Frame.

So, what does it do? Line 5 is where we actually change the x position of the MovieClip that we passed in as a parameter. We use the keyword “this” here which just refers to whatever MovieClip we are defining “onEnterFrame” for - in this case it’s “theClip_mc” which holds whatever MovieClip we pass into this Function (”ball1_mc” from line 9). The math involved is very easy. We’re setting the “_x” Property of “this” to the “_x” Property of “this” plus 1. In other words, we’re incrementing the “_x” Property by 1. This is such a commonly executed step, that there is actually a short-hand way of writing this:


     this._x++;

Line 9 is the last important piece of code - remember that defining a Function doesn’t actually call the Function. We need to do that separately, which is what we’re doing on line 9.

So what will happen if we actually run this? You can probably guess that it will move the “ball1_mc” MovieClip to the right one pixel each Frame, forever. The one BIG flaw here is that we don’t ever check to see if we got to where we’re going… It will move the MovieClip on every new Frame until you exit the Movie. Eventually, the MovieClip will disappear from the Stage altogether. Honestly, this Function (as it stands) is pretty useless, but it does demonstrate how “onEnterFrame” works. With this knowledge, we can do some pretty cool stuff.

A Useful Motion Function
Ok, let’s dive in now. Here’s a useful function for basic horizontal movement:


 1.    moveClipTo = function(theClip_mc, newX, frameDuration)
 2.    {
 3.      var xDistance = newX - theClip_mc._x;
 4.      var xStep = xDistance / frameDuration;
 5.      var currFrame = 1;
 6.
 7.      theClip_mc.onEnterFrame = function()
 8.      {
 9.        if (currFrame > frameDuration)
10.       {
11.         delete (this.onEnterFrame);
12.         this._x = newX;
13.       }
14.       else
15.       {
16.         this._x += xStep;
17.         currFrame++;
18.       }
19.     }
20.   }
21.
22.   moveClipTo(ball1_mc, 500, 100);

Let’s discuss. Line 1 should look familiar by now, it’s just a function definition. The function name is “moveClipTo”, the paramaters are “theClip_mc” (the MovieClip we want to move), “newX” (where we’d like to move it to) and “frameDuration” (how many frames we’d like to take to move it). You can see on line 22 how we call our new function. We’re moving “ball1_mc” to a new x position of 500 pixels from the left of the screen over a period of 100 frames.

Lines 3, 4 and 5 define some variables to work with in our movement. “xDistance” is the difference between the new x position and the current x position. “xStep” is how many pixels we’ll move the MovieClip each frame (the “step size”). If we know the distance and we know how many Frames we have to get there, we can just divide the distance by the number of Frames. “currFrame” is just a counter so we know how far we’ve gone.

Line 7 is where we define the special Function “onEnterFrame”. This is the code that will get executed each frame.

Line 9 is our first logical comparison. We’re asking ourselves if the Frame that we’re currently on is greater than the total number of Frames that we’ve been given to complete the move (”frameDuration”). We simply ask if “currFrame” is greater than “frameDuration”. If it is, we’re done with our movement. All we need to do is stop the “onEnterFrame” for this Clip and make sure that the final resting place for “theClip_mc” is actually the position that was sent into the Function (”newX”).

If our current Frame is NOT as high as the “frameDuration” then we have more processing to do. This is when the “else” portion of the Function is executed. First of all we’ll add our step size to the current x position of “theClip_mc”. We do this with another short-hand increment operator (+=). All this means is “set my x equal to my x plus xStep”. The only other thing to do in this block of code is to increment the “currentFrame” counter by 1.

That’s it! Now we’ve written a function that will move any MovieClip from it’s current x location to any new one.

Final Thoughts
Don’t stop here! The “_x” and “_y” properties are not the only thing you can change in ActionScript. You have control over the transparency (”_alpha”) the rotation (”_rotation”) the x and y scale (”_xscale”, “_yscale”) and a host of other properties. This is where you can have some fun, be creative. Keep in mind the fact that Flash will only allow you to have one “onEnterFrame” Function defined for any MovieClip at a time. Everytime you define a new one, it will always overwrite the current one.

Coming Soon…
Check back soon for the next chapter where we’ll discuss a simple “Easing” Function!