headjump - Blog

Thank god for flash ads!

2010-11-17T09:57:00Z

Everybody seems to share the opinion that flash in the browser makes the web slower, kills your battery, crashes the browser and makes everything insecure. That slow animated flash ads come from the devil himself! Javascript is the way to go and so much cooler and faster and a standard and stuff!

A world without flash…

Don’t get me wrong, I love javascript! But let’s just imagine for a second that there was no flash, only javascript. You think the evil advert-creators would will stick with animated gifs forever and be happy with that? – Well, I don’t.

There’d also be animated adverts – with javascript and videos and whatever one can think of, but you know what? By the time being most badly coded flash animation runs smoother than most badly coded javascript animation (You don’t think advert creators will optimize their code, do you?). You get a bit of performance from upcoming hardware accelerated css transitions, and maybe WebGL in the future, but that’s about it. And I don’t want to hit the day when there are openGL adverts running in my browsers! You think having thousand of different javascripts running on each page is fast and secure? I don’t think so.

Evilness is out there

There is evil stuff around the web: adverts, click counting, measuring stuff, badly developed slow scripts… – all this makes the web experience worse. But those things would also exist if there was no flash. And at the time being it’s easy to block most ads with a simple flash blocker, because most ads are made with flash (hey, it’s easy and it tweens!). Simply unblock the few real flash apps you need and there you go with a “fast” web. Would it be as easy if there was only javascipt? How to separate the good scripts from the bad? Just pick one of your favorite web portal pages and inspect all the scripts that are included from lots of different sources that mess with the dom and the global namespace at this very day. You’ll get a headache (and so does your browser).

We’ll get what we deserve

There’s only one thing I assume for sure: Whatever programming language will be “the winner” in the future, we’ll get our ads and scripts and they’ll make the web slower, kill your battery, crash the browser and make everything insecure.

jQuery plugin: one_time_action

2010-09-22T14:53:00Z

jQuery plugin: Makes submits and links work only once - and can reactivate them after a given time if you want.

This is just the demo page. For more info follow the thinks below.

See the github project (with documentation) or download the source

Demo

"); var onces= $(".once").one_time_action({add_class: "disabled"}); var reacts = $(".reactivating").one_time_action({add_class: "disabled", reactivate: 1500}); onces.add(reacts).click(function(evt) { evt.preventDefault(); alert_action(this); }).each(function() { $(this).after($("(reactivate)").click(function(evt) { $(this).parent().children().first().one_time_action("reactivate"); evt.preventDefault(); })); }); }); <style> a.disabled, a:hover.disabled { text-decoration: line-through; } .reactivate, a.reactivate, a:hover.reactivate{ color: #aaa; font-style: italic; text-decoration: underline; margin: 0 5px;} span { color: #aaa; } </style> <form>

Link
- Once
- Reactivation after timeout
Submit
- <input class="once" />
- <input class="reactivating" />
Button
- <input class="once" />
- <input class="reactivating" />

</form>

The future of flash: enrich old browsers with HTML5 abilities?

2010-06-21T20:16:00Z

You might have noticed discussions about flash versus HTML5 and it’s a fact that some modern mobile phones have quite solid html + javascript implementations running but no flash player that’s worth speaking of (if any).

Due to the increasing usage of mobile devices the distriburtion of flash gets worse nowadays. That makes the use of javascript for application (and game) development more and more attractive.

Let’s see, what do we need to develop a basic game?

Graphics and animations
Capture user input (keyboard, mouse)
Sound output
Also good: Save game states to local storage

Javascript has long enough been capable of the first two points, but sound and local storage was a problem. To get sound output with javascript the common practice was to use a hidden flash application to play the sound and control it via javascript.

Now with HTML5 you can control sound natively in the browser and use flash as a fallback for older browsers that don’t support it (like IE6) – Soundmanager2 makes it this way for example.

