thefoundation

iTunes Library Management

2009-10-20T22:41:22Z

iTunes does a great job in playing music. Once your library is set up iTunes works like charm, at least on a mac. But when you want to keep a custom folder structure or manage unsorted or badly tagged mp3 files iTunes really sucks.

There is a whole bunch of mp3 files with really bad ID3 tags in my music folder (which by the way is from a time when Winamp was almost the only way to playback mp3 files). Then some CDs were ripped without connection to the CDDB, thus have only the artist and album field tagged. Furthermore the aforementioned Winamp does a great job displaying files which do not contain any ID3 data. Which of course results in files without any data in iTunes – especially if you simply drop them into iTunes without switching off library management! Bad idea.

Since quite a while now I am working on cleaning up my iTunes library. I am following a strategy of small steps. Every time I stumble upon a badly or incompletely tagged file I take my time to correct and complete all the data.

On my way to the pedanticly uncluttered library I came across some helpers which saved me a lot of time – perhaps you already know them, they were new to me!

TriTag

TriTag converts filenames to ID-Tags and vice versa. You can define a pattern which then will be translated into ID3 tags. Before you apply your pattern you will get a preview, even a Pattern builder is included (though you won't need it)! This tool is so damn helpful, I can hardly imagine how I managed managing my music all these years without having a tool like this at hand.

Get the tool at the developers site:
http://www.feedface.com/software/tritag.html

MP3 Scan+Repair

Some of my mp3 files were rejected by iTunes, no matter wether I tried importing them via file menu or just dropped them into my library. Re-encoding of mp3 files is no solution, since you're loosing sound quality. Finder and VLC played the affected files just fine, but my Console caught an error thrown by VLC during playback of the bad files: org.videolan.vlc: [mp3 @ 0x8b7a10]Header missing
The fact that obviously my files were missing some important information, suggested to alter my search pattern from blaming iTunes for rejecting my files to how to repair mp3 files.
This finally led me to MP3 Scan+Repair (previously named MP3 Validator) which solved the problem faster than I could imagine.

Get MP3 Scan+Repair at the developer's site:
http://triq.net/mac/mp3-validator-mac-os-x

Get Lyrical

Okay, this last one is not really needed, but it does a great job completing your meta information! Get Lyrical automatically fetches lyrics from http://lyrics.wikia.com/ and saves them in the lyrics field of iTunes. This is especially nice if you own an iPhone which displays the lyrics on your standby screen during playback!

Get Lyrical is available at:
http://shullian.com/get_lyrical.php

You can download the three tools for free. Please consider to make a donation to the developers. In particular as these tools might save you quite a lot of time!

Avast! Everybody talk pirate now!

2009-09-29T22:47:41Z

Having dangerous incidents, the International Talk Like A Pirate Day, political parties and some web technology piracy is pretty topical nowadays. After all facebook is on its journey to piracy, too.

Likely, you are aware of it already, but for me it was big news: our number one social network facebook talks pirate! Once you are logged in (this one is essential) to facebook you can switch the language at the bottom left of each site (scroll down). There is a new translation in beta mode now: Pirate, arrrrr! Discover ya new facebook, me hearties!

If you encounter problems switching back to your native tongue, visiting http://www.facebook.com/editaccount.php?language might help. Choose your language from the drop-down menu, after a page reload everything should be back to normal again!

Die Klimaschützer

2009-07-06T17:28:16Z

Start using green energy – install the Carbon Clock on your Facebook-Profile or homepage!

Finally the Carbon Clock is online! The Layout was created by widjet, my task was the Flash and programming stuff. It is my first Facebook-Application! After some struggle with the API the application works fine – needless to say, I am a bit proud!
Depending on the installs of this application, the Carbon Clock shows how many carbon dioxide is prevented from emitting by users of green energy.

Mach mit! Werde Klimaschützer!

Click the Wer macht mit?-Button to install the widget on your homepage or go to the Facebook-Application and install Die Klimaschützer to your profile!

Since I felt lost sometimes during the development, I soon will write down my experiences and techniques in a short article.

How to bring AS3 Tweens to an end

2009-03-24T19:28:52Z

Have you ever assigned a tween to a local variable? Have you ever detected non-determining tweens, tweens which do not start at all? Blame ActionScript 3.0's ruthless garbage collector!

Back then in the old days of ActionScript 2.0 scripts like the following were just as easy as useful to program sequences of animations (e. g. assembling animations for site sections):


function transitionToolTip():void {
	var toolTipAlpha:Tween = new Tween( toolTip, "alpha", Regular.easeOut, 0, 1, .75, true );
	toolTipAlpha.addEventListener( TweenEvent.MOTION_FINISHED, handleToolTipTransition );
}
function handleToolTipTransition( e:TweenEvent ):void { … }

Just to make things clear: The ActionScript 3.0 garbage collector does a good job in deleting these local variables. Obviously the ActionScript 2.0 garbage collector should have done this way, too.

In most cases one does not want to stop or modify tweens after firing them, thus one won't need a reference to the exact tween ever again. The next function would be triggered after the tween has finished. Great!
But, nowadays things are different. ActionScript 3.0's garbage collector seriously and unrelentingly works on what it is supposed to work: deleting everything with a lack of relation. In the sample case, shown above, this clearly means that the variable toolTipAlpha, declared with local scope of function transitionToolTip will be deleted – taking along our tween if the garbage collection cycle is awkward. In consequence our tween will not play to its end.

One solution would be the declaration of a class level or global variable to store the reference to the tween. This would look something like this:


var toolTipAlpha:Tween;

function transitionToolTip():void {
	toolTipAlpha = new Tween( toolTip, "alpha", Regular.easeOut, 0, 1, .75, true );
	toolTipAlpha.addEventListener( TweenEvent.MOTION_FINISHED, handleToolTipTransition );
}
function handleToolTipTransition( e:TweenEvent ):void { … }

All the samples are in short form and not taken from real-life ActionScript 3.0 projects thus may not work properly. They are inserted for illustration purposes to show up possible problematics.

A far more elaborated description of the coexistence of tweens, variables and the garbage collector can be found on Scott Morgan's blog in the article AS3 Garbage Collection, the reason your tweens are ending early.

via Scott Morgan's blog – http://www.scottgmorgan.com/

Sorry! Our Ping- and Trackback is not yet working.

Stuck for gift ideas?

2008-12-17T00:35:30Z

Santa will help you out! Get some great last minute tipps from Santa himself directly on your own homepage!

Santa's Last Minute Tipps

Get Santa on your homepage!

This widget was programmed using the Clearspring In-Widget-API. The layout of Santa's MySpace-Site and the widget was created by widjet – a cologne based agency, focused on widget-development.
My part was the implementation of the widget in Adobe Flash. After being doomed with the Clearspring-API I had fun animating Santa and his Tipps!

You can really look forward to see Santa's next Tipps – and be sure not to miss a single one!

Production days: Spardabank Frankfurt

2008-11-04T21:20:23Z

Again we are having some working days in Frankfurt to finally set up the illumination of the Spardabank-Hessen e.G. headquarters' facade.

Matthias, David and me are sharing a room in the luxury Mövenpick Hotel next to the Frankfurt Trade Fair and – determining this choice – vis-à-vis with the Spardabank-Hessen e.G.'s headquatres!

Elevator crammed with equipment

After arriving on last sunday afternoon, we built up our tentative office in the top floors room 737. All together we have five computers, including two notebooks and one PC serving as main render client. This way we are able to keep on working, while our creations get rendered. Our daily routine includes working on AfterEffects-compositions till afternoon, en passant rendering new and final compositions as well as test screens. During todays blue hour we took some footage of the building gaining the hindmost, steelblue sunbeams of this wonderful autumn day.

David, working

Night is the time to check out how our work takes effect on the facade. From the roof garden of our hotel, we document which parts of our animation need to be altered and which geometric shapes are recognizable or not. Nearly every sequence of moving lines, dots, shapes and colors has to be altered again and again to get this last little dodge, which makes most of the capabilities of the LED-lightened facade. In the end there should exist a looped movie, shown on the facade from dawn till midnight.

We have two days left to get some new themes running on the Spardabank's facade. I am looking forward to show you some video footage of the facade, up to now this footage is still waiting to be edited. Maybe this article will see an update with video soon!

Production Days: Spardabank Frankfurt

By the way we are following the first predictions of the Potus elections, presented by ARD on the giant, muted flatscreen dangling off the wall right beside my workstation! Exciting!

Test your color IQ

2008-11-03T02:07:47Z

Have you ever tested your perceptivity of color? An interesting test can be passed at the xrite color IQ test.

Somehow I was fascinated. The test was fun to do and cost me several minutes – dragging and tossing each color field from left to right and vice versa. I ended up, getting this screen:

Needless to say, I am a bit proud. Nonetheless, I see the problems with this method of testing ones color IQ.
This little test maybe a fun game to train your perception of colors. But it is unsuitable to compare the results with other peoples ability to sort little motley squares – unless you perform the test at the identical display! A display calibrated with high contrast should make it easier to score well in this test.

Furthermore, this test does not tell anything about a persons ability to chose suitable, harmonic colors or to deal with color composition, which would be the real intelligence of colors.

Despite all these aspects, the interaction with this small application was kind of enlightening for me: As a designer (or artist) I should be able to handle the technical part of colors. I should be able to sort colors in matters of hue, saturation, brightness. Otherwise I will not be able to work reliable and reasonable with this important segment of design!

Persons working in the area of screen and/or print media should know the basics about color models like the RGB- or CMYK color models.

via Michael Preidel's esse est percipi – http://qxm.de/

Sorry! Our Ping- and Trackback is not yet working.

AERenderer and its flaws

2008-11-01T19:24:45Z

The render system coming with After Effects provides a sophisticated set of configuration dialogs. Be careful using these options!

Working for the illuminated facade of the Spardabank Hessen e.G. headquarter in Frankfurt we have several giant (up to about 7000 pixels wide) After Effects compositions. Some of these setups take hours and hours in the process of rendering.
Due to different needs, we do not always need the full resolution. Fortunately the AERenderer has this small dialog to reduce the actual size a composition is rendered at: Render every [n]th pixel. Unfortunately this will not work as expected in every composition!

One would presume, that the rendering of just every umpteenth pixel works like a pre-rendering-resizing and besides speeds up the whole process because the pixels in between are not computed.
Not knowing exactly what causes errors at this step, I presume that there is a incompatibility of some plug-ins with this functionality of the renderer. Which is especially irksome, since some of the most performance-consuming effects will cause errors in the final display, e. g. the glow effect.

The last composition I had to render wanted to have about 50 hours of full power from my MacBook Pro (2.33 gigahertz, 2 gigabyte RAM) in full resolution. The rendering of every twentieth pixel resulted in a way darker image, than the full resolution rendering. Large parts of the composition are lightened by the mentioned glow effect. In the end I decided to render full resolution in low quality. This took about twenty hours.

Maybe Adobes hands are tied since some plug-ins are programmed by third parties, but at least the default effects supplied by Adobe should work properly. Perhaps this option is not used frequently, so that there is low interest in solving this problem. Perhaps just few people know about this possibility. Anyhow Adobe should improve the rendering process as soon as possible.

SSH Tunnel Manager icon

2008-10-20T19:06:16Z

If you ever worked in a non-optimal development environment, which required the setup of several SSH-tunnels, you probably fell back on using the SSH Tunnel Manager, and very likely you got irritated by the pinkish and stylized sketch of a tunnel and flower which appeared in your Dock.

Sketch of the icon

Opening Photoshop, dusting my Wacom-Tablett were the first things I did, after extensively working on a project, assisted by this tiny and incredibly helpful application called SSH Tunnel Manager. This application really sped things up and I really appreciate Yann Bizeuls work although I am getting to love the bash more and more these days! To make peace between my Dock and the SSH Tunnel Manager I sketched a small image of a mole. This image is only restricted suitable as an application icon – but far more pleasant to the eye, than this tunnel. Just my 2¢.
Perhaps I will find time to improve this icon a bit. Nonetheless, from a realistic point of view I can promise: it will never fit the correct guidelines and detailed style guides, Apple released! Sorry for that.

The final icon

Changing the icon

Reclaim your Dock!

This is easy. Select the mole.icns from the attached ZIP-file (see below) and hit ⌘ – c. Now open the Get Info (⌘ &ndash i) inspector for SSH Tunnel Manager from your Finder's Application window. Click on the small icon in the upper left (there should be a blue glow around) and hit ⌘ – v. The old icon should be replaced by the mole.

This is for you, hard-boiled GUI fetishists

Any changes will be at your own risk. The author of this text will not be liable for any damages, direct or consequential.

If the Dock icon is not enough for you and the icon in the application interface also should be replaced by the curious blind mole, there is a way. Promise to be careful. Then navigate to your application folder in Finder (or wherever you installed the SSH Tunnel Manager) and right-click Show package content. Navigate through the hierarchy Contents → Resources and replace the two files stm.icns and stm.tif with the two in the attached ZIP-file (see below). Now (re-)start your SSH Tunnel Manager – you should be done!

Download the icon

http://www.thefoundation.de/files/daniel/images/Icon_SSH-Tunnel-Manager.zip

SSH Tunnel Manager Icon von Daniel J. Becker steht unter einer Creative Commons Namensnennung-Keine kommerzielle Nutzung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz.
Beruht auf einem Inhalt unter www.thefoundation.de.

Operation e-mail

2008-10-20T14:51:04Z

E-mail communication is great …if everybody plays by the rules! A synopsis why encrypting is important and html e-mails are evil.

Why the e-mail is dying

The communication medium e-mail's advantages is the fast and easy delivery – nowadays actual worldwide. Also as a mode of group communication e-mail has great potential which in practice is rarely exploited. Though modern spam filters and mail applications made progress in handling our mail routines undesired mails still bother. In this case I do not want to constrain undesired to spam mails, also newsletters or mailing list mails may be of low interest in our daily routines.

Ways to improve our e-mail workflows

Todays mail applications (online as well as offline) have powerful possibilities to filter and sort out incoming mail. This way you can create various inboxes to sort out priorities – at least for the moment. Furthermore you can organize your newsletters in subfolders. As for me, I am subscribed to several interesting newsletters but, honestly I read them sporadically and stacked. The smart filter capabilities are also useful to sort out e-mails of certain topics in mailing lists.

IMAP is a nice way to keep your e-mails available everywhere. Maybe you have the possibility to redirect all your mails to one central mail account. This way you have all your e-mails gathered at one place, automatically filtered by recipient and moved into certain folders you have the possibility to keep different inboxes for different e-mail accounts. Thunderbird and Apple Mail as well as the web-based e-mail application Horde additionally provide the feature of identity management!

But, pst, do not tell anyone so nobody will play fast and loose with it!

Sounds a bit like conspiracy and agents! This way you are able to send e-mails from one account but use different e-mail addresses. Every mail is stored in one IMAP sent folder – no recipient will ever notice you using another e-mail address!

Fine, but where can I configure these identities?

Just a short overview on how to configure these so-called identities in: Thunderbird, Apple Mail, Horde.

Thunderbird: In the menu choose Tools → Account Settings → [account name] → Manage Identities → Add. The rest should be pretty self explanatory.
Apple Mail: Again use the main menu to choose Preferences → Accounts → [account name] → Account Information → e-mail address and insert here a comma separated list of the different e-mail addresses you are going to use.
Horde: After logging in into your web front-end of Horde mail select Options → Personal Information → Edit your Identities. Again, the rest should be self explanatory.

Who is interested in your e-mail?

e-mails provide a lot of possibilities to address e-mails to recipients. There is the to field, the carbon copy- and the blind carbon copy field. Make use of them! It is very convenient, knowing to be directly addressed by an e-mail or just be informed what is going on – be it the scheming way or be it the normal carbon copy way!

HTML e-mails are evil

Some people apparently have giant displays with outrageous low resolution, or they are using magnifying glasses sitting in front of their screens. Otherwise I cannot tell why this Comic Sans comes so damn small and blurry onto my display! There are other useful purposes for HTML in e-mails! Background images and tables – oh, how we all love them.
More than ever I can hardly see any need for markup in e-mails. Like mentioned before, e-mail should stay a fast medium of getting message from A to B, HTML just bloats the filesize thus slows down the transfer. Also there may be problems in quoting HTML mails. I guess colorful text decreases readability in almost 100 % of the cases and markup in general potentially breaks the correct display when viewed with another e-mail client. Attached e-mails are shown inline at the end of the e-mail in most of today's e-mail clients, which besides is convenient concerning scaled display on smaller or larger screens respectively.

No, Apple Mail stationaries did not make that any better!

But there is another reason: many companies try to pep up their services and products by sending newsletters and spam mails containing HTML which – at least for me – resulted in a subtle presumption to have one or another kind of unwanted or not-so important e-mail when receiving HTML e-mails. Of course images are pretty useful for junk mail because possible text cannot be analyzed by any filter. You get the point!

Privacy

There are several reasons why you definetely should encrypt your e-mails. Although nowadays it seems, that personal communication is kinda public interest – everything is communicated using ubiquituous online interfaces, everything is twittered, everybody shows off in facebook or some of its derivations. As if this would have any public benefit! But not enough, the web features more possibilities to promote yourself. Just like the network platforms the blogosphere is stage of vanitas, …uhm, what did I say? Vanity? Guess, both! And despite the many interesting blogs about politics, web development and gadgets the majority of blogs is attended as personal journal – which is a periphrasis for diary.

I think Andy Warhol got it wrong: in the future, so many people are going to become famous that one day everybody will end up being anonymous for 15 minutes.

Banksy – graffiti artist
Bristol, UK

Why has nobody anything to conceal from anybody? I do not want everybody to know everything about me, neither do I want to know most things about people surrounding me. Alright, it is a bit different with my friends. But what about neighbors, fellow students and co-workers? It is really of no interest, which movie I am watching right now, who I am seeing, what I am writing, where I am surfing, which drink I am having at the very moment! In particular, of no interest for my boss or perhaps any kind of administrative authority.
That is one point: politics and administrative bodies. Nowadays we have the special situation of the war on terror. Gosh, I just googled terrorism in order to get this Wikipedia link! Hopefully, nobody will recognize and suspect me to have any sympathy for things like that!

[…] but Mama said it was just a little white lie, it wasn't hurting nobody.

Forrest Gump

Although you got nothing to conceal, you may not want people watching you watching TV or doing this and that now and then. Or why do you ever draw your curtains? Sometimes the idea creeps up to me, that people just do not understand what they are telling everybody on webpages and what they are chatting to individuals on any chatting application! Most people do not seem to have the faintest idea that the internet is public indeed. Moreover nobody knows if we are attending the dawning of a new (perhaps even dark) age during these days of economic crisis and global terrorism. Thus nobody has any clue what will be appropriate in the future and you know anything you say can and will be used against you!

Signing and encrypting

The free encrypting software GNU Privacy Guard (below GnuPG) uses asymmetric encryption which for you results in having two different keys (public and private key) needed to encrypt something. With GnuPG you are able to encrypt files as well as texts. Let us presume we only want to encrypt our e-mail correspondence for this time. Along with your keys you will need the recipients public key for every instance of encrypting. One will need your public key as well, if he or she wants to encrypt something for you! While your public key consequently should be accessible for potential interlocutor of yours, your private key has to be kept as save as possible and only accessible for you, the owner of this key!
Supplemental to the encryption you can sign your e-mails with GnuPG, i. e. everybody may verify if a particular e-mail has been sent from you. If you do not have a receiver's public key, this person would at least be able to check if your e-mail is authentic – if he or she knows what to do with GnuPG signatures!

Pros and cons

Yes, encrypting is great and outclassing. But it also has a dark side. Let me give you some arguments about the merits and demerits:

Advantages

Verification of the e-mails sender
Verification if the e-mail has been altered on the way through the web
Even if your e-mail account gets hacked – your correspondence is save
Nowadays ease of use with various mail clients and plug-ins

Disadvantages

Without a running GnuPG system you are not able to read your mail
Do not loose your private key or you will not be able to read your mails ever again
Your e-mail client is not able to search for specific text in your e-mail archive (however you are still able to search for recipients and senders)
You will not be able to read your e-mails online in your webmail's interface

There is no standard routine how to exchange the public keys, thus to verify the public keys you receive. Best practice would be a personal exchange. One concept to ensure public keys are valid is the Web of trust, which allows you to sign public keys.

It is up to you to appraise these arguments. Since not everybody is using GnuPG you will not be able to send all your messages encrypted anyways. Personally, I try to use it as often as possible – especially for personal data (accounts or access data).

GPG-encrypted mail with ease – Installing GnuPG

Since there is a bunch of very good and detailed tutorials I leave it at redirecting you to some of them:

http://macgpg.sourceforge.net/index.html: Home of GnuPG for Mac OS X
http://www.sente.ch/software/GPGMail/English.lproj/GPGMail.html: GnuPG plug-in for Apple Mail
http://fiatlux.zeitform.info/en/instructions/pgp_macosx.html: Various detailed information on GnuPG usage on Mac OS X
http://enigmail.mozdev.org/home/index.php: Website for the Thunderbird plug-in Enigmail.
http://www.macnotes.de/2007/01/23/tutorial-sicherer-e-mailverkehr-mit-gnupg-mail/: Detailed german tutorial with a lot of screenshots.
http://entouragegpg.sourceforge.net/: Microsoft Entourage plug-in.

These steps are definitely worth the effort, not just, that it is safer to communicate in times of dragnet investigation, perhaps we are able to get rid of these fatuous footer, which tells hundred things to do, if you are accidently chosen as recipient. At least in germany this form of contract is not valid at all. Rescue e-mail&nbps;– keep this medium of mass communication fast, simple and safe.

Integrating a plug-in into JW-Player

2008-09-20T02:06:41Z

If you spent time watching web videos in the popular FLV format you might have stumbled upon the Jeroen Wijering player. Version 4.1 features a plug-in interface – which I found pretty much undocumented.

In the following article I will try to give you a short insight on how to integrate plug-ins into the free and open-source Flash video player by Jeroen Wijering. All techniques described in this article worked with version 4.1.

JW-Player plug-ins

There are some restrictions for commercial use of the player. You have to apply for a commercial license at http://www.jeroenwijering.com/?page=order

What is JW-Player?

In my eyes this player is a masterpiece in structured programming regarding the MVC architectural pattern. The source is as modular as possible so it can easily modified to fit new requirements. As an example it can be adapted to display videos from other sources (e. g. YouTube) by adding a new class as a submodel. The player allows skinning and provides a wide range of settings as well as an useful JavaScript interface. While the majority of possibilities is documented in the Wiki I could not find any helpful information about the plug-ins. Maybe due a lack of time, perhaps because this possibility could be used to emulate the functionality of longtail video – a side project of Jeroen Wijering.
But this is just speculation so let us start over! This article will not give you turnkey sources nor will it be a full tutorial on how this or that could be realized with the JW-Player. I presume that you have already been dealing with Adobe Flash in a basic matter, so you can use my depictions as foundation for your own projects.

How to integrate plug-ins

You will need to have the kroeger 05/63 pixel font installed / activated to not break the default player skin layout!

First you should get the source files and create an HTML file which loads the JW-Player in order to set up a test-bench. In the next step we will create a Adobe Flash file to house our plug-in functionality. First and foremost the size and frame rate does not matter, however I suggest you to choose a size around 300x200 pixels – which should be ~~both, somewhat around the default as well as~~ slightly smaller than the default size and the smallest display, the video player should be used with. This way you can layout your plug-in and perhaps add a script for scalable display later. Wether you will use scripts or not, you need to define a function called initialize. Otherwise the player will throw an error!
The plug-in swf should be published somewhere relative to your test HTML file at best similar to later production environments. In the following code snippets I will assume, that the plug-in is placed in a subdirectory media/flash/plugins/ and is called plug-in.swf.
We will now pass some values to the JW-Player swf making use of the so-called flashvars. (I am sorry, I really tried to find some information about flashvars on the official sites of Adobe. I could not find anything helpful even in the livedocs. Except some outdated samples for Flash 6 and the use with ActionScript 2.0 which in this case are best of a basic use to understand what we are talking about. Perhaps someone can help out here? As there are several common ways to implement Adobe Flash in todays webpages I will attach a short paragraph containing samples of flashvar use at the end of this article.) Let us give the JW-Player a hint where to look for the plug-in. Add the flashvar plugin with the relative path to our plug-in as value, in our case media/flash/plugins/plug-in.swf. Your HTML code should look somewhat like this:

<object type="application/x-shockwave-flash"
	  data="player.swf"
	  width="300px"
	  height="200px" >
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

Be sure to use the relative path originated at the HTML document – not the swf!

Yes, it is as easy as that! Now your plug-in should be loaded automatically. But wait! Offline everything works fine, but the Flash player is not able to find the plug-in on the server. After some investigation, we know why there are troubles: We have to navigate through the ActionScript package of the JW-Player to the main view class (com → jeroenwijering → player → View.as). Just at the end of the class header there is a private string directory with an URL assigned as value: http://plugins.longtailvideo.com/. Perhaps this is a hint at how the plug-in interface usually gains utilization. If you set the directory value to be an empty string (like this private var directory:String = "";) the whole thing should work online. (Better way to solve this problem would be, take the deep dive into this piece of code and understand what really is happening here before removing some hardcoded value.)
From now on the rest is just some ActionScript wherewith we can do some magic! Since the code of the video player is well-structured and nearly every event you could imagine is dispatched all you have to do is: listen to the certain part (Model, View, Controller) and invoke some action!

The fun part – ActionScript!

Here we go: Include the View-class and declare a variable to hold the reference to the players View-instance:

	// includes
import com.jeroenwijering.player.View;

	// variables
	// Reference to View-instance of video player
var v_player:View;

At this point, lazy guys, there is no short version, no init, no programmers stenography!

And again, Jeroen Wijering made life with plug-ins easy. If you set up a function called initialize it will be called as soon as your plug-in is properly loaded by the player:

…
	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	trace( "do something useful" );
}

