Ruben’s blog

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

beautiful and clean design!

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

Great job Ruben!

Thanks very much everyone, appreciate the feedback

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/

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

thanks!

Does this support freemind?

Hey Rob, no this does not support freemind.

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.

Hi Ruben,

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

Thanks,
Lee

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: 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

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.”

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

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

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

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..

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

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

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

@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

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

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

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

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

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.?

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..

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

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

quote from Ruben:

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!

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

Hello, please
anybody help ?

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

Thanks it’s exactly what i need but i’m not good in flex and i can’t view the file/ I’have this error when i try to run the project : “this file cannot be lauched”. Could you please tell me e‹actly what I have to do ? thank for your answer , Anne from Paris,

@Leandro: You’re probably trying to run it from Flash, the mindmap is a project for Adobe Flex. The .fla file that is in the source-code package is merely a graphical asset.

@João:Are you getting that error during run- or compile-time, could you provide a little more detail? To be honest it doesn’t make a lot of sense to me.

@anne:The mindmap is a Flex-project, so you’ll need to go get Adobe Flex Builder in order to get started with it. When you’ve imported the source-files into a Flex-project you’ll need to link the project to the .swc file (also in the zip-archive), see the comment I posted about this.

Also, people seem to be having some problems with getting the project working in Flex 3 (rather than 2), I have not yet looked into it long enough to solve this issue.

Good luck!

Hi Ruben,

This looks promising. However, where is the NodeRendere Class gone?
private var nodeRenderer:NodeRenderer//*Base/ = new NodeRenderer();/// as NodeRendererBase;

By using a node NodeRendererBase in instead, I get lots of problems to find, and stick the text in the TextFileds. Have you got a version more compliant to Flex 3?

I look forward to using your mindMap!

Many thanks

Hi Ruben, really great component. The code is amazing and has really taught me a lot about Flash/Flex integration. I’m having a similar problem to raghuram below where I’m trying to add more colours to handle more second level nodes. I added more frames to the nodeRender but then when I reexported the swc file the root node (which is normally black) shows up as blank. The text is still visible but the background is blank. I’m using Flash CS3 and Flex 3. Any suggests you could have would be really appreciated.

Well I fixed the problem. For some reason Flex wasn’t liking the backgroundMC1 the way it was built so I removed the Mask layer and rebuilt the graphics without the mask and it work perfectly. Hope that helps if anyone else has the same issue.

Hello,

thanks for the component I have a couple of questions which maybe someone could help me with?

How do I use the flash swc file to alter the appearance of the project?
Also how can I add hyperlinks to the XML when you click on a node, I’ve tried a number of different methods and all end up with parser errors.

regards

Stefan

Sorry I forgot the most important question, which is how do I control the distance between the main node and the sub nodes orbiting around the center?

Many thanks for any assistance offered

Excellent component. I have been looking for something like this for a while. I had a bunch of questions.
1)Is it possible to update this code to Mark Shepherd lastest code where he has included bunch of new features?
2)How do I change the size of the nodes text/noze display size? I have only one level but lots of nodes for the first level itself.
3)Also, where do I change the code of the first node which is black currently?

Appreciate your help. Thanks in advance.

-Roma

hello,
thanks for creating such a product. I got couple of questions to ask. why repulsion factor is not at all working in the graph.If I want to add repulsion , how can i do that?

Hi, fantastic job! exactly what I was looking for. I got it all working and managed to make some customizations to the node colours. The only problem I have now is that whenever I republish the swc file the central (black) node dissapears and I am left with the white text only – no main node background image. Any ideas as to why that happens?

Thanks for this demo Ruben!

The “1046: Type was not found or was not a compile-time constant: NodeRenderer.” in NodeRendererShell.as is mystifying me though (Flex 3).

I’ll have a crack at debugging it but I am hoping some people have already done this?

Thanks

Jono

Niiiiiice!

This is great! Thank you! Can a mind map of this extent be developed in Flash alone? Or is this something that can only be developed in Flex? Thanks Again!

Thanks for this demo Ruben!

The “1046: Type was not found or was not a compile-time constant: NodeRenderer.” in NodeRendererShell.as is mystifying me though (Flex 3).

I’ll have a crack at debugging it but I am hoping some people have already done this?

Thanks

Great thing you developed here!

Anyway… When i publish this with Flexbuilder 3 I can only see a blank blue screen Any suggestions? thanks alot!

Ok fixed it -sorry
I made a mistake while creating a Flexbuilder 3 Project…

Great work once again! thanks alot!

vgod: How did you get it working in Flex 3? It looks like many of us would like to know.

Ruben — this is really inspiring stuff. I love it that (if I could get it to work in Flex 3) I could play with it at several levels. Just modify the XML to get my own content, or start making changes to the layout and the math of it. This is the kind of thing that puts the fun into learning-by-example. Thank you!

Great, I got it working in Flex 3! The only things that had to change were:

(1) Add flashcomponents.swc to the build path (per the instructions Ruben already posted).