Same thing could be done with local storage (or a socket): Use HTML5 if available, flash as fallback.

So with more and more javascript applications to come, will this be the future of flash? Enriching old browsers with HTML5 abilities? I’m eager to find out.

When to use Arrows-and-boxes

2010-05-14T13:30:00Z

What it is

Arrows-and-boxes is there to visulaize the simple Ideas.

Ever ran into a simple problem that’s easy to understand but needs several sentences to describe? In most cases a simple diagram can show the point with 2 or 3 boxes and arrows, and you get the idea at a glance.

() > ((Idea)) < ()

I hate that the only way to get diagrams to the web used to be by uploading images. What if I want to change something?

The old way:

Open diagram-tool
Open diagram file
Change diagram + save
Export image
Upload image to server
Link new image in blog/wiki

What if I’m at a different computer? Where’s the diagram tool and my file?

Noone goes through this for a tiny diagram with only 3 nodes!

A simple diagram can often help to get the point a thousand times better than just text. With Arrows-and-boxes you’re able to just create diagrams for your posts as you type… no external tools, no uploads, no pain.

What it is not

It’s not the all-in-one diagram tool! It has two differend node states (normal + highlighted) and two different arrow states (again normal + highlighted). That’s enough! If you need more, you need another tool or rework your idea. Maybe you can visualize what you need more simple?

Don’t do complicated diagrams!

You think arrows and boxes would be cool if it just had crossing prevention, or hundret different node styles, or smooth curved arrows, or…? – Then you’re doing the wrong kind of diagrams with it!

If you need a difficult diagram, use a different tool. With too much nodes and arrows, the “simple” markup for Arrows-and-boxes becomes pain to read and edit. As long as the markup is easy to read, it’s the right tool to use.

Why this is good

Don’t think too complicated!

Every idea can be separated into simple pieces. Arrows-and-boxes can’t visualize complex structures with thousands of nodes and relations – so it makes you think simple. You’ll be surprised how much you can express with just a few boxes. And that’s good!

(Simple) > is ((good))

Arrows-and-boxes

2010-02-19T11:35:00Z

Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like (Dennis) >likes (Food)

Example screenshot of dynamically created drawing with javascript:

About

Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like (User) > (Admin)

... which will be transformed to:

(User) > (Admin)

Download < complete sources and samples pack
Preview editor < live preview
When to use
Fork at Github