The simple call to do something does not help much. I will give you an example of what could come next. For example it would be handy if the plug-in content would be centered if the player is resized! Let us assume we have a movie clip containing a graphic (mc_content, movie clip registration point should be on the top left) which should be horizontally centered and positioned somewhere above the vertical center (since there is this nice button to start the playback). But this graphic should disappear on playback start. We have to start with adding some lines to our plug-ins code header, furthermore we will instantiate a transition manager to handle a nice fade out of our plug-in content:

	// imports
	// video player stuff






import com.jeroenwijering.player.View;
import com.jeroenwijering.events.ModelEvent;
import com.jeroenwijering.events.ModelStates;
import com.jeroenwijering.events.ControllerEvent;

	// eye candy
import fl.transitions.Fade;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.Transition;
import fl.transitions.TransitionManager;

	// variables
	// Reference to View-instance of video player
var v_player:View;

	// Transition manager
var trnsmngr_content:TransitionManager = new TransitionManager( mc_content );

	// functions
	// Configure standard transitions used to fade plugin content in and out
var obj_contentFadeOut:Object = new Object();
obj_contentFadeOut.type = Fade;
obj_contentFadeOut.direction = Transition.OUT;
obj_contentFadeOut.duration = .7;
obj_contentFadeOut.easing = Regular.easeOut;

