Interactive mindmap

As promotional material for today’s view day at my course I made an interactive mindmap which was beamed onto one of the walls of the classroom of the ‘Next Web’ minor.

I got some really positive responses so I decided to post it here, click the screenshot below to check it out (navigate by clicking an element). Also feel free to check out the source-code.

Credits also go to Mark Shepherd, I used his very very awesome and super-easy to use SpringGraph component. I also used Maikel Sibbald his Sticky ToolTip for the description of every element, so thanks man.

On top of that I used the Flex component kit for Flash as to be able to create the visual effects of elements in Flash.

34 Responses

Note that comments are displayed in reverse chronological order with topmost comments being freshest. Subscribe | Comment
  • João says so:
    June 20th, 2008 | Quote

    Hello, please
    anybody help ?

    1144: Interface method get isPopUp in namespace mx.core:IUIComponent is implemented with an incompatible signature in class WidGet.

  • Leandro Guilherme says so:
    June 20th, 2008 | Quote

    Hi, Ruben
    I try open a project in CS3, and the following errors keep showing
    please can you help me?

    Type was not found or was not a compile-time constant: SpringGraph.
    1120: Access of undefined property Controller.

    Thanks

  • Ruben says so:
    June 3rd, 2008 | Quote

    Hey German, check out this comment I made in response to someone who experienced the same problem:

    In the root of the project-source there’s an SWC-file, right-click the mindmap-project in Flex Builder and select Properties, then go to the the Flex Build Path menu and select the Library Path, hit the Add SWC button and fill in the path to the SWC in the appeared prompt. That should do it..

    That should help you out. Good luck! :)

  • German says so:
    May 29th, 2008 | Quote

    hi ruben, im triyingto run under flex CS3 and im getting these errors.
    what can i do?
    please help me if you can.

    congratulations for your great job.
    sorry for my english im from argentina

    Severity and Description Path Resource Location Creation Time Id
    1046: Type was not found or was not a compile-time constant: NodeRenderer. mindmap/src/com/rubenswieringa/interactivemindmap NodeRendererShell.as line 10 1212096452718 18
    1180: Call to a possibly undefined method NodeRenderer. mindmap/src/com/rubenswieringa/interactivemindmap NodeRendererShell.as line 10 1212096452718 19
    1180: Call to a possibly undefined method NodeRenderer. mindmap/src/com/rubenswieringa/interactivemindmap NodeRendererShell.as line 10 1212096452718 20

  • Ruben says so:
    April 29th, 2008 | Quote

    Hey Fernabel, I think what you’re after is much more the functionality of the SpringGraph component than the mindmap-implementation I made with it, I think you’ll get better answers if you ask your questions in the blogpost dedicated to SpringGraph..

  • fernabel says so:
    April 28th, 2008 | Quote

    Hi great work ruben. I have a question, i want to put a menu over the nodes, just like bubbl.us nodes. How can a do something like that? and more important how can i send the events of that to flex.?

  • Matrix Systems & Technologies, Inc. says so:
    April 26th, 2008 | Quote

    would be nice to have a demo video on how you put this together.

  • Matrix Systems & Technologies, Inc. says so:
    April 26th, 2008 | Quote

    We really like what you did with this mind map!
    Matrix

  • Adam Cetler says so:
    April 20th, 2008 | Quote

    Hm… interesting. Very useful sourse, thanks a lot.

  • Paul Foreman says so:
    April 15th, 2008 | Quote

    Thought I would add details of my Hand-drawn (& painted) Mind Maps…I have a website at - http://www.mindmaps.moonfruit.com It could help spark ideas for you and your readers. Everything is FREE to download including example Mind Maps.
    Regards
    Paul

  • Ruben says so:
    April 2nd, 2008 | Quote

    @Lee: Strange, hard to tell what’s causing this error, try it out in Flex 2 and see if it still gives you any errors..

    @Alex: Yes it does generate a mindmap at the hand of an XML-datafile. However, the FLA-file only functions as a source-file for the graphics used in the mindmap, the actual mindmap is a Flex-project, so you’ll need Adobe Flex to adjust it to your likings:
    adobe.com/go/flex

    @jari: Not a clue, sorry. I haven’t tested this project in Flex 3, strange error though :S

  • jari says so:
    April 1st, 2008 | Quote

    Hi

    Very nice stuff! I have tried it with Flex3 builder and I got :
    ToolTipManager$/http://www.adobe.com/2006/flex/mx/internal::registerToolTip(). 3 prévu(s), 2 détecté(s).
    So an error in ToolTip 3 arguments instead of 2 detected
    Have you an idea about this error?
    Best regards

  • Alex Souza says so:
    March 21st, 2008 | Quote

    Hi, I’m a new Flash CS3 designer and I’m amazed with your demo. I’d like to have a mindmap like that in my website but I’m having some difficulties with that. I installed the Flex component kit and your code. I opened the flashcomponents.fla and tried to execute it. The new swf file just shows a green object (no interactions, nothing). I though your code only needed a XML file with the data to generate the map. What am I missing?

    Thanks a lot,
    Alex

  • Lee says so:
    March 3rd, 2008 | Quote

    Hey Ruben,

    While using Flash CS3, Flex component kit for Flash, and Flex Builder 3 (build 3.0.194161), I open the flashcomponents.fla, publish the SWF, highlight the 4 movieclips in the library and choose Make Flex Component.

    I’ve not made any modification to the FLA, but receive the following error when Running the interactive map:

    TypeError: Error #1006: setSkinByID is not a function.
    at com.interactivemindmap::NodeRendererShell/startup()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\NodeRendererShell.as:52]
    at com.interactivemindmap::NodeRendererShell/set data()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\NodeRendererShell.as:96]
    at com.adobe.flex.extras.controls.springgraph::SpringGraph/createComponent()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:454]
    at com.adobe.flex.extras.controls.springgraph::SpringGraph/newComponent()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:243]
    at com.adobe.flex.extras.controls.springgraph::GraphDataProvider/makeGraphNode()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\GraphDataProvider.as:42]
    at com.adobe.flex.extras.controls.springgraph::GraphDataProvider/set graph()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\GraphDataProvider.as:82]
    at com.adobe.flex.extras.controls.springgraph::SpringGraph/rebuild()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:577]
    at com.adobe.flex.extras.controls.springgraph::SpringGraph/graphChangeHandler()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:544]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at com.adobe.flex.extras.controls.springgraph::Graph/changed()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\Graph.as:343]
    at com.adobe.flex.extras.controls.springgraph::Graph/add()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\adobe\flex\extras\controls\springgraph\Graph.as:229]
    at com.interactivemindmap::Controller/addItem()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\Controller.as:115]
    at com.interactivemindmap::Controller/build()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\Controller.as:81]
    at com.interactivemindmap::Controller/onModelReady()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\Controller.as:58]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at com.interactivemindmap::Model/store()[C:\Documents and Settings\lcalcote\Desktop\PDM\com\interactivemindmap\Model.as:37]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    Are you using Flex Builder 3 to build your project? What you suppose has created this error?

    Love your app. Thanks much for your help,
    Lee

  • Ruben says so:
    January 31st, 2008 | Quote

    Hey raghuram, thanks for the kind words. Here’s what will solve the issue you’re having (mind that you’ll need to have Flash CS3 and the Flex component kit installed):

    If you open the .fla-file that is included in the source you’ll see one movieclip on the root, if you go inside (double-click) it you’ll see a range of layers and keyframes.
    In the layer-folder ‘backgrounds’ there’s a layer called ‘2′, go inside of the movieclip that it contains (its instance-name is ‘background_mc2′).

    The movieclip you’re in now is the template for any item in your XML-file that is directly under the root-item; so in the demo I have online that would be the 5 colored items (“web2.0″, “producten”, etc).

    The reason why your 6th item and every item after that were all grey is because the background_mc2-movieclip only has 6 frames, of which the last is light-grey.

    What you need to do is change the contents of the 6th frame, and if you want to add more frames with more colors.

    Do note that after you have changed the .fla you will need to re-publish and make sure that the original .swc-file is replaced with the published one (the .swf-file is where the Flex-project gets its Flash-visuals from).

    Oh and if you (or anyone) would like a little more explanation on the subject of the structure of the .fla-file then please don’t be shy to ask me to do so.. :)

  • raghuram says so:
    January 25th, 2008 | Quote

    Hi Ruben

    Great work indeed. I tired adding a few more nodes to the main root . The problem I am facing is that, only 5 nodes are colored. Any extra nodes are coloured grey by default and makes it difficult to read. How do I attempt to solve this?

    Thanks for your help

    Cheers
    Raghuram

  • Arnold says so:
    January 21st, 2008 | Quote

    That quote is from the article you referenced for me below. Thanks again!

  • Ruben says so:
    January 21st, 2008 | Quote

    Really? Strange, didn’t know that yet..

  • Arnold says so:
    January 21st, 2008 | Quote

    Thanks Ruben - I remember this now - and decided not to do this in my application programmatically because:

    “Users cannot enter text in text input fields while in full-screen mode.”

  • Ruben says so:
    January 21st, 2008 | Quote

    @Lee: In the root of the project-source there’s an SWC-file, right-click the mindmap-project in Flex Builder and select Properties, then go to the the Flex Build Path menu and select the Library Path, hit the Add SWC button and fill in the path to the SWC in the appeared prompt. That should do it..

    @Arnold: The reason you’re getting the error is because you should set the allowFullScreen parameter of the embedded SWF to true from within your HTML (it’s a security-thing).
    Check out the HTML source-code for the online demo (index.html) to see how I did it.

    And here’s some recommended reading:
    Exploring full-screen mode in Flash Player 9 - Adobe Developer Center

  • Arnold says so:
    January 21st, 2008 | Quote

    Hi Ruben,
    I love mindmapping. I ran your interactive mind from your site then I ran it after compiling the source code both local and off of a remote server. The full screen button works perfect from your site in IE7 and FireFox for me but on the compiled version I got this error below. Is there something different between the source code provided and the program on your site regarding this?

    Appreciate you help on this! Thanks!
    Arnold

    SecurityError: Error #2152: Full screen mode is not allowed.
    at flash.display::Stage/set displayState()
    at main/fullscreen()
    at main/__fullscreenButton_click()

  • Lee says so:
    January 15th, 2008 | Quote

    Hi Ruben,

    Still banging my head on this error. Any ideas as to why I’m getting this compilation error?

    Thanks,
    Lee

  • Lee says so:
    January 11th, 2008 | Quote

    Hey Ruben,

    Very cool mind map. What am I doing wrong? After downloading the source you’ve posted, importing as a new Flex project and trying to Run, I receive this error in the NodeRendererShell.as on line 10:

    1046: Type was not found or was not a compile-time constant NodeRenderer.

  • Ruben says so:
    December 21st, 2007 | Quote

    Hey Rob, no this does not support freemind.

  • rob says so:
    December 20th, 2007 | Quote

    Does this support freemind?

  • suc says so:
    November 26th, 2007 | Quote

    thanks!

  • Ruben says so:
    November 26th, 2007 | Quote

    Hey Eric, thanks and nice job on the mindmapviewer too! :)

  • Eric Blue says so:
    November 26th, 2007 | Quote

    Hi Ruben,

    Wow, this looks fantastic! I’ve been looking for something like this for a while. Coincidentally, I just finished working on a mindmap viewer that allows you to embed maps(simple flash,applet) in your site. I’m a newbie to Flex and Flash, but your code looks very promising.

    http://eric-blue.com/blog/2007/11/mindmap_viewer_share_and_embed.html
    http://eric-blue.com/projects/mindmapviewer/

  • Ruben says so:
    November 24th, 2007 | Quote

    Thanks very much everyone, appreciate the feedback :)

  • Matthijs Roumen says so:
    November 24th, 2007 | Quote

    As I told you before: Very freakin’ awesome!
    The mindmap really gives a clear overview of the Next Web minor.

    Great job Ruben!

  • wenzhi li says so:
    November 24th, 2007 | Quote

    beautiful and clean design!

  • Chad says so:
    November 24th, 2007 | Quote

    This is a fantastically useful bunch of source code here! Thanks so much for sharing!

Trackbacks:

Leave a Reply