Before I installed this I noticed that sometimes my blog would timeout and send back only a white page. I thought it was likely because I am on shared hosting and sometimes the PHP or MySQL just wasn’t ready to kick in fast enough (because it never it happens with HTML pages and it seemed like once I hit the first page everything would be “warmed up” and this blog would run normally).

I also been meaning to figure out how to get gzip content encoding on my pages, although I never really tried.

Anyway I installed WP Super Cache and it’s just great. If a post isn’t updated, or doesn’t receive any new comments, then WP Super Cache sends out a cached version and to my understanding should be saving my account a lot of processor cycles and db requests. I don’t post a lot, and I don’t get many comments on my posts so I see absolutely no reason not to have this on. Also, now the cached versions of my pages are gzipped.

Here’s a screenshot of my Firebug console the first time I hit my post “Flash/Actionscript: Innaccurate Math Results” just after installing WP Super Cache:

and here’s a screenshot after… now it’s gzipped, so it weighs in at a lot less and takes less server-side thought so it comes up nice and quick:

Geez… I cut it off in the screen shot, but the page (minus images/css) went from about 25kb to 6kb.

I know this is nothing new to most people and that there are plenty of better articles on this subject. I just get excited when things work nicely.

Problem:

You publish your SWF from the Flash CS3 IDE and everything looks fine. You, or someone else checks out the SWF in a browser and although everything kind of works, certain elements like text fields and component buttons aren’t rendering properly!

Solution:

Sometimes certain revisions of the Flash 9 player behave differently than expected, but there is a way you can look into it. Read on…

I actually just tried to recreate this, and I can’t. All I know, is that on two particular occasions while working on moderate sized flash projects certain revisions of the flash player would fail to render some things properly (but not every time). This kind of thing is very frustrating, and if you think it might be happening to you, this is what I suggest:

• Go here: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14266 and download the Flash Player 9 archive file (I had this problem with FP9).
• Go here: http://www.adobe.com/support/flashplayer/downloads.html and download the Flash uninstaller.
• Uninstall Flash, install a different revision, and test your movie (in the browser). In my case, revision 47 caused this problem, and sure enough anyone testing the movie that saw this problem had revision 47. I haven’t been able to recreate this error by creating a new flash movie using components and viewing it with flash player rev 47, but there must have been some combination of things that the particular revision didn’t like.
• If you find a revision that’s giving you problems, make sure to check for a more current one in your flash embed code.

This is a screenshot of the unzipped folder containing all the different versions of Flash 9. The ones ending in “win” would be for Firefox and Netscape, and the ones ending in “winax” are for IE (ActiveX). There’s some linux and mac ones in there too. I believe “SA” stands for standalone. Play around.

1. Draw, or open up something you want to shade. In this case, I have Rick’s head from Vote4Oz

2. Using the eyedropper tool (I), select the main color.

3. Open up the color picker, and slide the bar on the right down slightly so that you end up with a slightly darker shade of the color.

4. Select the fill of your object

5. Now, choose the brush tool (b), and in the options portion of the toolbar, select Paint Selection

6. Run your brush over the area you want shaded, only what you have selected will be affected by the brush, so go nuts.

And there ya go. She’s a beaute.

Note: If you don’t already, using the keyboard to switch between tools will save you tons of time in Flash. With this technique, toggling between the brush tool and the selection tool using B and V on the keyboard will make you an efficient shading machine.

I found this code:

/* Client-side access to querystring name=value pairs
	Version 1.2.3
	22 Jun 2005
	Adam Vandenberg
*/
function Querystring(qs) { // optionally pass a querystring to parse
	this.params = new Object()
	this.get=Querystring_get
 
	if (qs == null)
		qs=location.search.substring(1,location.search.length)
 
	if (qs.length == 0) return
 
// Turn <plus> back to <space>
// See: http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.13.4.1
	qs = qs.replace(/\+/g, ' ')
	var args = qs.split('&') // parse out name/value pairs separated via &
 
// split out each name=value pair
	for (var i=0;i<args.length;i++) {
		var value;
		var pair = args[i].split('=')
		var name = unescape(pair[0])
 
		if (pair.length == 2)
			value = unescape(pair[1])
		else
			value = name
 
		this.params[name] = value
	}
}
 
