• home
  • forum
  • my
  • kt
  • download
  • Create a Dynamic Video Player

    Author: 2009-07-09 10:09:24 From:

    I have seen quite a few questions floating around the net on how to load variables from the browser URL into your flash movie.

    Most of these questions are from people trying to pass a video path into a video player, so they can do away with their XML files.

    Here is an example of a video player using this method

    As you can see, the video path is dynamically loaded from the URL:

    ?path=woody.flv

    I will try to walk you through it as simple of a manner as I can…

    Let’s start by opening up flash and creating a blank ActionScript 3 flash movie.

    Save this movie as “test.fla”.

    Place a dynamic text box on your stage with an instance name of “myTxt”.

    Inside your Actions frame add this code:

    var videoPath:String;

    videoPath = root.loaderInfo.parameters.videoPath;

    myTxt.text = videoPath;

    The first line: “var videoPath:String;” is simply declaring that I am going to use a variable named videoPath that is a string.

    The second line: “videoPath = root.loaderInfo.parameters.videoPath;” is going to load a flash variable from the embed code named “videoPath”.

    The third line: “myTxt.text = videoPath;” displays the value of VideoPath inside our text box.

    Now save and publish your flash movie.

    Ok…… :-)

    Now for the embed code!

    Open up your web page editor and create a blank html page.

    Save this page as “index.html” in the same directory as “test.swf”.

    edit the HTML code of index.html to add the following between the
    “body” and “/body” tags:

    src=”test.swf”
    quality=”high”
    bgcolor=”#000000″
    width=”300″ height=”300″
    flashvars=”videoPath=http://www.yourWebsite.com/Path_To_Video.fla”
    scale=”noscale”
    salign=”l”
    name=”test”
    align=”middle”
    play=”true”
    loop=”false”
    quality=”best”
    allowScriptAccess=”always”
    type=”application/x-shockwave-flash”
    pluginspage=”http://www.adobe.com/go/getflashplayer”>

    Now save the index.html page and open it inside your browser.

    You should see the path”http://www.yourWebsite.com/Path_To_Video.fla”

    displayed inside your movie.
    If it is being cut-off, try using a smaller font size in your flash movie’s text box.

    The path of “http://www.yourWebsite.com/Path_To_Video.fla”
    is stored inside the flash variable “videoPath”.

    You can see it in the embed code here:

    flashvars=”videoPath=http://www.yourWebsite.com/Path_To_Video.fla”

    When your actionScript is triggered inside your swf movie it calls to the html embed code for the
    value of the variable called “videoPath”

    It reads it from your embed code “flashvars=”videoPath=”

    Gongratulations!! You just passed a variable into your flash movie from the embed code using ActionScript 3!!

    In my Next post I will continue with this lesson and show you how to make this into a dynamic php page to load
    any video you want into your video players!!!

    In the last lesson I showed you how to pass a variable to your Flash movie from the embed code of your HTML page using ActionScript 3.

    Now we want to go further and actually pass a variable from our browser URL into the Flash movie.

    As of the time of me writing this lesson, there is no way for Flash to read variables directly
    from the browser URL. Therefore, Flash will need some help.

    Luckily enough, PHP can read variables from a browser’s URL and pass it to our Flash movie by making
    our embed code into a dynamic PHP script.

    The first thing we need to do is to change our embed code from HTMl to PHP. Now, I’m really bad at PHP
    and I take shortcuts wherever I can when it comes to writing PHP.

    The way that I change my HTML into PHP is by using an HTML converter called 0-Code HTML Converter.
    This software changes any HTML code that is pasted into it into to code that is usable in a PHP script.

    So we open up 0-Code and paste our HTML embed code into it:

    src=”test.swf”
    quality=”high”
    bgcolor=”#000000″
    width=”609″ height=”478″
    flashvars=”videoPath=backcountry_bombshells_4min_HD_H264.mp4″
    scale=”noscale”
    salign=”l”
    name=”player”
    align=”middle”
    play=”true”
    loop=”false”
    quality=”best”
    allowScriptAccess=”always”
    allowFullScreen=”true”
    type=”application/x-shockwave-flash”
    pluginspage=”http://www.adobe.com/go/getflashplayer”>

    Click the PHP radio button, (located after Convert to:), and we get this code:

    echo “echo “src=\”test.swf\”\n”;
    echo “quality=\”high\”\n”;
    echo “bgcolor=\”#000000\”\n”;
    echo “width=\”609\” height=\”478\”\n”;
    echo “flashvars=\”videoPath=backcountry_bombshells_4min_HD_H264.mp4\”\n”;
    echo “scale=\”noscale\”\n”;
    echo “salign=\”l\”\n”;
    echo “name=\”player\”\n”;
    echo “align=\”middle\”\n”;
    echo “play=\”true\”\n”;
    echo “loop=\”false\”\n”;
    echo “quality=\”best\”\n”;
    echo “allowScriptAccess=\”always\”\n”;
    echo “allowFullScreen=\”true\”\n”;
    echo “type=\”application/x-shockwave-flash\”\n”;
    echo “pluginspage=\”http://www.adobe.com/go/getflashplayer\”>\n”;
    echo “\n”;
    echo “\n”;
    ?>

    This new version of our code is authentic PHP. Now we need to paste it into our text editor. I use UltraEdit Pro,
    but you can use any text editor you feel most comfortable with. If you don’t have a good text editor, I recommend
    ConText editor. It is a really nice editor, and it is completely free. You can download it here: http://www.contexteditor.org
    If you don’t want to use a text editor, you can simply use NotePad.

    After pasting the PHP code into your text editor, save the file as index.php in the same directory as your test.swf
    flash movie. From this point forward, you can no longer test your pages on your local machine. Unfortunately, PHP files
    will only run from a server. You will have to upload your index.php and test.swf files to the same directory on your
    server.

    Now load the index page inside your browser: http://www.yourSite.com/index.php

    You should once again see your flash movie with “backcountry_bombshells_4min_HD_H264.mp4″ loaded in the text field.

    I know it looks the same as before, but the difference is that now your movie is embeded into a PHP page.

    Now it’s time for the magic! Let’s make our PHP dynamic, meaning we can make changes by loading different variables into it.

    I’m not going to bombard you with a bunch of facts about how PHP works. Frankly, I don’t know a bunch of facts about how PHP
    works! :)

    For the purposes of this lesson, it is just important for you to know that we will be using the “Get Method” on our
    PHP page. This means that the page will listen for variables being passed to it from the URL. We need the PHP page to hear the
    variables we send to it inside the URL and transfer them to our flash movie by changing the embed code.

    Are you still with me? We’re just passing variables to flash from the embed code like before. We’re just using PHP to change
    one line for us depending on what is typed in the address bar of our web browser.

    OK. Open up index.php inside your text editor. It should look like this:

    echo “echo “src=\”test.swf\”\n”;
    echo “quality=\”high\”\n”;
    echo “bgcolor=\”#000000\”\n”;
    echo “width=\”609\” height=\”478\”\n”;
    echo “flashvars=\”videoPath=backcountry_bombshells_4min_HD_H264.mp4\”\n”;
    echo “scale=\”noscale\”\n”;
    echo “salign=\”l\”\n”;
    echo “name=\”player\”\n”;
    echo “align=\”middle\”\n”;
    echo “play=\”true\”\n”;
    echo “loop=\”false\”\n”;
    echo “quality=\”best\”\n”;
    echo “allowScriptAccess=\”always\”\n”;
    echo “allowFullScreen=\”true\”\n”;
    echo “type=\”application/x-shockwave-flash\”\n”;
    echo “pluginspage=\”http://www.adobe.com/go/getflashplayer\”>\n”;
    echo “\n”;
    echo “\n”;
    ?>

    I know, “Yeah- Yeah, it’s the same as before…” Well, I want to take it slow because this is the important part! :)

    In order to make this PHP page know that it is supposed to “listen” to the URL for variables we need to use the
    “Get Method” as we talked about before. The way this function is written in PHP is:

    “. $_GET['variableName'].”;

    Now we tell PHP to “Get” the “path” variables from the URL and paste them into our embed code where our Flash variable goes. The “\”\n” is just a line break for PHP…

    echo “flashvars=\”videoPath=”. $_GET['path'].”\”\n”;

    Now your full index page code should look like this:

    echo “echo “src=\”test.swf\”\n”;
    echo “quality=\”high\”\n”;
    echo “bgcolor=\”#000000\”\n”;
    echo “width=\”609\” height=\”478\”\n”;
    echo “flashvars=\”videoPath=”. $_GET['path'].”\”\n”;
    echo “scale=\”noscale\”\n”;
    echo “salign=\”l\”\n”;
    echo “name=\”player\”\n”;
    echo “align=\”middle\”\n”;
    echo “play=\”true\”\n”;
    echo “loop=\”false\”\n”;
    echo “quality=\”best\”\n”;
    echo “allowScriptAccess=\”always\”\n”;
    echo “allowFullScreen=\”true\”\n”;
    echo “type=\”application/x-shockwave-flash\”\n”;
    echo “pluginspage=\”http://www.adobe.com/go/getflashplayer\”>\n”;
    echo “\n”;
    echo “\n”;
    ?>

    Now save this again as index.php and upload it to your server over writing the old one.

    Inside your browser go to the index.php page: http://www.yourSite.com/index.php

    What do you see? It should be your flash movie, but nothing is loaded inside your text box. This is exactly what you want!

    Nothing is loaded inside your text box because now your flash movie is listening to the PHP page, and the PHP page is
    listening to the URL of your browser for the variables!

    Now go back to your index.php page, but this time add:

    ?path=backcountry_bombshells_4min_HD_H264.mp4

    right behind “index.php” in your browser URL:

    http://www.yourSite.com/index.php?path=backcountry_bombshells_4min_HD_H264.mp4

    and hit enter….

    Once again, you should now see your flash movie with “backcountry_bombshells_4min_HD_H264.mp4″ loaded into your text box!

    The big difference is that now you’re loading it from your browser URL instead of the embed code. This means you can dynamically change the video path now.!

    Now you can change it to any video path you want!!! :)

    I hope you were able to keep up with me throughout this lesson.

    If you have any questions, just PM me on the CartoonSmart forum.

    In the next post I’ll show you how to set up the video player to play any videos we load into it!

    For the last part of this lesson, I showed how to pass the videoPath into our flash player using the browser’s URL to play the chosen videos.

    Now let’s make it work on an actual video player!

    First, let’s make a video player to use for this lesson. Open up your test.fla file inside flash.

    You should still see see the dynamic text box on your stage, and your ActionScript on your timeline.

    Go ahead and delete the dynamic text box from your stage. Then open your components window.

    GoTo Window —-> Components

    From the Video menu of the Component window, select the FLVPlayback component and drag it onto the stage.

    Now select the FLVPlayback video screen on your stage and give it an instance name of “myVideo”.

    Now open your Component Inspector:

    GoTo Window —-> Component Inspector

    Inside your Component Inspector window, select “SkinUnderPlayFullscreen.swf” for your skin.

    Now, lets take a look at our actionScript. Open your actionScript window, and you should still see:

    var videoPath:String;

    videoPath = root.loaderInfo.parameters.videoPath;

    myTxt.text = videoPath;

    We need to change some of our actionScript for our variables to load the video correctly.

    Let’s change this line of actionScript:

    myTxt.text = videoPath;

    To this:

    myVideo.source = “myVideos/” + videoPath;

    This tells flash to make the source video path for our video player “myVideo” look inside a folder on our server
    called “myVideos” and add the name of the video file….

    So, if you were to see the path without the variables, it would look like “myVideos/backcountry_bombshells_4min_HD_H264.mp4″

    Your actionScript should look like this:

    var videoPath:String;

    videoPath = root.loaderInfo.parameters.videoPath;

    myVideo.source = “myVideos/” + videoPath;

    And this:

    Now publish your flash movie (test.fla).

    Upload the file test.swf to your server in the same directory as index.php and the old test.swf. Write over the old version.
    Also, make sure you upload the SkinUnderPlayFullscreen.swf file. This is the skin for your player.

    Now you need to create a folder on your server in the same directory as test.swf called “myVideos”

    Upload your video files into this folder.

    Now it’s time to test it out! :)

    Open your web browser and type the path to your index.php ex:”http://www.yourSite.com/index.php”

    be sure to add:

    ?path=backcountry_bombshells_4min_HD_H264.mp4

    directly after index.php in the URL

    Only in your case change “backcountry_bombshells_4min_HD_H264.mp4″ to the name of your video file…

    Hit Enter… and you should see your video playing!

    If your background is still black, you will want to chage:

    echo “bgcolor=\”#000000\”\n”;

    In the embed code of your index.php page to:

    echo “bgcolor=\”#FFFFFF\”\n”;

    This will change your flash movie’s background to white.

    Hopefully you were able to follow my lesson fairly easily, and everything went well for you throughout this tutorial. :D

    Remeber, I’m always around on the CartoonSmart forum if you should have any trouble, or have some extra questions on this…

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (228)
      Optimization (17)
      Animation (166)
      Projector (11)
      Audio (54)
      Special Effects (170)
      Backend (26)
      Text Effects (89)
      Drawing (34)
      Tips and Techniques (51)
      Dynamic Content (38)
      Tricks (8)
      Games (114)
      Utilities (24)
      Getting Started (99)
      Video (59)
      Interactivity (48)
      Web Design (37)

    New

    Hot