Tuesday, August 24, 2010

Creating animated gifs from movies

There are a lot of guides on explaining how to creating animated gifs by either creating them using various tools or by directly converting them from a movie. If you want to create an animated gif from scratch you can use Adobe Fireworks or Beneton Movie Gif. If you want to convert movie files (like WMV or FLV) to an animated gif, the best tool to use is ffmpeg.

The quick way

The easiest way to convert a  movie (in this example I will use a wmv, but it can also be any movie type) is using the internal function of ffmpeg. You can convert it by issuing the following command (which will create output.gif):

ffmpeg –i movie.wmv –r 5 –pix_fmt rgb24 –loop_output 0 –s 320x240 output.gif


Explanation of the switches (see also ffmpeg documentation):

































-i determines the input file name (movie.wmv)

(put your filename between “ s if it contains spaces)
-r 5 tells ffmpeg to use a framerate of 5, which is a good setting when creating animated gif files (can be omitted if you want to use the original framereate)
-pix_fmt rgb24 required when converting to gif

(due to the max colors in a gif file)
-loop_output 0 Makes sure the gif animated forever, omit if this is not required
-s 320x240 Set the gif size to 320 by 240 to make the size of the animated gif smaller. Omit this if you don’t want this


This works perfect, however personally I am not so fond of how ffmpeg chooses the GIF color palette. I have not found anyway to improve this.



The better results way



As mentioned above, depending on your movie, the converted gif does not have an optimal color palette and you will see a lot dithering. The method I use most which gives the best results is exporting the frames using ffmpeg and importing them to your favorite animate gif tool (in my case Fireworks)



To export the frames of a movie using ffmpeg use:



ffmpeg –i movie.wmv –an –r 5 –y capture%d.png


Quick explanation: -an stands for no audio, –r specifies the framerate (change accordingly) and –y just tells ffmpeg to overwrite if files are existing. You export to any image format. I use PNG because this gives the best results.



The next step is to import your files in your favorite animator app. In Fireworks, select File – Open and select multiple the files you have generated with ffmpeg. Before pressing the Open button, make sure that the you check the “Open as animation” checkbox



image



Now Fireworks will create all the frames for you based on the image you have selected. Do your usual stuff and export it to animated gif.



Hope that this was useful and happy animating!

 
Souces: ahfr.org, noeckel,

Monday, August 23, 2010

New Flickr Interface

Just encountered the new interface of Flickr. I really love how they are introducing it, especially the last step: have fun.

image Besides this cool presentation, a few new features have been implemented:

  • Lightbox zoom

    image
  • A fresher user interface with Improved tooltips and navigation

    image
  • Enhanced map (like show pictures nearby)

    image

Thursday, August 19, 2010

Wielmaten voor kinderfietsen

image

Voor de keuze van de juiste wielmaat kunt u onderstaand schema aanhouden:

Jaar Wielmaat (inch) Kleding maat
2 tot 4 12,5 92 - 104
4 tot 6 16 104 - 116
4 tot 8 20 116 - 122
5 tot 9 22 122 – 128
8 tot 10 24 > 128

Zoekt u een fiets voor uw kind van 11 jaar of ouder, dan kunt u dit opzoeken bij de gewone fietsen en zoeken naar een model met een klein frame en 26 inch wielen.

Samsung Galaxy versus Apple iPhone 4

image

I believe currently the Samsung Galaxy is the only real competitor of the new iPhone.As I am interested in both of them I want to visualize both machines and see which one is better.

image

As you can see, on the size level the iPhone looks like a winner, however we also need to keep in mind the that the size of the Galaxy is 4 inch where as the iPhone as 3.5 inch. Personally I find the screen size in combination with the weight more important and here the galaxy excels. As you can see below the ratio of the screen versus the weight is much much better on the Galaxy. Which means actually, you carry less weight and get a bigger screen.

image

If you want the see the ratio of the screen regarding to the dimension (in this case the volume) we get the following chart.

