Sliding images with buttons..
Hi do you know how I could slide throught images using the same buttons... as if i have a right and left buttons and the scroll through just 3 images..
everytime you hit the left button it keep going left through images and right as well... I tired to set up tweens and buttons but everytime I click the right/left buttons the second time it goes back to the beginning picture instead of the next picture...
kind of something like this http://piperlime.gap.com/? (the main slide show that is)
thanks!
Check this out:
http://weblogs.macromedia.com/sho/archives/2006/04/flex_sliding_dr.cfm
Tracy
Similar Messages
-
Hi,
I have a image control which is embed with button skin from swf. The effect is not getting affected in it. Only the image is getting loaded.
Why is it behaving like this.
Regards,
Jayagopal.Hi Jayagopal,
You need to apply various skins for the Button to see the effects....
.myButton
upSkin:"assets/buttonUp.png";
downSkin:"assets/buttonDown.png"
overSkin:"assets/buttonOver.png"
Thanks,
Bhasker Chari -
In Search for Automatic Sliding Content with Buttons tutorial
I would like to implement a cross screen sliding content. I would like this content to have buttons which allow to move from one section to another. I would like this buttons to be in the ON position when the corresponding section is on the screen.
I would like it to start and sycle once automatically, yet to have user a control over it with buttons.
Does any one know a good tutorial site where I can find something like that?check http://www.greensock.com/tag/tutorials/
-
Scrollable/scalable image with buttons on top of it?
Hey guys,
I've had a few half-goes at doing this before but now have to do it for real in my project and I'm struggling to get something clean and I'm looking for pointers.
I want to have an image (typically a schematic, or a map) which is scrollable and zoomable. I want to overlay some buttons on the image for controlling zoom (and other things, but lets keep it simple for now). I want the whole thing to be a custom component that I can drop into another panel, and for that custom component to be resized nicely inline with its parent (i.e. if I put it in a BorderPane.center it should take up the available space and no more or less).
So I started with something logical/simple, a StackPane at the top-level with a ScrollPane containing an ImageView as the first child, and then an 'overlay' panel as the top child of the StackPane to conatain my buttons. I want to anchor my buttons to the top right of the image so I use an Anchor Pane for this. Something like:
public class MapView extends StackPane
public MapView()
ImageView imageView = new ImageView(new Image("C:/temp/my-image.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setPannable(true);
scrollPane.setContent(imageView);
getChildren().add(scrollPane);
HBox zoomButtons = new HBox(5);
Button zoomInButton = new Button("+");
zoomButtons.getChildren().add(zoomInButton);
Button zoomOutButton = new Button("-");
zoomButtons.getChildren().add(zoomOutButton);
AnchorPane controls = new AnchorPane();
AnchorPane.setRightAnchor(zoomButtons, 20.0);
AnchorPane.setTopAnchor(zoomButtons, 5.0);
controls.getChildren().add(zoomButtons);
getChildren().add(controls);
}This gives me the perfect layout but with one massive problem: the AnchorPane is stretched to take up the whole area of the StackPane (which is what I want from a layout perspective) but that means it blocks the mouse input to the underlying image view so I can't scroll.
So I try adding a call to the handy setMouseTransparent method:
controls.setMouseTransparent(true);And now I can scroll my image around, but I have the inverse problem: the buttons are now mouse transparent as well so I can't click them.
Snookered.
So maybe a Group is an option? I try using one instead of the AnchorPane:
ImageView imageView = new ImageView(new Image("C:\\temp\\corso\\pandids\\pandid-2.jpg"));
ScrollPane scrollPane = new ScrollPane();
scrollPane.setPannable(true);
scrollPane.setContent(imageView);
getChildren().add(scrollPane);
HBox zoomButtons = new HBox(5);
Button zoomInButton = new Button("+");
zoomButtons.getChildren().add(zoomInButton);
Button zoomOutButton = new Button("-");
zoomButtons.getChildren().add(zoomOutButton);
Group group = new Group(zoomButtons);
getChildren().add(group);I get my buttons in the middle of the screen and I can both scroll my image and click my buttons. But I can't figure out a way to anchor the buttons up to the top right. Group seems to resize itself to the contents of its children (I imagine there's a reason for this, but it makes Group completely unusable for every scenario I've had for it), so I can't really adjust the size or position of the Group. Calling resize() seems to have no effect and there's no setMaxSize or setPrefSize. Calling setLayoutX doesn't do anything cause its all within a StackPane. The only horribly hack I can think of is to add a dummy component to the group which is the size of the container the group is in. Too painful and too fragile to be a real option.
Snookered again.
Maybe I need a Group at the top level instead of the StackPane, but then it all goes a bit nuts with the ImageView sizing and layout pretty much totally gone.
The only other hack I can come up with is to put my own mouse listener on the anchor pane and implement 'panning' manually, but then the scroll bars won't work so I'll probably have to turn these off.
It seems like this should be really easy, and the first, logical simple approach was so close it hurts. Am I missing something simple, or is it really this hard?Hi Zonski,
what about this?
Group group = new Group(zoomButtons);
group.translateXProperty().bind(group.layoutXProperty().subtract(20));
group.translateYProperty().bind(group.layoutYProperty().multiply(-1).add(20));
getChildren().add(group);Works for me
Cheers
Michael -
Still image with button selection
I'm a newbie with DVD Studio Pro so pardon me if this is a stupid question. I've created my own menu background in Photoshop for a standard menu. This is a chapter index menu. My buttons highlight and function correctly, playing the proper assets. However, in addition to selecting a button and seeing it highlight, I'd also like to have a still image appear in one quadrant of the screen. Each button would trigger a different still image to appear in that quadrant (the stills are taken from the assets relative to each button).
I've tried bringing the stills in as shapes and putting them in a drop zone in that quadrant (which looks great) but can't figure out how to get the buttons to trigger each image. Is this even possible? Am I trying to do something in a standard menu that can only be done in a layered menu? My understanding is that you can't have music with a layered menu (I do have music) so I'd like to do this in a standard menu.
Thanks for any help,
DanBasically layer menus would do this, but they do have issues with compatibility (really it is a series of menus wheen it is done)
But to trigger sections like you described, no real way of doing that. You can play with overlapping buttons (NOT A GOOD IDEA) and color mapping, but to get what you want, really no good way without series of menus or perhaps using a track as a menu with subtitles/images, and even then iffy how it will work on some machines -
Rollover images with buttons not working on subsequent pages.
I'm trying to create an interactive PDF wherein images "pop-up" when the cursor rolls over a trigger button. I've successfully employed the Buttons feature to create three such images on one page. However, on a subsequent page images will not appear upon trigger rollover. All three work perfectly on that first page, and I'm using the same procedure on all images/buttons. I checked to see if something was going on in the Tab Order, but each page has its own Tab Order, so I don't know about that. Working in CS6 for Mac.
In my InDesign file, I have been very meticulous to link each trigger button with the image button and to assign the appropriate actions to the trigger button. Based on what I have learned, when doing this with InDesign, you make both the trigger object--whether an image or, in my case, a box at 0% transparency that covers text--and the object to be shown/hidden into buttons. Maybe that's where I am getting this wrong? Still, that obviously works for some instances and not for others, so this is confounding.
I do see what you mean about manually adjusting the objects in Acrobat, and that's a trick for adjusting one or two things, but it's tedious to do that with many links in a document that I'm working on. Given the number of "pop-ups" that I want to create for my completed document, the solution has to take place in InDesign.
Additionally, I have tried just about every permutation of tab orders in the Object-->Interactive-->Set Tab Order feature in InDesign. All to no avail.
I thank you very much for your time and efforts on this, Gilad. And I apologize for my lack of facility with forum standards (e.g. "How do I post a file, duh?"). Long time reader, first time post-er, haha. -
Sliding images with clickable images
I am making a video site for a film director which includes lots of his tv commercials.
I am on a Mac and am building the site in Muse.
I have made an image banner from lots of tiny images from his work that will run along the bottom of the page.
I want the user to be able to click on an image to take them to a video page.
I want the banner to move across the page when clicked (from right to left).
Does anyone know how to do this? Should I use a gallery widget or perhaps anchors? Do I have to make it in Edge Animate first?
Any help is greatly appreciated.
thank you!
Here is a sample of a similar banner (photo of page and a link to page below.)
Also a screen grab from the site that I'm building.
http://markus-altmann.de/seiten/br.php?id=MarkusAltmann_Handwerker_4077_1_1.jpgThank you so much Sanjit!
I’ll give it a go.
Cheers
Jill
Jill McKay
Freelance Director’s Assistant & Web Designer
0400 177 952 -
Image with transparent background als foreground of a button
I'd like to build an app with buttons using the phone's accent Color as Background and an Image with transparent Background as foreground of the button. It should look like the tiles on the start screen of WP8.1.
The following code doesn't work (no foreground appears)
<Button x:Name="myButton" Background="{ThemeResource PhoneAccentBrush}">
<Button.Foreground>
<ImageBrush ImageSource="/Assets/myImage.png"/>
<Button.Foreground>
</Button>
Are there any ideas?
Thanks
MartinHi mfv_technet,
The Foreground property is used to get or set a brush that describes the foreground color. So we can not bind the Foreground to a image,
if I do not misunderstand you, in my mind if we want to set the button look like the tiles on the start screen of WP8.1, maybe you can try to refer to the following xaml:
<Button x:Name="myButton" Foreground="Red" Background="{ThemeResource PhoneAccentBrush}" Margin="116,136,0,363" Width="195" Height="141">
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source="/Assets/myImage.png" Width="80" Height="80"></Image>
<TextBlock Text="Button"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
The result:
If I have misunderstood you, please feel free to let me know.
Best Regards,
Amy Peng
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. -
I Have a UITableView with 17 row. in last 17Th row i applyed cell.selectionStyle = UITableViewCellSelectionStyleNone;
and in this row i also put UIButton with Image …
my QUESTION IS that i want in 17Th row when user tapped Image on button. then Image is hide and when user again tapped then image is shown …
so PlZ…help me how can i put logic..
Thanks FrNdZZzzzz…Sign in:
https://developer.apple.com/devforums/
If you're not a developer, you need to join first:
https://developer.apple.com/programs/register/ -
How to add an image or button to an AdvancedDataGrid cell with wrapped text alongside
I have an advanced data grid with which i need to add either
images or buttons to individual cells alongside the text.
This i can do, but what i can't figure out is how to make the
text wrap.
Currently, I can make cell text wrap by using an itemRenderer
which extends Text. Or, I can add an image or button to a cell by
using an itemRenderer which extends HBox and contains an image or
button child. To this HBox i can add a Text or Label object also,
but i can't make the text wrap.
Does anyone have any ideas/suggestions/solutions????
Thanks
Mark"ms10" <[email protected]> wrote in message
news:g8jlb5$l6p$[email protected]..
>I have an advanced data grid with which i need to add
either images or
>buttons
> to individual cells alongside the text.
>
> This i can do, but what i can't figure out is how to
make the text wrap.
>
> Currently, I can make cell text wrap by using an
itemRenderer which
> extends
> Text. Or, I can add an image or button to a cell by
using an itemRenderer
> which
> extends HBox and contains an image or button child. To
this HBox i can add
> a
> Text or Label object also, but i can't make the text
wrap.
>
> Does anyone have any ideas/suggestions/solutions????
I'd look at the code for AdvancedDataGridGroupItemRenderer
and try to see
what keeps it from displaying an icon in the columns that are
not grouping
columns. I'd then extend it to change that and use an icon
function.
HTH;
Amy -
I have just started to use Muse for our design agency and learning how to build ourselves a new site, I have managed to create a basic lightbox which contains sliding images, what I need to do now is have a pop up window which goes into detail about the projects, what I would like is a piece of text or icon that when you roll over it and then click a separate window pops up with additional information in, once finished reading the info you can then click to close the box, any advice on how to do this?
The best way to do what you're asking is with the Composition widget. Start with the Tooltip preset, which, by default shows the info on rollover. You can change the option to show on click, which is what you're after. You can also add the close button or have the info disappear on rollout.
David -
Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image. -
Photo gallery with buttons and php.
I am relatively new to actions script, very new to as3, and brand new to php. I have tried very hard to figure all of this out via tutorials, studying the code, etc but now I'm running out of time to get this done so I need some help.
I am trying to make a photo gallery that functions as follows:
-the php gathers all of the filenames from a folder and returns it to flash
-an array of buttons is loaded onto the stage (one for each photo)
-flash then loads the first image into a movie clip.
-when the user clicks on button[i], image[i] loads in the movie clip.
-i also plan to incorporate what might happen if the number of photos exceeds the number of buttons that can fit nicely on the stage, like an arrow to go to another set of buttons. I haven't tried coding this yet since I was just trying to get the thing to work in general first. If anyone has ideas about this, let me know.
Please don't make fun of me too much. I know it's probably a mess.
Thank you so much in advance for your help.
Here's the php:
<!--
Author: Adam Ehrheart
Site: http://adamehrheart.com
Blog: http://flashcamp.net
Date: 4.21.08
-->
<?php
# Use "." if the get_files.php file resides in the same directory as files being read
# Otherwise you can change the path to whatever you like
# eg:
# Same Directory:
# $path = ".";
# Other Directory
# $path = "products/images/"
$path = "Photography/";
# Choosing what directory to read
if ($handle = opendir($path)) {
# Temporary array to hold image files
$imageFiles = array();
# Creating loop and assigning current file to $file temp variable
while (false !== ($file = readdir($handle)))
# Checking wheter or not the file is invisible and starts with a "."
$fileCheck = substr($file, 0, 1);
# Checking to make sure the files is either a (jpg, JPG, png, PNG)
$fileType = substr($file, -3);
# Making sure file is not invisible
if($fileCheck != ".")
# Making sure file is readable and dynamically loadable by Flash
if($fileType == "jpg" || $fileType == "JPG" || $fileType == "png" || $fileType == "PNG")
# Adding File to the image array
if($path != "."){
array_push($imageFiles, $path . $file);
}else{
array_push($imageFiles, $file);
# Sorting the files alphabetically
sort($imageFiles);
# Creating XML File output to be read by Flash
echo "<?xml version=\"1.0\"?>\n";
# Root Node
echo "<image_list>";
# Creating child nodes for each image
foreach($imageFiles as $value)
# Pulling the Width and Height values for each file and adding them as attributes for the image node
list($width, $height) = getimagesize($value);
# Creating the image node
echo "<image width=\"$width\"" . " height=\"$height\">" . $value . "</image>";
echo "</image_list>";
# Closing the readdir function
closedir($handle);
And here's the as3:
//php photo section
import flash.events.Event;
import flash.net.*;
//load the php file
var myRequest:URLRequest = new URLRequest("Photography.php");
var myLoader:URLLoader = new URLLoader();
//define images variable as an xml file
var images:XML = new XML();
images.ignoreWhite = true;
images.addEventListener ('load', myLoader);
//define the images variable as an xml as the php file result
myRequest.data = images;
//outputting the filenames
function onLoaded(evt:Event):void {
trace("here we get the data back: "+myLoader.data);
//when the data is loaded, begin myRequest
myLoader.addEventListener(Event.COMPLETE, onLoaded);
myLoader.load(myRequest);
//array to call the images
var imageArray:Array //= NewArray();
var listLength:Number;
var il:XMLList = images.data //xml.images;
listLength=il.length();
var i:Number
var photo_btn:Array = new Array();
for (i = 0; i < listLength; i++); {
imageArray[i] = il[i].pic //xml.images[i].pic;
if (photo_btn[i].mouseDown == true) {
img_loader.load(imageArray[i])
if (i == 0) {
photo_btn[i].y = 422.7;
photo_btn[i].x = 411.5
else if (i > 0 && i < 24); {
photo_btn[i].y = 422.7;
photo_btn[i].x = (photo_btn[i-1].x + 18.6);
if (i > 24 && i < listLength); {
photo_btn[i].y = 442.7;
photo_btn[i].x = (photo_btn[i-1].x + 18.6);
img_loader.load(imageArray[0]);As for AS3 part of it, I am not sure your code really works. There are syntax and logical errors there.
I think you need to take it step by step and accomplish several task in the following sequences:
1. Write code that loads XML correctly;
2. Write code that enables buttons;
3. Write code that will load images on button clicks.
The code below shows in principal what needs to be done in order to load XML and make the data in this XML available for further consumption. Also, by accomplishing this step you will iron out all the PHP vs Flash wrinkles including your XML.
Please note, I don't know your XML structure so all the parsing issues you need to resolve yourself.
Once you get handle on it - we, hopefully, will talk about steps 2 and 3.
import flash.display.Loader;
import flash.events.*;
import flash.net.*;
var images:XML;
var myRequest:URLRequest;
var myLoader:URLLoader;
// list of image urls that will come from loaded XML
var imageList:XMLList;
myRequest = new URLRequest("Photography.php");
myLoader = new URLLoader();
myLoader.addEventListener(Event.COMPLETE, onFileLoaded);
// suggested handler for unexpected errors - avoids some headaches
myLoader.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
myLoader.load(myRequest);
// Note: all the listeners are removed
// it is always wise to remove listeners that are needed any longer
// to make objects eligible for arbage collection
function onLoadError(e:IOErrorEvent):void
trace(e.toString());
myLoader.removeEventListener(Event.COMPLETE, onFileLoaded);
myLoader.removeEventListener(IOErrorEvent.IO_ERROR, onLoadError);
function onFileLoaded(e:Event):void
myLoader.removeEventListener(Event.COMPLETE, onFileLoaded);
myLoader.removeEventListener(IOErrorEvent.IO_ERROR, onLoadError);
images = new XML(myLoader.data);
// only now xml is ready and you can start loading images
imageList= images.pic; -
Hi all,
Please can you help? No matter what settings I use in my print options in InDesign CC 2014 (v.10), ALL transparent images with a drop shadow are printing with a white box behind the image. If I remove the drop shadow, all prints fine. I know this is an old issue that happens with ID sometimes but I have been lucky enough to never have had it happen to me before! (All images are regular flattened TIFF images with clipping paths).
Also, feathered edges are not printing correctly and are sharp instead of feathered.
When I export the document to IDML and open it up in InDesign CC (v.9) all prints perfectly with no white boxes and feathered edges prints perfectly as well. I have compared all of the print settings (including color management, transparency flattener, etc.) between both versions and they are exactly the same. I am printing to a Xerox color laser printer. Can anyone offer any advice?
Thank you so much,
ChristineOkay...false alarm! It turns out that the issue was with my PRINTER settings (the settings you customize after hitting the “Printer” button at the bottom of the Print dialogue box in ID CC. I thought I had triple checked this but it seems there was one setting I missed earlier…adjusting the print brightness seemed to cause the issue. SO GLAD to know it was not InDesign…20 or so sheets/prints later….and thankful to know what was causing the issue! Thank you so much Steve for helping at any rate:) Much appreciated:)
-
Images as Buttons and Image Resizing in mxml
Sorry for all the questions but I've run into a problem when trying to create buttons that are just an image in mxml. When I first tried this I couldn't find a way to get the border around the button to dissapear so it ended up looking like my image had an extra black border around it. Then someone here suggested I just set the buttonMode property of an mx:Image to true which ended up working fine to a point. The problem I'm having is that even if I make the tabEnabled property of the image (that I'm using as a button) true, I can't tab over to it. Is there a way to either get rid of the black borders of a button or to make it so I can tab over to an image I'm using as a button?
My second question has to do with image resizing. Lets say I have an image of a horizontal line that I want to put at the top of the mxml page, and I want it to extend the full length of the page, even after the user has resized the browser. Is there a way to do that? I've tried putting the width as 100% or giving the image a "left" and "right" value so that presumably it would be stretched to fit within those but nothing has worked so far. Is there no way to do this or am I doing something wrong?
Thank you for any help you guys can give.Of course, sorry about that. So the following is a barebones example of how I currently implement buttons and images as buttons:
<mx:Button id="facebookButton" icon="@Embed(source='image.png')" width="30"/>
<mx:Image buttonMode="true" id="button" source="anotherimage.png" enabled="true" click="{foo()}"/>
And within the image I've tried making the tabFocusEnabled property true but to no avail.
The following is how I've tried stretching out an image across the whole page:
<mx:Image source="yetanotherimage.png" width="100%" scaleContent="true"/>
<mx:Image source="yetanotherimage.png" left="10" right="10" scaleContent="true"/>
Is this more helpful?
Maybe you are looking for
-
Hi All i have two forms one form is sale_order and other is order tracker what i want when i press the button sale order cotains information about the every sale with a unique ID and order tracker contains list of all orders i want a button on order
-
Cloning Old iMac G4 HD to new (not Intel) G5 iMac HD????
I have a 3yr old white round-base, flat panel iMac and need to replicate my 60gb hard drive to a new 160gb G5 (not Intel version) iMac flat panel hard drive??? I plan to connect the 2 via a Firewire cable, then transfer the hard drive contents..any r
-
Can't select placeholder image in template
Hello there, perhaps I'm too stupid and the solution is such easy. But today I wanted to use the template "You're invisited" to style an invitation for a friends birthday party. In iWork '06, I could select the images on the left side on page 1 and 2
-
I upgraded operating systems and now I can't find my photos in iPhoto. There are only random photos, but I can't find all the other albums I had. Where are they?
-
Upgrade oracle 10gR2(10.2.0.1) xe to oracle 10gR2(10.2.0.3) in Linux 4
Hello everyone, I am using Patchset "p5337014 10203 LINUX.ZIP" to upgrade the oracle 10gR2(10.2.0.1)express edition into oracle10gR2(10.2.0.3).In Installation i got the followoing error: OUI-10091: There are no patches that neeed to be applied from t