Scrolling gallery

Well i'm trying to make a simple scrolling gallery, only for
4 items. attached is what i got so far.
Basically i want the initial x value to be whatever it is at
the current time of mc1.
simple right?
but i don't know how to do it. I'm just starting to code, i
just usually use flash for simple stuff.
Cheers,

Sorry about the incomplete reply
Down load the remote Javascript file from
http://www.carmencicero.com/cc.js
Anything else you need is in the page's source code.
"Ken Binney" <[email protected]> wrote
in message
news:gfhffa$81v$[email protected]..
> You can download the remote Javascript file from
> "hjugkl" <[email protected]> wrote in
message
> news:gffurb$4q7$[email protected]..
>> Hello
>>
>> Can someone point me in the right direction on how
to make a scrolling
>> gallery like this link:
>>
http://www.carmencicero.com/image_display.php?category=collage_print
>> thanks
>>
>
>

Similar Messages

Creating a Horizontally Scrolling Gallery in Muse

I need to create a horizontally scrolling gallery, something that shows four images at a time, and automatically scrolls through said images, a total of about twenty images.
The end result my client wants is for the gallery to show four images, highlight each one at time, and then scroll in the next four, but I don't even see a way to just create a simple scrolling gallery in muse.
Is there any way to do this? Any suggestions for something I can drop into muse to make this happen? I have seen several people ask this question, but it never seems to get any answers, and google has been less than enlightening on this.
Thanks.

Hi Julia,
I understand that I can tooltip over them, but what I'm looking for is something that will allow me to do something like this example on the main page for Lionsgate.com. The functionality I want is to be able to present the player with a menu of thumbnail buttons which will change a main display, very much like what you illustrated above. What is different, however, is that I want the user to be able to SCROLL a list of thumbnails which are contained within a menu window. In this way, if I wanted to have links to twenty or fifty or a hundred buttons/thumbnails, I can present the player with only a few at a time without completely cluttering the interface. They can use arrow keys to scroll up or down through the available thumbnails. It's a very common interface, and Apple uses the ribbon idea as part of their main interface.
Long story short, is it possible to replicate this with existing Muse widgets, or does someone know of a not-too crazy way to do this?
Thanks,
Neal

Flash scrolling gallery - up down right left

