I needed some JavaScript date formatting the other day, and I stumbled over this...http://blog.stevenlevithan.com/archives/date-time-format.

This allows you to quickly format/mask JavaScript dates similar to C# or PHP. With simple formats like this...

var now = new Date();

now.format("m/dd/yy");
// Returns, e.g., 6/09/07

// Can also be used as a standalone function
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");
// Saturday, June 9th, 2007, 5:46:21 PM

// You can use one of several named masks
now.format("isoDateTime");
// 2007-06-09T17:46:21

// ...Or add your own
dateFormat.masks.hammerTime = 'HH:MM! "Can\'t touch this!"';
now.format("hammerTime");
// 17:46! Can't touch this!

// When using the standalone dateFormat function,
// you can also provide the date as a string
dateFormat("Jun 9 2007", "fullDate");
// Saturday, June 9, 2007

// Note that if you don't include the mask argument,
// dateFormat.masks.default is used
now.format();
// Sat Jun 09 2007 17:46:21

// And if you don't include the date argument,
// the current date and time is used
dateFormat();
// Sat Jun 09 2007 17:46:22

// You can also skip the date argument (as long as your mask doesn't
// contain any numbers), in which case the current date/time is used
dateFormat("longTime");
// 5:46:22 PM EST

// And finally, you can convert local time to UTC time. Either pass in
// true as an additional argument (no argument skipping allowed in this case):
dateFormat(now, "longTime", true);
now.format("longTime", true);
// Both lines return, e.g., 10:46:21 PM UTC

// ...Or add the prefix "UTC:" to your mask.
now.format("UTC:h:MM:ss TT Z");
// 10:46:21 PM UTC

you are sure to find a use for it!

Happy Coding

I'm not going to pretend that this is some amazing discovery or anything...but I was excited when I wrote it, so now you get to see it too!

Basically using just a bit of LINQ syntax, I'm iterating through an XML document and converting it directly into my custom object.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml.Linq;
using System.Reflection;

namespace MyBaddassCodeBase.NinjaCampRox
{
 public class Ninja
 {
  public int SwordsInHand { get; set; }

  public Ninja()
  {
     
  }

  public static IEnumerable CreateFromXML(string xmlData)
  {
   XDocument xData = XDocument.Parse(xmlData);

   var ninjas = from swordNode in xData.Descendants("Swords")
         select new
         {
          Swords = swordNode.Value
         };

   foreach (var ninja in ninjas)
   {
    Ninja nja = new Ninja();
    nja.SwordsInHand = ninja.Swords;
    yield return nja;
   }
  }
 }  
}

One I have that, I can quickly build and iterate through enumerable lists of that custom object.

Neat isn't it?

We got loved!

Guy Ellis over at guyellisrocks.com gave NinjaCamp a nice mention regarding Ditto, the great clipboard manager for Windows.

I highly recommend the developers out there grab this tool as it saves my ass again and again!

Happy Coding!

Hi everyone, just a quick tip.

Have you ever wanted to use a MovieClip on the stage as a button? It happens a lot, sometimes you don't want to animate both artwork and a button around and you just want to use the MovieClip itself as the button. You can assign your listeners and everything on the clip, but when you preview the movie the mouse cursor doesn't turn into the little hand as you roll over it. It makes it hard for the user to know that area is interactive. Here's how you fix it!

First, make a MovieClip on the stage and give it the instance name of myButton. Then, on the timeline, enter this code:

myButton.buttonMode = "true";

Now Flash knows to treat your clip like a button as far as the mouse cursor is concerned. Enjoy!

Hey everyone!

Today I'll be helping you with a quick tutorial on using the "parent" property in Actionscript 3. If you're used to how things worked in AS2 you know that you can no longer refer to the parent of a clip with this simple notation:

myClip.parent.parent.parent.myMethod();

