Wanting it all

Content stuffing a website is, and always will be very VERY boring and takes a huge amount of time. So it would be better to just let the clients do it themselves, create new pages on the website, create the layout they want for it, manipulate the navigation, add custom made modules on the pages they choose, place any content anywhere: text, image, video,… .This way the web agency can focus on designing and building websites and web applications.
And don’t forget the money aspect for the clients, the less hours they have to pay the happier they will be (not so much for the web agency of course).
‘The Ultimate CMS’ is the utopia of designers/developers/web agencies and many users would love the freedom to add/edit/remove anything when managing their website and its content, the holy grail… . Of course that can’t be achieved and you will always have limits somehow but a few CMS try to be as open and flexible as possible.

What is seen can never be unseen
It often happens the web agency does the initial content stuffing of the website or even creates the content from scratch just to get the client started. The website looks and feels good, the work is done, the client receives the login credentials for the website’s backend, maybe gets some training to use it and here we go the job for the web agency is done. Because they are proud of their work and effort they put in, the website goes in their portfolio.

After a while the client decides it is time to update his website. He adds a news item, changes an image nothing mayor. But after a while the client gets more ‘creative’ and start making new pages, new layouts etc … .
And after a year or so it happens, you (someone from the agency we’re speaking of) arrive at the office in the morning and see one of the designers crying at his desk, as a good colleague you ask what is wrong and he shows you the website he designed a year ago and the following happens: You jump back at least 3 meter trying to exorcise the devils spawn on the screen while making some holy signs and spew out some Latin phrases in the hope it goes back to 7th layer of hell where it came from and stays there, screaming out “Oh my god my eyes are burning, the agony …. make it stop!!!”

Ok I admit, that might be a little theatrical but that’s about what happens in a designers mind when seeing the result of the “creative client”  or better known as ‘a designers worst nightmare’ at work. Which basically means he’s done everything you aren’t supposed to. Hideous images, the worst color combinations ever, underline bold italic fonts all over the place to highlight basically every word on every page because everything is so damn important, text cramped in spaces so tight you can hardly make out it’s text at all (because white space is for pussies) and page layout reduced to an idea that apparently only exists in your mind.

The “Oh crap” moment
After a short time you realize that same project  is still in your portfolio on your website and all potential clients can click on it,  just to find out how horrible it looks now. If all clients get this freedom to do whatever they want in their website’s backend you won’t have a decent portfolio left and the quality of your work will disappear because the happy editing clients ruin everything and potential clients aren’t going to be convinced of your work and you as an agency/designer/developer can kiss that prospect goodbye.

What can you do
Giving too much power to the user is very very bad and in restricting the client/user in what he can do on his website is protecting him from himself. Chances are he will be complaining when trying to edit things that you just won’t allow. And as for how far these restrictions need to go there is a thin line between being to open or to closed. As a web agency you don’t want to receive a call/email from your client every time a letter on their website has to change, of course they can charge for it and they will gladly do so but an agency would rather spend their time and resources on making new projects instead of some dull content changes.

So what can you do to prevent this from happening to you (as an agency/developer/designer)?

Make changes to the CMS:

• Limit the amount of font/highlight colors to the colors of the branded website including  hyperlink colors
• Limit the amount fonts and font sizes available
• Create fixed white spaces, line heights, …
• Limit the freedom in creating new pages, create templates with fixed page layouts
• Limit more…

Different approach to your portfolio:

• Instead of using live websites to link to, alternatively you can use static images only. It’s less interactive but keeps you safe.

Not all problems will disappear this way but it could help.

Flyer / Poster for the next Storm Gaming event 22 – 24 April 2011

Over the last few years social media became a large part in our daily routines, the belief that “it’s a hype, it will blow over and in a few years no one even remembers it existed” is now totally gone and I think most people realize social media and social networks are here to stay. MySpace, Twitter, Gowalla, Foursquare, LinkedIn and Facebook, the latter obviously leading the pack followed by countless others, became much more than a website for social engagement with your friends, relatives, colleagues, people you lost contact with and found via these sites or even meet new people.

All kinds of social networks are evolving to a place (notice that I don’t say website) where people start of their social lives each day at breakfast or even before, and finish it again at night just before they go to sleep. The best example of this is Facebook. A social engagement platform where anyone who exists can view, participate and actually just exist in a digital form. Where they mention doing their normal life things, commenting on others doing their normal life things, and have micro conversations as if you just passed by each other and just had the time to say ‘Hi’. Everyone can be part of ‘The Facebook’ and I’m starting to think that those of us who are not engaged or even (still) look at social media as if it were the devil itself and believe that their lives are in danger if they should ever make a profile and put in their real name online are missing out.