Setup (it's easy!)

Put javascript links inside HTML head to jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js

You can download the source files or simply put this in:

<link href="http://www.headjump.de/stylesheets/arrowsandboxes.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script src="http://www.headjump.de/javascripts/jquery_wz_jsgraphics.js" type="text/javascript"></script>
<script src="http://www.headjump.de/javascripts/arrowsandboxes.js" type="text/javascript"></script>

Place a <pre> block around your arrows-and-boxes markup and set the class to arrows-and-boxes:

<pre class="arrows-and-boxes"> (User) > (Admin) </pre>

Arrows-and-boxes automatically detects the code and builds nice boxes and arrows from it.

Basic example

Inline arrows and nodes:

(Dennis) >likes (Food)

(Dennis) >likes (Food)

Define a box with "( )", and a link with ">", "<", "-".
An arrow can be put between Boxes in a single line, or inside a box, if the target is "further away" (see below for an example)
Basic box format: (box_title | box_subtitle)
Complete box format: (box_id{custom_class}: box_title | box_subtitle >arrow_label [arrow_target1, arrow_target2, ...] <arrow2_label [arrow2_target])

New lines

Nodes will be placed after each other in one line. Start a new line with "||".

(Node1) (Node1_2) ||
(Node2) || (Node3)

(Node1) (Node1_2) ||
(Node2) || (Node3)

Different arrow types

(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)

(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)

Linking elsewhere

Writing (node_id: My Node) gives the node the id "node_id" (must be followed by ":"). You can use it to define a target for a link inside a node definition

() (Dennis >likes [d,c] >hates [j]) ||
(d:Drinks) (c:Comics) (j:Jogging)

() (Dennis >likes [d,c] >hates [j]) ||
(d:Drinks) (c:Comics) (j:Jogging)

Arrows between boxes: >arrow_label
Arrows defined INSIDE a box: >arrow_label [arrow_target1, arrow_target2, ...]

Want subtitles?

Writing a "|" after your title makes the rest of the text a subtitle. If it's too large to fit the boy, hover with your mouse to make it visible. Using "|" on an arrow label will cause a line break.

(Dennis|has a subtitle) > label | new line (node)

(Dennis|has a subtitle) > label | new line (node)

Highlight nodes and arrows!

(boring) > (boring) >> ((Highlighted))

(boring) > (boring) >> ((Highlighted))

Use Dummy nodes to get more space

Defining a node without a title (= empty node) makes it a "Dummy node". It won't be visible, but gives some space.

Dummy nodes can also have ids and arrows, so you can acutally use them as arrow-targets and -sources.

(Dennis) -likes () > (Food)

(Dennis) -likes () > (Food)

Use Dummy nodes to bend your arrows

(Dennis) - (>likes[f]) ||
() (f:Food)

(Dennis) - (>likes[f]) ||
() (f:Food)

HTML in your texts

Put {{ }} around something let's you use HTML inside node titles, subtitles and arrow labels. So you can use anything you like (images and stuff).

(Dennis) > links ({{<a href="http://www.headjump.de">headjump.de</a>}})

(Dennis) >links ({{headjump.de}})

Custom CSS classes for your nodes

Writing {my_class_name} before the ":" that is used to seperate the node id from the title will add the classname to the created node. Inspect the element if you don't trust me:

({custom_class}:Custom class)

({custom_class}:Custom class)

How to install Ruby 1.8.7 on windows

2010-02-05T10:45:00Z

It happens that Ruby 1.8.7 is recommended for the current Rails version but there is no one-click installer available for windows the time being. Not a problem, just follow the few steps below…

It happens that Ruby 1.8.7 is recommended for the current Rails version but there is no one-click installer available for windows the time being. Not a problem, just follow the few steps below:

Update: InstantRails is pretty outdated. Use Rubyinstaller form http://rubyinstaller.org/ to install Ruby on Windows. - Thanks Christof, you’re right! Time has past and so has InstantRails ;)

Download the Ruby 1.8.7 binaries
Extract them to whatever folder you like (e.g c:\ruby)
Add the folder c:\ruby\bin (or whatever folder you extracted Ruby to) to windows PATH variable (how to?)
There are some DLL files missing in the Ruby folder. The easiest is to download the latest InstantRails version, extract it and copy all DLL files from the InstantRails folder ruby/bin to your Ruby bin folder
Rename the DLL ‘zlib1.dll’ to ‘zlib.dll’

That’s it, you’re done :)

To also install and run Rails, simply download rubygems and run ruby setup.rb from the command line inside the folder you extracted rubygems to.

Then Install rails with gem install rails

Hope this was helpful. If you’ve got any question just drop a comment or contact me.

Poor small duck...

2010-01-13T21:26:00Z

I put this image up to my deviantart account the other day and it really turned out pretty much the way I wanted it to… so I’m adding it here, too.

“Just a frog”

I got the inspiration for this while playing with my son building a lego-duck for him, only using two bricks(like in the picture above). That felt very abstract to me and I wondered how to build a frog the most abstract way, and my solution was: use a single piece of green lego.

That made me wonder, whether the abstract characters from a low-res pixel world are able to recognize each other…

Hope you like it :)

My tribute to April O' Neil

2009-12-27T20:43:00Z

You rock, April!

I’ve never really liked the stile of the traditional cartoon April, but I love the touch the cg movie TMNT gave her. She became a fighter herself and I love the overall design. Is it really only me that liked the latest TMNT movie? It pretty much sucked here in germany and when I went to cinema to see it the woman at the checkout called through a mirophone “room 5, turtles please” cause we were the only ones going to see it and they had to run it just for us ;)

