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.
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.
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
June 3rd, 2008 | Quote
Hey German, check out this comment I made in response to someone who experienced the same problem:
That should help you out. Good luck!
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
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..
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.?
April 26th, 2008 | Quote
would be nice to have a demo video on how you put this together.
April 26th, 2008 | Quote
We really like what you did with this mind map!
Matrix
April 20th, 2008 | Quote
Hm… interesting. Very useful sourse, thanks a lot.
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
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
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
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
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
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..
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
January 21st, 2008 | Quote
That quote is from the article you referenced for me below. Thanks again!
January 21st, 2008 | Quote
Really? Strange, didn’t know that yet..
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.”
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
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()
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
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.
December 21st, 2007 | Quote
Hey Rob, no this does not support freemind.
December 20th, 2007 | Quote
Does this support freemind?
November 26th, 2007 | Quote
thanks!
November 26th, 2007 | Quote
Hey Eric, thanks and nice job on the mindmapviewer too!
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/
November 24th, 2007 | Quote
Thanks very much everyone, appreciate the feedback
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!
November 24th, 2007 | Quote
beautiful and clean design!
November 24th, 2007 | Quote
This is a fantastically useful bunch of source code here! Thanks so much for sharing!