Posterous theme by Cory Watilo

Filed under: actionscript

Robotlegs class diagram

I've started using the Robotlegs AS3 library to better organize the source code of my Flash map. Sometimes I have a hard time understanding diagrams and documentation. It happened when reading the PureMVC documentation, and it happened again while learning Robotlegs. I believe the documentation sometimes assumes many concepts are familiar. I find many words used are too abstract and non specific. Instead of having to read 20 or 30 pages several times, I'd like a short list with rules, a numbered list of steps required to make it work. I miss a one page long explanation, which I think is perfectly possible. I remember taking diagrams from a popular AS3 book, moving some boxes around and the result would be so much simpler, more symmetric. It was like playing this untangle game. When I first had a look at the Robotlegs diagram I didn't really get it. I found the lines with 90º turns hard to follow, and I had to search for those numbers one by one. So I remade this diagram using curved lines. I tried to make it possible to understand the code flow effortlessly, following just one line from start to end. Hopefully others also find it simpler.

source file for the updated Robotlegs diagram in Inkscape SVG format.

I hope this is seen as constructive criticism. The Robotlegs micro-architecture is an excellent piece of software. I just believe documentation can often be refactored and its dependencies from previous knowledge removed.

Updating my interactive Flash map

Last weeks I've been working on releasing a new version of my Flash map. The old one was a world map. I plan to separate the world from the map, so one could have maps of each country or city. It's kind of hard because the source code is very old and unstructured (ActionScript 1!). But it's getting better. I've been also reading an interesting book called "Hackers and Painters". The author talks about Lisp as a great programming language.

From my experience with Autolisp (for scripting Autocad) 10 years ago I could not experience the greatness of the language. Today I decided to have a look in the Internet and find out what could I do with it in 2010. I found this:

Media_httpimgsxkcdcom_gfhzj

FotoVista360 / WeDo360

I started my own virtual tour project early 2006. I tried pushing the limits both in hardware and software for three years, working together with my brother. We probably created over 30 virtual tours in Mallorca, Madrid and the Canary Islands. But we finally gave up and sold the equipment. We used a one-shot 360º lens I ordered from USA.

  • Full screen VR panoramas help people sell their properties.
  • Fast even in full screen mode
  • Windows, Mac and Linux compatible
  • Hotspots and an interactive 3D Flash map ease navigation between rooms.
  • Flash map design tool allow easy creation of isometric maps.
  • Quick previews and incremental rendering make it feel quite responsive.
  • An info layer provide information about each room when desired.
  • Custom JAVA applet configuration.
  • Self made 360º photography with dedicated equipment.

I will later update this post and explain all the software and hacks we used to be able to create virtual tours quickly and for a low price.

Database driven Flash sites

These are some database driven Flash projects I built as a freelancer in Berlin.

electrobot.de

36 kb Flash interface, database driven. Includes audioplayer. Texts, images and music can be updated using the backoffice system.

urbanpachanga.de

Music scene website. Texts, images and music can be updated using the back end system.

mrmcb.com

Mrmcb
Mano Rirver Multicultural Band

antida.info

Antida
Updatable (XML driven) front page. (web created by imagina2.org)

arturo-pantaleon.de

Arturopantaleon
Converting a Flash website designed by DOT-Project into a database driven site.

Balearic islands Flash map

  • Interactive map where the client can add unlimited icons (using a simple backoffice) that represent beaches, golf camps and other interesting places.
  • Formulas calculate a smooth motion path from country to country.
  • Data is stored in compressed XML format, no database required.
  • PHP or ASP required only for saving functionality.
  • New icons and text formats can be easily added.
  • Can be configured using several parameters (zoom speed, autozoom, hide icons...).
  • The back office lets you add, change and remove texts and icons. 

This project was created for Planeta web / illesbalears.es in October 2005.

Create Garito Café V2.0 web site

I developed the second version of garitocafe.com in 2005. It included over 50 hours of streaming audio and video. Again, it's a fully database driven Flash web site. I created a dual server set up, where part of the data was in Europe and part in USA. The servers communicated with each other. The whole Flash interface was only 30 kb heavy, and all texts and media were loaded on demand. I programmed a mailing list with delivery control so recipients could be easily removed if their addresses no longer existed. The mailing system allowed previewing HTML e-mails with images, and exporting of all contacts in VCard format. The Flash web site had a parallel HTML site so search engines could index and link to any part of the site. The site interface was pure ActionScript, including layout, animation and interactivity. The design concept was again done by EggCommunity and I did all the rest (layout, PHP + MySQL backoffice, animation, ActionScript programming, mailing system).

Create Flash Form system

In 2004 I created this form system for medical investigations about breathing problems. Looking back at it I see it's similar to what Macromedia/Adobe later built with their Flex platform, or the XForms standard: I created my own XML syntax to define forms with thousands of inputs, limits, validation, rules and plugins. This same system was used in 5 different investigations for gathering data from thousands of patients.

The whole interface was only 34 kb heavy (unlike Flex applications which tend to be much heavier, even for a "hello world"). The XML was parsed on runtime, so editing XML form definitions was a very quick proccess. 

  • Multi page form printing with intelligent layout using Flash.
  • Data is read from and stored in MySQL database using AMFPHP remoting.
  • Data can be exported in Excel format for analysis.
  • Flash Plug-in system makes it possible to leave the system unchanged when using the form in new investigations that require new automatic calculations. Those are added in external SWF files.
  • Fields include tooltips indicating valid ranges.
  • Data is validated, completion progress indicated.
  • Interface colors and typography are defined in external CSS file (using a method I invented).

The project was handed to me by Juan Cardona.

Flashmapa (Flash world map)

