Building an interactive catalog for industrial machineries

This is a guest post by Vincenzo Palumbo

Many times we have the need to create a catalog for industrial machineries or even for a simple expresso machine and then try to make it interactive for being used in a simple and clear way by our customers, either on the web or on digital devices such as CDs or DVDs.

I managed to build this kind of catalog by using my background on programming languages and animation softwares, such as PHP, MySQL, AS3, CSS, HTML and Flash. To start with, we need an image representing an expanded version of the components of our machine where we can create the numbering of our pieces (being a technical designer, I made it in 3D). Once chosen our image, we need to open Flash, import the image and create all the components that are going to interact with mouse gestures. Further, we also create the buttons for adjusting the zoom.

We create the AS3 script that will make appear the position, code and description of every single component when we hover with the mouse the components themselves, and also the events that will be attached on the buttons that adjust the zoom. Then when we click on a single component, a popup will be opened showing the component data and the quantity being added to the shopping cart.

All these data are sent to a PHP script that will then process them as if we were on a small e-commerce site, but without payment processing. With HTML and CSS I simply laid out everything and created the menu on the left of the Flash element.

The first menu item, the search engine itself, has been completely developed in PHP with MySQL as the underlying database so that we can search a product by inserting its code or a keyword. Finally, we can export our shopping cart in .doc format. This file can also be attached to the email sent with our order.

You can see a sample here in the DEMO section: http://www.vipastudio.it/manuale/foglio_1.html.

About the author

Vincenzo Palumbo is a tech designer and web developer.