Finn Rudolph

ImageFlow, JavaScript, CSS von Finn Rudolph

There is a new ImageFlow version featuring the Slideshow and Circular mode everybody was waiting for. They come with a bunch of options that enable you to customize the behaviour of ImageFlow as you prefer.

They also "play nice" with the previous options. Which was especially tricky to achieve with the circular feature. I had to clone some of the images to make the illusion of an circular animation possible and thereby changed the number of images. That had an impact through the whole code (just search for 'my.circular' in the imageflow.js if you are curious what had to be touched ;D).

I also implemented some other options that came up in the shoutbox often: With animationSpeed you can now slow down the animation for extremely small images. And the path options imagePath and reflectPath enable you to put the reflect_.php files where you want. And it is now possible to display only one image in ImageFlow without crashing the IE. Enjoy!

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject package that comes with some code improvements and a new option called lock. If activated the rotation will be locked at the given boundaries: One can only spin the object around one time and not infinitely. Check out the locking examples and if you're interested in the codebase feel free to take a look at the github repository of JavaScriptObject.

JavaScriptObject, JavaScript, CSS, CINEMA 4D, C.O.F.F.E.E. von Finn Rudolph

There is a new JavaScriptObject package that features two very handy scripts written in C.O.F.F.E.E. (the scripting language of CINEMA 4D). Until now it was very hard to create an animation in CINEMA 4D that rotates an object with a given step width around two axes and renders the frames. Basically this could be done with the timeline, but that would require an awful lot of stupid work - like setting 40 key frames with different H and P rotation values... by hand!

And since we have more important stuff to do I made two C.O.F.F.E.E. scripts that automatically do the boring work for us. There is a new step by step tutorial on how to install and use the scripts. It's really simple and you finally can render 3D models that can be rotated around two axes in a very high quality:

Ladybird by Gilles Tran - 400 frames (9,1 MB)

ImageFlow, JavaScript, CSS, iPhone, iPod Touch von Finn Rudolph

There is a new ImageFlow version featuring the navigation buttons (next, previous) which has been asked for quite a lot in the shoutbox. The buttons are simply divs with background images, which you can configure via CSS. Check out the navigation buttons example. And there is a new option called imageScaling that completely disables the dynamic resizing, which is very handy for photo slideshows.

Oh, and it is now also compatible with the touch events in the safari browser on the iPhone and iPod Touch! Check the demo video or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/ImageFlowTouch


ImageFlow on the iPod Touch

JavaScriptObject, JavaScript, CSS, CINEMA 4D von Finn Rudolph

The new tutorial explains how to render frames of a 3D model in Maxons CINEMA 4D R11 that can be directly used with JavaScriptObject to build a 360° rotation. It features a Step by Step guide and ends with a nice 360° - Mini Cooper as a result.


The model I used in this tutorial is a Free CINEMA 4D model made by Gilles Tran.

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject version featuring support for the iPhone and iPod Touch. You can test the demo shown in the video beneath at testground.finnrudolph.de/js/JavaScriptObject


JavaScriptObject on the iPod Touch


I also wrote a small JavaScript application to understand the basic touch events of the iPod Touch and iPhone browser Safari. That means only one finger, no gestures. You can watch the Demo or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/iTouchEvents

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject version featuring grabbing hand cursors for all browsers* and a nicer lazy loading design. Both increasing the usability of the script. It now also has a stylish demo website at javascriptobject.finnrudolph.de.


*Except Opera which does not support the CSS cursor:url() everyone else supports!

JavaScriptObject, JavaScript, CSS, SketchUp von Finn Rudolph

The tutorial explaining how to export frames from Google SketchUp models for JavaScriptObject is now complete. It features a general Step by Step guide, two examples on how to export 360° objects and full XY revolution objects and some rendering quality tweaking to get the best rendering result. Enjoy and happy rendering!

Nokia 6300 - 400 frames (2,77 MB)

JavaScriptObject, JavaScript, CSS von Finn Rudolph

Finally, after some weeks of fun with JavaScript and skripting Google SketchUp with Ruby I proudly present JavaScriptObject!

JavaScriptObject is an application to publish 3D models in a userfriendly way. It does not require any applets, plugins or similar. JavaScriptObject works with every browser, that can handle images and supports JavaScript. It is easy to implement, documented and configurable.

Features

• 3D rotation / 360° rotation
• Supports multiple instances (Object-oriented)
• Easy implementation (Unobtrusive JavaScript)
• Compatible with all graphical browsers
• JavaScript & CSS compressable to 7 KB
• Graceful Degradation
• Loading bar
• Implementation and configuration by one img tag
• Supports lazy loading

Demo

ImageFlow, JavaScript, CSS von Finn Rudolph

There is a new ImageFlow version featuring the aspectRatio option many people wanted. Now the proportions of the ImageFlow container are freely adjustable! Check the Proportion Examples to get an idea what one can do with that. I also added some more options that allow you to manipulate various image relations.

Another feature in this version is a small CSS tweak for the IE7. It enables high-quality bicubic image resampling for the resized images within the ImageFlow container resulting in a huge image quality improvement:



Before: ImageFlow 1.0.3 - IE7 default image resampling


After: ImageFlow 1.1 - IE7 bicubic image resampling


If you are interested in the tweak I highly recommend you the article On UI Quality (The Little Things): Client-side Image Resizing of the Flickr Developer Scott Schiller. But there is also a downside - the CSS does not validate anymore... If you can't life with that simply delete line 18 of the imageflow.css and the IE7 will fall back to its default image resampling.

CSS, JavaScript von Finn Rudolph

Phew... that was fun ;D This is a proof of concept. It shows, that one can create a cross-browser compatible right click context menu in JavaScript. And it now even works with Opera (if the user enables some browser settings, which are disabled by default). If you are interested in the Opera Workaround check the Opera forum thread. See the running code at:

http://testground.finnrudolph.de/js/right_click_menu


And if you are interested in the madness behind it I highly recommend reading Javascript Madness: Mouse Events by Jan Wolter.

CSS, Code von Finn Rudolph

Mit CSS kann man viele nützliche Dinge anstellen, die eigentlich schon mit anderen Techniken umgesetzt wurden. Aber da CSS viele Vorteile gegenüber z.B. mit Bildern erstellten Lösungen hat und ich in letzter Zeit ein Balkendiagramm und Sprechblasen brauchte: Yet another...

• bar chart in CSS
• speech bubble in CSS