Sorting with Umlauts

Recently I needed to have a drop down box for countries. In english I just simply order by name but when you look at the german translation, ordering by name puts all the countries that have an umlaut character at the bottom. For example, I know the German translation for Austria is Österreich. So when I sort the translated names I now want this name to appear after the country named Oman. I know that the german umlaut html entity for ö is &ouml. I use that to get the character to sort the countries with.
Here is the code using PHP.

foreach($country as $val){
  $charset = htmlentities(utf8_decode($val['country_name']));
  if(substr($charset, 0,1)== '&'){
    $newcharset = str_replace(substr((html_entity_decode($charset)), 0,1),
                substr($charset, 1,1), html_entity_decode($charset));
    $origcountry[$val['country_id']] = $val['country_name'];
    $testarr[$val['country_id']]= $newcharset;
    $swap[$val['country_id']] = $newcharset;
  }else{
    $testarr[$val['country_id']] = $val['country_name'];
  }
}

asort($testarr);
foreach($testarr as $ckey=>$val){
  if($key= array_search($val, $swap)){
    $newcountryarr[$ckey] = $origcountry[$key];
  }else{
    $newcountryarr[$ckey] = $val;
  }
}

Scrolling Text using jQuery


Animating Text using jQuery Examples

Scroll Text Up
+++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Scroll Text to Left mouseover to stop the animation
+++Lorem ipsum dolor sit amet, consectetur adipiscing elit.     

A client of mine recently wanted the option to have scrolling text for breaking news type items. For the most part I think that scrolling text isn’t the greatest thing to use but there are certain situations where its good. The real simple and fast way to do it is to simply use a <marquee> tag like this <marquee width=”100%;” behavior=”SCROLL” direction=”left” scrollamount=”10″> Lorem ipsum doler </marquee>

The problem with this is it doesn’t do a continuous loop. What I mean by this is that it doesn’t start over till the text has completely finished scrolling. This means you see a lot of white space. Also jQuery seems to be a smoother animation. I knew jQuery had the animate function, so I used that. I found some plugins and examples where they had images being repeated but said they couldn’t do text cause they didn’t know the width. I guess they didn’t know css. So lets start with the css/html part of it.

Scrolling Text to the Left

The first thing we need to do is to get the width of the text that is being scrolled. So we need to create a div wrapper and set the width to be really big. This way the text wont be wrapped because of parent elements. We also set the display to none and visibility to hidden. This is done so that we don’t ever see this text. The display none keeps the browser from rendering the div in the browser, otherwise with just the visibility set to hidden we would see a big white space. Then we add another element inside with the text.


<div id="textwrapper" style="width:5000px; display:none; visibility:hidden;">
  <span id="textwidth" style="disply:none;">
    +++Lorem ipsum dolor sit amet,  consectetur adipiscing elit.
    Sed magna  ligula, tempus feugiat pellentesque et,pulvinar
    eu tellus. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </span>
</div>
;

Now the html for the actual text being scrolled. We have a scrollwrapper element which contains the width of the the text being scrolled. We also need to set the position to relative so that the text being scrolled will be absolutely positioned relative to this element and not the page. The next element is used to make sure the text doesn’t wrap just like we did previously, we set the width to an arbitrarily large number. Then we have the scrollcontent element. This is the element that is going to be moving. This is positioned absolutely and we set the left position to the width of the scrollwrapper element to make sure it starts on the far right. Then we need one more wrapper inside.


<div id="scrollwrapper" style="overflow:hidden; border:1px solid #004F72;
      position:relative; width:500px; height:20px;">
  <div style="width:5000px;">
     <span id="scrollcontent" style="position:absolute; left:500px;">
       <span id="firstcontent" style="float:left; text-align:left;">
             +++Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Sed magna ligula, tempus feugiat pellentesque et, pulvinar
             eu tellus.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       </span>
    </span>
  </div>
</div>

Here is the javascript but first let me explain how I am using the jquery animation function. The first object passed to it is what I’m animating. I am changing the property “left” to go to the negative of the scrollwidth. The next thing I pass to it is an object of some of the properties. The first property I am setting is “step”. This is a function that will get called everytime the animation runs. The next property is “duration” which is the amount of time it will take to finish the animation in milliseconds. The next is “easing” which is the equation used to do the animation. jQuery comes with 2 equations: linear and swing. Default is swing but we’ll set it to linear. The last property we’ll set is “complete” which is a function that’ll be called when the animation is done.


$("#textwrapper").css({"display":"block"});
var scrollwidth = $("#textwidth").width();
$("#textwrapper").remove();

var scrollwrapperwidth = $("#scrollwrapper").width();
if(scrollwidth < scrollwrapperwidth) scrollwidth = scrollwrapperwidth;
$("#scrollcontent").css({"width":scrollwidth});
$("#firstcontent").css({"width":scrollwidth});

var appending = scrollwrapperwidth-scrollwidth;
var noappend = 0;

function animatetext(rate){
  var dist = scrollwidth+parseFloat($("#scrollcontent").css("left"));
  if(!rate)rate = 1;
  var duration = Math.abs(dist/(rate/100));
  $("#scrollcontent").animate({"left":"-"+scrollwidth},{
    step: function() {
      if(parseFloat($("#scrollcontent").css("left"))< parseFloat(appending)
          && !noappend){
          noappend = 1;
          $("#scrollcontent").css({"width":scrollwidth+scrollwidth});
          $("#scrollcontent").append("<span style='float:left; text-align:left;
               width:"+scrollwidth+"px;'>"
               +$("#scrollcontent").children(":first").html()+"</span>");
      }
    },
    duration: duration,
    easing: "linear",
    complete:function(){
      $("#scrollcontent").children(":first").remove();
      $("#scrollcontent").css({"left":0});
      $("#scrollcontent").css({"width":scrollwidth});
      noappend=0;
      animatetext(6);
    }
  });
}
$("#scrollcontent").mouseover(function(e){
	$("#scrollcontent").stop();
});
$("#scrollcontent").mouseout(function(e){
	animatetext(6);
});

$(document).ready(function(){
	animatetext(6);
});

First in the javascript we will get the width of the text. We first need to set the css of the textwrapper to "block" so that it will render the child elements width. Then we will get the width of the inner element "textwidth" and then delete the textwrapper element.
If the javascript variable "scrollwidth" is less than the width that we want it to scroll we need to set it. Then we set 2 variables, appending and noappend. These variables are used in the "step" function. So when the position of the scrolling text is less than the position "appending" and we haven't already appended text (the noappend flag), then we'll set the width of the scrollcontent to double the width since we are appending the same text in there again. Then when the animation is completed we will remove the first element, change the left position to 0, change the width of the scrolling content back to the scrollwidth and then call this function again. Also if we want to stop the animation on mouseover as I have it, we simply call the .stop().

