Button interactions within Scroll Panel/Content

I am creating a portfolio website using Flash Catalyst. On my Portfolio page I have a vertical scroll panel and within that panel I have little thumbnails of my artwork converted to a button component. So when the user click on the thumbnail I want the larger image to appear nearby. I make new states for the larger images within the scrolling content, but whenever I use the scroll thumb it also scroll the larger images that i want it to be in a fixed position. So is there anyway I can lock the larger image while user is able to scroll through the thumbnails. If not possible, is there anyway i can duplicate the events on the timeline from one page/state to another similar one?
If there is a better way to accomplish this please let me know too, I am all ears. If you need clarification on my issue, I will try my best to explain it through texts.

Hi,
Here's a quick wireframe to illustrate the thumbnail separate from the detail image. The large images could be in their own custom component or in different states in the main timeline (per this example).
The scroll bar needs be edited to look nicer.
Hope this helps.
Tanya

Similar Messages

Help with Scroll Panel

I'm mocking up a site for a friend of mine and I have 2 questions about a scroll panel. First when I create text then convert it to a scroll panel component it always adds the text "Add More Content Here" somewhere in the middle of my content. I convet back to artwork to get rid of it and then go to scroll panel again and its back. Super frustrating. You can see the example here: (hover over the "Own" button for the scroll panel)
http://http://jeffstonebraker.com/beta/pf/Main.html
also I am wondering if it is possible to make a hyperlink out of some of the text in the scroll panel? Such as the online links in the example above.
Thanks for your help.
Jeff
ps here is the project file if that helps. (sorry for the file size, I need to clean up the library)
http://jeffstonebraker.com/beta/pf/povertyflats.fxp

I had this problem too. Try this: before you convert to a scroll panel component, make sure your text box is tall enough so that you can see all your text without needing to scroll -- you may have to extend it down beyond the lower boundary of your project. When you convert to a scroll panel, it will resize to the height of your scroll bar.

Updates to Folio Panel, Producer Tools and Content Viewer on iPad breaking scroll panels

This has not been a good morning.
Came into the office this morning, logged in and saw that there were updates for the Content Viewer, Producer Tools and the Folio Panel. Updated them all. Started to work some more on a promo piece for a new magazine and began to notice Scroll Panels using the "Pan Only" form within the Content Overlay panel no longer work. This was a great way to create scroll panels that could contain hyperlinks. Problem is, I am not sure where the problem lies. Is the problem with the Viewer or with the updates to the Folio Tools or Folio Panel? I am unfortunately on deadline for this afternoon and I don't have the luxury to troubleshoot this. Granted, I probably shouldn't have updated all of these tools at this juncture, but I was hoping that these updates would fix the problem I was having with the Desktop Viewer that wasn't working. Sadly, the Desktop Viewer works now, but that came with the price of losing functionality elsewhere.
Frustrated.

Yeah, it's been a project that I was working on for the last two weeks. We were supposed to have a final walk-through this afternoon and present it tomorrow. But now a good portion of the features that were working and had been promised no longer work. All out of no fault of my own. I understand that these things can happen, but this one is pretty bad and the timing was worse. Like I said, I shouldn't have updated the tools and the Viewer app until after the presentation... but then again, that may have been even worse. At least I was able to get the presentation postponed until Monday... gives me a little more time to figure out what to do.
Anyways, I did able to get a hold of someone through support and was able to send them some files. It's being looked at as I type this. I do have to give credit to the Adobe support staff, they've been helpful and pretty responsive! Thanks guys!

Integrated scroll panels and unmovable toggle buttons

Hey,
iam looking for an expert. I am working on an HMI development and wanted to use Flash Catalyst. However, I think I am already reached the limits of FC. But perhaps there is a FC solution because I can not program Flash.
Problem:
In my layer, I have different graphical objects and text blocks. A part of them I want to move with a scroll panel. That's easy, not a problem.
However, all these objects (including the scroll panels) should be integrated in a master scroll panel. This means, that all parts, even the integrated scroll panels, should be moveable at the same time. I managed this.
Now, I need multiple toggle buttons. With these Buttons I wanted to change the form of some of the graphical objects resp. the text blocks. But the buttons have to be unmovable. This function (to change the form of the objects) is relatively easy but in combination with the integrated scroll panels it isnt. The buttons are able to move the objects when these buttons are pasted in the "deepest" layer, the layer of the objects. But there, the buttons are moveable and slide out of the screen (with the master scroll panel) and not clickable.
How can I manage this? I need unmovable toggle buttons, with these I want to change the forms of objects. The objects are pasted in integrated scroll panels. I hope it's understandable!
Can someone help me? It would be glad if the answer does not depend on the learning of the flash programming!
Thanks.

