The Flickr Spinnr Saturday 2006-05-06
It’s been a while now, since I had an opportunity to work on the 3D Cube or Flickr Spinnr. Among many other things, such as a bit of gardening and spring start up of the Fridhem house here on Öland, my computer was invaded by stupidity ( my ) and hijackers ( idiots ).
Today I’m up and running and solved a problem with the cube. The images on the cube should link to the Flickr page for that image, but due to concurrent processing of the images, the coupling between addresses and images got lost. An extra wrapper MovieClip around the one holding the image, carries the image id to the processing event handler. It’s a bit technical for a blog post, but the explanation will come in a planned tutorial later on.
I also had an annoying flicker as the images were placed face up on the Stage area before they are glued to the cube. The simple solution was to place that construction area out of sight, i.e. outside the view port of the Flash movie.
Now one quirk is left to think about. The images are mirrored as they are glued to the cube, probably due to the ordering of points that describe the cube faces. As I haven’t written the math for the cube, that will take some effort to change.
[Edit] After lots of ad hoc experimenting with the math of the cube, making symmetric changes to point positions for the cube faces, I gave up that approach. Instead I attacked the inncoming JPEG images and flipped them around the y-axis, before converting to bitmap and throwing them at the 3D engine. Yippee, that works 
For now, have a look at “A Flash 3D Image Cube“, to become a tutorial in the end of time - or maybe earlier.
WordPress Widget tutorial Friday 2006-04-14
If you use WordPress, and follow what happens at the WordPress dot Com blogger site or in the WordPress community, you haven’t missed the new web 2.0 Ajaxian way to treat Widgets. If you have, here’s a short resume to get you in touch.
A WordPress Widget is some facility you place on the sidebar, like a calender or a list of, say recent posts. We all have something like that in our blogs, so that’s nothing new per se. The news is that you can do all kinds of fancy things with a WP Widget widget from an admin interface, like switching them on and off, moving them around or change their behavior.
Now you know. But do you know you how to craft your own widget?
The always alert and helpful Kaf at guff szub.Net has written a short and readable tutorial “My Widget - Example WordPress Widget“
Flickr Badge and XHTML, Part 4 Thursday 2006-04-06
In my tutorial series “Building a Flickr Flash Display“, I have come to Part 3. Here we go through the code needed to make the images of the display zoom out smoothly, when the user mouses over one of the thumbnails. We’ll also make a version in which the zooming in and out of randomly selected images is done automatically. It is fairly simple to accomplish the smooth and professionally looking behaviors, using the versatile Actionscript Tween class and its easing helper classes.
Please join me to craft a dynamic Flickr display.
Flickr Badge and XHTML, Part 3 Sunday 2006-03-26
Some progress is done on the stand in for the Flickr Badge, as we move on in the Petit Labs. In the tutorial “Building a Flickr Flash Display, Part 2“, we add some interactive dynamics to the image display. The beholder who’s eyes stare at the tiny thumbnails of our Flickered images, will be able to zoom in on any of them, to get a doubly sized version, by just pointing the mouse at it. As before, clicking an image will take the user to the Flickr page for that image. Come on and have some fun!
Global Tag Clouds on WordPress Dot Com
In the web 2.0 era tag clouds have become popular as a means of providing a semi semantic web. I say semi semantic, as we have humans rather than machines, making the relevant bridges between islands of information. The tag cloud or tag list is supposed to find connections between articles or posts, witin the same or neighboring domain of interest. Quite a few tagging services gather tags from blogs and web sites, to fasciltate this type of connections, and by visiting or subscribing to a service like Technorati or FeedBurner, you get freshly published information on your pet subjects.
There are some problems with this kind of syndication though. Do you really get relevant information links?
Well, as long as machines dont understand meaning, the only possible way to connect information in a meaningul way, is to use humans. The problem is that all connections that end up in a tag cloud are made blindly. That is, when you tag your article, you don’t know what other articles in cyberspace will get the same tag. Every contributing author adds tags, that he or she thinks are significant for the article or blog post. These tags are then automatically added to one or more centralized tag clouds. Not everyone will have the same idea on how to tag a certain piece of information.
I know this from my own experience. I’m farly good at creating categories for my own projects, but I often stumble when I add information to them. For a long time I had the distinct project types “Java” for Java programming and “XML” for my XML/XSL experiments. They resided in different directories on my hard disk. Then came the “Java and XML, a marriage made in heaven”, and I wrote every tiny XML handling software in Java. Where to place a new project? Is it about Java or about XML? Here tags comes to resque.
Tags are not categories, but have the advantage of connecting information over category boundaries.
That works for me, but how about sharing my tags with the world. First of all I have to specify by adding more tags to my projects, such as “java”, “xml”, “xsl”, “soap”, “web service”, “http”. If this covers my story, anyone searching for a “web service” will get a link from the tag cloud to my story, together with articles on certain wheater services, stock services, mapping services and so forth.
As there is no human supervision of the relevance of the interlinking, I’m sure the signal to noise ration will be very low on this centalized tag clouds. Contributing to this low ratio is the fact that the ranking of tags is based on popularity. Probably the most prominent tags are meaningless and yields the the longest lists of results.
So what’s the alternative?
A Google search does’nt give you the latest and hottest articles at the top, but the relevance of the results are normally high, because the ranking depends on popularity of the sites rather than the search terms ( comparable to tags ).
A search or a tag cloud within a domain/sub domain or directory/category would be more effective than a world popular tags cloud. If you are like Lorelle, read “The Problems With Tags and Tagging“, you don’t want to encourage people to leave your site, by presenting a Technorati or FeedBurner link to a central cloud of which you are part, but rather drill your own site local cloud. If you do this in a clever way, the relevance is inherent, as you have now added the missing survaillanse of interlinking.
Yesterday Doncha in “More WordPress Feeds” at WordPress Planet plugs for the new WordPress Dot Com new global tag cloud.
“When you write a post on WordPress.com it’s categorised in the usual way but it’s also added to a site-wide pool of posts and identified by a global category. Matt’s announcement this morning means that I can track what people are talking about photography, photos, gimp and even wordpress all from the comfort of my aggregator!”
The new cloud in the WordPress.COM sky, was annonced by the “Unlucky in cards” chief developer of WordPress, aka PhotoMatt in “Tag Feeds and Paging” at the companies blog.
( My spell checker died, sorry about that! )
Tween Your Images With ActionScript Saturday 2006-03-25
Using the ActionScript 2.0 in Flash, you can have a lot of fun with the Tween class and the easing package. If you have some knowledge of ActionScript, and want to ease your work with your image transformations, you can have a ball with the classes in the mx.transitions packages.
Using only one frame and an external ActionScript, you can do almost anything you want by applying one or more of the transformations, accessible to the artistic programmer. After some thought on my road to a new Flickery Flash image display, I decided to take the Tween class on a ride.
Using others wisdom, I boldly set out to tween the transparency and the size of a JPEG image, and at the end combine the tweenings. It turned out to be a fairly easy ride. What you do is load the image of your choice into a MovieClip, and create a new instance of the Tween class. It’s constructor takes as arguments, the object you want to apply the change to, the property you want to change, the start and end value of that property, the duration of the tween and an easing function or class, that knows how a special type of tweening is done.
That’s pretty much all you have to do. Nothing fancy to the code, but the result is impressive. If you like to know how to create image effects in a fun and lazy way, read my tutorial “Using the Tween Class“.
All Columns Are Born Equal
Three column layouts are popular for web sites and blogs. At least among those among us, who want to present lots of widgets and ads along with our main content. A problem we encounter is how to make all columns stay equally tall in all browsers.
There are a few methods to make it work, using CSS and sometimes JavaScript. Here is a good solution, although somewhat complex, using negative margins to make the columns equal in height.
Here is a funny animated JavaScript solution for making 2, 3 or 4 columns equal: I’m not keen on using JavaScript, if I can avoid it, but the effect can be brought to good use in other DHTML situations.
If you want to really dig in to the multicolumn domain, the css-discuss Wiki lists an impressive collection of articles on ThreeColumnLayout
If you are lazy and want the basic layout automagically made, you can visit the ClevaTreva Piefecta Pagemaker.
Or maybe better, the CSS Creator’s CSS Creator
As an extra bonus for reading this I’ll give you marvels at CSS edge, like CSS menus and wrapping text around curved images.
Waddayaknow?
Flickr Badge and XHTML, Part 2
It’s all about including the Flickr Badge in an XHTML compliant way. As I have described in an earlier post, I thought I had succeeded. This proved very soon not to be true, and after a considerable amount of head scratching, I decided to craft my own badge.
If I could do that, I would gain two things. Firstly I would have full control of the behavior of the badge, such as the number and size of the images, the size of the grid and the timing of animations. Secondly, having direct access to the Flash Movie ( the “swiff” ) it would be much easier to look for embedding markup, that would validate as XHTML.
I have the Flash MX 2004 authoring tool or, if you are a programmer, the IDE on my computer, so making a Flash Movie from scratch is quite possible. I started to look for a suitable ActionScript Flickr library, to be able to communicate with the Flickr Service API. I found one at the Adobe/Macromedia web site, that looked promising, but I couldn’t find any documentation, so I dropped that. In my continued search, I found Kelvin Luck's flashr, version 0.4 Actionscript Flikr library, which contrary to Macromedia’s, is well documented. It is free for all to use, and comes with an introductory example, that runs right out of the box.
After some fiddling with the example, I realized that the example application only needed a few changes to look like the original Flickr Badge ( sans animation ). I decided to write a tutorial on “Building a Flickr Flash Display“. This is part 1, and further development will follow. Enjoy!
Image Upload in WordPress 2.02 Monday 2006-03-13
There are some complaints about image upload in the latest and greatest WordPress. In the Support forum one claims that big images doesn’t produce thumbnails, another that the path of the uploaded image is not correct, as if the blog has to be in the documetnt root.
Lets try it out! I’m uploading an image to my predefiened upload directory.
[Edit]
It worked as expected. Selecting the link and use thumbnail options works well. If you don’t use the options, it is possible to drag the thumbnail image into place in the editor. If you use the options, however, it is no longer possible to drag the thumbnail and you have to use “Send to editor”. It’s a bit strange, but this is how it works for now.
WordPress 2.02 Security Upgrade Friday 2006-03-10
The long foreseen WordPress 2.02 security upgrade is released. Much serious discussion and lots of pure ballony has stired up the WordPress forum and the WP mailing lists lately. Some have argued strongly that Matt comes to market with some assurances, just to calm users down and to stop the speculative attacks against WP, being unsecure.
According to release notes there obviously were some issues, kept semi secret, which are resolved in the 2.02 release.
I just upgraded using the normal upgrade route. I took a backup of the database using phpMyAdmin and also using Skippy’s backup plugin. I also copied the whole installation to my work station. Before uploading the new WP distribution, I deactivated all plugins.
Without deleting anything in my installation, I uploaded everything in the new distribution, except the wp-content directory to my blog directory, and run the upgrade.php script from my browser.
After that I activated the plugins I use, one by one.
It all went well, an I was up and running within a few minutes. Hopefully, the complaints, rants and whispers will disappear from the WP forum and other more or less serious discussing areas.
All Posts
del.icio.us
PetitOn Tellus