NOTE: since the .animate function takes a duration and not a speed, to keep the same speed we need to calculate the duration. That way if you are dynamically changing the text the speed wont change just because you have more or less text. To do this it is pretty straight forward. Since we are using linear as our easing property, the equation is simply d=rt, where d is the distance we need to travel and r is the rate and t is the time. So we get the distance by taking the scrollwidth and adding it to the current left position of the scrollcontent. Then we simple pass in a rate of 1- whatever and calcuate the time in milliseconds.

Scrolling Text Up

Scolling text up is even easier. The html looks like this. We need a wrapper with position relative and height equal to whatever you want. Then we need the child element which will be the element being moved. Then we need at least one element inside that to contain the text but can have more if you want. Also the line-height needs to be set to whatever the height is of the outerwrapper.


<div id="scrolltextup" style="border:1px ridge #004F72; overflow:hidden;
     position:relative; width:500px; height:20px;">
  <div id="textup" style="text-align:center; position:absolute; top:0;
      left:0; width:500px;">
    <div style="line-height:20px;">
      +++First Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      +++Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Here is the javascript to do it. We get height of the entire thing. This time we are change the "top" property. Since the distance to animate will always be the same we don't need to calculate duration and can just pass in the duration.


var scrollheight = $("#textup").height();

function scrolltextup(dur){
  $("#textup").animate({"top":"-=20"},{
    duration: dur,
    easing: "linear",
    complete:function(){
      $("#textup").children(":last").after("<div style='line-height:20px;'>"+
          $("#textup").children(":first").html()+"</div>");
      if($("#textup").children(":first").height() <=
           (parseInt($("#textup").css("top"))*-1)){
        $("#textup").children(":first").remove();
        $("#textup").css({"top":0});
      }
      setTimeout("scrolltextup(3000)", 500);
    }
  });
}

And thats it!

Create Images From HTML

The Problem:

I want a simple way to create an image from dynamically generated html.

So Recently I’ve been working a lot inside tinymce, a javascript html WYSIWYG editor. I’ve wrote a couple plugins to manage/upload files and images utilizing my flash uploader. Tinymce has a couple plugins you can buy, but if you’re a developer seems like a waste of money. Maybe I’ll write a basic tutorial on how to upload pics and insert them into tinymce next time. Anyway on top of that I wanted tinymce to work like word in that it would have paging. Once I got that paging working, for the most part, I wanted to have thumbnails of each page. This is where my problem comes in. Basically each page in tinymce is wrapped in a div with a unique id. Therefore I have access to the html of each page, but how can I create an image from just a string of html? I looked all over the web and there were tools to do it but all of them cost some money and seemed more complicated than it should be. I knew I needed some way to render the html server side. There are tools out there that are open source like Gecko and Webkit, but this just seemed more complicated than it should be to create an image.
So I started thinking of other ways and I knew specifically that php has built in pdf support. I ended up finding dompdf. The rendering engine for this seemed to be really accurate and supports both inline styles and css. After creating the pdf I found that ImageMagick can convert pdfs to an image using GhostScript, an interpreter for the PostScript language and portable document format.
After those are installed, it is really simple. In my situation I’m updating the thumbnails via ajax to keep them up to date. I’m also using jQuery to make the ajax call. I pass the id of the page and the content of the page. I then return the id of the page with the name of the image separated by a colon. Also if you were wondering, the id of the actual page is the same as the id of the thumbnail. This can be done because tinymce is actually in an iframe so technically there is only one id per page. Side Note: “Apparently a lot of people don’t realize that ids are supposed to be unique per page. If you want to style more than one element use classes not ids. People then tell me, ‘But I’ve never had a problem with using the same id.’ It’ll render just fine but if you ever use javascript and use document.getElementById(‘someid’) then you’ll have a problem. Anyway I digress, back to creating images.” Here is the code to make the ajax call.


   $.post('ajax/test.php', {id:pageid, content:str}, function(data){
	var d = data.split(':');
	$('#'+d[0]).html('<img src="'+d[1]+'" alt="thumbnail" />');
  });

Now here is the ajax page that actually does the conversion. I first create the pdf from the content I passed to it. I have to add the <html> <body> tags for this to work correctly. There is also a lot of things you can do when creating the pdf, just look at the documentation to learn more. I catch the output of the pdf and then put the content into a file called test.pdf. I then use the time() function to create a unique image name so the browser wont display a cached version of the image. Finally I call the system function which is used to execute an external command. In this case the command is ImageMagick’s convert function. Side Note: When trying to run “convert” in Windows without the path in front it will possibly fail because it is trying to execute Windows convert program. There are a couple ways to get around it. One way being to look in the PATH environment variables and set the ImageMagick path closer to the front in the PATH system variables so that it comes before the Windows convert program. Some people also said that changing ImageMagick’s convert.exe name to imconvert.exe and call that instead will solve the issue.

   
require_once("../dompdf-0.5.1/dompdf_config.inc.php");

 $id = $_POST['id'];
 $html = '<html><body>'.html_entity_decode($_POST['content']).'</body></html>';

 $paper = 'letter';
 $orientation = 'portrait';

 $old_limit = ini_set("memory_limit", "32M");

 $dompdf = new DOMPDF();
 $dompdf->load_html($html);
 $dompdf->set_paper($paper, $orientation);
 $dompdf->render();
 $pdf = $dompdf->output();
 file_put_contents("test.pdf", $pdf);

$imagesample =  'sample'.time().'.jpg';

$source = 'C:\\your\\director\\here\\test.pdf';
$dest = 'C:\\your\\directory\\here\\'.$imagesample;
system("C:\\ImageMagick-6.5.4-Q16\\convert.exe $source $dest", $ret);

echo $id.':'.$imagesample;

And that is it! Cheers!

Scrolling with jQuery

I was creating a photo gallery and wanted to show a few pictures at a time. Then when you hit the next button it would scroll over one picture at a time. I found these plugins for jQuery called serialScroll and scollTo that work great. Plus I added fancybox to it so you could click on the picture to see the full size image.

This is basically how you should have the html set up. Basically what you need to have is an outer wrapper div with the width set to how wide you want the actual gallery. You need to set the overflow to hidden so we only see a few pictures at a time. The next thing is the element that will contain the scolling elements. In this case, the scrolling elements are the “li” tags which are wrapped in a “ul” tag. What is important here is to set a width for the ul tag. If you set a width that is less than the width of all the scrolling elements then they will wrap to the bottom which doesn’t look good. So you can calculate what the width of all the scolling elements are going to be and then set it or just set a really high number if you know that the width of all the elements wont be larger than that.
Another thing to note here is that I wrapped all the image tags in “a” tags with a class=’sidegroup’. This isn’t required for the scolling but is used for fancybox.


<div id='photoprev' style='float:left; cursor:pointer;' >Previous</div>
<div id='photos' style='float:left; width:260px; height:90px; overflow:hidden;'>
  <ul id='innerphotos' style='margin:0; padding:0; list-style:none; width:2000px; padding-left:10px;'>
    <li style='float:left; margin:0 10px; text-align:center; width:100px; height:110px;'>
      <a class='sidegroup' href='photos/341.jpg'>
        <img src='photos/thumbnails/341.jpg'  />
      </a>
    </li>
  </ul>