As the focus of users tends to shift towards what is happening on social networks (the things that others contribute) and start from there to interact with other people, I feel that they become more and more the common reference of our social interactions. Even when we’re out on the street, people meet up, have a drink at a bar or go to a party, we tend to fall back to the social networks. People talk about what others on those networks did or didn’t do, the pictures/videos and all the other stuff that’s posted on these social networks on a regular base in their conversations. They take pictures of every moment in their lives and a few years back those pictures would sit on their own computer, maybe sent to their friends on IM services like MSN, AIM, ICQ, Google Talk, … or email. But the extent of who got to take a look at those pictures was relatively small. Now everyone can see what anyone else in his or her network (and beyond) is doing. They are up to date on the lives of others going at any given moment or where they are (and what they are doing) at any point in time e.g. Gowalla, Foursquare, Facebook Places, tweets with location details, …

With the amount of mobile devices with social network capabilities growing, becoming less expensive and more interactive, a greater percentage of users have one of them combined with more/better availability of 3G/4G and cheaper data plans users are more likely to contribute to those social networks even when on the road. Conversations at a bar or just when people hang out can and often will at some point refer to something that’s been said or done on some social network and in more than one occasion someone checks up on that on their mobile device to check on what is happening or verify what others said.
Obviously you might think that is a tech-people/ early adopter/ freak thing but this is far from the truth, everyone does it. Social media are everywhere, with countless applications on web, desktop or mobile they are so entangled in our lives that it’s about as unthinkable as living without computers, Internet or even electricity anymore and what the future will bring is as always unsure, but in the next few years Social networks will thrive and I’m very excited to see what people come up with to work with/extend or create entirely new things that are social media based in the future.

Originated as an endpoint or separate channel social networks might be becoming our Ground Zero, the starting point, the end point and maybe even the everything in between of our social lives, so integrated in our lives that maybe we couldn’t even live without them. The social networks are very much a part of our social lives, is it slave to us or are we slave to them?

Design for the new Storm-Lan Flyer. Made with Photoshop and Modo3D.

Storm is a LAN-party held in the northern part of Belgium two times a year.
Their site can be found here: www.thestorm.be

So we were presented with a small problem for a project (in Flex 4) i was working on and because i couldn’t find information about this i decided to make a little blog post myself altough it’s a very small thing.

The problem:
As main navigation for the project we were using a ButtonBar with four buttons. One of those buttons linked to an external file and actually had nothing to do with navigating thru the application. Logically if you click a menu item it gets ‘selected’ and is shown as the active item in your menu. We didn’t want this because the view inside the project wouldn’t change at all as you were redirected to an external file.

So we needed to achieve two things when you click that “false button”:
– Keep the current selected button active
– Keep the “false button” from being activated

So after searching for a while we found this:
You have to listen to the IndexChangeEvent.CHANGE like this:

myButtonBar_btb.addEventListener(IndexChangeEvent.CHANGE, onIndexChange);

and inside the onIndexChange handler:

private function onIndexChange(e:IndexChangeEvent):void
{
	// The button we want to check here is the third one in the menu so the e.newIndex = 2 for this button.
	if( e.newIndex == 2 ){
		// noActivation_btn is the button that links to en external file/webpage.
		var noActivation_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(myButtonBar_btb.selectedIndex) as ButtonBarButton;
		noActivation_btn.selected = false;
 
		// activateThis_btn is the current active button in the menu			
		var activateThis_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(e.oldIndex) as ButtonBarButton;
		activateThis_btn.selected = true;
	}
}

And thats it, there is nothing more to it.

Below is the full example code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600"
			   creationComplete="init(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.components.ButtonBarButton;
			import spark.events.IndexChangeEvent;
 
			private function init(e:Event):void
			{
				myButtonBar_btb.addEventListener(IndexChangeEvent.CHANGE, onIndexChange);	
			}
 
 
			private function onIndexChange(e:IndexChangeEvent):void
			{
				if( e.newIndex == 2 ){
					var noActivation_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(myButtonBar_btb.selectedIndex) as ButtonBarButton;
					noActivation_btn.selected = false;
 
					var activateThis_btn:ButtonBarButton = myButtonBar_btb.dataGroup.getElementAt(e.oldIndex) as ButtonBarButton;
					activateThis_btn.selected = true;
				}
			}
		]]>
	</fx:Script>
	<s:ButtonBar id="myButtonBar_btb" horizontalCenter="0" top="20">
		<s:dataProvider>
			<s:ArrayCollection source="['Normal button', 'Normal button', 'You cannot activate me']" />
		</s:dataProvider>
	</s:ButtonBar>
