byDust http://www.bydust.com Nick Van der Vrekens personal portfolio Mon, 22 Dec 2008 01:55:01 +0000 http://wordpress.org/?v=2.7 en hourly 1 Playr, the best actionscript music player out there http://www.bydust.com/playr-the-best-actionscript-music-player-out-there/ http://www.bydust.com/playr-the-best-actionscript-music-player-out-there/#comments Thu, 18 Dec 2008 19:36:21 +0000 Nick http://www.bydust.com/?p=241 Playr is a open source Flash Actionscript 3 class which takes the heavy lifting off your hands and makes building any kind of music player a piece of cake. Yes! Thats the short description right there.

If you need music a music player in your site, this is what you need. Playr makes it incredible easy to implement any kind of music player in your flash website. And the best part of it, you only need two (2!) lines of actionscript to get it working.
For all you hard asses that don’t believe me, here’s an example:

  1. import com.nocreativity.playr.Playr;
  2. var playr:Playr= new Playr(“/assets/playlist.xml”,“/assets/music/”,true);
Or a bit more advanced:
  1. import com.nocreativity.playr.*;
  2. var playr:Playr= new Playr(“/assets/playlist.xml”,“/assets/music/”,true);
  3. playr.registerPlayButton(btnPlay);
  4. playr.registerPauseButton(btnPause);
  5. playr.registerNextButton(btnNext);
  6. playr.registerPreviousButton(btnPrevious);
  7. playr.registerStopButton(btnStop);
  8. playr.addEventListener(PlayrErrorEvent.PLAYLIST_STREAM_ERROR, playlistStreamErrorHandler);
  9. playr.addEventListener(PlayrErrorEvent.SOUND_STREAM_ERROR, soundStreamErrorHandler);
  10. playr.addEventListener(PlayrErrorEvent.PLAYLIST_INVALID_XML, playlistInvalidXMLErrorHandler);
  11. playr.addEventListener(PlayrErrorEvent.TRACK_NOT_ADDED_TO_PLAYLIST, trackNotAddedToPlaylistErrorHandler);

You can download Playr and see more information and examples at playr.nocreativity.com.
The Playr documentation is available at playr.nocreativity.com/docs/

Playr has been developed by the local Flashguru, Ronny Welter .
No animals were hurt or killed during the development of Playr. Ronny had a headache tho.

]]> http://www.bydust.com/playr-the-best-actionscript-music-player-out-there/feed/ “Online TV” Presentation http://www.bydust.com/online-tv-presentation/ http://www.bydust.com/online-tv-presentation/#comments Sat, 29 Nov 2008 16:54:54 +0000 Nick http://www.bydust.com/?p=236 I did a Powerpoint presentation about “Online TV”, have put alot of work in the preparation and presentation slides of this thingy. You can download the presentation below, It’s written in Dutch.

]]> http://www.bydust.com/online-tv-presentation/feed/ Fhi-zin, free AJAX Wordpress theme template for Portfolio and Photography http://www.bydust.com/fhi-zin-free-ajax-wordpress-theme-template-for-portfolio-and-photography/ http://www.bydust.com/fhi-zin-free-ajax-wordpress-theme-template-for-portfolio-and-photography/#comments Tue, 28 Oct 2008 17:01:42 +0000 Nick http://www.bydust.com/?p=192 Fhi-zin is one of the best Wordpress themes for Portfolio and Photography websites on the web, and with its unique design it doesn’t even look like a Wordpress website ! On top of that, its completely driven by an AJAX engine, is Googlefriendly, SEO-optimised and capable of attaching an unlimited amount of images on each post.

Like I said before, Fhi-zin is completely AJAX-driven. It’s powered by my com.bydust.ajax class, which automatically converts a static website into an AJAX-driven website. The theme runs smoothly on computers with javascript disabled, for example older browsers and search engines. Whenever a javascript error occurs - which should be never, but you never know - the ajax class should commit suicide and your theme will run without the ajax-functions. Offcourse that never happens, its just in case ;-)