</div>
<div id='photonext' style='float:left; cursor:pointer;'>Next</div>
<div style='clear:both;'></div>

This is the javascript to initialize the scolling and the fancybox. To see a list of what each option will do click here. There is another option called axis that isn’t mentioned but it will tell the function which way to scoll. Default is ‘xy’ which means it will go down the list in the x direction and then go in the y direction.


	$(document).ready(function(){
		$('#photos').serialScroll({
			items:'li',
			prev:'#photoprev',
			next:'#photonext',
			offset:-5,
			start:0,
			duration:500,
			interval:4000,
			force:true,
			stop:true,
			lock:false,
			exclude:1,
			cycle:true, //don't pull back once you reach the end
			jump: false //click on the images to scroll to them
		});

		$('#photos a.sidegroup').fancybox({
			hideOnContentClick: false,
			zoomSpeedIn:	400,
			zoomSpeedOut:	400
		});
	});

You can view an example of the serial scoll in action here.

Equal Column Heights with Divs using CSS or jQuery

I am not a huge fan of using tables, in fact, most front end projects I do I usually use divs just because I think they’re nicer to look at than tables. So recently I needed to display some data in a table format which means I needed a way to make all the columns in each row the same height. There are a few different ways to do it without using tables.
One of the ways that I don’t like is faux columns. Basically this is just using a repeating background image to give the illusion of equal height columns.

Another way that is rather nice is using jQuery. All you need to do is include jQuery and a plugin called ‘equal heights’. Then include the following code. The “row1” is the class name that you’ll give each of the columns in row one.


$(document).ready(function(){
    	$(function(){
    	    $('.row1').equalHeight();
   	});
    });

The html of it would look something like this.


 <div class='row1'>
   lLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Ut aliquet
 nulla eu felis. Donec porta <br/>
    aliquam ipsum. In ac nibh. Nunc dictum. Curabitur rhoncus facilisis nunc.
  </div>
  <div class='row1'>
   lLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Ut aliquet
   nulla eu felis. In ac nibh. Nunc dictum. Curabitur rhoncus facilisis nunc.
  </div>
  <div class='row1'>
  	This is some text.
  </div>

And that is it besides styling each div however you want.

A lot of people might not want to include the javascript or just rather not use javascript to change the height of a div. So another way equal columns can be done is by setting a very high padding for each div and then setting the margin to be negative that. You need to wrap a div around it setting the overflow to hidden. Plus if you want borders around each row you won’t be able to set the border-bottom any more so you can simply set the border-top for each one and then add a border-bottom to the wrapper div.


<div id='row_wrapper' style='float:left; overflow:hidden;
                 border-bottom:1px solid black;'>
    <div id='column_1' class='other'>  lLorem ipsum dolor sit amet, consectetur adipiscing elit.
       <br/> lLorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div id='column_2' class='other'>  lLorem ipsum dolor sit amet,
       consectetur adipiscing elit.<br/>lLorem ipsum dolor
    </div>
    <div id='column_3' class='other'> lLorem ipsum dolor </div>
    <div id='column_4' class='other' style='border-right:1px solid black;'>
     lLorem ipsum dolor
    </div>
    <div style='clear:both;'></div>
</div>
    <div style='clear:both;'></div>

View the example of using both jQuery and just CSS here

PHP Menu with jQuery Drop Down

I wanted to create a menu where each menu could have submenus. I wanted a way where I could keep adding more submenus very easily. Also when a you are on a page it would be selected and all the parent menus would still stay selected. I decided to make a function to recursively go through an array to create the menu.

I started out with an array() like this.

$tabs = array(“page.php”=>”Page Name”, “page2.php”=>”Page Two”,
“page3.php”=>”Page Three”, “page4″=>”Page Four”);

This is very simple to go through but lets say Page Two has submenus and those submenus have submenus. So I would set it up like this.

$subpage[‘Subpage 2’] = array(“subpg3.php”=>”Sub Sub Page”);
$page2[‘Page Two’] = array(“subpage.php”=>”Subpage Name”, “subpage2.php”=>$subpage);

$tabs = array(“page.php”=>”Page Name”, “page2.php”=>$page2,
“page3.php”=>”Page Three”, “page4″=>”Page Four”);

So now when you’re looping through all the $tabs you’ll need to loop through the $page2 array() as well and then the $subpage array and take the keys for each of the submenus to set the name for the parent menu. Also if I am on subpg3.php I still want to keep “Subpage 2” and “Page Two” selected.

Another thing is if we don’t want to show the page name in the menu but we still want the parent menus selected. All we do is set the value to “HIDDEN” like so:
$subpage[‘Page Two’] = array(“profile.php”=>”Profile”, “profile_edit.php”=>”HIDDEN”);

So here is the function to get all the tabs.

First I declare some variables.
The global $filename could simply be $_SERVER[“PHP_SELF”]. but I personally like to use preg_match to get only the filename since $_SERVER[‘PHP_SELF’] will return the filename along with any subfolder its in. So I do

preg_match("/.*\/(.*)/", $_SERVER['PHP_SELF'], $name);
$filename = $name[1];

The global $dropdown is used to store all the submenus. I used this with jquery to create dropdown menus. If you dont want dropdowns then you can disregard anything commented for dropdowns.

The $found gets set to 1 as soon as the $filename matches one of the tabs.
The $menu is the menu that gets returned. The menu gets returned in an array format like this:
$menu[0] = array(“Home”=>”<a href=’home.php’ class=’selected’>Home</a>”, “About”=>”<a href=’about.php’ >About</a>”);
$menu[2] = array(“test”=>”<a href=’test.php’ class=’selected’>Test</a>”);

you need to do a ksort on menu to make it go $menu[0], $menu[2], $menu[4] instead of $menu[0], $menu[4], $menu[2];