The compiler is more strict and so they've changed the syntax a bit. I want this to be a beginner's tutorial so I won't go into detail about that, let's work on the new way to do things!

First, I've made a movie with a clip on the timeline. I wrote a function on the mail root level of the timeline that looks like this:

function traceParent():void
{
trace("You've succesfully called on the parent!");
}

Easy, just a trace statement to see if what we code inside the clip is correct. Now, put a clip on the stage and INSIDE the clip put this script:

myButton.addEventListener(MouseEvent.CLICK, callOnParentClip);

function callOnParentClip(ev:MouseEvent)
{
(this.parent as MovieClip).traceParent();
}

Pretty easy! Above the content inside this clip, make sure you make a button called myButton to call this function. The key line is here:

(this.parent as MovieClip).traceParent();

You can see that now we have to cast the clip as a MovieClip specifically. What about if we have a clip more than one level deep? This is how you would handle that:

(this.parent.parent.parent as MovieClip).traceParent();

Very simple. Check out the source below for an example clip using this technique, and happy coding!

Sample (AS3, Flash CS4)

Hi everyone, here is a really quick tip for Tweener users. I just came across the following situation in a contract. I had to move something to the side of the stage with Tweener, and then set the visible to 0 to prevent users from clicking hidden buttons that were inside the clip. So, to move off the stage I just used this tween:

   Tweener.addTween(page1Content, {alpha:0, x:-266, time:1, onComplete:hidePage1Content});

See how lunky that is at the end? I really don't want to have to write a whole function just to turn the thing off, but there isn't a way around that given the timing of Tweener. It HAS to wait until the Tween is complete. So, after a bit of thinking and digging I was able to add an inline function to do this for me and save me some function writing. This is what I ended up with:

   Tweener.addTween(page1Content, {alpha:0, x:-266, time:1, onComplete:function() { this.visible = false; }});

Now the inline function runs right after the content fades out with no additional function writing necessary.
Easy!

I have ASP.NET application where I'm using jQuery to return data from the server all AJAX like. Next thing you know, my AJAX method is blowing up on me saying "Method Error 500 - Maximum Length Exceeded."

Naturally, I freak the fuck out and start stressing. I'm thinking that I can't return the amount of JSON data that my users need. But thankfully this one is a quick fix.

If you go into your web.config file you will notice a section called <system.web.extensions> which contains a sexy little node named "jsonSerialization." By implementing the logic below, you can quickly increase the maximum size limit of your AJAX queries.

It would of course be nice if Microsoft slapped a unit on there; for my measure I increased mine to 50000 donkeys.

Hi everyone, welcome to another NinjaCamp Flash tutorial. This time around I'll be writing about the masking process in Flash. We'll be using masks on the timeline, the easiest way to mask content. Soon I'll write a more advanced article about dynamic masking with Actionscript 3. Let's get started!

This is what we'll be making:



First, the basics of masks. We use masks when we want to hide part of something on the stage. In other words, we mask parts of an object. Normally this isn't very exciting, but the real benefit of masks come in when you animate them to produce cool effects in Flash. This has a lot of applications- gaming, information design, web content, you name it. They are very commonly used and you should add them to your Flash toolkit.

I'm going to show you how to set up a basic mask on the timeline and animate it, revealing a logo (in this case, a MovieClip). I've set up a simple Flash file with some artwork and the following layer structure:



This animation is going to be a simple reveal from right to left, but you can get really crazy if you want. Masks can be any shape, and the color doesn't matter. On the timeline, Flash doesn't support gradient masks very well, but I have a tutorial about that coming soon as well, so learn the basics first and come back for that later! I'm going to draw a simple box on the stage in my "mask" layer. I position it to the left of the logo artwork and make sure it is tall enough to completely cover the logo. The width is unimportant, as I will be animating that to fit. I normally use bright colors for these shapes so it's easy to tell where my masks are. Here is what my stage looks like after this step:



