Antti Kupila

Personal Blog, Portfolio and Online playground

View over the green room at Sid Lee, Montreal

Teaser 3: the relief, out

Just thought I’d mention that last night when you were enjoying Christmas with your family and friends, Crew 12 released a new teaser, at 00:12 CET.

The Relief - www.crew12.se

Go check it out!
www.crew12.se

Oh almost forgot, Merry Christmas! :)

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

New design & portfolio online!

I’ve been working on a new site for a while now. This is the result. If you’re reading this via RSS, come check out the site and drop me a note on what you think!

Fresh image of butterfly sitting on a flower

Most weight here has been put on usability, accessibility and readability. I wanted to keep everything really clean and spacious, to bring up the content, which of course is the most important part. I think it works pretty well. Everything should be valid and look the same in all major browsers. If you however find something that’s wrong, please tell me.

All of the content from the old site is still here, just the layout has changed. Also all old permalinks are still valid, even if i changed the structure to a bit more logical one (so there’s no need to update your bookmarks).

A portfolio section has also been added, although it’s not finished yet. I will be adding new items when I have the time.

Also the about section tells a bit more than my name. Read it to know a bit more about me :)

Links have been moved away from the sidebar to a separate section for two reasons:

  1. To keep the sidebar clean and relevant to the content on the page
  2. To reduce clutter on the site

Try out the new, fresh, comment field! Tell me what you think!

Photoshop CS3 beta released

Yes, you read the title right. It’s out, since yesterday (just didn’t have time to write about this, due to my flight to finland).
This is especially good news for us Intel mac users, since the beta is universal. A windows version is of course also available.

Photoshop CS3 beta about window

I’m not going to write a full scale review or whavetever of the new version, since I haven’t had the time to experiment with it so much yet. Still, I gotta say the new interface is really smart. It scales according to your needs, and doesn’t have any loose palettes, similar to the After Effects 7 interface. All palettes can be accesses with one click of a button, so you don’t have to navigate in the window menu, or remember shortcuts anymore. You really gotta try it to see what I mean.

Another interesting feature is smart filters, which work like adjustment layers. You can change the options later on. This is great when working with filters on for example photographs. Sweet! Other sweetness such as improved 32-bit image handling is also available.

A new feature, open gl zoom, which will be included in the final release, is missing from this beta.

Update: It’s blazing fast. Oh man, you really don’t need to wait for anything. Also it as loads and loads of really smart features. This is a much bigger upgrade than cs1 -> cs2! Been doing some small photo manipulation and graphics for my new site, and I can say I’m really noticing the difference! Now I’m just hoping for a similar release for Flash and After Effects.

Read more about Photoshop CS3
Download Photoshop CS3.

Great work from Adobe, again.

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

Crew 12 teaser 2

Just wanted to mention that the second teaser is out, published last night at exactly at 00:12 (CET), thanks to my kickin’ flashy teasermovie flashplayer..thing.

The Entrance - www.crew12.se

Check it out at http://www.crew12.se before it’s uhh .. yesterday’s news?