What do you think of the movie? I can’t be the only one who thought it was great! Aren’t there other people raving about it? Is no one else telling their friends to make watching it a priority? It definitely should be! Films like this don’t come along every month.

Oh yes – the picture: I always wanted to try my take on April, hope you like it! Comments and feedback would be really appreciated. If you like it, please share!

(click at the images to enlarge:)

You can also find the image at my deviantart account.

Merry christmas, ye scurvy pirates!

2009-12-23T10:18:00Z

I wish you all the best for Christmas!

I’m somewhat busy at the moment doing ‘personal stuff’, but after the Christmas holidays I’ll continue working at my next flash game. It’s pretty hard to find the time for it, cause it’s usually not more than 1 hour per day after work, and on weekends usually 0 hours/day.

My next game will be some sort of fun addicting endless-game where the gameplay keeps getting faster and harder the longer you play till you finally screw up. That is because it took forever to build the few levels in Pirate Golf Adventure and I often hear people complaining that it’s too short. So I will go for the “not-so-unique-levels-but-much-more-of-them” way. Hope you like it more this time ;)

So have a great time!

ps: If you don’t know why the giant bird seems so surprised: ‘just wonders where caribo got the presents from while sitting on his back ;)

You're better than me...

2009-12-17T20:13:00Z

There are some people who complain that the last achievement at Pirate Golf Adventure is too hard to get. And you know what? They’re right, it’s damn hard. Even I have trouble getting it, although I played the game like a million times times. I only did the 25 strokes twice!

But there’s a reason I did it that hard: I knew, that there will be lots of people much better at my very own game than I am. And that turned out to be true. See some video proof of it in the post!

But there’s a reason I did it that hard: I knew, that there will be lots of people much better at my very own game than I am. And that turned out to be true. Here’s some proof:

Pirate Golf with 17 strokes

Pirate Golf with 18 strokes

But that’s not the best at all!

Those performances already blew my mind, SeriousGuy did an unbelievable 15 strokes without restarts at kongreate!

Give mercy

By the way, to whomever wondered how to spare the crocodile, I found a vid at youtube that shows you:

Thanks to all the people who enjoyed spending time with piratgolf and especially to those who took the time to record screencaptures or write walkthroughs – like this one! You really make me happy :)

Finally new content at my homepage

2009-12-16T19:01:00Z

Now that my old homepage hasn’t seen any update since a year or so I finally decided that it’s time for some static content that won’t need any updates at all.

What came out is now my own private web business cart. Pure static content, displaying some links to other sites I’m subscribed to. So one less that needs updates…

What do you think? Check it out at dennistreder.de

Great flash animation books

2009-11-17T22:27:00Z

The following books really helped me to get insights in animating with flash and industry-proven methods to get your animation work done. I’d like to post more book tips and links in the future to show you what I really think is worth buying. I own each of the books I’ll recommend here myself, so it’s not a dumb amazon-link rubbish but books that I think are truly great.

How to Cheat in Adobe Flash CS4

I was sceptical about this one at first, but it turned out to give me some of the most valuable tips on constructing vector graphics within flash and getting the best out of gradients and texture-fills. It’s really industry proven as most examples come from real commissions and shows you how to achieve good results in little time.

...more info

Foundation Flash Cartoon Animation

... shows you a more traditional approach on animation and how you can handle it within the Flash IDE. Great tips ons structuring your movieclips with all the characters different angles, states, expressions, ... that helps a lot to not lose track of your library.

...more info

If you know any good flash book that’s worth taking a look at please tell me, I’m eager to check it out!

A little help with event listeners...

2009-10-16T22:31:00Z

