Antti Kupila

Personal Blog, Portfolio and Online playground

View over the green room at Sid Lee, Montreal

Getting JPG dimensions with AS3 without loading the entire file

Does this sound familiar: You’re loading a JPG file, and want to know what size it is before it has loaded? This can be useful if you’re for example drawing a border/background, which will contain the image. If you don’t know what size the image is, you don’t know what size the box should be. I’m sure there are better & more common uses to this, but i know for sure it can be really useful.

Anyway, I decided to solve this problem. If you don’t care about how it works, fine, i’ll give you the short version first. After all the class i’ve created does all the heavy lifting for you, so if you just want to have it work, you can just use it without worrying about what’s under the hood.

Here’s the class: JPGSizeExtractor.as. Download it and put it in a folder com/anttikupila/utils in your classpath. Then you can just use it like this:

[as]
var je : JPGSizeExtractor = new JPGSizeExtractor( );
je.addEventListener( JPGSizeExtractor.PARSE_COMPLETE, sizeHandler );
je.extractSize( your_jpg_file.jpg );

function sizeHandler( e : Event ) : void {
trace( “Dimensions: ” + je.width + ” x ” + je.height );
}
[/as]

To trace out debug information, you can say je.debug = true;

What it actually does is that it starts loading the JPG file and analyzes every byte that has loaded. When it find the jpg’s JFIF headers (according to the JPEG specs), it will be able to determine the dimension of the file and close the stream. The dimensions in a jpg are before the actual image info, meaning that you can load a 10mb file and get it’s dimensions in a fraction of a second, instead of waiting for the entire file to load.

Note: This doesn’t work for all files. Some files i tried with were not according to the JPEG specs (or then i misunderstood something, which is more likely since other software showed the correct dimensions). Don’t use this in mission critical projects, unless you have control over the JPG files. I don’t take any responsibility of it working correctly.

Download the class, with an example

If you’re not so much interested in “the what”, but more “the how”? Read on. Let’s see what we can do about that .. ;)

Continue reading

Tutorial: Most popular YouTube videos of the day in Actionscript 3

As you probably know, Flash CS3 is coming really soon. Actionscript has developed a lot with the years and just like Adobe’s Flex, Flash CS3 will feature it’s latest revision, actionscript 3.0. This tutorial is a pretty basic introduction to AS3, to give you a kickstart before the final release of Flash CS3. If you’re familiar with AS3, this probably isn’t anything for you, but if you’ve done some stuff in AS1 & 2, maybe had a look at 3, read it and tell me what you think :) This was originally a school assignment and written pretty quickly so please bear with me :)

Alrighty, let’s start.

Before you build a house you need to get the tools so let’s take a look at a couple approaches of working in AS3:

Currently there are three ways.

  • Flash 9 alpha
  • Flex
  • Flex SDK with third party application

Flash 9 alpha is basically Flash 8, but with support and a compiler for AS3. You can download it for free from Adobe labs, but you’ll need a licenced Flash 8 to install it. Also it does not work on intel macs so if you have one, you can’t compile your actionscript with it. This obviously is a problem :)

Flex is basically flash, but meant more for online applications. Supports the exact same actionscript 3 as Flash 9. If you have flex, you probably already know that you can compile AS3 with it, if you don’t you can always get it. It’s $499 though

The Flex SDK is a free download which you can use with a third party application. I myself use this one together with Eclipse, and am very happy with the combination. Free too :)

You’ll find loads of info about these on google, and going thru all this isn’t really in the scope of this tutorial, so please, help yourself :)

Very helpful links:
http://livedocs.adobe.com/flex/201/langref/index.html
http://livedocs.adobe.com/flex/2/langref/migration.html

Here’s a small demonstration of what the app we’re building today might look like (click it to see it in action):

YouTube video browser screenshot

Continue reading

Flame actionscript 3 source released

A week or so ago i did this experiment in actionscript 3, using papervision3d and last.fm. Got a couple requests for the source so here it is.

Download flame source.

The work is licensed under CreativeCommons Attribution-ShareAlike 2.5 license.

Revolt, actionscript 3 based spectrum analyzer source released

I have decided to release the source code for Revolt, a flash spectrum analyzer I made back in July 2006 (jeesh, the time flies!). I know I’m a bit late, but you know, it’s 2007, it’s time for actionscript 3!. I will also consider this as my really late Christmas present to you, my dear readers, so don’t expect any candy after this, ok? Good :)
The image below is a screenshot from it. View the spectrum analyzer in action

Revolt, flash based spectrum analyzer screenshot

Anyway, actionscript 3 is really cool and compared to actionscript 2 even more logical and structured. I can definitely recommend anybody working more or less professionally with flash to take a look at it. If you know actionscript 2 and words like “oop”, “encapsulation” and “polymorphism” don’t sound like hebrew, it won’t be hard to get into it. Ok, I know Flash 9 isn’t out yet (the beta is), but will be soon, and the penetration of the flash 9 player is growing day by day (View stats), so we can quite safely start using it soon. Too bad I just haven’t had time to play with it more.

I could also mention one thing I found after switching to mac: the public beta does not work on intel macs. It runs, but crashes when publishing (some java thing). That sucks. Luckily as this mac has a heart (or brain?) made by intel it will run Microsoft’s Windows without problems. As I mentioned I haven’t had time to play that much with actionscript 3 recently, but found out that using the beta under windows with Parallels Desktop is really handy, and almost as good as under OS X (if not even better, as it’s even faster than Flash 8 under OS X (this being since it’s not a universal binary to you who have lived under a rock the whole 2006)). When using Parallels in coherence mode I can use the Flash 9 alpha preview just like Flash 8. Sweet!