After 2 days of banging my head against a wall (doesn't it always go that way)...
Turns out one of my panels had sub-panels causing the problem. Visibility to the parent panel was controlled by a button on one of the child panels. Once I "promoted" the button to the parent panel, the panel (screen) flow worked great.
Is this 'undocumented functionality'? Why should it matter how deep the button is nested? (incidentally, the reason it worked in my test environment was the lack of other components - aka the child panel)
Well, regardless. Thanks to those who gave it thought.

Why am I getting the flag Invalid URL for web content overlay when making scrolling panel in Indesig

Why am I getting the flag 'Invalid URL for web content overlay" when making scrolling panel in Indesign? Iam making additions to existing articles but the problem is new. The articles were originally made using CS and now I am on CC, which I have just uninstalled and re installed, no difference, can anyone help please? Steve

Hi Bob, thankyou very much for coming back on this. The flag is coming up towards the end of the preview process on desk top. I have made dozens if not hundreds on my two published apps on the app store, but have not done an update for nearly a year, in which time I have needed a refresher, and as usual went to Lynda. In this case I have followed to the letter your DPS course, which is great, and I found the process of making the scrolling panels somewhat easier than when I started 2-3years ago. Initially I was mystified that the flag talked about url and web content, but just put it down to something I had missed in recent improvements in CC.
I tried over and over, but always got the same result. I thought at one point it might be because the content of my slide was copy and photo, so for a test I deleted the photo. Same result, and many of my existing slides are copy and picture.
I also uninstalled Indesign CC and reinstalled in case of corrupted content, I also copied to IDML and relaunch, same problem. I am sure I have made the scrolling content as instructed, The one thing I havn't done is trash my preferences, if you think that would be a good Idea could you please direct me to some content at Lynda on how to do it in CC. Many thanks, Steve

Expand horizontal scroll panel on both sides for a zoom in effect

Hi,
I'm creating an interactive timeline with Flash Catalyst. It is set up as a long horizontal scroll panel which contains buttons that link to states with photos and text about historic events. One feature I would like to include is a zoom feature, like the one found on the bbc British history timeline (http://www.bbc.co.uk/history/interactive/timelines/british/index_embed.shtml ). E.g., when you click on a colored section of the horizontal scroll panel it will zoom in to view that timeframe in more detail.
The problem I'm running into is that I can't expand the scroll panel to the left. So, I can go into edit mode for the scrolling content, create a second state, and enlarge the scrolling content in that second state to create a zoom in effect. However, because the scrolling content will only expand to the right, I can't line up the interaction correctly.
Is there a workaround for this in Flash Catalyst?

have a peek at this:
on the left, the corner radius (the red line) is enough to create a curve on the inside of the stroke. on the right, it isn't large enough.

Accordion - Ajax within accordion panel resize issue

Hi,
I'm in a little bit of a fix.
I have an accordion whose panels have ajax enabled regions
within them.
The ajax enabled regions have search forms which give a
search result within the same page (which is basically within the
panel as well) once a button is clicked.
My issue is that once I click search, my result set increases
the size of the page causing the accodion panel to enable a scroll
bar. Is there some way in which I can have spry resize the panel
instead of it enabling a scroll bar?
If I open and close the tab ofcourse, the region is resized
to cater to the search results as well with no scroll bar.
Incase this is not possible, is there a way to reopen the
selected panel on a page refresh event as all the tabs are closed
when a refresh occurs.
Thanks!
When the accordion opens up, it shows

Hi kundalani,
If you are using Spry.Utils.updateContent() to load the
contents of the panel, you can pass in a callback that sets the
height of the AccordionPanelContent to "auto" after the new content
has loaded:
function LoadContent(ele, url)
ele = Spry.$(ele);
Spry.Utils.updateContent(ele, url, function() {
ele.style.height = "auto"; });
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag1.html'); return false;">Frag 1</a> |
<a href="#" onclick="LoadContent('e1p2',
'../../data/frag2.html'); return false;">Frag
2</a></p>
<p> </p>
<div id="example1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 1
</div>
<div id="e1p1" class="AccordionPanelContent">
<p>Panel 1</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 2
</div>
<div id="e1p2" class="AccordionPanelContent">
<p>Panel 2</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 3
</div>
<div id="e1p3" class="AccordionPanelContent">
<p>Panel 3</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Panel 4
</div>
<div id="e1p4" class="AccordionPanelContent">
<p>Panel 4</p>
</div>
</div>
</div>
<script type="text/javascript">
var example1 = new Spry.Widget.Accordion("example1", {
useFixedPanelHeights: false });
</script>
--== Kin ==--

