using images as nodes

[34all]

Good morning,

this demo shows how to use images as nodes. It does this by simply adding a Loader for the respective image to the node while setting the shape attribute null. (you might want to use a shape, an image and a textsprite together also)

The images are appearing in an animated fashion in this demo once the loading process is complete. More important to notice here is that the width and height of an image, if not known beforehand, can only be determined once the image is loaded completely. We use the loading complete event for that matter also to center the image.

Cheers

martin


ps Don't forget to also download the three attached images in order to run the demo (or use your own ones and change the source code accordingly). These images have to be included in the output folder of your IDE.

[misperre]

hi martin,
how would you go about using a textsprite and the loader together?
m

(28-10-2008 02:32 PM)34all Wrote:  Good morning,

this demo shows how to use images as nodes. It does this by simply adding a Loader for the respective image to the node while setting the shape attribute null. (you might want to use a shape, an image and a textsprite together also)

The images are appearing in an animated fashion in this demo once the loading process is complete. More important to notice here is that the width and height of an image, if not known beforehand, can only be determined once the image is loaded completely. We use the loading complete event for that matter also to center the image.

Cheers

martin


ps Don't forget to also download the three attached images in order to run the demo (or use your own ones and change the source code accordingly). These images have to be included in the output folder of your IDE.

[34all]

Hi M,

I would just add both of them as children to the NodeSprite, arrange them according to preferences (picture on the right, text to the left or whatever). Then you might also want to put a shape around them. I personally like to use the htmltext option of textfields once the text gets a bit more elaborated. The result might be looking like done in ramazon

ramazon example,

no magic behind it.

Let us know if you struggle getting something together.

Cheers

martin

[misperre]

thank you Martin!
i actually did get something working before i read your message but it was nowhere close to that Ramazon example. that's really beautiful. would you actually release the source code to that example? i'm curious.
thanks! m

(29-10-2008 03:43 AM)34all Wrote:  Hi M,

I would just add both of them as children to the NodeSprite, arrange them according to preferences (picture on the right, text to the left or whatever). Then you might also want to put a shape around them. I personally like to use the htmltext option of textfields once the text gets a bit more elaborated. The result might be looking like done in ramazon

ramazon example,

no magic behind it.

Let us know if you struggle getting something together.

Cheers

martin

[34all]

Hi M,

I think best you just publish what you have right now in the rawish flapjack forum and then the community will hopefully engage in helping you improving on it. (in ramazon I use a RectSprite for the rounded cornder rectangle shape, not the build in flare node shapes)


Cheers

martin

ps
Sorry, the Node setup in ramazon is pretty much based on ramazon specifics so the source code for the Node creation wouldn't make much sense outside this context. But what it boils down to is really just adding a RectSprite, a Loader and a TextSprite to the node and arranging them accordingly.

[misperre]

great Martin,
that advice has helped a bunch. surprisingly easy. but i will probably post it on rawish at some point to get it just right.
by the way Martin,
what kind of layout did you use in Ramazon?
i want a 'network' layout - kind of like the force directed layout but without the force component. not exactly the tree layout or the circle layout...
m

(30-10-2008 05:16 AM)34all Wrote:  Hi M,

I think best you just publish what you have right now in the rawish flapjack forum and then the community will hopefully engage in helping you improving on it. (in ramazon I use a RectSprite for the rounded cornder rectangle shape, not the build in flare node shapes)


Cheers

martin

ps
Sorry, the Node setup in ramazon is pretty much based on ramazon specifics so the source code for the Node creation wouldn't make much sense outside this context. But what it boils down to is really just adding a RectSprite, a Loader and a TextSprite to the node and arranging them accordingly.

---

[34all]

Hi M,

not a big deal right? I agree a demo would be good if I find time i will put one together - or if somebody else can do it that would be great of course.

Ramazon just uses the RadialTreeLayout as it is, with distance 1. When you start clicking on the colored buttons on the top, the next one is the same layout with distance 2, the next with distance 3. The only selfmade one is the one behind the yellow button, the orange is the CirceLayout and finally the ForcedirectedLayout.

cheers

martin

[misperre]

great! thank you.
i could certainly post mine as a demo after i clean it up.

m

[misperre]

hey Martin,
i am struggling trying to hyperlink a node in a layout.
i noticed in Ramazon you were able to have a hyperlink to amazon.
howd you do it?
thank you, Matea

[protocole]

(28-10-2008 02:32 PM)34all Wrote:  Good morning,

this demo shows how to use images as nodes. It does this by simply adding a Loader for the respective image to the node while setting the shape attribute null. (you might want to use a shape, an image and a textsprite together also)

The images are appearing in an animated fashion in this demo once the loading process is complete. More important to notice here is that the width and height of an image, if not known beforehand, can only be determined once the image is loaded completely. We use the loading complete event for that matter also to center the image.

Cheers

martin


ps Don't forget to also download the three attached images in order to run the demo (or use your own ones and change the source code accordingly). These images have to be included in the output folder of your IDE.

I have dowloaded and run ImageNodeDemo.as but why does it contains error as follows:-

1046: Type was not found or was not a compile-time constant:EdgeSprite
Path:ImageNodeDemo/src
Resource:ImageNodeDemo.as
Location:line 101

Thank you in advance.