var obj_contentFadeIn:Object = new Object();
obj_contentFadeIn.type = Fade;
obj_contentFadeIn.direction = Transition.IN;
obj_contentFadeIn.duration = .7;
obj_contentFadeIn.easing = Regular.easeOut;
…

Now we have to set up some functions to handle the positioning of the content elements and kick-off the vanishing of this content element on playback.

…
	// Invoked on resize
function onPlayerResize( par_arg ) {
	alignContent( Number( par_arg.data.width ), Number( par_arg.data.height ) );
}
	// Align content movie clip
function alignContent( par_width:Number, par_height:Number ) {
	mc_content.x = Number( par_width / 2 - mc_content.width / 2 );
	mc_content.y = Number( par_height / 2 - ( mc_content.height + 40 ) );
}

	// Invoked on status change of video player
	//	- if playback has finished: fade in plugin content
	//	- if playback is (re-)started: hide plugin content
function onPlayerStateChange( par_arg ) {
	if( par_arg.data.newstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeIn );
	}else if( par_arg.data.newstate == "PLAYING" && par_arg.data.oldstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeOut );
	}
}
…

Obviously, the next thing to care about: event listeners! The listeners are registered in our initialize function:

…
	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	v_player.addControllerListener( ControllerEvent.RESIZE, onPlayerResize );
	v_player.addModelListener( ModelEvent.STATE, onPlayerStateChange );

	alignContent( v_player.config.width, v_player.config.height );
}