How to order panel contents by alphabetical order?

I am trying to order some radio buttons by using a panel. I need the panel for it's scroll box capabilities, but every time I add a new radio button I have to move all of the contents in order for it to be in alphabetical order.
Is there any easy way to do this? Or do I need to reorder it myself every time?

I am trying to order some radio buttons by using a panel. I need the panel for it's scroll box capabilities, but every time I add a new radio button I have to move all of the contents in order for it to be in alphabetical order.
Is there any easy way to do this? Or do I need to reorder it myself every time?
Hello,
We could sort these radio buttons with the following way.
private void button1_Click(object sender, EventArgs e)
List<RadioButton> RadioList = new List<RadioButton>();
List<Point> PointList = new List<Point>();
for (int i = 0; i < this.panel1.Controls.Count ; i++)
Control c = this.panel1.Controls[i];
if ( c is RadioButton)
RadioList.Add((RadioButton)c);
PointList.Add(c.Location);
} //sort by its Text, you could also sort by the other property RadioList= RadioList.OrderBy(x => x.Text).ToList();
//to sort it by the X or Y value of its Location
PointList = PointList.OrderBy(x => x.Y).ToList(); //Reset the location by order
for (int i = 0; i < RadioList.Count ; i++)
RadioList[i].Location = PointList[i];
Result:
Regards.
Carl
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

FAQ: How do I create a scrolling panel in Flash Catalyst?

A common challenge in web design is finding space in the available window to display all of the necessary content. One solution is to create scrolling panels. A panel creates a well-defined container for content in the user interface. By adding scrolling content and a scroll bar, you can place a large amount of information in a limited space. To create a scrolling panel in Flash Catalyst, you need:
An object to define the panel area, such as a rectangle shape (optional)
Scrolling content, such as a long block of text or a series of images (required)
A scroll bar used to scroll the content (recommended)
Follow these steps in Flash Catalyst Help to create a scrolling panel:
Create a scroll panel component
There are also video tutorials showing examples of different scrolling panels:
Creating a scroll panel in Flash Catalyst, by Doug Winnie
Create a scrolling text panel in Flash Catalyst, by Terry White

Thank You, Thank You,
Thaqnk You
Allen D. Macfalda

Help with scrolling Panel loop

Hi,
I doing a flash scrolling Panel creating the buttons dynamic
with xml, like the scroll panel made in gotoandlearn "scrolling
thumbnail Panel" but creating each button with xml. well this works
fine.
but I want to do if a panel that loop if I move the mouse
right or left any idea to do this?
I hope some see the code that I have now..
saludos
Carolina

Check out this link: The Tom Kyte Blog: Varying in lists...

Editable text lost in scroll panel

When I convert a text box to a scroll panel the text becomes uneditable
Am I doing something wrong?
I create the Scroll bar then select the scroll bar and the text block and chose scroll panel in the HUD then I choose the text box as the scrolling content
that is when it becomes uneatable.
Any work around?

I am having some newbie issues with text in scroll panel as well.. I have been trying to generate the text as part of a design oin illustrator. ( Very similar to the design shown in Top 5 catalyst cs5 features by terry white.) I can create a text panel in illustrator that appears to continue on without laying down on top of the border of the design. However, when I try to open the design with this text panel in catalyst it converts the text into vectors. when I try to drill down to open additional text as described in the tutorial, I am unable to do so.. I am guessing that the vectorization is the issue? I have tried to develope the text directly in catalyst but I am unable to find a method that does not have the text outside the desired area running all over the rest of the
design.
Again, I am a complete newbie. I have managed to replicate all other features and functions of the design. I am just not able to find the solution for this issue. Any guidance would be greatly appreciated.