function Querystring_get(key, default_) {
	// This silly looking line changes UNDEFINED to NULL
	if (default_ == null) default_ = null;
 
	var value=this.params[key]
	if (value==null) value=default_;
 
	return value
}

So throw that in your page, and then call that sucker like this:

// Parse the current page's querystring
var qs = new Querystring()

And then just go right on ahead and populate some variables with some query string variables:

var v1 = qs2.get("name1")
var v3 = qs2.get("name3", "default value")

And use that information for whatever you needed it for in the first place. Is nice?

Problem:

You want to save an image from Flash to a server using Actionscript 3.0 and ASP.NET.

Solution:

Read this article!

Note: This blog is hosted on a Linux based server that uses PHP, therefore I can’t show you a working example directly on this blog (unless anyone with a Windows based hosting account would like to host one for me?). However, I can assure you this does work and you can download the files here and try it for yourself.

Download “FlashBitmapSave.zip”

Get this thing running

Open the downloaded website in Visual Studio 2008 or Visual Web Developer Express 2008. 2005 versions should be fine as well.

Run it.

The default page should come up in your browser. You’ll see my example Flash app. Draw a picture and click “save to server” to - of course - save a JPEG version of your drawing from Flash.

Note: Saved JPEGs will be assigned a random GUID as a filename and saved directly to the root of your C: drive. You can modify the path in App_Code/Service.vb. If you need to know more about that aspect of it, I would continue reading the rest of this post.

If the flash app comes up but gives you the message “webservice failed to initialize…” then:

Click on the root of the project in your solution explorer.

In the properties panel below, take a look at your Virtual Path.

It should only have a “/” in it.

Try it again.

The process

• Take a BitmapData object in Flash, and convert it to a ByteArray object using the JPGEncoder class (or, in my example, the Asynchronous JPEG Encoder class).
• Take that ByteArray and Base64 encode it. We do this so that Actionscript and the .NET back-end will be speaking the same language. If we were using Flex and remoting software like WebORB, this type of conversion would likely happen automatically when sending or receiving a ByteArray object to/from Actionscript or .NET. But for this one-off scenario, doing it ourselves isn’t a big deal.
• Use a third party AS3 webservice class to send the encoded ByteArray to our .NET webservice.
• Our .NET webservice unencodes the ByteArray into its own form of ByteArray, creates a random file name using a GUID, and then saves the raw binary information to a .jpg file.

Some extra stuff you will need

• Base64 encoder/decoder class
  This class from Dynamic Flash will be used to encode our ByteArray to Base64.
• WebService component
  Adobe left the WebService classes out of Flash CS3. wellconsidered made their own. This is how we’ll be communicating with the server. This download is available as a .swc and needs to be dropped into your .fla to work.
• Asynchronous JPEG Encoder
  In my example I use the Asynchronous JPEG Encoder. You could also use Adobe’s regular JPEG encode available in the AS3 CoreLib.

The Code

Now I’m just going to post the code. I did my best to comment the code thoroughly, but I’m not going to go through it line by line in this post. I’ll assume that if you’re in need of saving bitmap information from flash to a server using .NET, that most of what’s going on you already understand and maybe just needed an example to help you along. So here ya go!