Now common sense might tell you that the mask would cover and hide whatever it's over, so why did we move it off to the side if we want the logo hidden to begin? Well, Flash works in a counterintuitive way with masks, the areas of the masked content which are covered with the mask will be visible. So, to completely show an object the mask must cover the object completely. No problem! the next step is to make our mask a MovieClip so it can be animated easily. Some people use shape tweens for this but I like the flexibility of using the same mask elsewhere in my movies. Select the mask artwork on the stage and press F8, or in the menu "Modify > Convert to Symbol...". Name the symbol "myMask" or something similar, make sure type is set to Movie Clip and press OK to close the dialog. On the stage, your mask should now be a MovieClip object. Good work!

The next thing I usually do is adjust the centerpoint of the mask clip on the stage so it will tween properly. Select the Free Transform Tool from your toolbar. It looks like this:



Next, select the mask on the stage. You should see transform handles around the clip and a circle in the middle representing the centerpoint, or point from which animation will be based. See the image for reference:



Click and drag the centerpoint to the left side of the clip, as we will be animating it to the right. It should look like this when complete:



Before we animate there is a special and important step we need to take. We need to make our mask clip a mask! To do this, right click the layer name "mask" in the timeline. Choose "Mask" from the menu:



A few things will change with your layers on the timeline. Your "mask" layer will have a new mask icon next to it for starters. The "Masked Content" layer will also have a new icon showing that it is being affected by the mask, it will also be indented a bit. Keep in mind that Flash only does this to the layer directly below the layer you made a mask, but you can drag additional layers beneath the mask, a mask layer can affect more than one content layer. Also, both of our layers have been locked. See the image:



On the stage, everything is gone?! Don't panic! Let's think about this... our mask was not covering the logo on the stage, and when we made it a mask it disappeared. This is because masks themselves are never visible in the final output. Since the logo is not covered with its mask, it too has vanished. We just need to animate the mask to cover the logo and make it appear again. In the editing tool, Flash will only show content being masked properly on the stage if the mask layer and all masked content layers indented beneath it are locked. Keep in mind that this is only while editing a movie, when you export the .swf Flash will always mask everything correctly no matter how the layers are locked or unlocked. So, unlock the mask layer so we can animate it! Everything is visible again, so relax ;)

Finally we animate the mask and bring it all together. I'm going to make my animation 30 frames long, so I add those frames in all three layers (by selecting the 30th frame in each layer and pressing F5), and add a "stop" action to the final frame of "actions" (which I made a keyframe with F6). I just want to reveal my logo, I don't want it to loop endlessly. See the result:



I have to admit to you, I still use the classic tweens in Flash for simple things like this. The new tweening system in CS4 seems to be quite powerful, but it tends to make me pull my hair out sometimes. Let's use a classic tween for this mask as well. Select the 30th frame of the "mask" layer and press F6, making it a keyframe (Insert > Timeline > Keyframe from the menu). Go back to frame 1, right click it, and select "Create Classic Tween". You should see a blue arrow going from frame 1 to frame 30 like this:



With frame 1 selected, I usually go to my "Properties" panel and set easing to 100 under "Tweening". This will make the mask slow gradually as it approaches the end of the animation, which for me is a bit more visually pleasing than an abrupt stop. Finally, select the final keyframe, select the mask on the stage with the Free Transform Tool, and drag the right side of the mask all the way to the right, just covering the logo completely. See it here:



All done! You can either lock the "mask" layer and scrub the timeline to see the effect, or just test your movie by pressing Command/Control and Enter. Pretty cool! Try and think of some interesting things you can do with masks, and I will follow up with some more advanced techniques in later tutorials. Take care!

Sample (AS3, Flash CS4)

I came across a little problem today while working...it involves jQuery, Visual Studio 2008, Intellisense, and a monkey.

In short, I was able to solve the problem (except for the monkey which is still attacking) and I thought I would share my findings.