imageThe volume of the iPhone is less, but again if we put this in respect with the screen size, Galaxy wins.

Let’s have a look at the battery now.

 image If you focus on the talk time, the iPhone wins but the Galaxy is not far behind. I am not much a talker, so the standby is more interesting for me and here the Galaxy wins without a doubt (which makes sense because of the higher mAh value).

The last comparison which is interesting for me is the support for media files. I think the chart below says enough.

image 

The Galaxy plays almost anything (mp3, xvid, etc) while the iPhone is restricted to it’s own format (except the mp3). Another big disadvantage is iTunes on the iPhone. I just want to drag and drop my media files.

Finally lets have a look at some comparison screenshots:

Video Player

image

 Camera

image

image

Browser

image

As you might have guessed, I will go for the Samsung myself, but at the end it is a personal preference. My final suggestion is to go to a shop and physically hold both machines, look at their screens and play with them. All the specs and charts have no real meaning, as a wise colleague of mine always says: Figures lie and Liars figure.

Source for the chart data: gsmarena.

Tuesday, August 17, 2010

Google contact image not synching in Picasa

I have been using google mail for a long time now and have always been impressed on how well it does what it needs to do. The recent update has also been a great improvement, especially the (new) functionality in the contacts (especially the merging of contact after importing from other sources). I have started to put my contacts in gmail and have been updating the images too.

Another google application I use often is Picasa. The people functionality in Picasa (with the face recognition) a great tool and is one of the reasons why I am so fond of Picasa.

After I had updated and reorganized my contacts (in gmail), I assumed that they will also available in Picasa. My assumption was correct, with one disappointment: the contact image did not show up. I also realized that I had now duplicate contacts: the ones in Picasa I created during face recognition and the contacts from gmail. Unluckily I could not find any way to merge them.

So my feature request for Picasa is right now: 

  1. Extend the “central” contact list (used by gmail) with all the properties (including contact image, etc), with the ability still to check whether a contact in Picasa should be synchronized, which also seems to be the second most requested feature in Picasa :)
  2. Ability to merge an existing Picasa portrait/contact with the “central” contact list, meaning that when the Picasa contact has an image and the “central” contact doesn’t, it would copy it and (also the nickname), without loosing all the photos where the contact has been spotted.

Hope this will get implemented soon.

Friday, August 13, 2010

Fireworks tips

There is denying it, Adobe Fireworks is my favorite Adobe App. I have been using it for ages it seems and am still satisfied with it. (I haven’t used CS5 version yet… but I am sure I will not be disappointed with it). For images and projects for the web, it is perfect. Photoshop is mostly overkill. What I especially like about Fireworks is that is a hybrid image program; you can work on pixel level and still use vector tools.

Here are some tricks and tips I use often in Fireworks.

Convert images to Grayscale

Converting images to grayscale can be done by using the Creative menu.

image

 

Pasting new image

One useful feature of Fireworks is that is monitors your clipboard. If you have copied and image to the clipboard, you can start editing it by pressing Control-N (New) which will open up the new image dialog with the size of the image in the clipboard. After just pressing OK, you can paste it directly.

Fading images

Fading images can be done by using the Commands – Creative – Fade Image menu

image
image

You can further customize the fade by clicking on the layer mask, which shows you the gradient controller.

image 

Setting layer preview size

I usually do not make any changes in the preview size, however there are some situation where you would to see smaller or bigger previews. This can be easily changed by clicking on the Layer option dropdown – Thumbnail Options item.

image

 

Useful keyboard shortcuts

Below is a list of keyboard shortcuts which I use most of the time

