[Pro] Carousel action

Freeway
1

Apologies for this query as I know there is quite a lot of stuff on here already about this action, however I have loked and looked but cannot seem to find the answer I need…it may just be me though!

My question: I am trying to create a carousel action, with 4 main images, with 4 tabs for each image. I want the first tab (which corresponds to my first image) to be a bolder style. then each subsequent tab to be bold when its carousel pane is showing (a bit like a rollover effect but linked to my carousel tabs).

I have tried applying the rollover action, however this does not seem to work with layer objects, whereas Carousel only seems to work with layer objects. Am I missing something as I am sure I have seen this technique used several times before?

Thanks in advance
Anthony

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

2

The only way to make the tabs change style depending on whether they
are the “current” tab is to use CSS. If you make a style
called .active (classname = active) and add a border or some other
attribute like a shadow through that style, then the classname (and
thus the style) will be applied to the currently-active tab by the
Action automatically.

Open the Edit Styles dialog and click on New Style. Type .active
(leading dot is critical) in the Tag field. Tab or click into the Name
field and remove whatever Freeway put there automatically. VERY
IMPORTANT: Tab out of the Name field so the lack of value “sticks”.

Now use the Freeway style tools and/or the Extended dialog to add CSS
properties that make one image look different than others. If your tab
buttons are made using 24-bit PNG images, you can vary the background
color of the image and get a quick “active” state change. Similarly,
you can use a border around the image, and a matching amount of
negative top and left margin, to give the active tab a marker. That’s
the method I used on the demo page here: Carousel in Freeway

Once you have built up this style, you are done. You don’t want to
apply it to anything on the page. Because it is defined as a tag-only
style, Freeway will publish it to every page in your site whether it’s
needed or not. The Action will apply the active class to the tab image
that is linked to the currently-visible pane automatically, and move
the class to the correct tab when another pane is made active.

Walter

On Mar 30, 2010, at 8:15 AM, A Matters wrote:

Apologies for this query as I know there is quite a lot of stuff on
here already about this action, however I have loked and looked but
cannot seem to find the answer I need…it may just be me though!

My question: I am trying to create a carousel action, with 4 main
images, with 4 tabs for each image. I want the first tab (which
corresponds to my first image) to be a bolder style. then each
subsequent tab to be bold when its carousel pane is showing (a bit
like a rollover effect but linked to my carousel tabs).

I have tried applying the rollover action, however this does not
seem to work with layer objects, whereas Carousel only seems to work
with layer objects. Am I missing something as I am sure I have seen
this technique used several times before?

Thanks in advance
Anthony

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

3

Thanks very much for your help Walter, I think I’ve sussed it.

Anthony

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

4

Walter,

I find this forum, invaluable as I am learning FW. I do have a question about this thread.

I have created the .active style, but I got to the point that you say “use FW style tools…” and I am stuck. I basically have a functioning carousel. I want the active tab (which is a graphic item) to have a white background. I want them to be blue when they are inactive. So, they are designed blue right now. How do I style the .active style that I just created to be white? I’m sure it is a simple solution…I can’t figure out where to do it.

Thanks for your help. I really appreciate your work.

Josh

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

5

I just realized pressing the “select” button in the Edit Style box gives my access to changing those things. However, it applied the active style to the current carousel pane, not the tab. SOme guidance would be extremely helpful.

Josh

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

6

If your buttons are graphics, then you aren’t going to be able to
change their color unless you try the following trick. Make the images
transparent 24-bit PNG (use the output pane of the Inspector to change
their image type). Remove any background color they may have in the
image. At this point, they should look like a sheet of glass with type
on them. Now click on the tab image and bring up the Extended dialog.
You should see a set of tabs across the top of it, one of which will
be img style and another of which will be div style. You want div
style for this. Click new, then enter class in the Name field and tab
in the Value field. Repeat for each of your tabs. Now they each have a
class named tab.

Now in the Styles palette, click on the cog menu and select New
Style… Set the background color (found inexplicably in the Character
section of the dialog) to the color you want your tabs to be. Click
into the Tag field at the top of the dialog and enter .tab (leading
dot is critical). Click into the Name field, delete whatever is there,
then tab back out to lock it as having no name.

Preview. At this point all your tabs should be blue.

Now create another style following the same rules as above. This time
give the background color white, and in the Name field
enter .tab.active (leading dot and inter-dot equally important). Again
clear and tab out of the Name field.

Now Preview again. At this point, your currently active tab should be
white, and the effect should follow the chosen tab.

There is never a need to apply these styles to anything. And if you
have already applied styles to your tabs or their carrier DIV elements
(the HTML box that gets drawn around every layered image on a Freeway
layout) then you must remove them for optimum results.

You will not see the layout looking the way you expect while you are
in the design view, but when you preview or use a browser, you will
see the effect.

Walter

On Apr 14, 2010, at 5:24 PM, Josh Clayton wrote:

I just realized pressing the “select” button in the Edit Style box
gives my access to changing those things. However, it applied the
active style to the current carousel pane, not the tab. SOme
guidance would be extremely helpful.

Josh

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

7

Wow. Quick reply. I should have been more clear. To make the tabs, I drew graphic boxes. I colored them blue. I drew another graphic box and formated text in it, aligned and grouped them, then applied the carousel tab action.

http://redmuttdesigns.com/theriversflow/practiceareas.html

is the page I am working on…I still need to style the content of the boxes, but this will let you see the tabs. Now, all I want is for the active tab to have the white fill color. Are the above instructions valid still or was that if I actually had images in the boxes?

Thanks. My learning curve has been so steep, and I have relied on this forum continuously. You are much appreciated.

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

8