As we all know, JavaScript libraries are currently "the shit" when it comes to UI design. From Prototype to Script.aculo.us, everyone seems to be jumping on the JavaScript band wagon.

Knowing this, the geniuses over at the jQuery open source project have written their library so that it could safely run alongside other libraries. There are a few ways to do this, but I'm only going to talk about one method which I personally prefer.

Seeing as how everyone just loves to use the dollar sign as the primary entry point, you quickly find these libraries overwrite each other. However, jQuery provides us a simple fix with the "noConflict" method. Thus, loading the jQuery library, then executing "jQuery.noConflict()" removes all jQuery references to "$" and gives them back to the previous owner.

Now, that's cool, but what if I still want to use something short like "$" rather than typing "jQuery" every time? Simple! They have a fix for that too!

<script type='text/javascript' src='jqueryJs.js'></script>
<script type='text/javascript'>
 var $j = jQuery.noConflict();
</script>

Now, all of your jQuery commands can be accessed using "$j" or whatever else you would like to use. However, that is where the problem with Visual Studio Intellisense pops up.

As you might imagine, Visual Studio 2008 SP1 has no idea what "$j" means. So you lose all of your jQuery intellisense abilities the second you do this. But that's why you're reading this tutorial! I have a hack which will get you right back on track. That was an unintentional rhyme. :P

After following Scott Guthrie's instructions on how to get jQuery intellisense working in Visual Studio 2008, you simply need to take it one step further to include your previous change.

Open the jQuery VS Doc file (I'm working with jquery-1.3.2-vsdoc.js) and look for the following code on line 51:

jQuery = window.jQuery = window.$ = function(selector, context) {

This line identifies the jQuery commands to the IDE. Thus, all you need to do is modify it so that it includes your new command value:

jQuery = window.jQuery = window.$ = window.$j = function(selector, context) {

Once it is saved and visual studio has a chance to repost, you will instantly start seeing the intellisense results following "$j" or whatever command you choose.

Happy Coding!

Hello everyone, welcome to another NinjaCamp tutorial here at experts.ninjacamp.com! This time around I'll be showing you how to navigate to web links from within your Flash movies.

In actionscript 2, we could use the getURL method to do this. It was pretty simple, but things have changed a bit in Actionscript 3. Let's look at a finished block of code with this functionality and then take it apart line-by-line:

myBtn.addEventListener(MouseEvent.CLICK, gotoUrl);

function gotoUrl(ev:MouseEvent):void
{
var url:String = "http://www.ninjacamp.com";
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_blank');
} catch (e:Error) {
trace("Error occurred!");
}
}

Pretty easy! Let's take a look. In line 1 we are adding an event listener for our button. This is the same easy stuff I covered in another tutorial here, and just makes it so that when you click the button a function is called- in this case it's our gotoUrl function.

Now we define our function in the next block of code. In line 4 we need to define our target web address. We create a new String variable (since it's just a string of text) and put the full address with http:// in quotes. Simple.

Next, in line 5, we define our URLRequest object. This is where the AS3 version of this process gets a little wordy! In basic terms we are wrapping our URL text into a format Flash can accept with its navigateToURL method.

The next part is optional but usually good practice. We wrap the actual navigation code in a try catch statement. This is a way for Flash to catch errors as they happen and handle them without borking the whole movie. Basically, we use this because if the URL is dead we want to be able to continue the movie gracefully. Just put any code you want to execute if it errors out in the "catch" section of the statement.

Line 7 is where we actually execute the code to go to the web address specified in line 4. It works very similarly to getURL, we just hand it our "request" variable, and tell it to launch in a "_blank" window. You could replace blank here with "_self", "_parent", or any other named window you're manipulating with javascript or the like. It's just a string and works like regular href tags in HTML. That's about it! I've included a sample FLA below so you can see everything working together. Thanks and have fun!

Sample (AS3, Flash CS4)