Component creation help, please!

[esc_oblivion]

I've been patiently attempting to successfully create my own window component, and so far I've met with little success. My latest attempt has the various slices all in their approximate correct locations; i.e. top-left, top-middle, top-right, middle-left, middle-middle, middle-right, bottom-left, bottom-middle, bottom-right... but they don't lineup correctly, it basically all comes together disjointed.

This is my 2nd full-fledged attempt at creating a window from scratch in various vector based drawing programs (Freehand, Illustrator), and using the vector tools of others (Fireworks, Photoshop).

All I'm focusing on is the basics of creating the image slices, and then I plug those slices into the "completed window" code from the tutorial on how to create a window.

The code appears to work correctly, since it arranges the slices in their generally correct locations - so it must be something with the way that I'm either slicing and exporting the images, or how I'm creating them.

In any case it's extremely frustrating because I'm not sure where I'm going wrong.

Would it be possible to get a far more detailed tutorial on the specifics of creating a window? I.e. Step by step instructions (screenshots would be VERY appreciated) on how to create the window from image, to slicing, to exporting. Even if you guys at Laszlo only use one specific program to create the components it still be infinitely helpful to know exactly how you do it...

I know this isn't an easy request, but I'm at my wits end, but I like Laszlo so much that I don't want to give up on it... so... please? purty please?

- Abe

[thecow]

Just checking, but I am guessing you already went through the window tutorial that comes with the server docs?

[3.14]

i've also built my own window component and it appears that images that don't lineup correctly is a recurrent issue... ;o)

the thing is that i had to set the 'y' attribute of both top-middle and bottom-middle views to have them lining up with their sibling views.
for example, try to add y="1" to your top-middle view and see if it fixes your problem; if not adjust it