Fhi-zin will most likely be used for portfolio sites and photography galleries which will use Wordpress as a CMS-system. The possibility of attaching an unlimited amount of high-resolution images to each post can be used to create a separate gallery from each post in your Wordpress site, which you can group in the standard Wordpress categories. There is no maximum dimension size for these images, but if you pick large dimensions some users may have problems viewing the images since they dont fit on their screen. If you keep the dimensions smaller than 1000×700 things should be fine :)

Apart from the unlimited images, you can define external links and downloadable files for each post too. There is a live demo available for you, and the theme is up for download on Wordpress.org.

When the theme is activated, there will be an information page available in your Wordpress administration. This can be very usefull for adding images and links. If you still have some questions or remarks, please post them here.

For all users who want scrollbars in the post/page content text, I’ve made a modified theme which includes scrollbars. You can download it here. If you already uploaded the Fhi-zin theme, you just need to replace the files “style.css”, “single.php” and “js/main.js”.

I’ve found already quite a few websites who use Fhi-zin, here are a few nice examples:

]]> http://www.bydust.com/fhi-zin-free-ajax-wordpress-theme-template-for-portfolio-and-photography/feed/ AJAXed website - Automatically convert to AJAX website - com.bydust.ajax http://www.bydust.com/ajaxed-website-automatically-convert-to-ajax-website-combydustajax/ http://www.bydust.com/ajaxed-website-automatically-convert-to-ajax-website-combydustajax/#comments Fri, 17 Oct 2008 22:46:01 +0000 Nick http://www.bydust.com/?p=167 The com.bydust.ajax class is simply a javascript class that automatically converts your static website into a full-blown ajaxed website. Whenever a user visits your website, the class will perform a browser-check. If your visitor’s browser is capable of running the needed javascript, it will convert the website automatically. If not, the script deactivates itself and the visitor browses through your website as it is ( without ajax request etc. ).

You can download the script and view the howto at http://www.bydust.com/examples/com.bydust.ajax/

Basic implementation

The implementation of the javascript class is really easy, you just need to add a few lines of code into your pages. These will load and launch the script, and mark the area’s you want to refresh on each page. Look at the implementation page on the manual for more information.

Customizable animations

Yes, animations. Its only eye-candy, but it improves the style of your website alot, and the users impression of your website.
There are two types of animations available in the script, we have the tweens who smoothly fit your content into your page, and the alpha transitions which display your content with a nice fade in. As if that isn’t enough yet, these animations are customizable !
There are 13 types of tweens available, from normal easeIn or easeOut tweens to elastic and bouncy. There’s also an option to disable the tweens and alpha transitions, this might be good for large pages since they demand some CPU usage from the visitors computer. Don’t think you’ll need to disable tho :)

You can add more eye-candy in the customizable loading-messages, for example a nice loading image in gif-format or even little flash-movies. By adding CSS-styles in the loading-messages this can be very easy.

Functionalities

Its a bit more than your average “Hey-I-can-do-ajax”-script. With this script you can add event listeners, set up custom rules and custom animations, manage the filetypes handled by the script, and so on.

Attaching event listeners to certain events launched by the script allows you to execute certain pieces of code whenever an event happens, for example on errors ( but offcourse these never occur :) ) or page loads. Attaching an event listener is very easy, you can attach an event with one line of code. Just like in actionscript, we can use the “addEventListener”-function with the same two parameters, the event and the function to execute.

Custom rules allow us to tell the script to discard certain links or forms, or even to only notify the server when a user has clicked a certain link or posted a form. These rules can come in handy when you don’t want certain links to be parsed in ajax, for example feeds or trackbacks. When implemented in a Wordpress theme, you’ll need to add these rules for the wp-admin folder, feed and trackback links.

Error handling is often overlooked, but not here. The class is able to discover whenever an error occured, and will fix it when possible. If it notices that there is no way to fix the error, for example if one of the requested pages doesn’t have the information it needs, it will shut down itself and serve the page as a normal browser request, without any ajax. The ajax-class will then load again when the new page is fully loaded. If the script is able to fix the error, an error-event containing all information will be raised and an appropriate message will be shown. These messages are also customizable offcourse :)