</s:Application>

So a lot has been going lately with adobe and and apple. A lot of Flash developers around the world (including myself) were looking forward to adobe’s next release of CS5. From all the new features they are introducing for the flash platform, one specifically got a lot of attention. The iphone packager for Flash CS5.
I was very excited about this new feature so we finally could get flash running on iphone/ipod touch/ipad devices and a lot of ideas were already brewing.

But then a few days before the official announcements for Adobe’s new Creative suites began (CS5) apple changed the policy for their apps.

This is the part where it goes wrong for Adobe:

3.3.1 — Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).

And this quite sucked for Adobe as their promotional video’s were already recorded and ready for broadcast and thus at the day of the announcements the part about flash still included the iphone packager.

A few days later Rumors went that Adobe was preparing a lawsuit against Apple.

Again a few days later Steve Jobs made a blog post about Flash and that HTML5 is the new ‘holy grail’ that they are going to support. But after seeing this i cried a little.

Later in the same week Adobe announces that they put a stop to the effort to get Flash to iphone and ipad devices.

So what the hell are you people doing!

Because let’s be honest who is going to pay for this? That’s right the developers.
If we want to create iphone/ipad apps we need to adapt ourselves and learn a new language in order to do that. I’m not saying that change and evolution are bad. We need it to keep fresh and on our toes. But this is ridiculous, first letting Adobe almost release new functionality and then giving them the royal finger by declining every app made by the packager just before they release it. That’s kind of low apple, shame on you.

When I see everything that is going on between Apple and Adobe it’s like two children fighting. I wonder if at the sidelines we have Microsoft and Google laughing at it and enjoying a bag of popcorn. The worst of it is that the real people getting hurt are the ones working with and using both of the companies soft- and hardware.

As someone who works with Adobe products (Photoshop, Illustrator, Flash, Flex, Dreamweaver, Coldfusion, .. ) on a daily basis i was very disappointed in apple’s decision to decline flash made apps. On the other hand I use apple products too (ipod, iphone and just ordered a new macbook pro). I’m just saying i am not connected to either company and i ask myself where is this going. I think they both should ‘shake hands and share a cookie’ and work on the Flash <> i’Someting’ issues.
I see many opportunities getting lost to both companies in fact i am quite sure both Apple as Adobe are losing the battle. Now it’s not a matter of are you pro or against apple (as in buying an iphone vs let’s say an Android device). But it’s going to be a much tougher decision with flash now certainly almost never being enabled on the apple devices. Is the Android market place going to expand much faster compared to the Apple’s app store and so on.

At the moment i am an happy iphone user but if foolishness continues there is a good chance my next phone won’t be one made by apple…

The previous part of this series handled in setting up Flashdevelop to build Flash Projects and can be found here. Now to get Flashdevelop working with Flex projects is almost the same so if you haven’t read part 1 yet, you should do that first.

You will need:
1. Flashdevelop:

You can download the newest release here. But unfortunately it’s currently only available for Windows users. There is a tutorial here to get it running on a mac thru parallels. In this tutorial I’m using Flashdevelop 3.0.6 RTM

2. Flex SDK
I used 3.5 for this tutorial, download here.

3. Flash player 10 projector content debugger
Download here. (After you download it , just run it once and close it again , that’s basically all you need to do with it)

Just extract the Flex SDK in a location you want for it. Please note that to compile a project in FlashDevelop

After you installed FlashDevelop and opened it you can create a new project and choose to create a new Flex 3 Project , choose a name and a location to save it and press ok.

Now you get a basic Flex project with Main.mxml as the only source file.

In order for you to compile this you need to let FlashDevelop know where to find the Flex SDK.
In Flashdevelop go to Tools -> Program Settings. Choose the AS3 Context and change Flex SDK Location to the path where you put your Flex SDK.

And that is Basically it. You should be able to compile your project just fine.

Please note:
Using Flashdevelop to create Flex 4 projects can’t be done right now (with FlashDevelop build 3.0.6).

This is because Flex4 updates it’s namespaces. In a default Flex 3 application your basic mxml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml">
 