The actionscript 3.0 code:

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.text.TextField;
        import flash.net.*;
        import flash.events.*;
        import flash.display.MovieClip;
	import flash.utils.ByteArray;
 
	// We'll be sending a ByteArray encoded as Base64, and then decoding it on the .NET side.
	// http://dynamicflash.com/goodies/base64/
	import com.dynamicflash.util.Base64;
 
	// be.wellconsidered classes give us an easy means to communicate with webservices.
	// The extension needs to be installed and the component then dropped into your .FLA.
	// You'll see a component called "Service" in the library of the example .FLA.
	// http://www.wellconsidered.be/blog/as3-webservice-component/
	import be.wellconsidered.services.WebService;
	import be.wellconsidered.services.Operation;
	import be.wellconsidered.services.events.OperationEvent;
	import be.wellconsidered.services.events.WebServiceEvent;
 
	// com.pfp includes classes for the Asynchronous JPEG encoder.  There is also a JPEG encoder
	// in Adobe's CoreLib (http://code.google.com/p/as3corelib/), but because this one is asynchronous it allows to 
	// monitor the rendering of the jpeg and therefore create a progress bar.  It is also essential when rendering larger
	// bitmaps, otherwise Flash could time out during the processing.
	import com.pfp.events.*;
	import com.pfp.utils.*;
 
    public class FlashBitmapSave extends MovieClip
    {
	// we create our WebService object.  Remember to include "?wsdl" in the URL.
	private var wsMainService:WebService = new WebService("/Service.asmx?wsdl");
 
                public function FlashBitmapSave()
                {
                        mcDrawingBoard.addEventListener(MouseEvent.MOUSE_DOWN, mcDrawingBoard_MouseDown);
			btnSaveToServer.addEventListener(MouseEvent.CLICK, btnSaveToServer_Click);
 
			// the listener on our webservice will let us know if there's a problem with the webservice,
			// if the url is wrong, if the service is down, etc.
			wsMainService.addEventListener(WebServiceEvent.INITFAILED, wsMainService_InitFailed);
                }
 
		// **** functions for the drawing pad **** //
 
		private function mcDrawingBoard_MouseDown(e:MouseEvent):void
		{
			mcDrawingBoard.addEventListener(MouseEvent.MOUSE_MOVE, mcDrawingBoard_MouseMove);
			stage.addEventListener(MouseEvent.MOUSE_UP, stage_MouseUp);
			mcDrawingBoard.graphics.moveTo(mcDrawingBoard.mouseX, mcDrawingBoard.mouseY);
		}
 
		private function mcDrawingBoard_MouseMove(e:MouseEvent):void
		{
			mcDrawingBoard.graphics.lineStyle(1, 0x000000);
			mcDrawingBoard.graphics.lineTo(mcDrawingBoard.mouseX, mcDrawingBoard.mouseY);
		}
 
		private function stage_MouseUp(e:MouseEvent):void
		{
			mcDrawingBoard.removeEventListener(MouseEvent.MOUSE_MOVE, mcDrawingBoard_MouseMove);
		}
 
		// ************************************** //
 
		private function btnSaveToServer_Click(e:MouseEvent):void
		{
			var bmdSnapshot:BitmapData = new BitmapData(mcDrawingBoard.width, mcDrawingBoard.height);
			// take a snapshot of what was drawn in "mcDrawingBoard"
			bmdSnapshot.draw(mcDrawingBoard);
 
			saveImage(bmdSnapshot);
		}
 
		private function wsMainService_InitFailed(e:WebServiceEvent):void
		{
			log("Webservice failed to initialize.");
		}
 
		private function saveImage(bmdSend:BitmapData):void
		{
			// create a new JPEGAsyncEncoder.  80 is the JPEG quality.
			var jpgEncoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(80);
 
			// encodes 400 pixels before sending out a ProgressEvent.  That means every 400 pixels the CPU has a chance to "breath"
			// and process some other code.  
			jpgEncoder.PixelsPerIteration = 400;
 
			jpgEncoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, jpgEncoder_Complete);
			jpgEncoder.addEventListener(ProgressEvent.PROGRESS, jpgEncoder_Progress);
 
			jpgEncoder.encode(bmdSend);			
		}
 
		private function jpgEncoder_Complete(e:JPEGAsyncCompleteEvent):void
		{
			var jpgByteArray:ByteArray = new ByteArray();
			// put the raw image data we got back from the encoder into our ByteArray
			jpgByteArray = e.ImageData;
 
			sendToServer(jpgByteArray);
		}
 
		private function jpgEncoder_Progress(e:ProgressEvent):void
		{
			log("encoding... " + Math.round(e.bytesLoaded / e.bytesTotal * 100).toString());
		}
 
		private function sendToServer(byteArray:ByteArray):void
		{
			var opJPEGSaver:Operation = new Operation(wsMainService);
 
			// unfortunately, I don't think the WebService class we're using has a working ProgressEvent.
			// if I'm wrong, please let me know!
			opJPEGSaver.addEventListener(OperationEvent.COMPLETE, opJPEGSaver_Complete);
			opJPEGSaver.addEventListener(OperationEvent.FAILED, opJPEGSaver_Failed);	
 
			var strEncodedString:String = new String();
			// the Base64 class is static, so we can just call it using Base64.<whatever>
			strEncodedString = Base64.encodeByteArray(byteArray);
 
			// send the encoded bytes to our webservice function we called "SaveJPEG".
			opJPEGSaver.SaveJPEG(strEncodedString);
		}
 
		private function opJPEGSaver_Complete(e:OperationEvent):void
		{
			log("ByteArray successfully sent to server.");
		}
 
		private function opJPEGSaver_Failed(e:OperationEvent):void
		{
			log("Error sending ByteArray to server.");
		}
 
		private function log(strLog:String):void
		{
			// my own way of tracing to the textfield txtTrace -- as you can see.
			// not an important part of anything going on here.
			txtTrace.appendText(strLog + "\n");
			traceScrollBar.scrollTarget = txtTrace;
			txtTrace.scrollV = txtTrace.numLines;
		}
    }
}