(2) Rearrange project resources as follows (Flex 3 wants some items in #src that used to be at the top level):

> Flex project name (top level)

>> bin-debug [automatically generated in new project]

>> html-template [automatically generated in new project]

>> libs [automatically generated in new project]

>> #src

>>> assets [folder]
>>>> mindmap.xml
>>>> styles.css

>>> com [folder]
>>>> adobe [folder]
>>>> rubenswieringa [folder]

>>> nl [folder, with fxc >> skins underneath it]
>>>> flashcomponents.fla
>>>> flashcomponents.swc

>>> main.mxml

I got the same Tooltips errors as listed above, when I placed “nl” underneath “com” instead of at the same level of “assets” and “com”.

Hope this helps!
–Rachel

Hey there Ruben. Great stuff! Do you have any thoughts on how easy it might be to make the leaf level of the mindmap clickable? Essentially I’d like to be able to launch websites by clicking the leaves.

Hi,
I am new to Flex. I am unable to import zip folder of the mindmap, However I have created individual files into my flex workspace, but it does not work. I am using Flex 3. Could you please help me to sort out the problem. Thanks for your time.
/Danish

Hi,
With reference to my previous post. I have solved the problem.

Thanks any way.
Danish

I would love to use this but need some instructions on getting it to work with Flex 3 (which I have only just downloaded). I do have considerable experieince with actionscript, but Flex is new to me. Could someone who has worked this out please post detailed steps.

I am looking at using a form with this so that users can add nodes to the XML.

Hi Ruben,

I want to load an XML variable to bring the database. I mean that instead of using an XML file, I use a variable of type xml to bring the loaded database.

How can I do?

Thank you very much

Hi, guys, someone found a solution how to change the font size of the nodes?

Thanks in advance!

Jenny

Hi Ruben and all,

Very good work!

But someone know how to show correctly accentued french letters?

I tried in vain: in the xml files; but I think the solution is somewhere else, and I don’t know where…

Thanks!

Hi
If I need to change the layout style( making the root node at the top( vertical), and make the childs appear below it, and also make the links come down straight ( instead of angular), which parts do you think I need to touch, is it NodeRendererShell or itemRenderer .

Ruben–your mindmap and its source code is amazing and helpful. Do you know of any way I could add hyperlinks to the XML file? I would like to experiment with linking to outside pages.

Any help would be greatly appreciated.

Thanks again and great work!

Great work., Ruben. Does anyone know how to show tooltip over the edge in the SpringGraph. I’d like to show the number of links, source node and destination node when mouse hovers over the edge. Any clue will be greatly appreciated.

its a very nice example,
i ve a question about xml, i need
is it possible to use an xml class, instead of loading an external xml file?

hello,
thanks for nice mindmap

i had 2 problems

1. nodeRenderer problem but readed previews posts and got it solved
2. Call to a possibly undefined method getTimer.
Interactive mindmap/src/com/rubenswieringa/interactivemindmap NodeRendererShell.as line 27(and 37) 1275236780687 466601

any idea how to solve and 2 problem?

thanks again
regards

ahm nvm, i fixed it
import flash.utils.getTimer;

but now geting this
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.rubenswieringa.interactivemindmap::NodeRendererShell/startup()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\NodeRendererShell.as:44]
at com.rubenswieringa.interactivemindmap::NodeRendererShell/set data()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\NodeRendererShell.as:89]
at com.adobe.flex.extras.controls.springgraph::SpringGraph/createComponent()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:454]
at com.adobe.flex.extras.controls.springgraph::SpringGraph/newComponent()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:243]
at com.adobe.flex.extras.controls.springgraph::GraphDataProvider/makeGraphNode()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\GraphDataProvider.as:42]
at com.adobe.flex.extras.controls.springgraph::GraphDataProvider/set graph()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\GraphDataProvider.as:82]
at com.adobe.flex.extras.controls.springgraph::SpringGraph/rebuild()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\SpringGraph.as:577]
at com.adobe.flex.extras.controls.springgraph::SpringGraph/graphChangeHandler()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\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\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\Graph.as:343]
at com.adobe.flex.extras.controls.springgraph::Graph/add()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\adobe\flex\extras\controls\springgraph\Graph.as:229]
at com.rubenswieringa.interactivemindmap::Controller/addItem()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\Controller.as:115]
at com.rubenswieringa.interactivemindmap::Controller/build()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\Controller.as:81]
at com.rubenswieringa.interactivemindmap::Controller/onModelReady()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\Controller.as:58]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.rubenswieringa.interactivemindmap::Model/store()[C:\Documents and Settings\Admin\My Documents\Flex Builder 3\Interactive mindmap\src\com\rubenswieringa\interactivemindmap\Model.as:37]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

:**(
looks like can’t open xml? but it’s there and when debug it’s taking values from xml…

can anyone help

I am facing problem number of depth for mindmap nodes.
I have tried to increase node layers in .fla but still object is not displayed perfect output while I am passing XML with more than 5 level of node structure.
any idea will be heartly appreciated.