At some time ago at work I was playing around with Physics in Flash, using Box2Dflash. There are more 2D engines but I decided to give it a try because it was the first one I saw, at one year and half ago. At the time it was untouchable to me due to my lack of knowledge in AS3 and OOP in Flash, and I was very glad that one year later I managed to play around with it.

This is a simplified version of my original file, where I was generating the number of spheres based on the number of entries in an xml file, and attaching an image to all spheres. On that version we were also trying to integrate the spheres with a touchscreen we had at the office but we ran into problems because the interaction between the two media is different; the library used to detect the touch interaction tries to migrate the mouse movements, what is not very effective in some situations. If you are curious about it you can check it here.

You can check the demo and download the source.

Hello all,

I found this really nice tutorial on abduzeedo and the first thing that came to my mind was that it will look really good animated. Flash was the most obvious option and here is the final result (click on the post image to view).

I used an AS2 example but I started the migration to AS3; the source will be available here when I finish it.

Sara

Hello all,

This week I was making some experiences with jQuery and CSS3; for various reasons in the last few months I was not working intensively with html/css and feel I needed some updates. I tried jQuery for the first time – I was using mootools, but jQuery will be more useful to me now – and tried some new features of CSS3, like @font-face. I can imagine a lot of websites on the future using Helveticas .

I fond this nice and smooth accordion using jQuery; accordion can be a pain, particularly if your using the default ones of jQuery or those created with Sprys on Dreamweaver.

And now @font-face: this is an exciting new feature of CSS that will certainly change the way designers build websites. @font-face is working in Firefox 3.5, Opera 10 and Safari 3.1+. Chrome doesn’t support this feature – yet – and IE is a special case (why are we not surprised?). Microsoft developed their own implementation of this, using a proprietary Embedded Open Type (.eot) format. In fact, this is working since IE 5. If you want to use @font-face on IE, you must encode your .ttf or .otf. There are some converters from .ttf to .eot, and from .otf to eot – some of them free, some of them paid. The small example I made is not working with .eot because i couldn’t find a free converter. Any suggestion is welcome

There is, however, a problem with IE rendering .eot fonts: the anti-alias is terrible. In fact, it seems there is no anti-alias at all.

You can see my example here; please note that older browsers may not display the new CSS3 features:

http://www.sara-coutinho.com/labsdemo/jquery_css3/

I also tried the new multi-column text option and it seems to be working perfectly. In the example it has a “matrix” effect because the text is inside the accordion and resizing when it moves.

You can find more about CSS3 here.

Hope you find this useful!

This week I was browsing PSD tuts and found this really nice tutorial explaining how to create a nice typographic illustration. The good thing about this tutorials is that we can learn a lot of new features/properties/etc of a program. The final result will be very similar to the example provided, but you’ll certainly increase your knowledge and use some of the “tricks” in the next projects.

I changed the text to “Queques & Absinto”, the name of a friend’s blog that likes Art Nouveau. I definitely recommend a visit.

This is the final result:

Hello all!

Labs is a new section of my website where I will post the latest experiences I’m working on. From simple stuff to not-so-simple ones. I will try to keep this section updated so please stay tuned!

Sara