ActionScript cheatsheets

Just got back from a 4 day vacation. Now  I have to  continue my  quest to  scour the internet for  everything  ActionScript.

I found this site while reading a few things about tweening classes (I’ll have a post about that soon. I can’t believe I haven’t used them.). ActionScriptCheatSheet.com offers exactly what the title says, AS cheatsheets in PDF format. There are about 2 which are in JPEG format, which is a shame, but they are still useful.

They have cheatsheets for the Papervision 3D engine, Apollo specific ones, and AS2 to AS3 migration ones as well. Go to the DOWNLOADS page of the blog to choose your sheet of choice.

[Learn] How to load images/swf’s in AS3

I am in the process of converting from AS2 to AS3 right now, so I am going to try my best to post everything I learn in this blog. It might help others out there who are still also in the process of converting. To those who aren’t, you should.

This time it is about loading external images/swf’s.

In AS3, there are several types of DisplayObjects you could use to display on the stage (thus the name), along with MovieClips, Sprites(simple movieclips), Bitmaps(for bitmap data) and Loaders.
The Loader object is obviously what we would use to load these external visual data.

Basically, the Loader is just like a MovieClip, since they have a common superclass (well actually MovieClip is derived from Sprite, which is a sibling of Loader). It’s a like a MovieClip that could load objects. So, if you are coming from AS2, it would make things easier to think of it as just a MovieClip.

So, to load an image named “image.jpg”, first you need to create the Loader object. In the first frame of your timeline:

var loader:Loader = new Loader();

Now you need the url of the image to load it. The Loader object has a load() method that takes a URLRequest parameter. It’s just a class that handles url’s very well. Heh, I don’t really know much about it, you could read more of it in documentation.

var imageUrl:URLRequest = new URLRequest("image.jpg");

Now that we have our Loader object and our URLRequest, we could now load our image. It’s just simply calling the load() method of Loader and passing our URLRequest as argument.

loader.load(imageUrl);
addChild(loader);

After loading and adding it to the stage, you could do anything with it as you please.

loader.x = 50;
loader.alpha = .5;

Of course, you would want to have preloading for this kind of stuff. And yes, the Loader object generates similar events to the MovieClipLoader object we so loved in AS2. But all this happens very differently in AS3. All the information about the object being loaded is being held by a LoaderInfo object inside the Loader object.

So here is the code that traces the amount of kilobytes loaded adds the Loader object to the stage if loading is completed.

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loading(e:Event):void{
trace(loader.contentLoaderInfo.bytesLoaded);
}

function loadComplete(e:Event):void{
trace("loaded");
addChild(loader);
}

Hope this post helps others who are still starting to move to AS3. A lot has changed between the two, but AS3 is definitely the better one.

FontStruct

Here’s a cool site. It’s main feature is an RIA that allows you to create fonts and share it with the community. That’s right, creating fonts online for free. I am so impressed with what people can do with the web these days.
You could create any font you could imagine. From simple pixel fonts, to dingbat style fonts.
The gallery is very impressive. There’s some really nice fonts there, all created with FontStruct and free to download and use. You could even “clone” someone else’s work. To download a font, click on the font name or double-click on the preview.

The application itself is a work of art. Its interface is very intuitive, its tools adequate, and it’s just so comfortable playing/working with it. You could save your work, it even has hotkeys for undo, redo, tool selection, etc. Although you are limited to the “bricks” provided, they are more than enough to create a wide variety of fonts.
Go to http://fontstruct.fontshop.com/ to get started in creating your own fonts. You need to register for free though to use the fontstructor and download fonts.

[Learn] AS2 to AS3 EnterFrame events

NOTE: This blog post is inaccurate. I am sorry for the error. I have fixed the error following the comments posted.

So in this blog, I’ll be posting things I learn each day (hopefully), about programming, life, etc. The things I post here might not be completely correct or true, but they are what I learned and I post them as I understand them. Corrections would be very much appreciated.
I’ll call it the [Learn] series.

NOTICE: I am telling this as how I understand it from reading other tutorials on the web. This is possibly very inaccurate, but maybe you could understand things you haven’t understood before by reading how I understand it. :-/

Event handling in AS3.0 is very different from AS2.0. One of my most used events is onEnterFrame events.

In AS2.0, animating a simple box to move to the right every frame would look like this:
(please bear with me and the unformatted code)

box.onEnterFrame = function(){
this._x += 1;  //execute this code everytime the box movieclip enters a frame.
}