Webpages often contain images, thats why I’ve built in some image preloading functions. When the ajax-class receives the new page from the server, it starts looking for images in the content areas that need to be refreshed. As long as its preloading, a ( customizable ! ) message will be shown to the user. When the images are fully loaded or the maximum load time has been reached the script will display the page. And, as you can guess, the maximum load time can also be specified by the user.

Since this is a pretty big project I’ve set up a small howto-website with loads of information about the script, and an example for you to download. You’ll find a detailed manual for the basic implementation there, along with the more advanced stuff.

The script is completely free for non-commercial use, but I’d like you to leave the credits in the classfiles and maybe a small link back to this page - if its not too much trouble. I’ll link back to your website if you’re using the script, so others have some more working examples. Contact me for commercial use :)

Com.bydust.ajax has been featured on several websites and communities:

]]> http://www.bydust.com/ajaxed-website-automatically-convert-to-ajax-website-combydustajax/feed/ Expanding images - Javascript image navigation script http://www.bydust.com/expanding-images-javascript-image-navigation-script/ http://www.bydust.com/expanding-images-javascript-image-navigation-script/#comments Wed, 15 Oct 2008 11:41:06 +0000 Nick http://www.bydust.com/?p=156 Expanding Images is a javascript class that enables the user to animate a row of images on the webpage, so that the focused image appears larger than the other images in the row. It can be used as navigation, gallery, thumbnail viewer, and so on. Use your imagination :)

There are a few parameters to specify for the script to work.
To start, we need all the id’s of the images to use in our script. We can specify these with our create-method. See below for more information.

var BDEI = new BDExpandingImages();
// create a new BDExpandingImages object. This thing will handle the animation.

window.onload = function(){

// we can only initiate the expanding images when the page is fully loaded.
// optional parameters:
BDEI.width = 120;
// width of a single image, in pixels. default 100.
BDEI.height = 182;
// height of a single image, in pixels. default 100.
BDEI.classNormal = ‘normal’;
// class of an image when not active. default ”
BDEI.classHover = ‘active’;
// class of an image when active. default ”
BDEI.scaleNormal = 0.6;
// scale of an image when not active. default 0.8.
BDEI.scaleHover = 1;
// scale of an image when active. default 1.4.
BDEI.range = 6;
// number of images on each side of the active image that are pulled. default 3.
BDEI.create(’scroller_image1′,’scroller_image2′,’scroller_image3′,’scroller_image4′,’scroller_image5′,’scroller_image6′,’scroller_image7′);
// id’s of the images we’re using for the animation.
BDEI.init();
// initiating the script.
BDEI.hover(BDEI.itemIDs[3]);
// activate a default image. This will be image 4. by default no images are active after initiation.

}

There are several scripts like this one available on the internet, but most of them are not working on all browsers or are taking WAY too much CPU. There are probably some other faults too, for example the need for absolute positioning, but these are the two main reasons why I scripted my own class. It has alot more parameters to set than most of the others too, for example the range-parameter or class-parameters.

Demo: click here

You can download the demo and script with the link below.

]]> http://www.bydust.com/expanding-images-javascript-image-navigation-script/feed/ Extended javascript Array Class - com.bydust.array http://www.bydust.com/extended-javascript-array-class-com-bydust-array/ http://www.bydust.com/extended-javascript-array-class-com-bydust-array/#comments Mon, 06 Oct 2008 11:37:20 +0000 Nick http://www.bydust.com/?p=177 The extended javascript Array class is a small class that allows you to access more - custom - javascript methods, for example array.contains(object), array.dump(), array.shuffle() and others. It can be used for faster programming and fixing crossbrowser issues. Nothing fancy really, I just scripted this because I thought the normal Array class could use a few extra’s.

Updated to version 1.1 on october 29th, 2008

So what’s in this “extended class”?