function recursive_tabs($tabs, $row=1){
    global $filename;
    global $dropdown;
    static $found=0;

    $row = $row-1;
    $menu= array();
    foreach($tabs as $key=>$tab){

I check to see if $tab is an array; if it is and $found == 0 then I go into this “if statement” which calls this function again.

     
        if(is_array($tab) && !$found){
            $row = $row+2;
            $submenu = recursive_tabs($tab, $row);

            $tabkey = array_keys($tabs[$key]);

The next block is used for the dropdown array. We need to get all the keys of the $submenu. We need this to match up the $dropdown array correctly with its parent’s row. And then we need the keys of $tabs to match up the $dropdown with the name of its parent.
For example: if the $menu was
$menu[0] = array(“Home”=>”<a href=’home.php’ class=’selected’>Home</a>”, “About”=>”<a href=’about.php’ >About</a>”);

and $menu[0][‘Home’] had submenus then the dropdown would be $dropdown[0][‘Home’] = array(0=>”<a href=’drop.php’>Drop</a>”); so that they match up.


            $subkeys = array_keys($submenu);
            $sizeofkeys = array_keys($subkeys);

            $tabkeys = array_keys($tabs);

            if($subkeys[0]+1 == $row){
                foreach($submenu[$subkeys[0]] as $skey=>$sval){
                    $dropdown[$subkeys[0]-2][$tabkeys[0]][] = $sval;
                }
            }

if the $row is not 0, 2, 4, etc.. then I want to go ahead and return the $submenu.


            if($row%2 != 0  && $row !=0){
                return $submenu;
            }

Next I need to set the row back to the previous number. Then if the filename matches the current tab I loop through the submenu and set it to the menu. Also I check to see if $tabkey[0] == ‘HIDDEN’. $tabkey[0] is the name of each file. If it equals HIDDEN I don’t store it in the menu array but the parents of it will still be selected.
If it is not found I simply add the current $key to the menu.


            $row = $row -2;
            if($filename==$key) $found = 1;
            if($found){
                foreach($submenu as $subkey=>$sub){
                   $menu[$subkey] = $sub;
                }
                if($tabkey[0] != "HIDDEN"){
                   $menu[$row][$tabkey[0]] = '<a class="selected"
                      href="'.$key.'">'.$tabkey[0].'</a>
                }
            }else{
                if($tabkey[0] != "HIDDEN")
                   $menu[$row][$tabkey[0]] = "<a
                        href='$key'>".$tabkey[0]."</a>";
            }

If $tab is an array but $found == 1 I go into this one.


        }else if(is_array($tab)){

            $tabkey = array_keys($tabs[$key]);
            if($tabkey[0] != "HIDDEN")
                $menu[$row][$tabkey[0]] = "<a href='$key'>
                      {$tabkey[0]}</a>";

This next block is for the dropdown menu. Same thing we used above.


            $row = $row+2;
            $submenu = recursive_tabs($tab, $row);

            $subkeys = array_keys($submenu);

            $tabkeys = array_keys($tabs);

            if($subkeys[0]+1 == $row){
                foreach($submenu[$subkeys[0]] as $skey=>$sval){
                    $dropdown[$subkeys[0]-2][$tabkeys[0]][] = $sval;
                }
            }
             $row = $row -2;

The last block is if $tab is not an array. If the $filename == $key then I set $found = 1 and also a change the class to “selected”.


        }else{
            if($filename==$key){
              if($tab != "HIDDEN"){
                $menu[$row][$tab] = '<a class="selected"
                                       href="'.$key.'" >'.$tab.'</a>
              }
              $found = 1;
            }
            else {
                if($tab != "HIDDEN")
                $menu[$row][$tab] = "<a href='$key'  >$tab</a>";
            }
        }
    }
     return $menu;
}

That’s it. Here is all the code together. If you want to see how to use this menu to create a drop down menu keep reading.


function recursive_tabs($tabs, $row=1){
    global $filename;
    global $dropdown;
    static $found=0;

    $row = $row-1;
    $menu= array();
    foreach($tabs as $key=>$tab){
        if(is_array($tab) && !$found){
            $row = $row+2;
            $submenu = recursive_tabs($tab, $row);

            $tabkey = array_keys($tabs[$key]);
            $subkeys = array_keys($submenu);

            $tabkeys = array_keys($tabs);

            if($subkeys[0]+1 == $row){
                foreach($submenu[$subkeys[0]] as $skey=>$sval){
                    $dropdown[$subkeys[0]-2][$tabkeys[0]][] = $sval;
                }
            }
            if($row%2 != 0  && $row !=0){
                return $submenu;
            }

            $row = $row -2;
            if($filename==$key) $found = 1;
            if($found){
                foreach($submenu as $subkey=>$sub){
                   $menu[$subkey] = $sub;
                }
                if($tabkey[0] != "HIDDEN"){
                $menu[$row][$tabkey[0]] = '<a class="selected"
                                      href="'.$key.'" >'.$tabkey[0].'</a>
                }
            }else{
                if($tabkey[0] != "HIDDEN")
                    $menu[$row][$tabkey[0]] = "<a
                                     href='$key'>".$tabkey[0]."</a>";
            }
        }else if(is_array($tab)){
            $tabkey = array_keys($tabs[$key]);
            if($tabkey[0] != "HIDDEN")
                $menu[$row][$tabkey[0]] = "<a href='$key' >
                                                          {$tabkey[0]}</a>";

            $row = $row+2;
            $submenu = recursive_tabs($tab, $row);
            $subkeys = array_keys($submenu);
            $tabkeys = array_keys($tabs);

            if($subkeys[0]+1 == $row && $row>2){
                foreach($submenu[$subkeys[0]] as $skey=>$sval){
                    $dropdown[$subkeys[0]-2][$tabkeys[0]][] = $sval;
                }
            }
             $row = $row -2;
        }else{
            if($filename==$key){
              if($tab != "HIDDEN"){
                 $menu[$row][$tab] = '<a class="selected"
                                             href="'.$key.'" >'.$tab.'</a>
              }
              $found = 1;
            }
            else {
                if($tab != "HIDDEN")
                  $menu[$row][$tab] = "<a href='$key' >$tab</a>";
            }
        }
    }
     return $menu;
}

Once this function returns we’ll need to loop through all the menu’s.

This first thing I do is create an array of divs to wrap the menus in. This is used for styling.


$subdiv[0] = "<div id='toplinks_css'>";
$subdiv[1] = "<div id='sublinks_css'>";
$subdiv[2] = "<div id='sublinks2_css'>";

So as I’m looping through each of the menu items I add a wrapper div around each of them with a unique ID so it can be used with the jquery drop down. The drop down is also wrapped in this div. I also wrap a div around just the link. This is so jquery can can change the style of just that link if you wanted.
The next thing is if there is a drop down menu to add a wrapper around it with position of relative. This will allow each of the drop downs to be positioned under their parent menu. I then wrap the drop down in another div with a unique Id used by jquery and a class called dropdown. The main thing that you need to have in this class is position:absolute, display:none; and z-index:999 (“some number to make sure drop down goes on top”).