Let me show you a simple AS3 structure that helps me to keep track of my event listeners and prevents me from messing up my code. Nothing groundbreaking but it always made my code a little clearer and puts everything regarding the listeners in one place.

Having an eye on your event listeners is really essential in flash. Not only that forgetting to remove a listener will keep an object away from garbage collection forever – there is another evil habit often done: simply layering different MovieClips above each other to “hide” the previous menues and stuff. That sure makes all the underlying stuff invisible to see – but all the buttons that are down there are still accessible via the TAB-key.

The basics

To add an event listener to an object (let’s be correct: to an EventDispatcher) you call my_object_name.addEventListener(...) with a bunch of parameter. To remove it you call my_object_name.removeEventListener(...). I assume you already know how to use them and maybe also discovered some problems while keeping track of all the listeners.

Introducing the ListenerAdder

ListenerAdder is a class you can instanciate and tell all the event listeners you need. It’s able to add them all at once or remove them. That’s all. Sample code:

...
my_listener_adder = new ListenerAdder(); // my_listener_adder is declared as a private var of the current class
my_listener_adder.injectListener(my_button1, MouseEvent.CLICK, doOnBtn1Click);
my_listener_adder.injectListener(my_button2, MouseEvent.CLICK, doOnBtn2Click);
my_listener_adder.injectListener(my_button3, MouseEvent.CLICK, doOnBtn3Click);
my_listener_adder.injectListener(my_button4, MouseEvent.CLICK, doOnBtn4Click);

my_listener_adder.addAllListener(); // all listeners that have been "injected" before are now added
...

The parameters for injectListener just work like the normal addListener(...) on an EventDispatcher – there’s only one additional parameter at the very beginning: the EventDispatcher itself.

So the ListenerAdder knows about all your listeners. You can add them all by calling addAllListener() or remove them with removeAllListener(). Now you have only one place to define all your listeners – but add and remove them where you need. You can use your class constructor to define the ListenerAdder and call the add and remove functions when you want to activate or deactivate all listener.

That’s e.g. what I do when I switch between menu screens: While the menu is fading in there are no listeners active. After the fade in animation I addAllListener. Immediately before the fade out animation is played I removeAllListener again.

It’s really helpful, I swear

Till now the ListenerAdder class is quite ok, but it doesn’t knock your socks off. But there is one way of use that makes it really helpful:

Imagine you’re doing a game that has lots of going on, like a game world with hero-, enemy- and background-movement ON_ENTER_FRAME and something else running ON_TIMER, and the hero reacting ON_KEY_DOWN and a pause menu that appears ON_CLICK.

Now your hero drops dead because the player hits an enemy and while the death animation is playing and the respawning is done you want the enemies and your world to “live on” but you don’t want the player to do key interactions any longer or let him open the pause menu. You could of course place if (!player_is_currently_dying) {} all the way through your sourcecode, but you could also do the following instead:

Use different ListenerAdder for different kinds of interaction. Like…

var world_la:ListenerAdder; // general stuff like world animation, ...
var interaction_la:ListenerAdder; // key and menu interaction

You can put all the event listener regarding user interaction to interaction_la if you want to block them simply call interaction_la.removeAllListener(). Let’s revisit the above example: as soon as the player character dies, we remove all interaction listener. After all the dying and respawning animation/screen-fading is done we addAllListener again.

That’s just a simple example. Using different LisenerAdder for different kinds of interaction already saved me a lot of trouble, you should give it a try ;)

Download and use

Download ListenerAdder.as

You can download the file above or paste the source code at the end of this post to an empty file and save it as “ListenerAdder.as”.

It’s ActionScript 3 but should also work with a2 I guess, maybe with minor modification. I could have used the slightly faster vector instead of an array but this way it’s also compatible with flash9 (vectors came with flash10).

To use it simply extract the zip and copy it to your source folder and import de.headjump.ListenerAdder everywhere you need it. Make sure to keep the folder structure like it is (de/headjump) – otherwise the package path won’t work properly. Of course you could just change the package within the actionscript file to whatever you like – but I’ll post some more classes and stuff later on that’ll be crosslinked at some points, so you should really leave the package structure as it is.