Well, the extended javascript Array class contains some pretty usefull functions that are not included in the standard javascript Array class. Here’s a full list of what is standard included and which functions and methods are added by this class.

Standard Array functions:

  • array.concat(another_array, …);
  • array.join(”separator”);
  • array.pop();
  • array.push(obj, …);
  • array.reverse();
  • array.shift();
  • array.slice(start[, end]);
  • array.sort();
  • array.splice(index, howmany[, elementstoadd]);
  • array.toSource();
  • array.toString();
  • array.unshift(elements);
  • array.valueOf();

Functions and methods added in com.bydust.array 1.1:

  • array.contains(obj);
    • Returns true if the array contains the given value, false if it doesn’t.
  • array.count();
    • Counts the number of keys in the array.
  • array.countValues();
    • Returns an array using the values of the array as keys and their frequency in input as values.
  • array.dump();
    • Returns a string containing a table with each key and its respective value in HTML-code.
  • array.fillKeys(keys, value);
    • Fills an array with the value of the value parameter, using the values of the keys array as keys.
  • array.get(key);
    • Returns the value attached to the specified key.
  • array.getKeys();
    • Returns an array containing all the keys.
  • array.indexOfKey(key);
    • Returns the index of the specified key in the array, returns -1 if the key doesn’t exist.
  • array.indexOf(obj);
    • Returns the index of the specified value in the array, returns -1 if the value doesn’t exist.
  • array.keyOnIndex(index);
    • Returns the key on the specified index.
  • array.makeUnique();
    • Removes duplicate values from an array.
  • array.product();
    • Calculate the product of values in an array.
  • array.shuffle([preserve_keys]);
    • Shuffle the array. Optional parameter “preserve_keys”, default false.
  • array.set(key, value);
    • Add a key with a value.
  • array.sum();
    • Calculate the sum of values in an array.
  • array.swap(key1,key2);
    • Swaps two elements in an array. Keys are not preserved.
  • array.rand();
    • Picks a random entry out of an array.
  • array.remove(key);
    • Removes the specified key and its value from the array.

There’s also a fix for the array.indexOf(object) method. If the given object is found in the array, it will return its index as a number. If not, -1 is returned. This method is already implemented in the normal Array class, but doesn’t work for IE browsers. Well, now it does :)

Well, I hope someone can use this extended class. I wasn’t going to put it online at first, but changed my mind when I saw I’m not the only one who could use this :)

You can download the class with the link below:

]]> http://www.bydust.com/extended-javascript-array-class-com-bydust-array/feed/ Google Chrome: the revolutionary browser ? http://www.bydust.com/google-chrome-the-revolutionary-browser/ http://www.bydust.com/google-chrome-the-revolutionary-browser/#comments Wed, 03 Sep 2008 18:37:51 +0000 Nick http://www.bydust.com/?p=142 Yesterday Google released their brand-new browser Chrome, but is this the revolutionary browser we have all been waiting for ? I’ve tested this browser for about 10hours now, I’ll discuss a few things about it here.

Lets start with the good things, because there are quite a few. The Chrome browser is designed to give the user as much space as possible to display web content. There is no statusbar, no menubar and no titlebar. Ok, maybe this looks a bit different from what we’re all used to, but in my opinion its a pretty good improvement. For us who use the statusbar ( including me ), don’t panic. Whenever you hover over a link, a small statusbar pops up at the bottom of the browserscreen. This goes for some other actions too, so its not that different from your average browser.

The Chrome layout is fresh, simple and it makes the browser easy to use. There isn’t a flood of information available at first sight, we just focus on the webpage here. History, downloads and favorites are only one click away, there is a possibility to display a favorites-bar too.  The options-window is pretty small, it only contains what we really need. Take a look at picture 3 for the layout and favorites.

Its not the lightest browser however, when we look at the stats Google Chrome created for us ( and we can see those in picture 2 ), we see that Opera still has the crown there. Chrome has its own task manager, and statistics page for each tab. It also displays other browsers, if they are running on the host computer. To clearify the statistics on picture 2, I opened the bydust.com mainpage in 5 different browsers, just to see the differences between browsers there.