This project started in 2004 as a map for Planeta web and their client htwtravel.com and it evolved into a product. It was used by around 30 web sites around the world. I started a full rewrite in ActionScript 3 and about 60 new country maps, but it's not clear I will finish the new version since I'm now less interested in programming and looking more into education and free software.

It's has been a moderate success. Many people showed interest and some people bought a copy. But being a one-person team is not easy, and I'm better as a developer than as a marketing / sales person. Everything that follows is copied from my old 314bits.com website where I showed all my work. You can read more details at flashmapa.com.

  • Interactive map where the client can add unlimited icons (using a simple backoffice) that represent real world items (hotels in this case).
  • Formulas calculate a smooth motion path from country to country.
  • Data is stored in compressed XML format, no database required.
  • PHP or ASP required only for saving functionality.
  • New icons and text formats can be easily added.

Public interface (demo)

The public interface lets you zoom into countries and click icons that link to new web pages.

Try zooming into a country, then clicking a neighbouring country.

Back Office (demo)

The back office lets you edit texts and icons. Drag texts and icons from the panel to the map to create new elements. Drag them in the map to move them to a new position. Click them to edit or delete.

Zoom into Spain to see many icons. 

 

FlashMapa editable animated map

Add an Interactive Flash Map to your website to show locations around the world or the Balearic islands (more locations to follow):

  • location of company offices
  • where each user in your online community lives
  • data analysis and world information (population, economy, etc.)
  • the countries you have visited or photographed.
  • location of houses, beaches, golf camps, gas stations, etc.

Details:

  • Add, change and delete texts and icons easily, with the Flash based Back Office.
  • No Flash knowledge required. No database required.
  • Ready to use. Have it running in your website in 3 minutes.
  • Fully customizable! Change grid color and opacity, background colors, animation speed, country names and colors. You can also create new icons and replace the back button.
  • Icons in your map can be linked to any web pages or other (more detailed) maps.

Requirements:

  • Some web space with FTP access and PHP 4 or 5 running in the server (if you have a website you probably have these already).
  • You should be able to password protect the FlashMapa admin folder in your server (usually done with the control panel of your hosting company)
  • You should be able to change directory permissions to make one folder writable (can be done usually with any FTP client).

FlashMapa launched!

Due to the amount of work I haven't been able to launch the new website showing how great FlashMapa is, but the map is already being used in about 20 websites around the world. Will yours be the next? 

If you want to be notified when the new website comes out, please send me a message using the Quick Contact form in the main window.

 

Satellite tracking and MapServer Flash interface, 2001

The idea behind the Ikarus project was to create a web platform to control satellite communicators in different ways. Together with my cousin Carlos we created the first version of this web platform in 2001. The plan was to be able to see in an interactive map where your truck, boat or airplane was at the moment, where it had been in the past, read variables sent from the devices (for example pressure, temperature), and be able to send and receive messages from those devices. The hardware used the Orbcomm satellite network and the whole concept was created by my friend Miquel.

The main parts of my work were creating a back end, a front end (both using PHP and MySQL), and a Flash based MapServer interface component. This 15 Kb component was quite innovative at the time. Normal use of MapServer required clicking arrows which would reload the whole page (at a time where people still used modems). I created a map interface that could be simply dragged around, the same way Google Maps did it 3 years later. It took more than 5 years for similar web map interfaces to become popular.

MapServer was able to generate images in different formats. I realized that if I used PNG images the file sizes were really small, less than 2 kb most of the time. But Flash was not able to load PNG images so I did a PHP script that would do server side PNG to SWF file conversion on the fly. It worked really nicely. The project did never really take off. It was hard to sell this idea in Mallorca, where we lived at the time. To prove how useful it could be Miquel designed a floating transmitter and offered it for free to track the oil spill in north Spain in 2002. Unfortunately no one seemed to know who was taking the decisions during this crisis, and the help was never accepted. In 2003 our system was tested in a boat expedition from Mallorca to the Antartic. We created a simple web page for this project, which would receive coordinates, texts and photos from the boat, and present them as a blog. At the time I was quite proud of using CSS. I think it was probably the first time I developed and styled the whole web site using style sheets. It made it so easy to update!

Flash closet design tool with 3D rendering, 2002

In 2002 I was asked to create a complex website for a closet design company in Mallorca. The idea was to build an on-line tool for designing closets. This tool would be used by employees in front of customers visiting their shops, and directly by customers at home over the Internet. This was one of the most complex  projects I've finished. It took me six months.

Unfortunately after it was finished the owner of the company changed, and the new owner was not interested in having a web page at all. The project included:

  • The corporate website which I designed.
  • The back office which allowed a complete follow up the process, from design to construction and invoicing. It was possible to enter all kinds of materials, sizes, prices based on ranges... gives me a headache just to think about it :)
  • On line Flash/ActionScript design tool. It allowed designing both inside and outside of the closet, including drawers, shelves, bars, divisions, sizes, walls, materials, doors. Rules defined conditions of what's allowed in a design and what not. Simple key short cuts allowed creating designs fast. The whole Flash tool was only 23 Kb. Did I mention I like optimizing? :)
  • I created a 3D rendering server using Flash, PHP and POV. Photographic quality and lower rendering times were tested using radiosity and a more powerful PC, but the client was not interested. I built this server concept in such way it could be installed in many computers, even home computers with non permanent Internet connection, a bit like SETI at home. Computers would ask the main server if there were pending renders to do, and if there were any, the information would be downloaded, the image rendered, and sent back to the server.
  • Printing of closet details: dimensions, materials, and the 3D image. This print out would be used for constructing the closet. The page design was done using ActionScript for precise layout and font control, as opposed to HTML which gave unpredictable and limited results.