Rudi on Rails

Look what I found: my bachelor’s final project. This was the second Flash application I ever made, created in 2004/early 2005. At that time I was just starting with Flash MX and my skills were on a rather basic level. My personal goal was to get familiar with the whole software package, learning the Flash way as well as using ActionScript with the timeline.

The title was “Plottmarie” or rather dull: Practical use of the Drawing API in Flash MX 2004. Plottmarie was a real existing firm in Berlin that, unfortunately, does not exist anymore. Their main business was designing logos and layouts of every kind, advertising print, foil plot and textile print. The initial objective was to develop a t-shirt designer application for the web where customers can create their own designs to submit it to the company. They would, then, print it onto the shirt and send it out to the clients.

Getting Started

I must confess that I was initially struggling wrapping my head around the whole Flash thing. Mastering ActionScript was the least problem, but dealing with the problem of running code depending on where you are on the timeline, shesh! Especially running movies embedded into others and executing commands within those to change the parents’ state… you get the point.

Anyway, once I got the grasp of it the development was proceeding surprisingly quickly. The drawing API was used almost entirely throughout the program and to generate the interface. It covers all the basic painting functionalities, although the graphic design could have used some more love. Have fun designing your own shirts:

Where Can I Order Now?

You might ask yourself now: where is the save button and how can I order my shirt? Well, unfortunately I did not get this far. Towards the submission date of this project I simply ran out of time to make it as fancy as I wanted it to be. Nonetheless, I accomplished what I initially anticipated to learn: getting into the stuff that has always astonished and that makes those web sites move.

If you like this little shirt designer, I’d be happy to receive your designs! Make a screenshot and send it to shirts[at]rudionrails[dot]com. I will put the image onto the site if you are a skilled designer ;-)

RS Industrial Services is an independant supplier of industrial equipment based in Billingham. They are a North East Business Award winner in the services category (May 2007). As part of their transition in growing the company, they also needed a new web presence that showcases the range of products and services as well as an online shop, which will be integrated at a later stage.

The approach was fairly open towards the design. The only requirement was to incorporate the existing logo. Therefore, I have designed two main drafts for their new web site. Both come in variations.

A First Approach

With the first design I intended to express the massiveness of a crane, hence the black and yellow stripes left and right. The overall layout remains fairly straight forward with 4 main content rows: logo & contact details, main & sub navigation, banner & links to main categories, page content. The logo of the company was clearly designed for print, which made it a little difficult to frame it into a suitable colour scheme for the web. That is why the red and blue within the contents was altered slightly to a lighter tone. The version without the black and yellow stripes takes off a lot of the weight. Also, to keep the contents clear and light, colours have been used for fonts only (to the most part), as using background colours would have made the layout rather cumbersome. Here are the images for the first design approach:

Second Round

The second design draft was intended to be much clearer regarding the order of contents. Main difference is the change of the navigation part integrated into the banner, as well as the introduction of a third main colour into the design. Also, there is much more use of white space. The drafts merely vary in content placements within the banner element of the page. Here are the images for the second design draft.

The Knock-Out

Altough we have been quite happy with the designs in the office, our client did not appreciate the effort. Apparently I missed to hit the taste within their company, which was a little disappointing, but then again no problem at all. This meant: back to the drawing board. As I was pondering about how to provide a suitable design for the site, their in-house designer knocked up a draft which was received with much liking at RSIS. Very well then, the client is always right!

I had to tweak it a little to make it suitable for the web, as it was designed as brochure. The menu is a hover CSS navigation now, to the give the company the most freedom in extending their range of products and services. You can visit the RSIS web site here. Enjoy the images for the final draft provided by RSIS themselves:

Although the web site looks alright now, I must confess that I am a little offended by the skills of their designer. If I would have known in advance, I could have saved a lot of time on making the previous layouts. Especially the fact that it takes me quite a while to come up with web site designs, as I am not a trained designer. Very well then, I guess someone else might get those designs then ;-)

This piece of work shows a simple example of combining mouse movements with the use of sound and the attachment of a box for each rendered frame of the movie. Move with your mouse over the movie and you will see what it does ;-)

Whilst the box is only attached to the stage when the mouse position has changed it also changes its size and opacity depending on the movement speed of the mouse cursor.

This is my very first work with Adobe Flash It was made in late 2004.

I have used draggable objects as navigation for a full browser window flash site, which was part of my bachelor’s dissertation.

You can hover over the circles and a drag me flashes up indicating that the objects can be moved around. Furthermore, the alpha values of the circles change depending on whether the mouse cursor is over them or not.

Very simple and easy, but I still like it.

...where the name has nothing to do with the application.

This Flash example demonstrates a piece of an application I wrote where images are loaded into a Polaroid similar shape. Of course it is possible to give the image a signature.

Alpha Circulation is a study made in Adobe Flash that combines various techniques. The shape building the rotating chainsaw similar object is a set of the same move clip attached to the stage in a circular pattern.