Now everything should work fine. The content will be realigned if the player should ever be resized on runtime (not very likely) and faded out on playback start or in respectively on playback end. To initially align the content, there is one line added, which calls alignContent. For convenience, the whole clump of code:

	// imports
	// video player stuff
import com.jeroenwijering.player.View;
import com.jeroenwijering.events.ModelEvent;
import com.jeroenwijering.events.ModelStates;
import com.jeroenwijering.events.ControllerEvent;

	// eye candy
import fl.transitions.Fade;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.Transition;
import fl.transitions.TransitionManager;

	// variables
	// Reference to View-instance of video player
var v_player:View;

	// Transition manager
var trnsmngr_content:TransitionManager = new TransitionManager( mc_content );

	// functions
	// Configure standard transitions used to fade plugin content in and out
var obj_contentFadeOut:Object = new Object();
obj_contentFadeOut.type = Fade;
obj_contentFadeOut.direction = Transition.OUT;
obj_contentFadeOut.duration = .7;
obj_contentFadeOut.easing = Regular.easeOut;

var obj_contentFadeIn:Object = new Object();
obj_contentFadeIn.type = Fade;
obj_contentFadeIn.direction = Transition.IN;
obj_contentFadeIn.duration = .7;
obj_contentFadeIn.easing = Regular.easeOut;

	// Invoked on resize
