Tips on connecting blogs to Facebook

I just finished connecting my blog and few other pages on my site to Facebook, to enjoy some sharing goodness of the social community, as well as Facebook’s ‘insight’ statistics – why not enjoy what is given for free right?

I had some setbacks and strugles along the way, thought it might save you some time (and wasted ‘Likes’ too) to write few tips down. It will not be a full tutorial, instead I will focus on some oddities on the Facebook side:

First tip will be: Do not implement until you REALLY understand what your options are and what exactly you want to do. Facebook offers two main options for adding a ‘Like’ button to your page/site/blog, one is IFRAME, second is XFBML. The iframe option is as simple as adding a line in your html source, and will get you going in seconds. The xfbml is based on their Javascript SDK, and sports the Facebook ‘insight’ statistics via open graph, but requires few preliminary steps which are kinda tricky as the documentation is fairly sparse. Obviously we would prefer the xfbml option.

In order to use xfbml you will need an AppID, which require you to set up an application, to do that you will have to add the Developer application to your Facebook Profile.

Then, you have to activate you developer account – you have to give you cell number, after which you will receive a code via sms to submit.

Then you can create an application in Facebook here.
* This page has a strange behavior, you will define your application name, pass a captcha and receive an Error page:
“Sorry, an error has occurred.
We’re working on getting this fixed as soon as we can.”

Creating Facebook application error
But if you look at the column on the right in the developers page, you will see that the application was actually created:
Facebook applications list (Facebook, are you serious about that? is this some kind of a test?) I ended up creating about 10 applications, read countless forums threads until I found it by mistake!

After that you can start implementing, follow the instruction here which are pretty simple.

Since I thought Facebook application creation service is down, I started with the iframe version, obviously a mistake as all the ‘Likes’ I got were dumped once I connected the xfbml. damn.

Good luck and may the force be with you..

Profyler – profile image creation app

Many people are having troubles resizing and processing pictures into a profile image (say for Facebook?), there are countless free utilities and apps out there (most of them look pretty shitty..), and also several online services, and now there is another one – mine :)

profyler



It’s a flash application that enables you to scale and process an image from your computer, and when you’re happy with it, you can save it to your computer. The application does not communicate with external servers and does not save or send any data anywhere.

As always, it’s a work in progress, I will be adding features and effects as time allows me, but it is fully functional right now. So go a head, give it a shot and create your own profile image, it’s really easy and fast.
Don’t forget to let me know if you liked it!
enjoy :)

This is the public link of this application, in case you want to share it:
http://www.todepoint.com/profyler

* I will be writing some more soon, describing several aspects of making this application, stay tuned.
 

Pure code AS3 spinning loading animation

While working on the video player, I wanted to show spinning loading animation while buffering, and since I decided that the whole thing will be pure code, with no library assets, I had to code this animation – just the kind of things I like.
It didn’t take long, and I decided to share it – why not?

So here it is:

loader animation with action script 3 code

What you need to do in order to use it is add two functions:


import LoadAnim;
...
private var myAnim :LoadAnim;
...

public function showAnim():void
{
myAnim = new LoadAnim(0x333333); // animation color
myAnim.x = stage.stageWidth / 2;
myAnim.y = stage.stageHeight / 2;
addChild(myAnim);
}

public function hideAnim():void
{
myAnim.stopAnim();
removeChildAt(1);
}

Download the class here, enjoy : )

The ultimate video player – as3

There are many video players in flash out there, lots of them are open too, I’ve found few tutorials out there giving everything you need to know to code a video player. few of them work really nice and heavily distributed (JW Player), others have cool UI, few considered proper integration of keyboard control, most of them don’t. yet none of them has it all. none of the player I saw had the right touch.

So I decided to take the challenge and make a code only (no library assets), lightweight video player, with elegant UI that works as you would expect it to, with keyboard control (starting with play/pause, forward/backwards jumps, the fundamentals, the musts). also fullscreen mode and moving between the screen modes by double clicking a la VLC (which is my favorite video player on the Mac), and of-course buffering.

At the moment the features are:
• Keyboard control: play/pause (space bar); jump backwards/forward (left/right);
• Volume control affecting the volume while pressing and moving cursor;
• Fullscreen-normal by double-clicking the video or dedicated button;
• Single click on the video toggles play/pause;
• Display of position and total duration;
• Clickable progress bar, a click will jump video to position.
• Control bar will hide when mouse leaves stage.
• File size is 20.8k (!!)