to go further into the issue, i suppose this is a Flash problem; in fact, if i zoom on my window when the lineup is good when unzoomed, then images are not aligned when zoomed; and vice versa (uuh, don't know if this is clear...)

[esc_oblivion]

Thanks for the suggestion 3.14 - that's a good idea. I had given something like that brief thought, but I do want to know how exactly the Laszlo people were able to construct components that didn't require messing with to get to work.

Yeah, I did the Window tutorial backwards and forwards. :-( Hence, my frustration.

[3.14]

for the last 2 weeks i've been building a components' library for a research project that requires an eye-candy interface; based on my own experience, i can tell you that once you understand and take to practising Laszlo, you really don't have to 'mess' with anything to get things to work

Laszlo is a very intuitive language, it's the one i would advocate for someone who would want to build RIAs (and i have also some experience with Flex...)

[esc_oblivion]

I agree that the language is very intuitive, and comes naturally once you get going with it. I'm just having problems getting the graphical elements to plug-in correctly. UGH.

I think if I can get over this window problem then I'll have enough understanding to apply what I learn to the creation of other components, but until then, I'm out of luck.

What programs do you use 3.14 to create your interface? I have Macromedia Studio, and Adobe Creative Suite... but I haven't been able to get either to work for me effectively.

For one thing, it seems that I should be able to slice up my image, and then just export all the slices as .swf's. However, the easiest way I've found thus far is to select each slice individually in Fireworks and then "export selection" as a .swf.

I know that a couple of the programs allow the exporting of layers as separate .swf files, but that doesn't help me since the creating of vector art doesn't create layers of that sort.

[antun]

A lot of comments on this thread are very interesting to me. You guys should always feel free to post code that's confusing you to the forums.

The window artwork from the Window Tutorial was drawn in Flash 5. I was given the original FLA file from a Dashboard concept written a long, long time ago, when the LPS was half-baked, and we used Flash to do a lot of the artwork.

I remember that slicing it up was a bit fiddly, because the snap of the Flash authoring environment isn't really built for accurate drawing (for example, you can't snap a guideline to something, and at least in Flash 5, you can't absolutely position a guideline by giving it a x or y coordinate). I think I did a lot of absolute positioning of objects to 0,0 on the stage (using Flash'es dialog boxes), so that the images would line up correctly inside of a view. (Otherwise, if you put an object in the middle of the Flash stage, and export that, you'll end up with a large SWF with your object in the bottom-right hadn corner - that might be the casue of the offsets you're all seeing). Also I resized the canvas to fit the dimensions of each piece - really laborious, and I don't think it was necessary, since any whitespace to the right and bottom of your object is probably ignored.

That said, Illustrator is meant to be a very good package for drawing accurate SWFs - it can publish Flash 5 SWFs, and is better suited to accurate drawing.

Now as for image types, you can use GIFs, PNGs or JPEGs for anything that will remain constant size. (The four corner resources in a window for example). Now for any resource that has to stretch, you have to use a SWF, because it's a vector format, so it will stretch well. Since you have to do some vector pieces for most components, you might as well do all vector components.

Does that help?

-Antun

[peter]

Antun is completely on the right track, and hopefully his insight has already cured your maladies.

If it is possible, please submit a screen grab of your window troubles, and let me know where the resources were created. This would greatly help in diagnosing the problem.

To reiterate and expand on Antun's points:
It is crucial that the dimensions of your resources are integers.
I do much of my image making in Adobe Illustrator, but all vector programs are capable of sub-pixel values. Unfotunately this means that when an object is rendered it will interpolate the a non-integer value and will stretch the resource to accomodate.
If the gaps in your window are a pixel wide, this is probably your problem. The best way to circumvent this is to use a pixel grid,
snap to it, and manipulate dimensions numerically via the transform palette.

In Illustrator the coordinates of the object on the page will not translate into the exported swf, but it is good form to keep your position locked to integer values as well. There is a "feature" in Illustrator that allows export of slices to swf. don't use this. It actually just masks the area you are slicing and the result is unusable.

Unfortunately, the best way to export from Illustrator is by building your window as one piece (multiple layers are fine),
using the knife tool to cut along the grid, copy the resulting piece to a new document, and export as swf. and repeat. In the export dialog keep "curve" set to 10 (unless you have no curves) and check "preseve editability where possible"

I hope this is helpful and not too much info. There are other tricks if you are building the resources in Flash or Photoshop...
though I do reccomend Illustrator for most artwork.

Just had another thought: Is there a chance that you are using multi-frame resources in your window? If so, each art asset in a multi-frame resource must have the same dimension... or you will see gaps...

good luck, and send a pic if you can.

[esc_oblivion]

That helps some.

I was reviewing the pdf for component creation you put a link in a reply to another post of mine, and realized that all along I've been trying to "slice" my images, rather than using the knife tool. However, in trying to use the knife tool I'm not sure what it's supposed to be doing. It obviously doesn't do anything as obvious as "slicing" does. *sigh*

All I'm trying to do is cut out a corner and see if I can export that correctly.

Another thing I'd forgotten about was the snap to grid, and setup a pixel grid. I suppose that using that functionality will get rid of the white spaces on the sides of my components.

One thing though... the components I have created, although imperfect WERE in .swf format, and yet they don't seem to size at all... i.e. I can't make a wider window, or taller window with them....

Can you describe how the knife tool is supposed to work in Illustrator?

I select the knife tool, click and hold above the top of the corner I intend to cut out. I drag down to create a straight line (holding alt), release the mouse button to set the line, then click and hold on the end point which was just established and drag outside of the corner... Now I can see all the shapes in my image in blue lines, and the two blue lines I've created. But the corner is obviously not cut off, put on a separate layer or anything...

[antun]

Can you zip up the LZX code and images you're using, and post to this thread as an attachment?

-Antun

One thing though... the components I have created, although imperfect WERE in .swf format, and yet they don't seem to size at all... i.e. I can't make a wider window, or taller window with them....

[peter]

The knife tool (which looks decidedly more like a jigsaw blade) works like this: Unlock all the layers you want to cut through, select all the object(s) you wish to cut. Start your incision outside of the object(s), hold down whatever key locks you to a straight line (option and shift on Mac), draw across the object(s) and release. You should see that it has disected the objects.

Do any of your objects conatin gradients? If so, I have another, less compelling, course of action to reccomend.

[esc_oblivion]

Here ya go.

btw, thanks for the tips Pete, they'll help a lot.

[esc_oblivion]

Here's what I'm trying to cut up...

[peter]

I took a look at the LZX app, the GIF and the SWF files you attached and have a few observations/questions. First, it appears that the SWF files actually contain bitmap images. Is this true? If so, that would explain why the assets are not scaling well, and also why there is a white area surrounding your art (if you were using bitmap w/out transparency). Vector art will have automatic transparency. The shadows you have built into the art are another issue... but lets get this window lined up first.

It is necessary, when cutting, to have the dimensions of resources contained in layouts be equal, or you will suffer the odd offsets you currently have. as an example:

"window_tl.swf' has to be the same height as "window_label.swf"
and "window_tr.swf" and the corrsponding rows middle and bottom must also align. see enclosed image for sample guidelines (easier to draw than explain).

[esc_oblivion]

I believe that you're correct in regards to your bitmap question. I'm not certain how to avoid having my creations become bitmaps. I try to stick to vector art tools, but I might still be screwing it up.

I guess it might be educational to simply draw a rectangle and cut it up and see if it comes together correctly, and then go from there...

What I want to do is replicate the effects that are in the generic window - the dimensionality in particular. I definitely don't want the flat rectangle look.

[antun]

OK let's start with the top row:

1. The middle and right hand parts had a y="10" attribute set. That was necessary in the window tutorial because the resources in the top row were not of even height - it had that unusual shape where the title was on the left and that part was taller. If your top row is going to be even height, then you should set y="0" on those. When I fixed that, I still got gaps and a jagged top line, which suggests that your SWFs are not rounded to the nearest pixel, and that the top-left and top-right SWFs are not positioned at 0,0:


<canvas width="800" height="400">

<class name="mediaWindow"
x="10" y="10"
width="200" height="150"
clickable="true">
<dragstate name="dragger" />
<attribute name="minWindowWidth" value="150" />
<attribute name="minWindowHeight" value="60" />

<view name="topRow"
width="${parent.width}">
<view name="topLeft" resource="images/window_tl.swf"
x="0" y="0"
onmousedown="parent.parent.dragger.apply();"
onmouseup="parent.parent.dragger.remove();" />
<view name="topCenter" resource="images/window_label.swf"
x="${parent.topLeft.width}"
width="${parent.width - parent.topLeft.width
- parent.topRight.width}"
stretches="width"
onmousedown="parent.parent.dragger.apply();"
onmouseup="parent.parent.dragger.remove();" />
<view name="topRight" resource="images/window_tr.swf"
x="${parent.width - this.width}" y="0" />
</view>
</class>