$head .= "<script type='text/javascript'>
$(document).ready(function(){";
$count = 0;
foreach($menu as $key=>$tabs){

$str .= $subdiv[$i];
foreach($tabs as $tkey=>$tab){
  $str .= "<div id='header$count' style='float:left; margin-left:20px;'>
       <div id='head$count'>$tab</div>";
  if($dropdown[$key][$tkey]){
     $str .= "<div style='position:relative;'>
                     <div id='dropdowncontainer$count' class='dropdown'>
                         <div class='inner'>";
     foreach($dropdown[$key][$tkey] as $dkey=>$dval){
       $str .= $dval;
    }
$str .= "</div>
</div>
</div><div style='clear:both;'></div>";
}

The next bit is the jQuery. I use a jQuery plugin called hoverIntent which allows you to set a time that the mouse must be over the link before it will execute. This way if you’re just moving the mouse across the page the drop down wont show up. It takes two functions. The first one is on hover and the second is off hover.


$head .= "$('#header$count').hoverIntent(function(){
    $('#head$count a').css('background-color','#0167B1');
";

   if($dropdown[$key][$tkey])
     $head .= "$('#dropdowncontainer$count').show();";
$head .= "    },

  function(){
    $('#head$count a').css('background-color','');";
    if($dropdown[$key][$tkey])
    $head .= "        $('#dropdowncontainer$count').hide();";

$head .= "  });  ";

$str .= "</div>";
$count++;
}
$str .= "<div style='clear:both;'></div></div>";
$i++;
}
$head .=   "});
</script>";

And that will give you a dropdown box which you can now style however you want.

Click here to view the example.

Cross Domain Scripting using Flash

I was building a site for a client when I came across this cross domain security issue. My client had users that needed to be able to send data from their website to my clients server which would process the data and return a new set of data to replace the old. I couldn’t just make an ajax call since the browser wont allow you to receive data from another server. My options to get around this were that I could use iframes or use flash. I decided to go with the flash for no particular reason.

I’m going to go through each file I created. First I’m going to go through the .fla file and then the two .as files and then the javascript file.

I am using Flash 8 and actionscript 2.

To start, create a new .fla file.

Import the following class to allow flash and javascript to communicate.


import flash.external.ExternalInterface;

Flash wont allow you to access another domain without adding the following code. The ‘*’ will allow all domains to be able to access the file on your server or you can add individual domains.


System.security.allowDomain("*");

I create a new instance of DebugHelper which is created in a separate .as file which I’ll show later. This is only used to help me print out text to test the code. It creates a text field and then when you call the Log function will print out the string you pass to it.


var deb = new DebugHelper();
DebugHelper.Log("test");

This is a button I created in the .fla. When it is clicked it loads the policy file. This is an xml file that tells the flash which domains are allowed to access the files that are in the same folder the xml file is in and all subfolders on your server. You can use a ‘*’ to allow all domains. The ExternalInterface.call calls a javascript function which takes the content of the webpage and passes it to flash.


The crossdomain.xml file
<?xml version="1.0"?>
   <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/
dtds/cross-domain-policy.dtd">
   <cross-domain-policy>
       <allow-access-from domain="www.company.com" />
       <allow-access-from domain="*" />
   </cross-domain-policy>

btn.onRelease = function() {
  System.security.loadPolicyFile("http://yourdomain.com/crossdomain.xml");
  var successful = ExternalInterface.call("sendit");
};

This next bit allows the flash element in javascript to send data via the function “sendData” which calls the “xmlhttp” flash function. Then this function creates a new HttpConnection object which is in another .as file which I’ll explain later. You pass to it the filename of where you want to send the data. You then can set the body with the data you passed to the function and whether you want to use POST or GET. I then add the onData event handler to the object so I know when I get data back from the server. When that is fired I set the data to a variable called retText and then pass it to javascript with the call “setData”.


ExternalInterface.addCallback("sendData", this, xmlhttp);
function xmlhttp(body:String) {
	var http = new HttpConnection("http://yoursite.com/crossdomain.php");
	http.setAction("POST");
		http.setBody(body);
		http.setContentType("application/x-www-form-urlencoded");
		http.onData = function(src:String) {
				_root.retText = src;
				ExternalInterface.call("setData", "retText");
		};
		http.send();
}

This last function calls the javascript function “storageOnLoad” so we know the flash is loaded.


var ret = ExternalInterface.call("storageOnLoad");

This next bit is the DebugHelper.as file. This just creates a text field that allows me to call Log() on DebugHelper to help me debug by printing out text to the screen.


class DebugHelper {
	static var log:String;
	static var debug:Boolean;
	function DebugHelper() {
		_root.createTextField("tf", 0, 0, 0, 315, 238);
		log = "";
		var ret;
		_root.tf.text = "Running Flash version: "+getVersion();
		DebugHelper.Debug();
	}

	public static function Debug() {
		debug = true;
	}
	public static function Log(input:String) {
		log = log+" ___ "+input;
		if (debug) {
			_root.tf.text = input+"\r"+_root.tf.text;
		}
	}
}

This next file is the HttpConnection.as file. I start out by defining some variables and functions. The sendAndLoad and Load functions I set to the default LoadVars.prototype.sendAndLoad and LoadVars.prototype.load function which allows me to send this objects data to the given url using the LoadVars class.


 class HttpConnection {
	private var action:String = "POST";
	private var body:String = "";
	private var url:String = "";
	var contentType:String;
	var sendAndLoad:Function = LoadVars.prototype.sendAndLoad;
	var load:Function = LoadVars.prototype.load;
	// note: many headers can't be added. http://livedocs.macromedia.com/
       //   flash/8/main/wwhelp/wwhimpl/common/html/
       //   wwhelp.htm?context=LiveDocs_Parts&file=00002324.html
	var addRequestHeader:Function = LoadVars.prototype.addRequestHeader;
	var onData:Function;

This function creates an instance of this class.


	function HttpConnection(_urls:String) {
		url = _urls;
	}

The next four function allow me to set the url, action, body and contentType.


	function setUrl(_urls:String) {
		if (_urls) {
			url = _urls;
		}
	}
	function setAction(_action:String) {
		if (_action) {
			action = _action;
		}
	}
	function setBody(_body:String) {
		if (_body) {
			body = _body;
		}
	}
	function setContentType(_contentType:String) {
		if (_contentType) {
			contentType = _contentType;
		}
	}

This function is overriding the default toString() function. This automatically gets called when the sendAndLoad function is called. If I wasn’t using an object to call the sendAndLoad function I would have to create an instance of LoadVars and set the variables like this:

var my_lv:LoadVars = new LoadVars();
var result_lv:LoadVars = new LoadVars();
my_lv.id=10;
my_lv.text = “some text”;
my_lv.sendAndLoad(url, result_lv, ‘POST’);

The toString() function would get called to convert my_lv to “id=10&text=some+text”. Since I already have the body in that format I don’t need to do that so I just return the body.


	function toString():String {
		return body;
	}

This is the function that sends the data to the server.


	function send() {
		DebugHelper.Log("HttpConnection send this(action="+action+")");
		// note: if we did a sendAndLoad on a GET, the Flash API would add
                //a question mark '?' at the end of the querystring

		if (action == "GET") {
			load(url);
		} else {
			sendAndLoad(url, this, action);
		}
	}
}

Now the javascript file.

I create a javacript object to hold the flash.


var FlashObject = new Object();
FlashObject.height = 138;
FlashObject.width = 215;

This function will check to see if the flash is installed.


FlashObject.isFlashInstalled = function() {
	var ret;
	if (typeof(this.isFlashInstalledMemo) != "undefined") {
            return this.isFlashInstalledMemo;
        }
	if (typeof(ActiveXObject) != "undefined") {
  	   try {
		var ieObj = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
	    } catch (e) { }
	     ret = (ieObj != null);
	} else {
		var plugin = navigator.mimeTypes["application/x-shockwave-flash"];
		ret = (plugin != null) && (plugin.enabledPlugin != null);
	}
	this.isFlashInstalledMemo = ret;
	return ret;
}

This simply gets the flash element.


FlashObject.getFlash = function() {
	return document.getElementById("flash");
}

This function will write the flash object on your page. For me, I needed to send the entire content of the body to flash and then replace it without replacing the flash object. So I needed to add a wrapper div around the entire content of the body. That way when I get the data back from flash I would replace everything inside that wrapper div. This will keep the flash from getting over written which can cause some errors. If you don’t need to replace the entire page then it’s not necessary.


FlashObject.writeFlash = function() {
	var swfName = "http://yourdomain.com/crossdomain.swf";
	if (window.ActiveXObject && !FlashObject.isFlashInstalled())
	{
	  // browser supports ActiveX
	 // Create object element with
	 // download URL for IE OCX
	 document.body.innerHTML="<div id='wrapperdiv'>"+document.body.innerHTML+
                                                    "</div>";
	 document.write('<object classid=
                           "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
	 document.write(' codebase="http://download.macromedia.com');
	 document.write('/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0"');
	 document.write(' height="'+this.height+'" width="'+this.width+'"
                                   id="flash">');
	 document.write(' <param name="movie" value="' + swfName + '">');
	 document.write(' <param name="quality" value="high">');
	 document.write(' <param name="allowScriptAccess" value="always">');
	 document.write(' <param name="swliveconnect" value="true">');
	 document.write('<\/object>');
	}
	else
	{
	 // browser supports Netscape Plugin API
	 document.body.innerHTML="<div id='wrapperdiv'>"+document.body.innerHTML+
                                           "</div>";
         document.write('<object id="flash" data="' + swfName + '"');
	 document.write(' type="application/x-shockwave-flash"');
	 document.write(' height="'+this.height+'" width="'+this.width+'">');
	 document.write('<param name="movie" value="'+swfName+'">');
	 document.write('<param name="quality" value="high">');
	 document.write('<param name="swliveconnect" value="true">');
	 document.write('<param name="pluginurl"
                    value="http://www.macromedia.com/go/getflashplayer">');
	 document.write('<param name="pluginspage"
                     value="http://www.macromedia.com/go/getflashplayer">');
	 document.write(' <param name="allowScriptAccess" value="always">');
	 document.write('<p>You need Flash for this.');
	 document.write(' Get the latest version from');
	 document.write(' <a href="http://www.macromedia.com/software/
                                    flashplayer/">here<\/a>.');
	 document.write('<\/p>');
	 document.write('<\/object>');
	}
}

The next few functions are used to load up the flash.


FlashObject.load = function() {
	if (typeof(FlashObject.onload) != "function") { return; }

	if (FlashObject.isFlashInstalled()) {
		// if we expect Flash to work, wait for both flash and the document to be loaded
		var finishedLoading = this.flashLoaded && this.documentLoaded;
		if (!finishedLoading) { return; }
	}
	// todo: cancel timer
	var fs = FlashObject.getFlash();

	if ((!FlashObject.isFlashInstalled() || this.flashLoaded) && fs) {
		if (FlashObject.checkFlash()) {
			callAppOnLoad(fs);
		} else {
			callAppOnLoad(null);
		}
	} else {
		callAppOnLoad(null);
	}

	function callAppOnLoad(fs) {
		if (FlashHelper.onloadCalled) { return; } // todo: figure out why this case gets hit
		FlashHelper.onloadCalled = true;
		FlashHelper.onload(fs);
	}
}

function storageOnLoad() {
	FlashObject.flashLoaded = true;
	FlashObject.load();
}

This function is nice because if you already have a window.onload event and need to add more onload events this will add them.


FlashObject.addLoadEvent = function(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

This initializes the flash object variables and onload functions. If you wanted the flash to automatically run on page load you could simply add the function call (in this case “sendit()”) inside the onload function.


FlashObject.init = function() {
	this.flashLoaded = false;
	this.documentLoaded = false;
	// attach to the window.onload event
	this.addLoadEvent(onload);
	function onload() {
		FlashObject.documentLoaded = true;
		FlashObject.load();
	}
}

FlashObject.init();

The function that actually gets the data you want to send and then calls the flash function “sendData”.


 function sendit() {
    var body = 'uid='+testdata;
    body += '&pagetext='+
       encodeURIComponent(document.getElementById('wrapperdiv').innerHTML);
    FlashObject.getFlash().sendData(body);
 }

When the data gets returned it stores it in a variable which we set in the http.onData function. We then pass the name of the variable to this function and call GetVariable which returns the data.


function setData(varname){
	var str = FlashObject.getFlash().GetVariable(varname);
	document.getElementById("wrapperdiv").innerHTML = str
}

And finally this writes out the flash object to the page.


FlashObject.writeFlash();

Now all anyone would need to do would be to include this javascript file at then end of their page right before the body tag.

Here are the .fla, .as and .js files.
CrossDomain.zip

Access Webcam with Flash

I wanted a user to be able to upload pictures via their webcam. This post will show how to make a flash application using Flash 8 and actionscript 2 to have a website access a users webcam and take a picture and save it.

First off we need to import the following files:


 //This will allow us to create a photo
import flash.display.BitmapData;
// This is used to mirror the look of the webcam
import flash.geom.Matrix;
 //Used to interact with javascript
import flash.external.ExternalInterface;

This code is used to actually display the webcam on the screen except we’re setting the video visible to false.


video_vobj._visible = false;
var cam:Camera = Camera.get();
cam.setQuality(0,30);
cam.setMode(300, 400, 28);

Occasionally when you reload the page the webcam displays a scrambled image or the last frame displayed. I rather not see anything if the camera isn’t ready which is why we set the video visible to false to begin. This next bit is a little hack to fix that problem.


var firstone:Boolean = true;
cam.onActivity = function(isActive:Boolean) {
  if(firstone){
  //clears the video screen so it won't display the scrambled screen or frozen frame.
	video_vobj.clear();
        firstone = false;
        video_vobj._visible = true;
  }
};

The position of the video.


var videoX:Number = video_vobj._x;
var videoY:Number = video_vobj._y;
var videoW:Number = video_vobj._width;
var videoH:Number = video_vobj._height;

In order for the website to access the webcam, a user must give the website permission.

If muted is true it means that the website currently doesn’t have access. By default flash will popup with a allow/deny dialog box but I prefer to display the settings dialog box. This is because the settings dialog box allows you to check a remember box so the website will always have access to the webcam unless you go into the settings and change it again. It also has a few other options like choosing a different webcam.


if(cam.muted == true){
      //Shows the setting dialog box with which tab to display passed to it.
	System.showSettings(0);
}else{
	video_vobj.attachVideo(cam);
	createbutton();
}

This is a camera event that is triggered when access to the webcam has been granted or denied.

cam.onStatus = function(infoObj:Object) {
    switch (infoObj.code) {
    case 'Camera.Muted' :
    break;
    case 'Camera.Unmuted' :
	  video_vobj.attachVideo(cam);
	  createbutton();
    break;
    }
}

First we’ll create a movie clip that will hold the button to take the picture.


var root:MovieClip = this;
root._x = 50;
root.createEmptyMovieClip("take", root.getNextHighestDepth());

I wanted to create a button that a user could click to take a picture. This could have just as easily been accomplished by adding a button in flash but I wanted to try it this way.


function createbutton(){
	take._x = 10;
	take._y = 435;
	var fillType:String = "linear";
	var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
	var alphas:Array = [100, 100, 100, 100];
	var ratios:Array = [0, 126, 127, 255];
	var matrix:Object = {matrixType:"box", x:0, y:0, w:80, h:30,
        r:90/180*Math.PI};
	take.createEmptyMovieClip("takebtn", reset.getNextHighestDepth());
	take.takebtn.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
	take.takebtn.beginGradientFill(fillType, colors, alphas, ratios, matrix);
	take.takebtn.lineTo(120, 0);
	take.takebtn.lineTo(120, 30);
	take.takebtn.lineTo(0, 30);
	take.takebtn.lineTo(0, 0);
	take.takebtn.endFill();
	take.createTextField("labelText", take.getNextHighestDepth(), 0, 5,
         take._width, 24);
	take.labelText.text = "Take Picture";
}

Takes the inverse of the xscale in order to mirror the image.


video_vobj._x = video_vobj._width;
video_vobj._xscale = -video_vobj._xscale;

When you click the Take Picture button it triggers an event that will store the image that is currently on the screen
into this bitmap.


var screenS:BitmapData = new BitmapData(video_vobj._width, video_vobj._height,
                                       true, 0xff0000);

This function is called to reset everything to how it was at the start.


function resetflash(){
	root.holder.removeMovieClip();
	root.myButton1.removeMovieClip();
	root.reset.removeMovieClip();
	if(root.loader)
		root.loader.removeMovieClip();
}

This is the code to actually creates the image. The screenS.draw function takes the video and matrix to draw a mirrored image.


take.onRelease = function() {
	var mymatrix:Matrix = new Matrix();
	if(mymatrix.a>0){
		mymatrix.a=-1.875*mymatrix.a;
		mymatrix.d= 3.333*mymatrix.d;
		mymatrix.tx= video_vobj._width;
	}
       screenS.draw(video_vobj, mymatrix);

I create a empty movie clip to hold and display the image. This makes it easy to remove the image by simply removing the movie clip. When I create one I pass the name and the depth. The root.getNextHighestDepth() makes sure that flash renders the movie clip in front of all the others.


root.createEmptyMovieClip("holder", root.getNextHighestDepth());
holder.attachBitmap(screenS, 1);
holder._x = videoX;
holder._y = videoY;
holder._width = videoW;
holder._height = videoH;

Here I create another button to reset everything to the start positions.


root.createEmptyMovieClip("reset", root.getNextHighestDepth());
reset._x = 10;
reset._y = 435;
var fillType:String = "linear";
var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
var alphas:Array = [100, 100, 100, 100];
var ratios:Array = [0, 126, 127, 255];
var matrix:Object = {matrixType:"box", x:0, y:0, w:80, h:30, r:90/180*Math.PI};
reset.createEmptyMovieClip("resetbtn", reset.getNextHighestDepth());
reset.resetbtn.lineStyle(0, 0x820F26, 60, true, "none", "square", "round");
reset.resetbtn.beginGradientFill(fillType, colors, alphas, ratios, matrix);
reset.resetbtn.lineTo(120, 0);
reset.resetbtn.lineTo(120, 30);
reset.resetbtn.lineTo(0, 30);
reset.resetbtn.lineTo(0, 0);
reset.resetbtn.endFill();
reset.createTextField("labelText", reset.getNextHighestDepth(), 0, 5,
   reset._width, 24);
reset.labelText.text = "Discard";

Here I create another button in order to save the image.


root.createEmptyMovieClip("myButton1", root.getNextHighestDepth());
myButton1._x = 150;
myButton1._y = 435;
var fillType:String = "linear";
var colors:Array = [0xFAD4DB, 0xEC748B, 0xC13A59, 0xA81230];
var alphas:Array = [100, 100, 100, 100];
var ratios:Array = [0, 126, 127, 255];
var matrix:Object = {matrixType:"box", x:0, y:0, w:80, h:30, r:90/180*Math.PI};
myButton1.createEmptyMovieClip("buttonBkg", myButton1.getNextHighestDepth());
myButton1.buttonBkg.lineStyle(0, 0x820F26, 60, true, "none",
   "square", "round");
myButton1.buttonBkg.beginGradientFill(fillType, colors, alphas,
   ratios, matrix);
myButton1.buttonBkg.lineTo(120, 0);
myButton1.buttonBkg.lineTo(120, 30);
myButton1.buttonBkg.lineTo(0, 30);
myButton1.buttonBkg.lineTo(0, 0);
myButton1.buttonBkg.endFill();
myButton1.createTextField("labelText", myButton1.getNextHighestDepth(),
  0, 5, myButton1._width, 24);
myButton1.labelText.text = "Save Image";

reset.onRelease = resetflash;

This is the event that will trigger the image to begin saving. I first create a movie clip to display a red film over the picture and text to display the progress of the picture. It then creates a SaveImage object. This object is defined in SaveImage.as which is a file you’ll have to create.


myButton1.onRelease = function(){
		tbo.text= screenS.width;
		root.createEmptyMovieClip("loader", root.getNextHighestDepth());
		loader._x = 0;
		loader._y = 0;
		loader.beginFill(0xFF0000, 50);
		loader.lineTo(300, 0);
		loader.lineTo(300, 400);
		loader.lineTo(0, 400);
		loader.lineTo(0, 400);
		loader.endFill();

		loader.createTextField("my_txt", 1, 0, 150, 300, 100);
		var my_fmt:TextFormat = new TextFormat();
		my_fmt.color = 0xFFFFFF;
		my_fmt.align="center";
		loader.my_txt.text = "Progress";
		loader.my_txt.setTextFormat(my_fmt);

		var si:SaveImage = new SaveImage();
		si.addListener( listener ); // assign a listener
		si.print(root, 0, 0, video_vobj._width, video_vobj._height) // copy the root
	}

};

I create a listener object that I added to si (SaveImage object). This is used to view the progress of the picture being saved and also when it is completed.


var listener:Object = new Object();

listener.onProgress = function(target:MovieClip, loaded:Number, total:Number){
var perc = Math.round((loaded/total)*100)
	var my_fmt:TextFormat = new TextFormat();
	my_fmt.color = 0xFFFFFF;
	my_fmt.align="center";
       loader.my_txt.text = "computing "+perc+"%";
	loader.my_txt.setTextFormat(my_fmt);
}

When the image is finished copying the data it sends it to some server file for processing via the sendAndLoad function. It then takes whatever was returned from the file and stores it in result_lv. When data is put into that LoadVars object an event onData is triggered. The src variable is what is returned and in this case is the name of the image I created. I then call my javascript function with the ExternalInterface.call which will display the image.


listener.onComplete = function(target:MovieClip, load_var:LoadVars){
	var result_lv:LoadVars = new LoadVars();
       result_lv.onData = function(src:String) {
		var retText = src;
		resetflash();
		ExternalInterface.call("showimg", retText);
    };
    load_var.sendAndLoad("yourfile.php", result_lv, "POST");
}

This next part is to make the SaveImage.as file. Everthing will be in class SaveImage. You can’t have more than one class in a .as file. The first part is to define some variables.


 class SaveImage {
    public var addListener:Function
    public var broadcastMessage:Function
    private var id:   Number;
    public  var record:LoadVars;

This function initializes the object and makes it an event broadcaster. This allows us to create custom event handling mechanisms. The listener object we added earlier will now receive notification anytime we call the broadcastMessage() method.


    function SaveImage(){
        AsBroadcaster.initialize( this );
    }

This is the function we called to begin copying the image data. We store it in the LoadVars object “record”. Then we call the setInterval function that calls copysource.


    public function print(mc:MovieClip, x:Number, y:Number, w:Number, h:Number){
        if(x == undefined) x = 0;
        if(y == undefined) y = 0;
        if(w == undefined) w = mc._width;
        if(h == undefined) h = mc._height;
        record = new LoadVars();
        record.width  = w
        record.height = h
        record.cols   = 0
        record.rows   = 0
        id = setInterval(copysource, 5, this, _root.video_vobj, _root.screenS);
    }

This function is the one that is actually copying all the image data pixel by pixel. Instead of looping through all of it at once I do it row by row by using the setInterval function. I do this so I can show the progress which is displayed when I call broadcastMessage(“onProgress”). After it is completed I call the clearInterval(this.id) so it wont call the funtion anymore.


    private function copysource(scope, movie, bit){
        var pixel:Number
        var str_pixel:String
        scope.record["px" + scope.record.rows] = new Array();
        for(var a = 0; a < bit.width; a++){
            pixel     = bit.getPixel(a, scope.record.rows)
            str_pixel = pixel.toString(16)
            if(pixel == 0xFFFFFF) str_pixel = "";   // don't send blank pixel
            scope.record["px" + scope.record.rows].push(str_pixel)
        }

        scope.broadcastMessage("onProgress", movie, scope.record.rows, bit.height)
        scope.record.rows += 1
        if(scope.record.rows >= bit.height){
            clearInterval(scope.id)
            scope.broadcastMessage("onComplete", movie, scope.record)
        }
    }
}

Here is the php code I use to process the post variables.

View PHP code


View All Flash Code

View Example

Here is the .fla and .as files
Flash Files

Multiple File Upload Using Flash


I came across this issue recently when I was building a website where I wanted users to be able to upload multiple photos. Since they were allowed to upload as many photos as they wanted I thought it would be nice for them not to have to do it one by one. So I began looking around to figure out the best way to do this.
I came across a few options to do this.

  • I could spend a few hundred dollars on a java applet. Though this is a nice application that lets you view and select the files you want, it is a little expensive when you just want the functionality of uploading multiple files. Or you could build your own. Though for me, I think buying one is cheaper than spending the time on building one.
  • I could use flash to turn my regular browse dialog box into a multiple file upload dialog box.

For now, I decided to go with option B. At some point I might add option A to the site but it will still be nice to have the Flash based upload application for those people that don’t have java installed. And if they don’t have flash installed I’ll make sure they can upload one file at a time as well.

So this is how I accomplished it.

First off I am using Flash 8 and actionscript 2

Create a new Flash document and add a button. Originally I didn’t add a button and used a regular html button to open the browse dialog box. This worked fine unless you have Flash 10 installed which has extra security features which don’t allow that. So I had to add a button in flash to get around it.

After you create the button go back to the root and add everything there.
Here is what we need to include:

import flash.net.FileReferenceList; (this is to actually select multiple files at once)
import flash.net.FileReference; (this is the individual file that is being uploaded)
import flash.external.ExternalInterface; (I included this because I like to be able to call javascript functions in flash and flash functions in javascript. But it is not needed to upload multiple files.)

I create two listener objects, one for the FileReferenceList and one for the FileReference.

var listener:Object = new Object();
var listener2:Object = new Object();

I then create a few variables:

var itemnum = 0; // This is the current file position in the fileList array
var numfiles = 0; // How many files are being uploaded
var list:Array; // This is what we will store the files being uploaded into

This is the onSelect event that is fired after selecting file(s) in the browse dialog box and then hitting the Select button.

listener.onSelect = function(fileRefList:FileReferenceList) {
	list = fileRefList.fileList;
	numfiles = list.length;
	uploadItem(itemnum);   // function to actually upload the photos
}

This event is called after each photo selected has been uploaded. It also calls a javascript function “showpics” which is an ajax call to display each photo after it has been uploaded.

listener2.onComplete = function(){
	itemnum += 1;
	ExternalInterface.call("showpics");
	if(itemnum<numfiles)
		uploadItem(itemnum);  //call function on next photo
}

This is the function to actually upload the file . The file you send it to should be a relative link otherwise flash 10 will throw a security error.

function uploadItem(num:Number){
	var item:FileReference = list[num];
	item.addListener(listener2);
	item.upload("yourfile.php");
}

We need to create an array of the types of files that we want to to be able to select from the browse dialog box.

var allTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.JPG;*.JPEG;*.JPE;*.GIF;*.PNG;)";
imageTypes.extension = "*.jpg; *.JPG; *.jpeg; *.jpe; *.gif; *.png;";
allTypes.push(imageTypes);

Finally, this is the function that will actually display the browse dialog box.

function uploadFile(){
	var fileRef:FileReferenceList = new FileReferenceList();
	fileRef.addListener(listener);
	fileRef.browse(allTypes);
}

The next part is to add the onClick handler to the button. Make sure you set the variable name of the button to something; in this case “btn”.

btn.onClick = function(){
uploadpics();
}

This next part allows me to use a simple input of type button to call the uploadFile function unless the user has flash 10 installed and then this wont work.

ExternalInterface.addCallback("javascript_function_name", this, "uploadFile");

And that is it. Nice and simple.

* Note: Apparently if you’re using a Mac OS the onComplete event doesn’t work unless you echo “1” at the end of the file you passed the image to. This way Macs know the file finished uploading.

**Also note that there is an even simpler and quicker way if all you want to do is upload the images without changing them.

To do it that way just change the following code:

listener.onSelect = function(fileRefList:FileReferenceList) {
    list = fileRefList.fileList;
    var item:FileReference;
    numfiles = list.length;
    for(var i=0; i<numfiles; i++){
        item = list[i];
  	item.upload("yourfile.php");
    }
}

I didn’t do it this way because I am creating thumbnails of each image and needed each image to be done before the next image is uploaded.

View Example

Download FLA File

Show Code