The VB.NET code:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.IO
 
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
     Inherits System.Web.Services.WebService
 
 
    <WebMethod()> _
    Public Function SaveJPEG(ByVal strJPEG As String) As String
 
        'saves an uploaded photo and returns a unique name reference
 
        Dim BinaryContent As Byte() = Convert.FromBase64String(strJPEG)
 
        Try
            'generate a unique name (GUID) for the filename
            Dim strFileName As String = System.Guid.NewGuid.ToString("n")
            'MAKE SURE to change the save path!
            Dim fStream As New FileStream("C:\" + strFileName + ".jpg", FileMode.CreateNew)
            Dim bw As New BinaryWriter(fStream)
 
            bw.Write(BinaryContent)
            bw.Close()
            fStream.Close()
 
            'return the filename for use in Flash
            Return strFileName
 
        Catch ex As Exception
 
            Return ex.Message
 
        End Try
 
    End Function
 
End Class

Question: What do you think it would be like to have thirty dogs?

Answer: Ruff!

Only you would bark that answer at the person before they really had any time to think about it.

I made that up a couple weeks ago, I thought it was pretty funny. Tell everybody.

Here’s the function:

private function scaleFromCenter(ob:*, sx:Number, sy:Number, ptScalePoint:Point) { 
	var m:Matrix=ob.transform.matrix;
	m.tx -= ptScalePoint.x;
	m.ty -= ptScalePoint.y;
	m.scale(sx, sy);
	m.tx += ptScalePoint.x;
	m.ty += ptScalePoint.y;
	ob.transform.matrix = m;
}

Now to make this work, you could call it like this:

//this will create a point object at the center of the display object
ptRotationPoint = new Point(mcPhoto.x + mcPhoto.width/2, mcPhoto.y + mcPhoto.height/2);
//call the function and pass in the object to be rotated, the amount to scale X and Y (sx, sy), and the point object we created
scaleFromCenter(mcPhoto, 2, 2, ptScalePoint);

In this example we’re subbing in “2″ for both the sx and sy values. This will scale our image to twice its size. If you want to scale down, use numbers lower than 1.

Problem:

You’re working some math equations with Actionscript and tracing the results when you notice some results are off by a very small value.
output:

2
2.1
2.2
2.3
2.4
2.5000000001
2.6
2.7000000001
2.8
2.9
3

Solution:

This is called a floating point error and is apparently a normal computing error that affects all aspects of computing, not just flash. You can fix this by running the values through the correctFloatingPointError function I’ve posted below.

I originally found this information/code on a post called Floating-point errors got you down?

I won’t repeat everything I read there, you can check that out yourself. However, I thought I would re-post this information with the heading “Innaccurate math results” because that’s what I had been searching for before I realized I was experiencing a floating point error. Anyway, here’s the code:

/**
 * Corrects errors caused by floating point math.
 */
public function correctFloatingPointError(number:Number, precision:int = 5):Number
{
	//default returns (10000 * number) / 10000
	//should correct very small floating point errors
	var correction:Number = Math.pow(10, precision);
	return Math.round(correction * number) / correction;
}
/**
 * Tests if two numbers are <em>almost</em> equal.
 */
public function fuzzyEquals(number1:Number, number2:Number, precision:int = 5):Boolean
{
	var difference:Number = number1 - number2;
	var range:Number = Math.pow(10, -precision);
	//default check:
	//0.00001 <difference> -0.00001
	return difference <range && difference> -range;
}
/*
Copyright (c) 2007 Josh Tynjala
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
*/

• You don’t actually need Flash/Flex Builder to make Flash anymore There’s plenty of free, open-source ways to compile Actionscript and MXML and end up with SWF file.
• Flex is actually pretty cool I think I was one of many that had mis-perceptions about Flex. All it really is, is a way to use the Flash format to create data rich internet applications. You still end up with a SWF file and you don’t necessarily need any special server software.

I don’t know much about Flex yet, except that it reminds me a lot of ASP.NET in the sense that it has a lot of similar data controls and similar terms. Flex, however, is only for the front-end interface and you will still need a server side solution such as PHP or ASP.NET to actually handle the data. What’s cool is that Flex has style and because the end result runs in the Flash player it should be a consistent experience across all browsers. You also have the freedom to do any type of animation and effects you can do with Flash/Actionscript with the full confidence it will work as planned.

• Download the “Free Adobe Flex SDK” You may notice there is also an open-source version. I wouldn’t recommend this for starting. Because the entire Flex SDK isn’t open-source, the open-source version lacks anything that isn’t open-source. This could mean that while learning you may try something that doesn’t work and become confused as to why.
• Download “Flash Develop” At the time of this post, Flash Develop 3.0 is in its Beta 7. Download this or a later version if available. Note: An up to date Java runtime and .NET framework are required to run this software. This information is available at the link I provided.
• Unzip the contents of flex_3_sdk.zip directly into a folder called “flex3sdk”. I put mine directly on the root of my C drive (C:\flex3sdk)
• Install and run FlashDevelop
• From the menu choose Project > New Project

• Select Actionscript 3.0 > Default Project. Give it a name or whatever.

• The important part: Go to Tools > Program Settings… (F10) and select AS3 Context. This is how we point FlashDevelop to the Flex 3 SDK which we will use to compile our SWF. FlashDevelop cannot do this on it’s own although it can use the Flash IDE compiler if you own Flash.

• Next, let’s open up our main document class. FlashDevelop has already made one for us. Open the “src” folder in the Project window on the right hand side. Open “main.as”.

• Take it for a test drive by pasting in the code below and selecting Project > Test Movie or F5.

package 
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
 
	[SWF(width = "350", height = "200")]
	public class Main extends Sprite
	{
		private var myMovieClip:MovieClip = new MovieClip();
 
		public function Main():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			myMovieClip.graphics.beginFill(0x000000);
			myMovieClip.graphics.drawRect(100, 50, 150, 75);
			myMovieClip.graphics.endFill();
			addChild(myMovieClip);
		}
	}
}

… and here we go, a nice little black rectangle. Totally worth it.