function onPlayerResize( par_arg ) {
	alignContent( Number( par_arg.data.width ), Number( par_arg.data.height ) );
}
	// Align content movie clip
function alignContent( par_width:Number, par_height:Number ) {
	mc_content.x = Number( par_width / 2 - mc_content.width / 2 );
	mc_content.y = Number( par_height / 2 - ( mc_content.height + 40 ) );
}

	// Invoked on status change of video player
	//	- if playback has finished: fade in plugin content
	//	- if playback is (re-)started: hide plugin content
function onPlayerStateChange( par_arg ) {
	if( par_arg.data.newstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeIn );
	}else if( par_arg.data.newstate == "PLAYING" && par_arg.data.oldstate == "COMPLETED" ) {
		trnsmngr_content.startTransition( obj_contentFadeOut );
	}
}

	// Called after loading of plugin is completed
function initialize( par_playerView:View ) {
	v_player = View( par_playerView );

	v_player.addControllerListener( ControllerEvent.RESIZE, onPlayerResize );
	v_player.addModelListener( ModelEvent.STATE, onPlayerStateChange );

	alignContent( v_player.config.width, v_player.config.height );
}

There are some additional things you should know while working with this nice player and its plug-in possibilities. Let me give you some arbitrary dodges!

v_player.config.[any name]: If you pass your own flashvars to the JW-Player, you can get the value of certain variables by this path plus your variable name at the end. It would be easy to display the videos title if you pass the flashvar title. You just need a textfield and assign the value v_player.config.title.
v_player.config.volume, v_player.config.width, v_player.config.height, v_player.config.fullscreen: There is a bunch of information in the config object of the View-instance. Here you can get the current value, width and height of the player, as well the configuration wether fullscreen is allowed and implemented or not (Nevertheless you cannot alter the state of fullscreen here! See below). To get information about the current display state watch v_player.skin.stage[ "displayState" ]
If you want to know more, have a look in the Player class' (com → jeroenwijering → player → Player.as) defaults object!
v_player.sendEvent( [event], [value] ): Using the function sendEvent you can take control of various parts of the player. Set volume to 50 % by using following code: v_player.sendEvent( "VOLUME", 50 ), set player into fullscreen mode: v_player.sendEvent( "FULLSCREEN", true ) or seek to closest keyframe to second two: v_player.sendEvent( "SEEK", 2 ).
v_player.addViewListener, v_player.addModelListener, v_player.addControllerListener: Like shown in the sample, you have the possibility to add listeners to every part of the player (Model, View, Controller). For further information about the various events, have a look at the events part of the player class package (com → jeroenwijering → events → *).