Another Revolt screenshot

Anyway, I’m sure you’re not reading this to find out how I work.
You want the source, the good stuff.
The bits and pieces that build up the project I like to call “Revolt”.
Fine, I won’t keep you waiting.

Download the revolt source files (now working in CS3)

What this does is that it analyzes the frequencies of a mp3 file and visualizes it using presets that consist of different combinations of so called drawers, effects and scalers. It comes with 6 presets built in and making your own is really easy, since the engine is done. View the source of a preset and give it a try!

As with some previous source I’ve released, this goes out under the CreativeCommons Attribution-ShareAlike 2.5 license.

I have to mention that the song is not included with the download. This is due to copyright issues. Just put any mp3 in the same folder and rename it to song.mp3 (or change the path/filename in the .fla) and it’ll work just fine.

Now what are you waiting for? I want links to your cool visualizers! :)

Update! When I wrote Revolt, Flash CS3 was just a buzzword. Not that it’s out, i also noticed it’s a bit different than the alpha. I have now fixed the source and tested it in CS3, it’s now fully compliant!

Cool & accessible javascript link effect

Some time ago Niclas Bergström asked me for some tips on a javascript link effect, similar to effects we’ve seen in flash since day one. The link would kind of switch when you hover it. The idea is fully by Niclas, so I’ll give all the cred for it to him.

A challange here and there is always nice, so I thought I’d take it on me. Javascript really isn’t my thing, but I think the result turned out pretty nice.

Click here to view the example

I had three main priorities when writing this

  • Easy to use & implement
  • Accessible & search engine friendly
  • Semantically correct markup

I think i managed pretty well. Give it a try!

Here’s how it works:
Just add class=”switch” to your existing links and include linkswitcher.js in your document. Style your links with css. The switched link will use a class called switchHover. View the source of the example css for further info. That’s it!

Notice that you can’t apply a margin or padding to the a element itself. Apply it to the parent element (in the example the li, see example 3)

The work is licensed under CreativeCommons Attribution-ShareAlike 2.5 license, which means that if you make modifications, you will have to share it under the same license. If you share it, I also want to be noted as the original author, with a link back to this site.
The usage for any purpose, however, is totally up to you.

Download source files

Lecture in Flash for Crew 12

At Hyper we are now having a portfolio module, where we’re supposed to make our own portfolios. I guess this is more meant for those who normally wouldn’t put anything online, so .. they’re forced and they do it :) This is also planned in as a christmas holiday, when we don’t have any school projects going on, and can spend some time with our families and friends, which is of course nice.

Anyway, the module. The whole day yesterday we enjoyed the company of Björn and Chris from Perfect Fools, talking about case studies, inspiration and other tips. I won’t go into detail (you’ll have to apply to Hyper yourself to experience it!), but all in all it was a really nice lecture. Perfect Fools as a company has done some really impressive flash stuff (check out their portfolio!), so most of us in Crew 12 got really inspired. Cool!

Ok, so what to do with all this inspiration. I was asked to have a lecture and/or workshop in flash for the crew. It was really hard for me to plan it, since we obviously have pretty much all levels of flash knowledge and interest in the class. Anyway, I decided to take it full scale actionsript 2.0, focusing more on “how to think & plan” than “how to do” (= copy-paste for many, without understanding what they’re doing, hehe). Since we’re having the portfolio module, creating a portfolio base seemed pretty reasonable. So, that’s what we did.

A couple requirements: The portfolio has to be fully dynamic, using XML as it’s source of data, for all data. Images will load in with a cool preloader and the user can easily change images with numbered links. So very simple in it’s essence, but explaining the object oriented actionscript behind it, that was the real task. Below is a screenshot of the result (click it for the actual flash in a popup)

Screenshot of xml based flash portfolio

The code itself is pretty basic, straightforward actionscript 2.0, not anything special to somebody who’s familiar with as2. I shared the code with the class, so I might as well share it with you. I’ve attached the source to the project to this post (do I hear cheers?). The comments are in swedish, sorry for that :)
Use the code as you like, but if you do, a link back would be nice ;)

Note: All the photos used in this project are downloaded from http://www.sxc.hu, and are copyrighted to their respective owners. You may not use them for any purpose without contacting the owner.

Download source files

Using AS3′s computeSpectrum

Hey there, since I’ve got this blog anyway, I might as well share some of my knowledge. This is a very basic tutorial on how to build a simple spectrum analyzer using SoundMixer.computeSpectrum, which is new to actionscript 3. This is also my first tutorial ever, so feedback is welcome! :)

This is what we will be creating:

Screenshot of AS3 spectrum analyzer
Circle visualizer | View source

Who is this meant for?
Well, if you’re familiar with AS3, this probably isn’t for you. My aim is to introduce AS3 to people familiar with AS1 or AS2. If you’re not at all familiar with actionscript, I’m not sure this is for you, but you might follow along, and see how simple it actually is (for a rather complex example).

What do I need to know?
Basic knowledge of flash is required and some knowledge in oop and actionscript will help, but I’ll go thru every aspect anyway, so you’ll get it to work with copy-paste, if nothing else ;) Still, if you want to learn something new, I suggest you read what I’m saying here, look at the examples, and do it yourself. Some knowledge of trigonometry & math will help you understand what I’m doing with the data (how i output it visually).

Continue reading