Posterous theme by Cory Watilo

Filed under: flash

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.

Ultramar Express Flash website 2004

The client wanted to convert his PDF promotion book into an attractive Flash website. I created an entirely XML based Flash website, so all menus, texts, image links and even some settings could be modified easily. Translating it also became as easy as editing one text file.

There were more than 40 pages of content. My work consisted in 90% ActionScript programming, and the resulting interface was just 60 Kb. It was reused one year later (2005) for a second web site from the same company. One thing I was proud of was the image slider component I created. I was able to specify in the XML file that in a certain area of the website I wanted to show a number of images. A slide show with configurable transitions would display those images. If they didn't fit the desired area they would scroll smoothly, creating an effect that resembled a movie instead of a static photo. It was like a non-interactive version of Slideshowpro.

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.

 

Cova d'en Xoroi Flash website 2003

In 2002 - 2003 I created this database driven Flash website for a beautiful club in Menorca, Spain. The PHP back office allowed editing all texts in three languages, images, music tracks and featured an on-line shop which connected directly to the banking platform for VISA / Mastercard payment. The back office was able to export Excel files with sales information.

This is one of the few websites I programmed AND designed. It used "pixel fonts", something probably uncommon today. I still find the fake distorted 3D effect rather interesting. The top and bottom menus grow in 3D when the mouse is over them. A friend joked that Apple copied my effect for their OS X operating system :)

I enjoyed creating the code that adds a 3D frame to the image on the right. This was needed because the images can be of different sizes, so the frame must adapt accordingly.

I also really liked how the on-line shop worked: when you clicked on "buy product", an animation made it perfectly clear that the product "flew" into the shopping cart on the right side, updating the total price. It was an interactive "one screen" shop, where you chose the products, entered your data and shipping type, and clicked proceed to the bank web page. I think it was one of the easiest on-line shops to use.