Todd, making the graphics is the easy part for me. I’m a 100% graphical type of guy. That’s why I’d like to see a graphical means of creating CSS Sprite Rollovers in Freeway, without having to resort to “adding code.”
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Of all the Action writers, Paul Dunning has the most experience
working with images. He has made several Actions which control a third-
party image processing system with AppleScript to do advanced
manipulation of images. When he wrote (quite some time ago) that he
wasn’t able to get that toolkit to assemble the sprites, I think that
made it pretty clear that the next move would have to come from
Softpress. They alone have the necessary keys to Freeway’s image engine.
I would love to see the basic rollover technique in Freeway work this
way, but I don’t think you’re going to see a WYSIWYG approach to this
through an Action using the current API. If anyone could have done it,
Paul would have.
File a feature request, and find another way in the interim to get
your effects to work the way you want them to.
Walter
On Jan 27, 2009, at 11:41 PM, JDW wrote:
Todd, making the graphics is the easy part for me. I’m a 100%
graphical type of guy. That’s why I’d like to see a graphical means
of creating CSS Sprite Rollovers in Freeway, without having to
resort to “adding code.”
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
HI,
as Walter said, the issue isn’t that it’s impossible to bolt two images together, but that it’s very hard to get the final images from Freeway prior to stitching them together.
I’ll have another look at this conundrum - but I can make no promises about the outcome.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here’s a write-up of a way to do this directly in Freeway. An Action
could take the basic approach and make it less drudgery to concoct the
styles. The hard part would be coming up with an Action interface that
didn’t presume too much understanding on the part of the designer.
http://scripty.walterdavisstudio.com/sprite
What would be ideal, but requires Softpress’ collusion to pull off,
would be if you could just use the Rollover interface we all know and
understand, the images would be stitched, and the requisite CSS could
be calculated.
What I’m imagining is that you would draw your HTML bar elements,
group them together, then apply an Action to the group. That Action
would have a file control to select your sprite image, and then expose
a set of options for each of the states. For each state you would
enter the vertical offset to find the correct slice of the sprite, and
the Action could calculate the horizontal offset internally, based on
the dimension of each HTML element contained within the group.
Since the bar would be grouped, the CSS could be massively simplified
– one declaration for all a tags within that group to set the basic
styles, and then simple modifications of the position for every child
link. #group_name a { lots of styles } #option a { background-position
only }
Walter
On Jan 28, 2009, at 11:24 AM, Paul wrote:
HI,
as Walter said, the issue isn’t that it’s impossible to bolt two
images together, but that it’s very hard to get the final images
from Freeway prior to stitching them together.I’ll have another look at this conundrum - but I can make no
promises about the outcome.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
One small problem with CSS rollovers: they don’t work properly in
Internet Explorer 6. The advantage of the CSS rollover method is
supposed to be that the background image is loaded all in one go and
then cached, so there is no need to fetch any more images. But as far
as I know, Internet Explorer 6 makes another round trip to the server
anyway when you hover or whatever, which causes a slight “flicker”.
It’s nothing to worry about, though.
Regards
Graham Smith
Bury St Edmunds, UK
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I, like Walter, look forward to the day that MSIE 6 is dead and buried. (I don’t like MSIE 7 either, but it is better in some small ways than version 6.) Even so, I don’t see any flickering or other visible anomalies when using the 4-state CSS Sprite Rollover based menu bar at apple.com in MSIE 6, nor do I have any flickering problems with the CSS graphic trick that Walter gave me for my Safari style search field in MSIE 6.
And if MSIE is really hitting the server multiple times, it is not a big deal for me, as you cannot physically see the hits. And over time the Windows camp will largely embrace MSIE 7 (and hopefully, other browsers). My main interest in maintaining compatibility with MSIE 6 is so my visitors physically see what they will see in Safari and Firefox.
To me, the benefits of CSS “Sprite” Rollovers seem to outweigh the demerits. I therefore have a strong desire to see SoftPress support behind this in Freeway’s UI.
Best,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
More spritey rollovers here:
Joe
On 29 Jan 2009, at 04:17, JDW wrote:
I, like Walter, look forward to the day that MSIE 6 is dead and
buried. (I don’t like MSIE 7 either, but it is better in some small
ways than version 6.) Even so, I don’t see any flickering or other
visible anomalies when using the 4-state CSS Sprite Rollover based
menu bar at apple.com in MSIE 6, nor do I have any flickering
problems with the CSS graphic trick that Walter gave me for my
Safari style search field in MSIE 6.And if MSIE is really hitting the server multiple times, it is not a
big deal for me, as you cannot physically see the hits. And over
time the Windows camp will largely embrace MSIE 7 (and hopefully,
other browsers). My main interest in maintaining compatibility with
MSIE 6 is so my visitors physically see what they will see in Safari
and Firefox.To me, the benefits of CSS “Sprite” Rollovers seem to outweigh the
demerits. I therefore have a strong desire to see SoftPress support
behind this in Freeway’s UI.Best,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
FYI: some progress is being made. Some - I have lots to do, but it’s looking promising right this moment.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yay Paul!
Walter
On Jan 29, 2009, at 12:30 PM, Paul wrote:
it’s looking promising right this moment.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
A tentative release. It builds sprites instead of using image swapping. Be aware that there could be situations where it breaks. I’ve noted the ones I can think of on the page, but there could be others.
http://www.actionsworld.com/cssrollovers.html
If you are using a previous version of the Action, it may be worth hanging on to that copy until you are happy that tis one works. You will need YVS iMagine Photo on your machine too. Links supplied on the web page.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Paul,
Can you put a link to iMagine Photo that page too please.
Cheers,
Joe
On 30 Jan 2009, at 10:04, Paul wrote:
A tentative release. It builds sprites instead of using image
swapping. Be aware that there could be situations where it breaks.
I’ve noted the ones I can think of on the page, but there could be
others.http://www.actionsworld.com/cssrollovers.html
If you are using a previous version of the Action, it may be worth
hanging on to that copy until you are happy that tis one works. You
will need YVS iMagine Photo on your machine too. Links supplied on
the web page.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Doh! I forgot. Link applied - apologies to Kevin for mising it off.
On 30 Jan 2009, 11:05 am, Joe Billings wrote:
Hi Paul,
Can you put a link to iMagine Photo that page too please.
Cheers,
Joe
On 30 Jan 2009, at 10:04, Paul wrote:
A tentative release. It builds sprites instead of using image
swapping. Be aware that there could be situations where it breaks.
Ive noted the ones I can think of on the page, but there could be
others.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 23 Jan 2009, 5:33 pm, Todd wrote:
Here’s a perfect example of a Sprite in action; something I put
together a while ago. FW Pro 5 file available if anyone wants it.
Todd,
THis is a great example - and just about what i (clients) want (dup of apples menu bar)
I have a question on the directions:
do I do the extended twice each link to do
name:float
Value: left
name: margin
value 2px 0 0 75
also my links -
I want the same as you have - but shorter and wider blocks with the words left to right…
also - how do you create an unordered list style?
I have a need to learn all the insides now and i do appreciate everyones help
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 28 Jan 2009, 7:42 pm, waltd wrote:
Good Morning - I have done this sprite and it works well
thank you!!!
But I have one problem- I want make each part 100px by 40 - but when I change the size of the graphic for each stage it does not change the look on the screen.
any suggestions?
I need to make this the size of the apple menu bar.
I attempted the other one - and had a lot of issues- but it definatly could be me. If some one wants to look at the other one I will gladly share my file.
Julie
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You have to change the CSS file (test.css in my example) to match the new geometry of your menu items. Have a read through the entire file with a text editor (or CSSEdit from MacRabbit – well worth the price). You’ll see that each link item “state” (link visited hover active) has a different offset vertically and horizontally, stepped by 20px vertically and by whatever width I made the buttons horizontally.
Just do the math, and change the numbers in the css file to match multiples of the height and width of each segment of your sprite image.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you walter…
this is a whole different aspect - and am thrilled to learn it.
I will try it out - and post the successful page
On Mar 9, 2009, at 9:31 AM, waltd wrote:
You have to change the CSS file (test.css in my example) to match
the new geometry of your menu items. Have a read through the entire
file with a text editor (or CSSEdit from MacRabbit – well worth the
price). You’ll see that each link item “state” (link visited hover
active) has a different offset vertically and horizontally, stepped
by 20px vertically and by whatever width I made the buttons
horizontally.Just do the math, and change the numbers in the css file to match
multiples of the height and width of each segment of your sprite
image.Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I know this is an old thread…
But, I am getting fustrated…
My client wants exactly this… w the lines etc…
I know that “sleek” template has a simialar one (which is fine)
But here are my questions:
I know how to change the coloring and pull it appart, but I am having an issue w putting it back together… w the dividers so that they do not overlap each other.
Or can some one give me direction to create one myself and get it perfectly inline…
I don’t mean to beat an old horse… .but I really do need some help w this.
Thank you
Julie
On 23 Jan 2009, 5:29 pm, waltd wrote:
To be clear, CSS Sprite Rollovers do require that you use one image
– that’s how they work. For a very famous example, see this image:
But if you only call them CSS Rollovers, then no, they don’t need to
do this at all. The issue with non-sprite rollovers is that they
suffer from terrible latency, since the initially hidden state is not
downloaded with the page (as a JavaScript rollover would be) and so
has to be fetched entirely on the mouseover event. This works, after a
fashion, but with a noticeable delay.Walter
On Jan 23, 2009, at 12:11 PM, DeltaDave wrote:
yes, I have been talking about a single, merged, graphic. By
definition, that is precisely what CSS Rollovers are.I don’t wish to labour this point but whose definition states that
CSS Rollovers should only use 1 image?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 28 Oct 2009, at 16:17, swimmer35 wrote:
- I know how to change the coloring and pull it appart, but I am
having an issue w putting it back together… w the dividers so that
they do not overlap each other.
If you know how to change the colours, you’re mostly there. My advice
is not to pull it apart at all, just use the left hand pages column in
Freeway, set to ‘Page’. You can change this by clicking the header of
that column where it says ‘Site’. This give you a view of all the
items on the page, so you can see the various parts of the navbar all
laid out for you, and select them by clicking on their names in the
list.
You may have trouble seeing what you’re doing with the ones
underneath; you can select the top one in each group and then hide it
by unclicking the ‘show’ tickbox in the Inspector, then change the
colour of the bottom one, then click ‘show’ again to put it back.
Tedious, but probably easier than pulling it all apart.
best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you!
Sent from my iPhone
On Oct 28, 2009, at 12:37, Paul Bradforth email@hidden wrote:
On 28 Oct 2009, at 16:17, swimmer35 wrote:
- I know how to change the coloring and pull it appart, but I am
having an issue w putting it back together… w the dividers so that
they do not overlap each other.If you know how to change the colours, you’re mostly there. My
advice is not to pull it apart at all, just use the left hand pages
column in Freeway, set to ‘Page’. You can change this by clicking
the header of that column where it says ‘Site’. This give you a view
of all the items on the page, so you can see the various parts of
the navbar all laid out for you, and select them by clicking on
their names in the list.
You may have trouble seeing what you’re doing with the ones
underneath; you can select the top one in each group and then hide
it by unclicking the ‘show’ tickbox in the Inspector, then change
the colour of the bottom one, then click ‘show’ again to put it
back. Tedious, but probably easier than pulling it all apart.best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options