Pages load faster too, the Google guys didn’t lie about that. Whenever you open a large page, you get the idea that its loaded faster than on whatever browser you’ve used before. Same goes for executing javascript, thats one point more for Google Chrome.

On Chrome’s default start page you can see your most visited websites, including thumbnails. Pretty nice Google, but it would be nicer if we could set our own websites on the quickdial function. Lets hope this will be one of the first plugins released for Google Chrome.

According to Google Chrome shouldn’t freeze or lock up whenever something bad happens in one of its tabs, the problem should be kept in that particular tab. Well, thats a pretty nice idea and it works most of the time, but I’ve had a few freezes already. Mostly its nothing, I close a tab or make a request and the browser freezes for a second, but right before I started writing this review I had to kill the process because it was taking all available CPU recources. I was browsing for an image file, maybe it had a little problem with explorer - I don’t know.

Another “bad” thing about Chrome are the resizable textarea’s. Thats pretty usefull indeed, but whatever you type in those things isn’t shown as it should be. Sometimes parts of words are dissapearing, or a whole sentence vanishes. Its still there, we just don’t see it.

Ok, this must be the longest blogpost ever (from me, that is). Hope this was interesting for you :)

 

Small edit: after reading Robert Accettura’s blogposts about Google Chrome I thought you guys might find this interesting.
Here are his initial thoughts on Chrome, and the easter egg he discovered.

]]> http://www.bydust.com/google-chrome-the-revolutionary-browser/feed/ Top 49 of best free Wordpress Themes and Templates http://www.bydust.com/top-49-of-best-free-wordpress-themes-and-templates/ http://www.bydust.com/top-49-of-best-free-wordpress-themes-and-templates/#comments Sat, 16 Aug 2008 15:26:19 +0000 Nick http://www.bydust.com/?p=111 Lots of people are looking for some good and colorfull Wordpress themes for their blog, and even more people have alot of trouble finding the one they need. Thats why I’ve set up my top 49 of free Wordpress themes for you to download.

You might want to check out my Fhi-zin theme, its a flashy AJAX theme which is perfect for a portfolio or photography website.

Enough said, start looking!

]]> http://www.bydust.com/top-49-of-best-free-wordpress-themes-and-templates/feed/ Firebug, web development evolved http://www.bydust.com/firebug-web-development-evolved/ http://www.bydust.com/firebug-web-development-evolved/#comments Sat, 16 Aug 2008 13:56:19 +0000 Nick http://www.bydust.com/?p=101 Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

This is a must-have tool for any developer who’s frequently coding in javascript, CSS and HTML. The Firebug webpage offers you alot of info and help on almost anything you need.

If you’re interested in this, you might want to read my post about another Firefox add-on, the Webdeveloper toolbar.

]]> http://www.bydust.com/firebug-web-development-evolved/feed/ Videobased promogame, “De schat van Napoleon” http://www.bydust.com/videobased-promogame-napoleons-treasure-de-schat-van-napoleon/ http://www.bydust.com/videobased-promogame-napoleons-treasure-de-schat-van-napoleon/#comments Thu, 17 Jul 2008 16:18:15 +0000 Nick http://www.bydust.com/?p=138 This videobased game was made to promote Fort Napoleon, an old fortress in the dunes of Ostend, Belgium. With this game we aim for families with little children, sending them a message that there is more to see here in Ostend, and they should visit this ancient fortress.

The story of the game is pretty simple. The visitor is waiting in the dunes, where he should meet a friend. Offcourse the friend never shows up, but he sends the user a textmessage saying he’s trapped inside the fortress, and the user should get him out.
Once the user gets close to the fortress he can choose to view the historical information given about the places he passes through, or he can just run along and play the game. When he meets up with his friend inside the fort, a quest for Napoleons treasure begins.

Ok, now you have some general information, go play the game !

]]> http://www.bydust.com/videobased-promogame-napoleons-treasure-de-schat-van-napoleon/feed/