</mx:Application>

But to change it to the defaults for the Flex4 SDK it should be:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo">
</s:Application>

If you try t compile this it gives an error saying that FlashDevelop “Could not resolve to a component implementation because FlashDevelop at this point doesn’t know how to handle the spark library. This most likely will be solved in a next release of FlashDevelop.

If anyone knows how to solve this problem, please post in comments

To write actionscript code for a I use Flashdevelop, it’s an IDE to write AS2 , AS3 and mxml code (also HTML, CSS, HaXe, jscript, phyton and XML are supported)  . It’s open source so it’s free and it’s I think it works extremely well.

In the past I always used to write all my AS in Flashdevelop and compile in the normal Adobe Flash IDE which works fine but is a bit cumbersome to work with if you only use the Flash IDE to create graphics and maybe some timeline animations. I wanted to be able to compile my Flash application in FlashDevelop.

First off all you need to download three things to get this working.

1. Flashdevelop:

You can download the newest release here. But unfortunately it’s currently only available for Windows users. There is a tutorial here to get it running on a mac thru parallels. In this tutorial I’m using Flashdevelop 3.0.6 RTM

2. Flex SDK
I used 3.5 for this tutorial, download here.

3. Flash player 10 projector content debugger
Download here.

For this example we’re going to set up a AS3 project. So after you installed flashdevelop, create a new AS3 project.

I named my project ‘flashinfb’ for this tutorial.

Just put it on a location you want and click ‘ok’.
Flash develop created a few folders (bin, lib, src ) in your project folder. Your project will be compiled to the bin folder. your source code (AS files) go in the src folder and library items (like swc files) go in the lib folder.

Extract the Flex SDK zip to a folder of choise. Please note that Flashdevelop will need this SDK to compile your code, the files will have to remain on your hard drive. So you might want to put it in a folder that stays the same and is a bit organised for you, e.g. the desktop is not a good idea to put them.

After you extracted the files. In Flashdevelop go to Tools > Program Settings .
Choose the AS3 Context and change Flex SDK Location to the path where you put the Flex SDK just now.

After you are done just click Close.

Now you need to run the Flash Player Projector you downloaded earlier.  Just double click it and then close it again. Go back to FlashDevelop and open Project > Properties. In the output tab change ‘Test Movie’ to  ‘Play in external player’.

Then just click ‘Ok’ for now.

If you look in Flashdevelop in the src folder you notice there was a Main.as file created. If you right click on it you see the ‘Always Compile’ checked. This means this is the default/root AS file your project will compile to. It’s about the same as the Document Class in the Flash IDE.

Now by default if you would press ‘Test movie’ (F5) you notice that the .swf created in the bin folder has the same name as your project name. You can chance this by going to  Project > Properties and change the ‘Output file’. I renamed mine  to main.swf .

You can test your movie now by clicking the ‘Test movie’ icon,  go to the menu Project > Test move or just hit F5.

An empty white flash player window pops up. In your output window of Flashbuilder you see some compile information. Also everything you trace will be in the output window.

Now the question comes, you don’t have any .fla files in your project how can I create a library of objects and graphics without a fla. Before you compiled via Flashdevelop that was done in the fla you compiled and had your library in there.

In Flash created a new file and drawn a 20×20 square on the stage and gave it a color (other than white). Then I made the square a movieclip and entered the following :

Click ‘Ok’ and then right click the movieclip just created in the library and pressed ‘Export SWC file’.

Browse to the lib folder of your flash project and create the SWC.

In Flash builder go to the lib folder and right click the .swc file and make sure you check ‘Add to Library’.

In the image below you see that I saved the .fla file in the lib folder of my project but that is not necessary, you can save that file anywhere you like.

And now you are able to use swc file to get library objects.

The example below is the whole Main.as file with some extra code to use the movieclip inside the .swc file.

The code just fills the stage with squares with a random alpha value.

package
{
        import flash.display.MovieClip;
	import flash.events.Event;
 
	/**
	 * ...
	 * @author Ben Eelen - Heeties
	 */
	public class Main extends MovieClip
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			/* tutorial code */
			for ( var i:uint = 0 ; i < ((stage.stageWidth / 20) * (stage.stageHeight / 20)) ; i++) {
				var square_mc:Square = new Square();
				square_mc.x = (i % (stage.stageWidth / 20)) * 20 ;
				square_mc.y = Math.floor( i / (stage.stageWidth / 20) ) * 20 ;
				square_mc.alpha = Math.random();
				this.addChild(square_mc);
			}
		}
	}
}

