Better late than never... As I promised earlier, I uploaded the complete Flash and ActionScript source for Venetianization. It is, potentially, a framework for simple yet very powerful and accurate music visualization movies. Effects can be programmed for a set of elements and issued at nearly exact points in time. The complete source (Flash CS3, ActionScript 3) can be downloaded here: venetianization.zip
A few word about the inner workings of this: As you saw in my demo project, you work on an 2D array of circles. You basically animate these circles through 3 layers of definitions:
- Selections - which of the circles to animate
- Actions - what to do with them
- Sequence - when to issue them
Read complete post »
I completed my first real Flash project last week. It's an animation for a musical piece and it's called Venetianization (long load times, be patient). One of the goals of this project was of course to learn Flash, which however I still don't know how to use. Instead I learned ActionScript 3. So, there is not a single element on the stage; everything is scripted. And to my own surprise, I quite like ActionScript.
ActionScript 3 is the embedded scripting language of Flash 9 and a complete rewrite of its previous versions. I only had a short look into ActionScript 2 and did some simple stuff with ActionScript 1 at work aeons ago, so I can't tell you exactly what changed. But I can tell you that ActionScript 3 is really clean and thoughtfully designed. It takes the very flexible nature of ECMAScript (Javascript) but adds lots of instruments to organize and structure your code more strictly. You are not forced to use those, but you'll help yourself greatly if you do so.
Of course there are also some (many) things that don't work as good as they are supposed to. Most of them, I believe, are to blame on Flash itself, rather than ActionScript.
Read complete post »
As Tag Clouds become more and more common in blogging systems, one wonders why this intuitive approach hasn't been used for other media types like images or videos (or video previews).
The idea to scale elements in their relevance of importance is not new, however it wasn't possible to do this with images in websites so far. HTML and CSS offer no direct mechanism to position images of different sizes in a pleasing way.
To solve this problem, I developed a simple PHP script that calculates sizes of DIVs based on their importance and arranges them in a fixed-width grid, while closely maintaining their order. The grid is pre-generated by PHP with a width of 768px in order to fit on small screens, but scales with the help of JavaScript to fit in any browser window.
Here's a demo of how this actually looks in action: Grid-Solver Demo
There are also some real-life examples (both NSFW!) of this technique at pr0gramm.com and pornsnotdead.com.
Read complete post »
A newly launched website, with which I'm in no way affiliated with (it wouldn't correspond to the laws in Germany, *cough*), has an interesting approach to "create" content. Users constantly deliver new images and web links that are always up to date and show what's hot in the web at the very moment - probably faster than any other fun site, forum or blog.
The website I'm talking about is Pr0gramm.com (probably NSFW at any time of the day!). It's actually not only a website, but also an IRC-bot, that idles in different channels on the chat network Quakenet. This bot catches all URLs written in these chat channels. If an image URL is posted, the image is downloaded by the bot and displayed with a thumbnail on the website in a matter seconds.
There's no extra work for anyone - the website constantly gathers new content and the chatters benefit by having an archive of everything posted in their channels for free. I won't say it's Web 3.0, but as users don't generate content knowingly, I guess it's not exactly Web 2.0 either.
Pr0gramm.com also has another cool feature, which probably has come to your attention already: Image thumbnails are generated in different sizes, corresponding to their importance (the rating), and are then sorted into a big grid. There's some PHP and Javascript going on, to calculate size and position of these images. For matters I won't discuss here, *cough*, I'm quite familiar with the inner workings of all this. So I'll write another article about this technology as soon as I find some more time.
I recently finished work on tinyprice.de, an online community for exchanging coupon codes. The programming part was not a problem at all - just simple database I/O etc. - the layout however was quite a challenge.
Of course, the only browser making problems was Microsofts IE6. It was quite a struggle, but in the end I managed to work around every bug, without using any dirty hacks.
One particular problem I encountered, was a textarea for user comments, that had a width: 100% style. In IE6 it always spanned over the whole page, not only over the parent element. The solution I found after a lot of research, was quite simple: just wrap the textarea in a fieldset AND a div element, and everything works fine again:
<fieldset>
<div>
<textarea style="width: 100%;" name="content"></textarea>
</div>
</fieldset>
Not exactly the kind of blog entry I had in mind when creating this site, but anyway...
I didn't really like any of the skins currently available on VLCs homepage. The miniMatrix skin looked very functional, but sadly also quite ugly - so I decided to make a skin with my own graphics based on this one.
Download Whiteout VLC skin ~ 250kb
There is also a .psd template for the buttons in the .vlt file, in case you care.
Escaping of SQL parameters in PHP is an needlessly tedious and error-prone process. Calling the
right
escaping
function
for every parameter that might be dangerous is a difficult task in a big project. This is just dangerous and calls for SQL-Injection-Attacks.
It's obvious we need a uniform query function that automatically does the escaping for us. Perl-style parameter binding seems to be just the right choice. You can write your query, insert placeholders in the form of :n and pass the parameters to our function. The function automatically detects the datatype of the parameter for us and escapes it if needed.
query(
'SELECT posts
FROM blog
WHERE
status = :2
AND created = :1',
POST_STATUS_ACTIVE,
'2007-08-02'
);
Read complete post »
Ever tried to display syntax highlighted program code with PHP? There are some solutions, which are either totally overblown, produce horrible markup or need an external program.
I obviously didn't like any of these, so I wrote my own syntax highlighting function for PHP. This function works great for a whole number of C-Style languages, but can also be used for SQL and many others. Read on for some examples and the highlighting code itself.
Read complete post »