In the above samples, I assume you work in the plug-in of this tutorial. Otherwise the v_player has to be replaced by your reference to the View-instance of the JW-Player!

This article is not meant as a full featured tutorial to a full working this-and-that-performing plug-in, rather an insight on the different parts of plug-in programming for JW-Player with some short examples.

I am not quite sure about the legal matters on the use of JW-Player with altered code. So please check the information on Jeroen Wijerings homepage or contact him to assure you are not cracking anything besides the legal regulations here!

Flashvars in todays webpages

As mentioned before, there are several ways of integrating Flash files into webpages. Today a lot of people use JavaScript to embed Flash movies, there is the famous swfobject as well as the Standard Adobe Flash way to use AC_FL_RunContent. One main reason to use JavaScript is the outline rectangle the InternetExplorer shows up and which forces you to click on the Flash movie once, before you can interact with the movie. Moreover there is a check if the correct version of Adobe Flash Player is installed on the client machine.
Next we have the former standard way using markup with object- and embed-tags to integrate flash. Finally there is one possibility, first shown in an A List Apart article (for more information please visit: http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml) to integrate Flash XHTML-Strict valid with markup and without the embed-tag which is in fact a relic from times with Netscape.
For each of these methods I will give you a short code snippet on how to pass Flashvars. This is known and far from being new, but get this as a compact reference for the most popular ways to integrate Flash.