Of course you can also use a .swf instead of a swc to load some external library items.

So compile the fla file you used to make the swc earlier. and put the resulting .swf in the lib folder  of your project.
To make this work you need to embedthe compiled .swf in this example graphics.swf and define the symbol you want to use that is in the swf.
and make it a Class like this:

[Embed (source = "../lib/graphics.swf", symbol = "Square") ]
private var Square:Class;

You also need to change the way you define your symbol (compared to the example with the swc file);

var square_mc:Sprite = new Square();

The full Main.as code looks like this:

package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * ...
	 * @author Ben Eelen - Heeties
	 */
	public class Main extends MovieClip
	{
		[Embed (source = "../lib/graphics.swf", symbol = "Square") ]
		private var Square:Class;
 
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
 
			/* tutorial code */
			for ( var i:uint = 0 ; i < ((stage.stageWidth / 20) * (stage.stageHeight / 20)) ; i++) {
				var square_mc:Sprite = new Square();
				square_mc.x = (i % (stage.stageWidth / 20)) * 20 ;
				square_mc.y = Math.floor( i / (stage.stageWidth / 20) ) * 20 ;
				square_mc.alpha = Math.random();
				this.addChild(square_mc);
			}
		}
	}
}

So now you are fully ready to build a project and use FlashDevelop as a Compiler instead of Adobe Flash IDE.

In the ‘web world’ today Social media is a big thing. A lot of people use it in one or more ways and as it seems we are more and more evolving into a world where social media is becoming a very important aspect of our daily lives. At this point many companies are already exploring or using it.

So what can social media mean for a company? Is it only meant for the big enterprises or can smaller companies take advantage of it to?

Well it’s not a yes/no answer question, it depends on what you want from it. If your company deals with consumer products it’s viable or even essential to have a pick in some sort of social media. (Just to clarify: consumer products can also be service based) For branding and advertising it’s always a good idea to use social media and you can reach massive amounts of users (possible buyers of your products) in an effective way. Also customer support can be very fast via those channels. But a company has to dedicate resources to do so, if they fail it would mean advertising in a negative way.

Marketers need to understand that the branding of their company is slipping more and more out of their hands with social media. It’s a matter of following what is said by the common user and reacting on that in an appropriate way. Or hinting to the public what can be. Users are getting smarter and more and more have an opinion (e.g. me writing this blog post ) that they dare to publish via the social media channels. There is no way of knowing in advance how a certain campaign is going to evolve when users start to comment and criticize it. But if you have your customers in your hand social media can mean massive publicity with minimal efforts to keep it going as the ‘user’ does it for you. Companies need to change their way of thinking and move from a push method where a marketer controls the brand to an interaction model with the crowd.

If your company is into B2B, things become a bit cloudy. B2B products don’t need to reach a massive amount of users (otherwise you would be selling a consumer product) as most of them have nothing to do with the product itself but you want to reach your potential clients which are other companies, but they are still people who could be using various social media platforms and interact with other potential customers for your B2B product(s). In those cases opening a Facebook page can be less effective than for consumer based products but LinkedIn is always useful to network digitally with other corporate people. (the latter also goes for B2C companies of course). But things are evolving… A lot of networking today is also done via social media websites like Facebook, twitter etc. where the line between personal and professional lives seem to fade to nothing. People talk to their friends but also their associates, colleagues or even their competitors thru the same channels. This means, maybe that Facebook page could be useful after all.

Social media seems fairly specially for smaller businesses that don’t have the big to spend on being on top of the latest evolutions advertisement and marketing. But even those companies should look into how this could benefit them because websites like YouTube(2005), Facebook(2007) , LinkedIn(2003) and Twitter(2006) to name a few are only a couple of years old but booming big. And as for all things evolving over the last few years there were pro and cons for ‘social media’ some saying it’s only a hype and it will die when the first excitement is over. If that is going to happen, it’s definitely not going to happen soon and personally I doubt it ever will.
Social media is here and here to stay but I do believe it will evolve in one way or the other and in a few years the digital landscape will look totally different from now.

But that’s also a reason why I love it so much ..

I just finished my latest flyer design for a lanparty organization, it’s the fifth time already so i decided to post all the other flyers i made for them.

Now i look back at them i hate ‘Blanca’ and like ‘Debby’ and ‘Earl’ the most.