This will be dead easy. Make your graphic tab images as I described.
Transparent graphic boxes, set to the size you need, with the type
centered in them, so there’s a large transparent border around the tab
text.

Be sure to set them to PNG Millions so they are really transparent.

Use the text alignment and shift controls to center the text in the
box horizontally and vertically, respectively.

Then use the Style palette to create the .tab and .tab.active styles.

When the tab is just a tab (not active) it will be blue. When it is
also active, it will be white.

This will be a very useful trick for you to master, so go slow, follow
the directions to the letter, and see how it works for you. I predict
a bit of forehead-meets-desk for a while, then a lightbulb over the
head, and you’ll be grinning like a fool.

Walter

On Apr 14, 2010, at 5:53 PM, Josh Clayton wrote:

Wow. Quick reply. I should have been more clear. To make the
tabs, I drew graphic boxes. I colored them blue. I drew another
graphic box and formated text in it, aligned and grouped them, then
applied the carousel tab action.

http://redmuttdesigns.com/theriversflow/practiceareas.html

is the page I am working on…I still need to style the content of
the boxes, but this will let you see the tabs. Now, all I want is
for the active tab to have the white fill color. Are the above
instructions valid still or was that if I actually had images in the
boxes?

Thanks. My learning curve has been so steep, and I have relied on
this forum continuously. You are much appreciated.

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

9

I was trucking along, and I read after this part and know I can finish the rest, but this bit threw me.

“Now click on the tab image and bring up the Extended dialog. You should see a set of tabs across the top of it, one of which will be img style and another of which will be div style. You want div style for this. Click new, then enter class in the Name field and tab in the Value field. Repeat for each of your tabs. Now they each have a class named tab.”

I am assuming you meant click on the actual tab I made, but how do I pull up the extended dialog? The way I did it, I did not have “a set of tabs across it” I know how to do the rest after this, but I need a bit more clarification on getting the tabs classified as tabs.

The head banging is almost over, and the light bulb is coming…I’m just need a bit more clarification.

As always, thank you!

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

10

Click once on the tab image. From the main menu: Item / Extended. You will see a new dialog.

Walter

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

11

on the actual tab I made, but how do I pull up the extended dialog?

Item>Extended from the Item menu with your tab selected

David

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

12

Thought you guys might be interested to see that following the help I received at the beginning of this thread I managed to produce this home page for one of my sites - inspired by the softpress site, using the carousel action with .png trnasparent images:

http://www.design-my-home.co.uk

I have to say that if I look at what I was doing only a year ago I would never have imagined some of the things I am doing now - thanks in no small part to the fantastic support I have had from everyone on this forum!

Tony

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

13

David and Walter,

Arrrgh. I tried to follow these instructions…didn’t work. Double checked my work, everything seemed to be inline. I thought maybe I had just changed too many things in my document so I closed it, created a new test file, went through all the instructions again, but it still didn’t work. The carousel works, the tabs work, but the new styles ( .tab and .tab.active) I create don’t do anything to the tabs.

One thought I had is does it matter when I apply the carousel tab action to the graphic boxes? I did it at the beginning.

I’m sorry to spend so much of your time on this problem, but I wanted to lay out the instructions and see if you can find anything that’s missing.

  1. Create Carousel.
  2. Create tabs by making graphic boxes, setting type to “PNG” and colors to “millions,” making sure color is set to “none.” Repeat for all tabs
  3. While graphic box is highlighted, open item extended dialog. Under “Div Styles,” create new. Enter name as “class” and value as “tag.” Repeat for all tabs.
  4. Open style palette. Click cog. New style. Tag = “.tab” Tab into name field, delete content and tab out so it sticks. Adjust background color under character menu. Click okay.
    (Note: When I preview at this point, the tabs have not taken the new style, so I know something is already off.)
  5. Repeat, this time for “.tab.active”

I have done exactly this, multiple times, without success. I notice there are certain menu times that I just have left as is if you didn’t specify otherwise. Could there be anything that I am missing?

Thank you. Although it is a pain right now, that will make accomplishing the task even sweeter. At least that is what I am telling myself.
Josh

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

14

Here’s your problem. Don’t do this in DIV Styles, just DIV. You’re
adding a class parameter to the DIV, while style is another parameter,
at peer level with class. If I mis-typed previously, I’m sorry.

Walter

On Apr 17, 2010, at 5:01 PM, Josh Clayton wrote:

  1. While graphic box is highlighted, open item extended dialog.
    Under “Div Styles,” create new. Enter name as “class” and value as
    “tag.” Repeat for all tabs.

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

15

I was so happy to get your reply…until that didn’t fix the problem either. I tried it in my actual document first, which failed. Then I tried it in a test carousel, and it also still doesn’t work.

I went and tried your first set of instructions at the top of this thread that you wrote to “A Matters”. I created a style just called “.active” This worked! So now, I can make the active tab white. But I still want the inactive tab to be blue.

It seems if .active works, but .tab.active doesn’t, maybe the problem is in applying the class name “tab.” Any other suggestions?

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

16

All right, then try removing the .tab bit from the beginning. Make it
just .active and .tab, with a different background color for each.

Walter

On Apr 17, 2010, at 5:45 PM, Josh Clayton wrote:

I was so happy to get your reply…until that didn’t fix the problem
either. I tried it in my actual document first, which failed. Then
I tried it in a test carousel, and it also still doesn’t work.

I went and tried your first set of instructions at the top of this
thread that you wrote to “A Matters”. I created a style just called
“.active” This worked! So now, I can make the active tab white.
But I still want the inactive tab to be blue.

It seems if .active works, but .tab.active doesn’t, maybe the
problem is in applying the class name “tab.” Any other suggestions?

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