Iframe not scrolling to content below set height in IE9

Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional: In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height. That is, is does not scroll to show the rest of the iframe page.
I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div). I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
It has to be a simple fix, or others would be having this IE9 issue, too, right?
Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
Anyone know what is going on -- and how to fix it?
I apologize for how jumbled both the CSS and source code is for this site. If I were recreating the site today, I could do a much cleaner job.
Here are a few tries:
http://cbm1.com/retail_property_listings/costar.html
http://cbm1.com/retail_property_listings/costar3.html
This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9. Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
http://cbm1.com/retail_property_listings/costar4.html
Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

Because iframe height of 100% didn't render correctly (in any browsers) I chose a set height (600px) in which to display my clients' property listings within one of their site pages.
All works reasonably all tested browsers (double scroll bars in Chrome and Safari -- div and iframe -- despite that the div isn't set to have such, but I can likely fix that); IE9, though, is nonfunctional: In IE9 I get a Y scrollbar, as defined, however it does not scroll past content that fits into 600 pixel iframe height. That is, is does not scroll to show the rest of the iframe page.
I have tried separately defining x and y scrollers as well as simply calling for scrolling in general; no luck.
I have been searching for hours for a fix, and have tried every combination of style coding to the iframe itself as well as the overall style sheet (to the div). I also read the soure for the page rendered in IE9, and the style coding was as I'd written it.
It has to be a simple fix, or others would be having this IE9 issue, too, right?
Have even added <meta http-equiv="X-UA-Compatible" content="IE=8"> to the header; didn't change anything.
Anyone know what is going on -- and how to fix it?
I apologize for how jumbled both the CSS and source code is for this site. If I were recreating the site today, I could do a much cleaner job.
Here are a few tries:
http://cbm1.com/retail_property_listings/costar.html
http://cbm1.com/retail_property_listings/costar3.html
This version (more info in the CSS, less inline) gets rid of the double scrollers in Safari and Chrome (while still working in FF) but still the same doesn't-scroll-beyond-the-600px-iframe-pane-height issue in IE9. Tried moving the meta directive toward IE8 to immediately above the body tag as well as first meta tag on the page; neither resulted in any IE9 rendering change:
http://cbm1.com/retail_property_listings/costar4.html
Happy to simply paste the inline + CSS coding alone in this window, if that's easier for anyone.

Spry Accordian panel content height for more than 1 accordian in site

Hi,
I have added a couple of accordians to my website on different pages.
When I adjust the panel content height for 1 it automatically changes it for all of them on my site causing scroll bars to be visible - which I am trying to avoid.
I'm new to Spry coding and am not sure what to change.
Thank you for your help

This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
In the CSS stylesheet, do this:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: auto;
#normalheight .AccordionPanelContent {
     height: 100px;
#doubleheight .AccordionPanelContent {
     height: 200px;
Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
Beth

Scroll panel easing?

I have seen a few examples of creating a scroll panel in Illustrator/Photoshop and then making it functional in Catalyst but I am just curious, is there a way to add easing to the scroll in Catalyst? You know so it speeds up and/or slows down as you scroll?

Thanks, you answered my main question of "can it be done in catalyst?" On one hand I was pretty sure you couldn't but on the other hand, designers like me think to themselves....why not? You can control the transition and easing of other states, why not this? In other words as Catalyst evolves, to me, it seems like having easing control over just about any animation or anything you interact with (such as a scroll panel) would be standard, keeping up with todays sites.
I appreciate the extra step you went with giving me the code, but was hoping to not have to go there, especially since thats what catalyst was shooting for. I do use flash cs4, and use a combination of timeline animation and actionscript, but my actionscropt knowledge is VERY minor. I usually use snippets of code from other sources, and tweak it if I can. Usually taking me a long time to figure out how to tweak it to my needs.
Again, thanks for the reply.

Skinned Panel Content Area Problem

I have instances of the Panel component that was skinned
using the Flex Skin Component Kit for Flash. The problem is that
the content areas of these panels occupy the entire panel area. An
unskinned panel has a content area that is within the panel's edges
and header. For my skinned panels, the content area extends to all
four edges of the panel (top, bottom, left, right). Any components
placed inside the panel goes beyond the usual white content area
and overlaps the header. How can I fix this content area size
problem? Please help. Thanks.

Can you use content area coordinates, or some manipulation of
the global, local, and content coordinates?

Button interactions within Scroll Panel/Content

Similar Messages

Maybe you are looking for