but in AS3.0, it is a little longer, and I may still have to see the real benefits of this. But already, I am liking how easy it is to understand.

function moveBox(e:Event):void{
e.target.x += 1;
}
box.addEventListener(Event.ENTER_FRAME, moveBox);

the addEventListener method tells the box MovieClip to execute the function moveBox, everytime an ENTER_FRAME event is generated(which is all the time).

Notice the moveBox function has an Event parameter. When a function has an Event type parameter, it becomes a listener function. Passing a non-listener function to the addEventListener method causes an error. You could also add the moveBox listener to any other MovieClip you might have on stage, already one of the benefits of the new event handling of AS3.0.

There are a lot more events to discuss, but I hope this helps those who have just started converting to AS3 (like me). I’ll keep on posting more things I learn.

Demonoid is back!

My favorite bittorrent site is back with a vengeance. It has been down for several months, I was afraid that it would never come back. But now it has. I could again download torrents that I know would work. Woot!

I think I might have a few invites with me, so if you want some, just post.

I <3 Type

I’m a huge typography/font fan. I just can’t stop looking at nice typography. It’s like looking at a woman’s fine bosom (notice the italicised ‘like’) for me. I tried
to be good at it, practiced creating some abrigrams for friends, and
designing stuff using free fonts, but I failed at it. So I decided to
just drool over some of the work other people have done.

Here are links to some of the galleries, blogs and images of type that I just needed to share.

http://ilovetypography.com

Awesome title and awesome posts. A blog about typography (duh!). I check it out everyday.

http://www.smashingmagazine.com/

Another blog. But not just for typography. But their “Free Fonts of
the Month” posts are worth having a look at. And so are their other
posts.

http://www.typographykicksass.com/

Flash experimental site where you type in text, and it gathers type
images from Flickr and displays the text using those images. Really
kicks ass.

And now for a some images:

Comic Sans town map by denzmixed from deviantart.

That’s Comic Sans by the way.. COMIC SANS! There are more nice typography images in his deviantart page.

Spam one-liners Flickr gallery

Awesome idea about using spam email titles for art. Genius!

Ambigrams

Back in highschool, I was addicted to ambigrams. I lost all my links
to galleries of it though, but I still remember two of my favorites.

John Langdon’s gallery

Punya Mishra’s wordplay gallery

Trivia: The main character from “The Da Vinci Code” was ‘based’ on
John Langdon. He made all the ambigrams of the other not-so-famous
book, “Angels and Demons” by the same author. Check out his gallery for
those ambigrams. They will fock your mind.

And last but not least, kinetic typography. My favorite of the bunch.

[youtube=http://www.youtube.com/watch?v=syf8olcM0z4&hl=en]

[youtube=http://www.youtube.com/watch?v=u7WQGrZUdb0]

Just search for ‘typography’ on YouTube and you will be in Kinetic Type heaven.

Well, that’s it for this post. I have a LOT more to show you guys,
especially in the kinetic typography front, but I need to sleep. Hope
you enjoy this post.

EDIT: I almost forgot! Dropclock. Free screensaver for Windows and Mac OSX.

Check out this demo video.

[youtube=http://www.youtube.com/watch?v=EoZmBjaFWto&hl=ja]

[Learn] How to batch resize several images on Mac OSX with iPhoto

Have you ever need or have been asked to resize several images and had to resort to a photo editing software to individually resize those images? Well, it is an effective way of doing that, but what if you had to resize a hundred of them?

Well, today I had to resize 40 photos, and thought that doing it in Photoshop would be crazy, so I did a little research.

Turns out iPhoto has this function. It is indeed very nice and useful.

First you need to import your photos into iPhoto by going [ File > Import to Library... ], then just select your photos or the folder you have your photos in.

After importing,  your photos will be in the “Library” folder of iPhoto, so you have to search for it and sort them into different sub-folders if you want to. Unfortunately, you cant specify a sub-folder while importing. You have to do it afterwards.

Select the photos you want to resize, then go [ File > Export... ]. You will be presented with a dialog box. Choose a format you want to export to (not Original), and click the “Scale images no larger than: ” radio button. Specify the width or height you want, the aspect ratio will be preserved(!). Then click “OK”. Select the directory you want, wait for a few seconds, and voila! Instant resized images, with preserved ratios, at the specified maximum width or height.

Tip: When your images have different aspect ratios (some of them are much longer than others, or wider), select the ones with similar ratios first, export them, and export the longer/wider ones later.