<mediaWindow width="300" height="400" />

</canvas>


2. In your window, you have a constant-height top row, but your left and right edges are jagged. (In the Window Tutorial, the top row is jagged, whereas the left edge is straight). That means that you're going to have to offset the left middle SWF by the correct amount. You have two ways to do that - you can either create the SWF with some transparent area to the right of it, or position it using the x attribute.

See the attached image for what I mean by offset.

-Antun

[peter]

Hopefully Antun's dissemination of the cutting and offset issues are clearer than mine.

As far as actually creating artwork that is not flat looking, I applaud your ambition, but as you mentioned, it may be less frustrating to begin w/ simple objects to get comfortable w/ the layout.

More intricate designs can be accomplished by drawing vector art in Illustrator or bitmaps in Photoshop. It is a bit more problematic in vector, as effects like bevels must be "hand" drawn, but the resulting pieces are far more flexible/scalable.

Doing artwork as bitmaps is generally faster and can leverage existing filters but will not be scalable. This means that the center stretchy-bits in a layout will have to be done as vector assets that emulate the look of the bitmap pieces that they replacing. If you intend to use bitmaps as resources, you do not have to wrap them in a swf. Laszlo utilizes GIF, JPEG aand PNG file formats.

[antun]

Since art asset creation was a pain point, I thought I'd write a tip of the week on it:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=946

-Antun

[jsundman]

The new version of the documentation has a pretty extensive discussion of how to make your own components, complete with, as requested, screen shots of how we made our own.

This documentation will be available Real Soon Now. If you would like to get a look an early look at it, please signup for the beta. There's a form on the developer's welcome page.

http://www.laszlosystems.com/developers/

-- John, "the doc guy"

[dheon09]

have u tried cutting the images using photoshop and save it as png file....if u want u can give ur latest image and i'll cut and make a sample 4u...