Murten Saerbi's blog
Maarten Serneels, Actionscript 3 and golden oldies.
Murten and Android 2.2: a love story.
Aug 5th
It’s been a while:
It’s been a while indeed. I actually have alot of blogposts in draft but I didn’t really feel the need to complete them and if I don’t complete drafts nothing gets posted. Hence: the absence of posts. But why?
My focus is expanding:
Where I was used to developing flash content for the interweb I now feel the need to write stuff for mobile devices aswell. I bought a HTC desire (phone) a while ago and I love it (for as far you can love a phone, ofcourse). It is now running android 2.2 (Froyo) which supports flash 10, meaning: a decent flash version for mobile!
I automatically started to try out some of the flash sites I developed for the web (aah, curiosity!) on my phone and even when it’s ment to just work in a browser it works great on the phone aswell, which is offcourse nothing less than awesome!
Show me some stuff!
Yeah yeah, ofcourse you want to see some stuff. Well, something not developed by me but still cool nonetheless: remote droid. What is it, you say? Well, it’s a mouse and keyboard for your computer ON your phone! Exciting, no?
It’s actually really easy: you download the desktop computer app/laptop app here, unzip it and double-click the “RemoteDroidServer.jar” file (you need a java runtime environment for that, which you can download here). Assuming you have an internet connection the app opens and says something like the following screenshot:
On your Android phone you just open up the marketplace and look for an app called “remoteDroid”. Installing it takes less than a minute and when you open it you just have to fill in the IP address the computer app says and you’re good to go!
Try it: it works like a charm!
Steven Van Hissenhoven, as3 and facebook connect
Oct 7th
A few weeks ago adobe anounced a new ActionScript 3 Library for the Facebook API (www.adobe.com/go/facebook). Facebook and flash are two ever growing platforms and combined could make even more awesome projects so naturally Murten Saerbi went on a mission to find a client/test project to use these two puppies together.
While doing the project I kept thinking about a quick how-to to further explain how it all works.
Constantly delaying this however, made sure somebody beat me to it. Be sure to check out the magnificent post Adobe Flash & Facebook Connect by Steven Van Hissenhoven. You can download the source code and view an example, I barely would have done it better myself! He even made a header about it which is a solid idea and a quick and easy test to… well… test it out.
Go forth, my flash-meets-facebook connect ninjas!
Murten does withaview!
Sep 8th
Withaview.be is a website that holds a list of the best restaurants in Antwerp which you can order on budget or style. You can also search the most popular ones or just sort alphabetically. Doesn’t sound super-high-technical, you say?
Well, it doesn’t even have to be!
If you don’t fancy the slick and polished design of the website you surely must be a fan of the restaurant pages.
Every restaurant has its own page with an introduction movie and basic information such as contact details, opening hours and place to be. And that’s where I came in: the movie is easy embeddable on your own blog and/or website by using the build-in “add to website” or “share” functions. You can also easily share it with your friends by mail or msn. Therefore it is THE website if you’re looking for a nice place to eat in Antwerp (soon to come: other cities aswell). At the end of each movie related restaurants pop-up so you can easily check out some other introduction movies.
Another thing that’s on its way and pretty fancy – even if I say so myself – is the facebook integration. People will be able to add a restaurant movie to their facebook profile to promote the restaurants they like best!
A nice restaurant to have some breakfast the old-fashioned way is Farine’s Food over at the Vlaamse Kaai 40 in Antwerp, Belgium. Check out the player below or pay the withaview website an online visit over at withaview.be.
http://www.withaview.be
basic image gallery #1: circle showcase
Aug 29th
The intro:
A while ago I made a post about loading images in a grid and an example of how to use the document class. Basic stuff, I know, but it’s a good base to learn/start from.
What I am planning on doing now – I actually already started – is creating a couple of cool ways to display images: basic image galleries. I’m planning on doing a couple so if you have ways that you want me to try out shout them out in the comments.
All galleries will load images out of an xml, so my source files include a custom xml loader. First one up is a circle gallery. All my examples use Tweener for the code animations, so I suggest you download it.
My first example is a circle image gallery by using sine & cosine – that’s Math – which you can see in the preview. The flash file contains alot of comments to explain my actions but it’s really pretty simple once you get the hang of it.
The quick tips:
Flash does not use degrees, but radians. Luckily there’s a simple formula for this:
radian = angle * Math.PI / 180;
The cosine of an angle will give us an x coordinate and the sine of that same angle will give us the y coordinate:
pic.x = Math.cos(radian); pic.y = Math.sin(radian);
The example:
The settings:
Inside the xml you can add pictures and choose the radius of the circle.
The aftermath:
You can download the source here. This example is intentionally kept basic but is very versatile and easy to expand. With a little bit of code you can add multiple-page functionality, more animation, maybe even load your flickr account pictures in it with a link to the high-res version! Anyway, the possibilities are endless. Go ahead and try some stuff out! Fly my pretties, fly!
Comparing data in actionscript 3.0
Feb 10th
The problem:
Say we need to compare an xml file containing some months to a list of all the months so we can get their corresponding monthNumber (January = 1, February = 2, …).
First of all we will need a list of months. I decided to go for a multidimensional array with the monthNumber in it aswell:
var monthLabels:Array = new Array([1, "January"],[2, "February"],[3, "March"], [4, "April"],[5, "May"],[6, "June"],[7, "July"], [8, "August"],[9, "September"],[10, "October"], [11, "November"],[12, "December"]);
Then we need another file (which can be strings a user fills in or – in my case – an xml file) to compare data with:
<xml> <month name = "January">some text</month> <month name = "Februari">some text 2</month> <month name = "December">some text 3</month> </xml>
And here is the code, it’s almost so easy that even flash-for-mobile developers can understand it (for all you mobile developers -> the explanation follows):
for(var i:int = 0; i < xml.month.@name.length(); i++) { for(var u:int = 0; u < monthLabels.length; u++) { if(xml.month.@name[i] == monthLabels[u][1]) { trace(monthLabels[u][0]); } } }
The explanation:
First of all we loop through the amount of monthnames (the first for loop). That loop traced out will give us all the monthnames in our file or string (in my xml example 3, being “January”, “February” and “December”).
For each result of that first loop we loop through the monthLabels array’s length. There are 12 months so I could have used “12″ but I use length instead so you can use the code for other data aswell.
In that second loop we check if the value currently being processed by the first loop (xml.month.@name[i]) is equal to one of the values in our array. Since we have a multidimensional array we need to specify which value we want to use to compare with. The month name is on the second place so I use “1″ to identify that place (arrays are zero-based so 0 = first place, 1 = second place). If we have a match the if will succeed and we trace out the corresponding number.
This particular example will trace out:
1 // Which is the monthNumber for January 2 // Which is the monthNumber for February 12 // Which is the monthNumber for December
I hope this helps you multidimensional-and/or-comparing-data troubled kids out!
Murten does ilys.be!
Nov 12th
Murten Saerbi goes freelance!
Sep 30th
As the title says: I started working for myself! Hooray!
What does this mean for you guys? Only positive stuff! My blog will still be about the flash platform and the things that I create/design but just to keep it all well and organized I have decided to divide the blog in two main categories:
- snippets: actionscript tips and tricks or solutions to problems I run into.
- showroom: the work that Murten Saerbi does.
Everything else will fall under “uncategorized” but I will try and keep this to a minimum.
If you have questions, comments or perhaps want to hire my services please don’t hesitate to contact me at him@murtensaerbi.be.
Thanks in advance,
Murten Saerbi
Skinning a combobox component in actionscript 3
Aug 11th
A quick post in relation to my post about embedding fonts in actionscript 3 components: A combobox example. I have prepared a quick example that you can see below, I’m sure you guys and girls can come up with a design that suits your needs.
You can check out the code below or download the example file.
// create a new textformat and set the style of it var myFormat : TextFormat = new TextFormat(); myFormat.font = "Cooper Std Black"; myFormat.color = 0xffffff; myFormat.size = 13; myFormat.indent = 4; // apply the textformat and embed fonts for the selected option first_cb.textField.setStyle("textFormat", myFormat); first_cb.textField.setStyle( "embedFonts", true); // apply the textformat and embed fonts for the dropdown textfields first_cb.dropdown.setRendererStyle("textFormat", myFormat); first_cb.dropdown.setRendererStyle("embedFonts", true);
Actionscript 3.0 snap to grid
Aug 8th
Every actionscripter will come to a point in his/her life where the boss calls for a drag and drop application. If you’re really lucky he/she will even ask for the ability to let items snap to a grid.
The Example
Just start dragging the red thing and you will see that it snaps to the grid from the moment you enter it. If you let go of the red thing outside of the grid it will return to his base.
The code to snap
snapClip_mc.x = mouseX - mouseX%size; snapClip_mc.y = mouseY - mouseY%size;
Only two lines of code! Just let the clip that you want to ’snap’ position itself on the position of the mouse (mouseX, mouseY) minus the position of the mouse (mouseX, mouseY) modulo the gridsize (the size of one squareside of the grid).
So, if the side of my square in my grid was 50, the size parameter would be 50. If it was 100, my size parameter would be 100.
What is a modulo?
I am glad you asked! The modulo, according to wikipedia, is: In computing, given two numbers (either integer or real), a and n, a modulo n is the remainder after numerical division of a by n, under certain constraints.
The aftermath
Just think of the possibilities! Checkers, monopoly, chess and many more are just a snap (no pun intended) away!
And maybe even scrabble, too!