Credits:
The architecture was inspired by Mr.doob’s player, but I replaced his video controller with the excellent FLVPlayer by Martin Legris, and added my own touch and flavor :)

Suggestions are more than welcome, tell me what you think!

Update: I was working on improving the player behavior across platforms and browsers, discovering that events behavior is different on IE from the ret of the browsers. Surprising ha? MouseEvent.MOUSE_OUT added to the stage is not firing on IE, you have to add Event.MOUSE_LEAVE, it still works for the rest of the browsers. This actually solved several oddities on IE, people are still using it? really?!

Update 2: I added spinning loading animation when video is buffering, and moved the duration text to be next to the position text, I guess it is easier for the eye this way.

Windows generator – in progress

I took on a small project, you know, to stay in shape. anyway, it has to do with generating windows on stage and giving focus by clicking them, only one window is in focus at a time. the interesting part is once a window is blurred (not in focus) the first click should only give it focus and only then the content and UI become active. so clicking once on the ‘close’ button on a blurred window will not close it but only give the window focus.

The windows are movable by dragging the header area, and scalable a-la-Mac with a small handle in the bottom right corner. did I mention I hate this behavior in Macs already? will change it here! watch me Steve.

New portfolio site

It has been over 6 months that I haven’t used Flash, and even more since I worked on my own portfolio site. This weekend I decided to dive into it.. At first I thought I forgot everything, but pretty fast it came back :)

todepoint portfolio 2009
I decided to simplify things and put it together without pyrotechnics and artistic choreographies, I hope I will have the time to finish all those fancy plans I had.
It’s a chronological view of projects I did along the years, with an option to filter them by categories – flash, gui, graphics etc. The small scroll bar on the right controls the size of the thumbnails. clicking each thumb will change the interface to show more images and details.

Status updates

First of all, apologies for the blue blog theme.. the good old orange theme will be back soon, didn’t have the time to customize the new version of K2 with the new version of wordpress, hopefully will put the orange theme back up next week.
Update: Yeah! Orange is back :)

Another update: I have started working in an exciting company as Head of Product (will disclose more details soon), managing all aspects of a very interesting web site. The new job is taking most of my time.. so I am not giving services or taking on new clients until further notice, sorry guys : )

How to stroke several sprites as one

If you’re trying to create a single stroke (outline, contour) over several sprites or movieClips, you can simply create a parent object to hold them and apply a glow filter to it. In this example (yeah, it’s an old and basic as2 thing, a test I did ages ago) I applied a glow filter of 2 pixels Blur to the comic balloon background.

The background is made of two movieClips, each has it’s own behavior, if you click the horn you can adjust its size and direction, if you click the text area you can scale the textField and the balloon background along with it.

This trick can be really handy if you’re making animations of moving silhouettes. In this flash I used GreenSock’s TransformManager to make the textField and horn controlable.

Silverlight, do I know you?

AIR != Silverlight
Mrinal Wadhwa:

Microsoft Silverlight is a browser plugin and is sort of similar to Adobe’s Flash Player and Flex Framework taken together

Adobe AIR is cross platform desktop runtime that allows developers to build desktop applications using web technologies, it has no real equivalent in the Microsoft world.

Peter Elst also finds it important to differentiate..

So many people ask me – “How is Silverlight?” or “Is Silverlight a real threat to Flash?”.. well, I never even tried Silverlight. (I did install the plugin, but simply never got to a website that uses Silverlight..)
So the only answer I can give is: when aiming at the web industry (us developers), such a difference in user/client perception must result in different adoption trends, evident: I did not try.. but the logo looks kinda cool.

The Year of the Flash

So much was written of the new flash player (version 10, code named “Astro”) and what it may do to the industry, it is indeed technologically inspiring, but from a freelance point of view (business wise) this even looks better.

Looking back to when I started working with flash (about ten years ago) and now, I can see a huge change in the weight of flash in projects out there.
Today, both the platform and the clients have matured, Flex has made a huge impact on technological companies perception of flash as the focus is shifting towards User Experience (anyone said RIA?) and OS compatibility and consistency, and the role flash plays in those is non comparable.

Up until recently I had to explain what I do, when refusing to take so many projects that were not related to my skills.. I guess because flash animators, designers, and coders were all considered the same in term of wages and availability.
Now, companies are looking for flash experts that can make charts like Google’s financial charts, and this is clearly a specialist job, since most of these companies don’t have the know-how in house, they call guys like me : )

The good news is that each improvement in flash adds to the appeal we have, and the demand for advanced flash programers is absolutely amazing.

I think this will be a great year.