I found a Flash parallax scrolling gallery tutorial here:
http://www.webdesignerwall.com/tutorials/parallax-gallery/
but I want the mouse move up and down as well instead of being just right to left.
could anyone help me plzzzzz?
I believe it has something to do with "Z" as well az "X" and "Y"
To be more specific I want to be able to build something like this
http://www.ff0000.com/
when it comes to navigation, simply to be able to move the screen
according to viewer's mouse, up, down, right and left
Here is the code:
stageWidth = Stage.width;
speed1 = 15;
speed2 = 14;
mc1Width = front_mc._width;
mc2Width = back_mc._width;
mc1X = front_mc._x;
mc2X = back_mc._x;
lock_scroll = false;
_root.onEnterFrame = function () {
     if (!lock_scroll)
          scroll_mc();
function scroll_mc() {
     var xdist = _xmouse-(stageWidth/2);
     mc1X += -xdist/speed1;
     mc2X += -xdist/speed2;
     if (mc1X>=0) {
          mc1X = 0;
     if (mc1X<=stageWidth-mc1Width) {
          mc1X = stageWidth-mc1Width;
     if (mc2X>=0) {
          mc2X = 0;
     if (mc2X<=stageWidth-mc2Width) {
          mc2X = stageWidth-mc2Width;
     setProperty("front_mc", _x, mc1X);
     setProperty("back_mc", _x, mc2X);
//create an empty mc container for content to display
createEmptyMovieClip("content_box", 200);
content_box._x = 195;
content_box._y = 92;

Thanks "dmennenoh"
what I'm looking for is a simple and complete tutorial of how to create a
home page in flash
which is sensetive to visitor's mouse so that later on I would be able to
use it as a template and load any kind of swf files into it.
I guess my biggest problem is the explanation of what exactly I want!!!
is it called Parallax scrolling?!!
anyway I have visited tons of website which do what I have in mind
www.coraline.com (click on "enter site" on top of the page in order to be able to see it)
www.hellosoursally.com
www.ff0000.com
any kind of help is much appreciated

Horizontal scrolling gallery like this website

Hi,
having seen this website on Muse's "site of the day" gallery, I was wondering how the horizontal scrolling gallery is done using Muse?
http://4ad20.themysteryparade.com
Are there any tutorials explaing this technology - can you point me to a site? Any experts that have an answer how to do this?
Thanks so much,
Markus

You can change the the Page width , as per your requirement. We just need to assemble few asset, please have a look to the following Video which I have created for you, that should clear few things, in my example, I have created a page with following properties,
Width: 3000px;
Height: 500 px;
Background Fill: none;
Browser Fill: image; Scale to Fill, Scrolling: Unchecked.
http://gauravtestsite4.worldsecuresystems.com/Gaurav/2013-09-18_1525.swf
I hope this will give a basic idea.

How to display large versions of thumbs in a scrolling gallery?

Figured out my original question (different thread title)!
Since I can't delete my post I might as well ask if anyone knows of
a good tutorial for making a scrolling gallery display enlarged
versions of the thumbs.

Thanks Jon! Got it all together..almost (of course!)
Everything works perfect when I run the SWF file from
Windows. My gallery scrolls and when I click on the thumbs
(buttons) a larger version shows up in the space I placed the
loader just as I want. Great!
However....when I insert the file into a webpage (using DW
Insert>Media>Flash) and then preview it in a browser, the
thumbnail scroller loads and works fine, BUT when I click on the
thumbs (the cursor does change to a hand and the over state
appears) the external Jpegs don't load! I've copied and pasted the
images in multiple locations to make sure that's not the issue.
Any ideas??

Trying to get " url " to work in my scroller/ gallery...

trying to get " url " to work in my scroller/ gallery...
please take a look at my action script and xml... ive got all
the fields working except for the " url " ... what adjustments do i
need to make to get the url for each pix to work...
thanks...trey
delay = 3000;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
title = [];
headline = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image
= xmlNode.childNodes.childNodes[0].firstChild.nodeValue;
title
= xmlNode.childNodes.childNodes[1].firstChild.nodeValue;
headline
= xmlNode.childNodes.childNodes[2].firstChild.nodeValue;
description
= xmlNode.childNodes.childNodes[3].firstChild.nodeValue;
firstImage();
} else {
content = "file not loaded!";
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
p = 0;
this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
slideshow();
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
title_txt.text = title[p];
headline_txt.text = headline[p];
description_txt.text = description[p];
picture_num();
slideshow();
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
and here is my xml...
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<images>
<pic>
<image>sample1.jpg</image>
<title>Google</title>
<headline>headline 1</headline>
<description>this is the description of article
1.</description>
<link>
http://www.google.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample2.jpg</image>
<caption>Yahoo</caption>
<headline>headline 2</headline>
<description>this is the description of article
2.</description>
<link>
http://www.yahoo.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample3.jpg</image>
<caption>BAS-llc</caption>
<headline>headline 3</headline>
<description>this is the description of article
3.</description>
<link>
http://www.bas-llc.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
<pic>
<image>sample4.jpg</image>
<caption>USC Trojans</caption>
<headline>headline 4</headline>
<description>this is the description of article
4.</description>
<link>
http://www.uscripsit.com</link>
<targetIsUrl>Y</targetIsUrl>
</pic>
</images>

Extensions that do not have a "Remove" button are installed by other software and are not under control of the Firefox extension manager.
Such globally installed extensions are usually found via a registry scan or are installed in a location that Firefox scans for installed extensions.
*https://developer.mozilla.org/Installing_extensions
*https://developer.mozilla.org/Adding_Extensions_using_the_Windows_Registry
Extensions installed this way need to be removed via the settings (options/preferences) of the program that has added this extension or this program has to be uninstalled via "Control Panel > Programs".
In Firefox you an only disable such an extension.
Create a new profile as a test to check if your current profile is causing the problem.
See "Creating a profile":
*https://support.mozilla.org/kb/profile-manager-create-and-remove-firefox-profiles
*http://kb.mozillazine.org/Standard_diagnostic_-_Firefox#Profile_issues
If the new profile works then you can transfer files from a previously used profile to the new profile, but be cautious not to copy corrupted files to avoid carrying over problems.
*http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox

Kinetic image scrolling gallery on iPad

I'm struggling with this a bit. I'm trying to build a image scrolling gallery which allows you to flick through a horizontal list of images. If you select a pic it will load in a window which sits above the horizontal list. I'm developing this for the iPad.
I keep getting hung up on where to start with this since it's using touch. Not seeing any clear tutorials online. I don't think I want to use any sort of a tweening class.
Has anyone out there done something like this? I'm probably missing something really simple and appreciate any help.
Thank you.

I just make such a 'flick scroll gallery' for iPad. But I still have a problem on its performance.
I have made many of such swfs for PC. First, I deploy it to iPad using PFI but it did not work well ... too heavy for iPad. So I am improving its performance now. It becomes much better than before, but it is still heavier than iPad's native apps (like 'Photo app').
For your reference, my design for the gallery is a 'train' made from three images side-by-side. The train is masked to see only the image at center, and is draggable for horizontal direction. When flick to left ended (for example), if x-position of the train exceeds certain pixels from zero (center position) then the train moves to 'minus width of image' by tween class with 'easeOut' easing. If not, then the train moves back to zero by tween.
When tween is end, if the train's position is NOT zero, switch three images on the train and back to zero immediately. ...Can you imagine? (Sorry for my terrible English.) Of course, you can improve the movement considering flick velocity, etc.
If you or anyone know how to achieve SPEEDY flick scroll (as iPad native apps) by PFI, I will appreciate it very much!

FAQ: How can I create a scrolling gallery of images?

You can use Flash Catalyst to create galleries, for example a scrolling list of thumbnails that display larger images when clicked. Here are some tutorials that explain how:
Create a photo gallery (using list interactions), on the FlashCats blog
Create a data list component -- Don't let the title scare you, a "data list" is a really powerful component to get to know better; it enables creation of very creative visual things like galleries. When you need repeating items, consider using a data list.

Hi there,
You can create a scroll motion where the image will fade out on scrolling, you need to use the Opacity tab under Scroll Effects Panel.
If you particularly need the image to be blur out, then you need to edit that image in any image editing program and make one copy of that image as blurred, then place both images (actual and blurred) on that page and use scroll motion or fade option to replace images.

Scrolling gallery referencing the mouse

Hi - I have another question - I would like to create a
gallery similar to the one seen here in the "at nader" section
running vertically down the page:
http://www.nader.com.au/main.html
I have created something, but it is not doing anything like
what i want - in fact, i actually have no idea where to start with
this...
help!
please :)
The one seen in the "collections" section here:
http://www.fili.com.au/buttons-play.htm
has the attached code in the first frame, but I don't want it
to scroll automatically like this - I want it to scroll with the
mouse movement, and stop nicely like the nader one (with easing I
am guessing)... It's a big ask I know, but I am getting desperate!
:)

Well, I am getting closer and closer, but it is still not
behaving correctly...
I have reloaded the fla here
http://www.fili.com.au/mens-new3.fla
which works fine on it's own, except I still don't have a lot
of control over how far the gallery scrolls... you can't QUITE
click on the first and last buttons - which is a problem :)
http://www.fili.com.au/buttons-play.htm
Here it is all put together - now, I have used the code on
the buttons as here:
on (release) {
loadMovie("mens1.swf",_parent.loader);
to load the individual images into the gallery... but when it
is loaded into the main movie, they don't load. I have made sure
that the "loaders" have diffferent names as sometimes I find there
is a problem if it tries to load something into the same loader...
Sorry - this really isn't making sense :\
Please have a look at my code and tell me where I have gone
wrong!
Thankyou!

Scrolling gallery problem - doesn't reach end of movieclip

take a look
here .
ive tried a majority of what I can find on the internet, however
none seem to be able to scroll right to the end of each side of the
movie clip. is anyone able to point me in the right direction?
also, an acceleration / deceleration would be nice.

I have something like this on my website. The scrolltext is
on a movie clip that is 900 pixels in height and yet the stage is
only 150 pixels high. You can see it at
http://www.jjesteban.com.

Please Help!! How do they do this?! fullscreen background scrolling gallery!?

Hi,
can anyone please tell me how they manage to do this- http://www.herdadeda...ada.com/en.php# as you can see the background is a full screen scrolling gall??? Thanks. G

I'm no JS expert but I would imagine so.
The guys here were working through the same issue, you might find something here:
http://www.dynamicdrive.com/forums/showthread.php?t=41686
I guess you'd just be swapping out the css style background image for an element (div or body tag) on the page after clicking - I'll defer to more enlightened JavaScript coders for more details however.
Cheers
Total Wargamer

Space images in Horizontal scroll

Being new to AS and Flash 8 I am using an online tutorial as a guide to the creation of a horizontal mouse driven scrolling gallery.
I was hoping to use the model script and make simple adjustments of file names and loading specs but it has gone beyond my simple understanding.
I have 64 images which need to load 50 pixels apart starting with a 50 pixels pace. The image sequence will loop. Each image is of constant 385 pixels deep but widths vary and I hoped AS could load them in sequence at 100% instead of using a finite number for the width. The attached file shows the gallery images at bottom right, loaded but all stacked upon each other with the last image uppermost.
Code so far:
this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 64;
var baseX:Number = 0;
var spacing:Number = 50;
for (i=1; i<=imagesNumber; i++) {
container.attachMovie("image"+i,"image"+i+_mc,i);
myImage_mc = container["image"+i+_mc];
myImage_mc._x = baseX
myImage_mc._y = (Stage.height == myImage_mc.height);
baseX = baseX + myImage_mc._width + spacing
Once I get the loading process correct I think I can revert to the tutorial model for the rest of the AS.
Can anyone help please?

Thank you both for the response guys.
The code above is part of a tutorial describing the AS to create a mouse driven scrollable gallery. The tute uses thumbs and clicks to a larger image window from each thumb. I simply wanted to create a gallery of images straight out of the fla Library to a standard height. I figured the exercise would allow me to engage constructively with AS in a real project. the code is only the first part of the tute project. I changed the code image names to suit my files and the fact that the model has thumbs and images suggests I may have rendered some code unusable or redundant and caused a malfunction in the Test. Yup, I am trying to run before I can walk and the points you guys have made illustrate the need for me to assemble specific code models instead of trying to adapt code at this stage when I know so little.
I want to sincerely thank you guys for your helpful responses. I shall check out each code element again in the light of your observations. I very much appreciate your detailed observations.

Dynamic Gallery in Flash

Hello everyone,
I'm trying to build a dynamic gallery in flash, but I need some help on how to implement some special tactics. The downside of it is, its a two step process.
For starters, my ulimate goal is to build a horizontal scrolling gallery thats similar to the Microsoft Surface touchtable interface as shown here: http://news.cnet.com/2300-1041_3-6211837.html, but implements the transitions of the Pastel Stories header as shown here: http://www.pastelportal.com/stories/
When the centerpeice icon is in the center focus, its larger than the rest of the icons and you can move your mouse from left to right to scroll through the gallery. Ive seen some variations of this, but none of them offer what I'm trying to accomplish. The main image is not focused in the center and/or the images arent spaced out evenly enough.
The second part of this process, its kind of difficult. You see when the user clicks on the icon, it takes them to a sublayer where they can view the photos in the same similar fashion as the initial gallery. The only problem is the transition. You can see the transition and/or flash component I'm trying to accomplish in the pastel stories header swf.
If anyone knows of any ideas on how to implement these tactics or knows of any tutorials or any "for-purachase" files, please let me know! Thanks!

try:
txfe.text = xmlFile.section[int(m.currentTarget.details) -1].details;
instead of
txfe.text = xmlFile.image.[int(m.currentTarget.details) -1];
and add your thumbs to gal, not the stage. when you're done with the gallery, remove gal.

Movie Clip Thumbnail Gallery

I'm using Flash 8 Professional
Here's the swf:
http://208.131.133.122/flash/
And my fla:
http://208.131.133.122/flash/scene.fla
(8MB sorry!)
Right now, when the mouse is in the same _x position as the
last thumbnail, the thumbnails slide gently to the left to reveal
more thumbnails then slide back to the right when the mouse moves
to the left again.
The problem is that they start sliding to the left whether or
not the mouse is over the thumbnail gallery. If the mouse is at the
bottom of the screen or the top of the screen and in the same _x
position as the last thumbnail, they will begin sliding.
I would like the thumbnails to begin sliding only when the
mouse hovers over the row of thumbnails and not when it is outside
that thumbnail area.
I added some actionscript to stop the movement of the
movieclip when the mouse is above the max or below the min _y
position of the clip; but, it does not work.
I don't really know what I'm doing. Can someone.... anyone...
tell me if this is something that can be done? And if yes, how?
Much thanks in advance.

I see that your first wooden button is a 'scroll down' button
which plays through
the length of the thumbnails. Do you mean you want to
replicate and reverse this on the third wooden button 'scroll up' ?
I'm just guessing here but I'd say you accually have your
thumbnail gallery scrolling down as a motion tween and your scroll
up button just has a 'goto previous frame' type function on it?
If the previous statement is true then I would suggest two
options for you.
1.) You take the scrolling functionality out of a timeline
and do it all with action script. This would be the most effective
way of doing it.
2.) Since you probably don't want to make serious edits to
that .fla. Here's another way. You have a boolean called 'is_rev'
and a function called 'play_backwards'. These are contained within
the same movie clip as your thumbnail gallery.

Your third wooden button has these actions on it.
on(release)
this.is_rev = true;
this.prevFrame(); // This is to start the reverse loop;
Your first wooden button would have this on it.
on(release)
this.is_rev = false;
this.play();
Your second wooden button would have this on it.
on(release)
this.is_rev = false;
The function would be:
function play_backwards()
if(this.is_rev)
this.preFrame();
Now on every single frame of your scrolling gallery you need
to call this.play_backwards();
Please note the way I structured the coding assumes every
object is on the same timeline. If your buttons are in a
different/parent movie clip relative to your gallery movie clip,
your going to need to make sure 'this' is set relative to the two
objects. (i.e. on your button -> this.prevFrame(); would
probably be this.gallery.prevFrame(); )
A quick design note. If your buttons symbolize scrolling not
movement they should be reversed since as the thumbnail gallery is
moving upwards the user is scrolling downwards.

Side scroll bar

Hi everyone/anyone,
The blue side scroll bar has disappeared when I go on Safari. It showed up on google.com but has gone away for every other site I have tried. I cannot even do a two finger scroll down anywhere. Did I press a button to make it go away? Help
Thanks in advance

I have a question. I use IWeb, and want to know how to make a side-scrolling photo gallery.
I want all the pictures down the side (vertically) and when you press on the picture in the side scrolling gallery, the enlarged pictures come up on the page.
Make Sense? I have seen many websites like this, and would like to know how to do this on iweb.
Thank You.

Scrolling gallery

Similar Messages

Maybe you are looking for