Transparency

Freeway
1

I have been messing around with image transparency (opacity), and find a couple of strange things going on. Perhaps it’s just my lack of knowledge about Freeway, but I sure wouldn’t mind some clarification.

Here is a page with a whole bunch of objects on it:

http://lorenswebworks.com/bellas/untitled3.html

In the upper left corner there is a small vertical bar that I gave an advanced fade action to. While in design mode the image shows transparent, the way that I want it to look, however in preview or view in browser the image becomes solid as you see there. (am I missing something?)

The next vertical green transparent image was done using the same method, however, rather than just accept it as a solid vertical bar, that shows up as transparent in design, I gave the item a style with the following atributes:

    width:100%; height:100%; filter:alpha(opacity=46); opacity: .46; -moz-opacity:.46;-khtml-opacity:.46;

The result as you can see is a transparent .png

Over to the right of that are 2 red transparencies that I did simply using a fill color, but again, to get them transparent I had to apply a style.

Same goes for the double image overlay to the right of that. The background image is solid the way that I wanted it and the overlay image is transparent using the style attributes.

In all cases, everything that I want transparent while viewed in design mode, is in fact transparent, but loses its transparency in preview or viewed in browser unless I use the style.

Am I missing something?? I am not complaining, but rather just studying and testing at this point.

On another note:

I wanted the fill area between the top and bottom of the page (2 vertical bars and off white center) to remain as a pass through graphic at my desired size of 1k. I was only able to do this by creating a graphic box > import the graphic into it > sizing the box width accordingly and then as a final step, apply a style to the graphic box (height 100%).

With the graphic box height styled to 100%, I can then resize the box to any height I want from page to page, however the drawback to this is that the background effect can’t be seen in design mode.

Is there an easier way, or is this something that should be looked at by Softpress? I don’t want to have separate graphics for that portion of each page so tho this point found this to be the only solution.

I did test out one other method, and that was to apply the 1k graphic as a background, but it resulted in a shifting of the image by one px at a time as you widened the browser window (one px right, then one px back).

I am just trying to find my way around, so please be patient with me, and please disregard the appearance of the sample page. It’s just a whole bunch of things tagged onto a page.

There is one heck of a lot of power in this program, and I sure do want to take advantage of it wherever possible.

Loren

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi Loren

Quite simply the small green one is a jpg and jpgs don’t support transparency. Check the inspector to choose how the file is rendered for transparency i.e. png

Now I am not so sure about the double image thing because they are jpgs as well but I suspect what you are getting there is the illusion of transparency by the combination of image slices.

I am sure somebody more knowledgeable here will chip in on that one.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

The little green rectangle can be changed to a png to no avail.

Those 2 photos are not slices. They are just overlapping images.

Lorne

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi loren
I just looked at your code and that green band doesnt have the opacity reference… here is your output

green1

As you can see no opacity. as far as jpg goes its fine
what I would do is use the opacity references in a specific css style and use external style sheets to access it so you only need to write it once and apply it to everything you would like to have the transparent look.
have a look at the tutorial I wrote about using rollover graphic buttons with webyep I use opacity in that tutorial I also target specific divs too

the vertical two banded background with an off white centre box
first create a 1px tall graphic that has the band colour at either side then export that in whatever programme you use for graphics eg photoshop as a jpg
then go into freeway create a html box
then click on edit style and create new style if you then click on the + symbol on the right of Character area you will see a drop down and near the bottom you can see background image.
click/ select and find your 1px tall image plus also in this select button you have the opportunity to select which type of repeat you would like… in your case vertically.
finish this by assigning this style to the html box

Then the final things to do are to make the top and bottom parts
Place another div inside the big one and import a top panel which you have created previously then move it to the top of the outer box.
Then draw another div to make the bottom part of your panel, import the bottom graphic and move this to the bottom of your outer div which contains the repeating background.
In the inspector palette click on the bottom inset and make sure its 0px and is the active dimension

the final result is this bottom panel will be locked to the bottom of the container regardless of the size
I hope this is what you had in mind
kind regards max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options