TAB Hide/Show panels
image
Control – Alt – D Duplicate current selection/layer
Control – Shift – D Clone selection/layer (similar to duplicate, however duplicate moves the copy)
Control – K Full display
image
Control – Numpad + Zoom in
Control – Numpad - Zoom out
Control – Mouse scroll Zoom in and out
Control – G Group selected
Control – Shift – G Ungroup (grouped) object
Control – Alt – V Paste as mask
Control – A Select All
Control – D Deselect
Control – Up Bring Forward
Control – Down Send Backward
Control – T Transform
Control – Shift – T Numeric transform
image

You can also customize your keyboard shortcuts via the Edit – Keyboard shortcuts menu item.

See also the CS3 manual.

Tuesday, August 3, 2010

Unnecessary short variable names irritation

There is always a discussion between programmers (and code reviewers, etc) on how variable names should be assigned. Except the formatting (camel case, etc), there is also the issue of the length of variable names. Some people really dislike and even get irritated in short, non-descriptive variable names. Today I have encountered a blog post even given 5 reason why not to use short variable names. I find this discussion very unnecessary and people are really missing the point here.

The most important best practice in (readable) programming should be consistency. Having long or short variable names does not achieve this. Long variable names can be as confusing as short variable names.

An example: Let’s take the variable called total_order. What does this say… probably the total order amount, but is this including VAT or is including discount or including discount and VAT. Is the amount in US dollars or euro’s? Maybe it is not even the amount but the total items in the amount. Coming back to consistency, if the variable total_order is used in function x() as the total amount in USD and in function y() it is used as total amount in euro’s including discount, it really gets confusing. Having it called tot would force you to think (and investigate) what it would contain, which in some case would catch some nasty bugs then relying on a name of a variable.

As you can find reasons why not to use short variable names, I can find good reasons on not using long variable names. For me in variable names the following is more important:

  1. Consistent use of variable names, e.g.. using single character (or 2 character) variable names for temporary/looping purposes (like i or ix). This also means that shortening variables in the same manner. For example a variable containing a total should be throughout the program shortened to total and not to sometime tot and another time to totals.
  2. Use of comments explaining what a variable is required for and what it stores (and purpose). This means instead of using

    total_amount_vat_incl_discount

    I would prefer to see something like

    // contains total amount including VAT (with discount applied to it)
    totamount


    This clears any misconceptions about what the variable is used for. In the case of total_amount_vat_incl_discount: is the total amount including VAT or is it the total amount of VAT? 
  3. Readability. When having long variable names, the lines become unnecessary long and formulas look more complex. You actually loose the overview what is happening. For example, have a look at the following formula:

    ((total_order_amount_ex_vat – total_discount_customer – total_discount_sales_month) * ((1+ (vat_percentage/100)))/total_share_percentage) + total_amount_zero_vat

    (In this case too much total_ in the formula and it’s just too long)
  4. Programming speed. When using long variable names, it also means that you will need to type more (over and over again), There is counter argument that you should you a good editor, which allows auto-completion. However from my experience auto-completion does not really help here. If you have variables like: total_amount_incl_vat, total_amount_incl_discount, total_amount_ex_vat, total_amount_usd, you will get all of them and you will still need to scroll and find the correct variable. Most of the time, I even don’t use this functionality and just type it, because I am quicker then the editor.
  5. Minimize copy-paste errors during programming. Copy-Paste is a very common situation during programming, you mostly use an existing piece of code for a new module/function. If you have very specific variable names, you also start renaming/re-edit these variable names. During this process you always make typing errors or forget to rename one item, resulting in strange program behavior.

    Let me give a very basic simple example: You have a piece of code which does something in US Dollars. You copy paste it to a new function which does similar calculations in euro’s and have variables like amount_usd, amount_incl_usd, amount_usd_discount, etc. You will need to change them to amount_eur, amount_incl_eur, etc. You will also during this process make errors like instead of using amount_incl_eur, you use amount_inc_eur (missing l). It is just statistics, the more characters you need to type, the bigger the chances of typing errors.

At the end, as mentioned earlier, the focus should be on consistency and readability then the actual naming variables and you will need the right balance between what is long and what is short.

Happy programming