If you consider any problems with the file or have an idea on how to improve it please drop me a message.

That’s the entire source:

package de.headjump {
    import flash.events.EventDispatcher;

    /**
    * ...
    * @author Dennis Treder (info@dennistreder.de) http://www.headjump.de
    */

    public class ListenerAdder {
        private var m_events:Array;
        private var m_active:Boolean

        public function ListenerAdder() {
            m_events = new Array();
            m_active = false;
        }

        public function injectListener(target:EventDispatcher, type:String, func:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void {
            var lo:ListenerObject = new ListenerObject(target, type, func, useCapture, priority, useWeakReference);
            m_events.push(lo);
            if (m_active) {
                lo.activate();
            }
        }

        public function addAllListener():void {
            m_active = true;
            for (var i:int = 0; i < m_events.length; i++) {
                ListenerObject(m_events[i]).activate();
            }
        }

        public function removeAllListener():void {
            m_active = false;
            for (var i:int = 0; i < m_events.length; i++) {
                ListenerObject(m_events[i]).deactivate();
            }
        }

    }
}

import flash.events.EventDispatcher;

class ListenerObject {
    private var target:EventDispatcher;
    private var type:String;
    private var func:Function;
    private var useCapture:Boolean;
    private var priority:int;
    private var useWeakReference:Boolean;

    public function ListenerObject(_target:EventDispatcher, _type:String, _func:Function, _useCapture:Boolean = false, _priority:int = 0, _useWeakReference:Boolean = false) {
        target = _target;
        type = _type;
        func = _func;
        useCapture = _useCapture;
        priority = _priority;
        useWeakReference = _useWeakReference;
    }

    public function activate():void {
        if(target != null) target.addEventListener(type, func, useCapture, priority, useWeakReference);
    }

    public function deactivate():void {
        if(target != null) target.removeEventListener(type, func, useCapture);
    }
}

Moonship - I'm going to finish this one somewhen!

2009-10-16T19:59:00Z

Moonship is a picture I started drawing nearly a year ago – while trying to figure out the direction pirategolf should take. I never really finished it but now that found it again on my harddrive I think it works quite well and I’m going to finish it somewhen in the future…

Moonship is a picture I started drawing nearly a year ago – while trying to figure out the direction pirategolf should take. I never really finished it but now that found it again on my harddrive I think it works quite well and I’m going to finish it somewhen in the future…

That’s still wrong with the picture:

needs more color contrast – especially more difference between foreground and background
should look like a stage at a theater at first – therefore the surface/shading of the waves is way too curved. Has to look more like a straight plank with the shape of a wave
the figurehead needs more elaboration. Make it a sexy piece of wooden mermaid
there are definitely too little parrots on screen

Notice anything else?

ALWAYS do a border clip around you swiffs!

2009-10-10T13:06:00Z

Let’s first make clear what I’m talking about:

swiff is what the web says ”.swf” files are called – and ”.swf” files are compiled flash files.
A border clip is a Movieclip (or display object of any kind) at the top most layer of your flash stage that leaves the normal visible area of you game visible, but adds a large border around it that hides everything outside.
always means always!

So the problem is that if you embed your swiff into a website and the embedding container has a larger size than your game resolution, everything outside is also visible, like you can see here (click it!):

(that’s from xhry.cz)

It’s not that I haven’t been aware of this before… I already knew it. But let’s say I simply forgot about it, or maybe I thought “the flashgame portals will for sure use the correct dimension for embedding…”. Now the game is out there on more than 1000 different servers and there are more than just a few that use a larger dimention (e.g. even AddictingGames does, and that’s really painful). Don’t take this too easy, it really kills the ratings!

So please learn from my stupidity and make a border around your flash content. Period.