Flashvars and markup methods for Flash integration

First the markup methods, in the following example the former standard way:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
		codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
		width="300px"
		height="200px" >
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="player.swf" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />

	<embed src="player.swf"
		flashvars="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm"
		quality="high"
		width="300px"
		height="200px"
		allowScriptAccess="sameDomain"
		allowFullScreen="true" 
		type="application/x-shockwave-flash"
		pluginspage="http://www.macromedia.com/go/getflashplayer" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

In this example we pass the variables plugin and title to the swf. You can append as much variables as you needed, as long as you keep the pattern: seperate the variables using the ampersand &, assign value by using the equal sign =: &[variable name]=[value].
Now for the XHTML-Strict compatible method. Analogue to the sample at the beginning of this article, passing Flashvars would look like this:

<object type="application/x-shockwave-flash"
	  data="player.swf"
	  width="300px"
	  height="200px">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />
	<param name="quality" value="high" />

	<p>Please get the Adobe Flash Player!</p>
</object>

Variable names must not contain any special characters (as usual in ActionScript), the values should be URL-encoded.

In the first example you have to declare the variables and values twice to assure, that every browser (using either the object- or the embed-tag) gets the correct values!

The JavaScript way

Since the JavaScript methods are kinda proprietary, you have to find the correct solution for every specific JavaScript Flash integration. So, the following examples feature specific code for the AS_FL_RunContent (first) and the swfobject (second) method:

<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires \"AC_RunActiveContent.js\".");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '300',
			'height', '200',
			'src', 'player',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'id', 'player',
			'name', 'player',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'player',
			'FlashVars', 'plugin=media/flash/plugins/plug-in.swf&title=A%20shortfilm'
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
			codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
			width="300"
			height="200"
			id="player"
			align="middle" >
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="allowFullScreen" value="true" />
		<param name="movie" value="player.swf" />
		<param name="flashvars" value="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm" />

		<embed src="player.swf"
			flashvars="plugins=media/flash/plugins/plug-in.swf&title=A%20shortfilm"
			quality="high"
			width="300"
			height="200"
			name="player"
			allowScriptAccess="sameDomain"
			allowFullScreen="true"
			type="application/x-shockwave-flash"
			pluginspage="http://www.macromedia.com/go/getflashplayer" />
		<param name="quality" value="high" />

		<p>Please get the Adobe Flash Player!</p>
	</object>

Be sure to pass the Flashvars in the JavaScript code, as well as in the object-tag as param-tag and in the embed-tag as attribute flashvars.
Finally, the swfobject method:

<script type="text/javascript" src="swfobject.js"></script>

<div id="playerContainer">
  This is a flash video player.
</div>

<script type="text/javascript">
   var so = new SWFObject("player.swf", "player", "300", "200", "9");
   so.addVariable("plugin", "media/flash/plugins/plug-in.swf");
   so.addVariable("title", "A shortfilm");

   so.write("playerContainer");
</script>

Sample sources

The Flash source codes are uploaded here:
ZIP file containing plugin.fla
Set up an HTML document with flashvars plugins and title:

plugins=[path to plug-in.swf without extension]&title=[video title]

Outcome should be a headline showing the video title on the JW-Player splash screen.