Spacing a scrolling thumbnail gallery
Hiya,
OK...easiest thing is for you to take a look at this
CLICK FOR SAMPLE
Click on photo...click to view portfolio...click landscapes
and you'll get an idea of what i'm trying to achieve.
The idea is that when you roll over the images they grow to
give a larger view. Each thumbnail is a movie with action script to
make it expand on rollover and shrink on rollout.
As you can see, when the images expand they overlap the
thumbnails and appear under the thumbnails on the right...doesnt
look too impressive. Obviously the effect i wish to achieve is that
the thumbnails spread either side of the enlarged image. Is there
any coding I can sue to achieve this?
Alternatively (and possibly in preference to this) is it
possible to create the effect of a mac dock - i.e. the images
gradually get smaller away from the cursor -
SEE
THIS IMAGE. I'm guessing I would need to define an objects size
depending upon how close to its centre the cursor is.
Can anyone help me out?
Thanks very much!
Alex
Hello aniebel,
i am trying to create the same sort of panel scroll but am
having trouble having the panel sroll from left to right when mouse
is over. here is what i have so far:
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
var b = stroke.getBounds(_root)
function scrollPanel () {
if(_xmouse<b.xMin || _xmouse>b.Max ||
_ymouse<b.yMin || _ymouse>b.yMax);
this.onRollOver = panelOver;
delete this.onEnterFrame
if(panel._x >= -348.2) {
panel._x = -348.2;
if(panel._x >=-839.5) {
panel._x = -839.5;
var xdist = _xmouse -383;
panel._x += -xdist / 7;{
does this make sense??? or am i just confusing things??
thanks in advance.
Similar Messages
-
Hello. I am trying to create a gallery that has one large image on top and a horizontal strip of thumbnails on the bottom of the layout. I need the thumbnails to be able to scroll and be a button to change the large image on top. This is for an interactive pdf for my iPad. When I import the folio onto my iPad the thumbnails scroll but do not act like buttons to change out the large image. Any help would be extremely appreciated. Thank you.
Yeah I'll walk through my process real quick. I made 12 picture boxes that spread out past the page size. I inserted different jpgs into each one. I copied those to the top of the layout, aligned them horizontal and vertical, then resized them to fill most of the page. Those stack of large images I then turned into an MSO. Next I turned each thumbail into a button and assigned them to the proper state. Then I created a picture box where I want the thumbnails to be seen. I grouped the thumbnails, cut them, then did "paste into" into the picture box. The thumbnails still show the button icon on them in ID. When I upload the folio and open it on my iPad the thumbnails scroll but the thumbnails do not function as buttons for the MSO. Thanks for your help.
-
Neet to make an as3 scrolling thumbnail gallery
Hey , i need some suggestion and tips on how to do and what to search for to accomplish what i need. Here's what i want to make:
have 30 photos and 50 , so 2 gallery's . - make thumbnails small for the pics inside a MC with saturaion -90 and it should be with mosue control .. when i rollOver a pic the saturation changes to 0 and when i rollOver Left side and Right side to MC ,the pics to go right or left depending where the mouse is. When i RollOut mouse, th animation to move on either side with a slow speed. and when i clik on a thumbnail pic i need it to enlarge and center align or left align ; and i want to have be able to wirte some text besides the photo. and a X butn to close the image and resume the animation.! Bassically thats what i need to make; a more complex thing i want is that when i enlrge any pic , i want to appear on a side the text + another gallery image with thimbanils and a scrollbar and when clicked on them to enlarge.
My project is that : i have Event Flyers and when click on each eventFlyer i need to enlarge that flyer and to have another galerry with images from that respective event. I need to make that for every flyer
i hope u understand and please give me any suggestin on how to do that, any tip , what kind of code to search for to achieve that. I have to do it on my own i dont want to buy a galerry template .
I'm not very good at AS, but i want to learn and search to do it.
Only AS3 i need, i prefer not a very complicated option for what i want, but if isnt a simpler way , for the beginners, its alright a complex work too, just have to study more.
What i'm thinking is 2 find out what code ,process, steps i need to do for my gallery so i can search,find,learn and put together to accomplish my gallery; pls point me in a good direction!
Thanks alot!If you want to do it on your own, and find it on your own, then use Google as search with terms relevant to your needs. Generally, you should include "AS3" and "tutorial" as part of your search keywords. Beyond those two, include terms that are directly relevant to what you want to find.
Try something like "AS3 gallery tutorial" for starters and refine it if you don't find something relevant to your needs. Be aware that anything you find is not likely to be exactly what you want, so you will need to gain enough knowledge as a Flash developer to be able to understand how to manipulate what you find into what you need. -
Howdy,
I would like to create an sliding xml drivin photo gallery,
similar to
this
one at flashkit but all linear and only previous and next
buttons, no numbers. Any ideas?
Thanks,
ConradHi --
I clicked on the link for your gallery and the images load??
Both when I
click on the image or when I click the "next" and "previous"
buttons --
although the "hit" area for the buttons is below the actual
text so you
should adjust that on those buttons. I would also recommend
not making the
text selectable so the cursor won't change to the "I bar"
Rich
"joesavy" <[email protected]> wrote in
message
news:fcp3qi$4ak$[email protected]..
>I created an XML scrolling thumbnail gallery using a
>
http://www.kirupa.com/developer/mx2004/thumbnails.htm
>
> I then had to alter the action script to get my
thumbnails to display
> properly
> -- they were spaced out or overlapping each other and
not in the sequence
> specified in the XML file. The new code works great
locally, but the
> thumbnails
> and larger image refuse to load remotely in every
browser i've tried. Any
> thoughts on how to alter the action script to load the
gallery?!?! I'm not
> much
> experienced in Flash so any help would be most
appreciated.
>
> You can find the page with my unloadable gallery
>
http://www.sullivancreative.com/clients/se-07-7-24/se_website/gallery.html
>
> You can see my action script in my
>
http://www.sullivancreative.com/clients/se-07-7-24/se_website/xml_photogallery_s
> crollthms_fix.fla
>
> Thanks!
> Joe.
>
> -
Tutorial on creating a scrolling thumbnail menu in AS 3.0
I've found several good tutorials in AS2.0 on creating a scrolling thumbnail menu bar for adding to a photo gallery, but nothing in AS3.0. Anyone have a tutorial or code they'd like to share?
A solution using tilelist component
import fl.controls.TileList;
import fl.controls.listClasses.ImageCell;
import fl.data.DataProvider;
import fl.events.ListEvent;
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Loader;
import flash.net.URLRequest;
var loader:Loader;
var dp:DataProvider = new DataProvider();
dp.addItem({label:"IMAGE 1",source:"images/image1.jpg"});
dp.addItem({label:"IMAGE 2",source:"images/image2.jpg"});
dp.addItem({label:"IMAGE 3",source:"images/image3.jpg"});
dp.addItem({label:"IMAGE 4",source:"images/image4.jpg"});
dp.addItem({label:"IMAGE 1",source:"images/image1.jpg"});
dp.addItem({label:"IMAGE 2",source:"images/image2.jpg"});
dp.addItem({label:"IMAGE 3",source:"images/image3.jpg"});
dp.addItem({label:"IMAGE 4",source:"images/image4.jpg"});
dp.addItem({label:"IMAGE 1",source:"images/image1.jpg"});
dp.addItem({label:"IMAGE 2",source:"images/image2.jpg"});
dp.addItem({label:"IMAGE 3",source:"images/image3.jpg"});
dp.addItem({label:"IMAGE 4",source:"images/image4.jpg"});
tilewindow.width=500;
tilewindow.height=100;
tilewindow.dataProvider = dp;
tilewindow.rowCount=1;
tilewindow.addEventListener(ListEvent.ITEM_CLICK,loadImage);
function loadImage(event):void{
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,oncom);
loader.addEventListener(IOErrorEvent.IO_ERROR,onerr);
loader.load(new URLRequest(event.item.source));
function oncom(event):void{
container.addChild(loader.content);
loader.content.width=500;
loader.content.height=250;
function onerr(event):void{
trace(event);
complete source can be found here http://www.4shared.com/file/zeOd0Dey/tileListcomponent.html -
XML scrolling thumbnail, image loader, & Buttons [halfway works]
Intro:
I started a flash-based website a few years ago. Back in 2006 I was able to get a xml scrolling thumbnail, image loader to work without a glitch.
For numerous reasons I had to put the project on hold until now. [one was that my 30 day trial of flash expired and only recently was I able to purchase the Adobe Web Suite CS4 as well as a new computer which could run the apps.]
Last Friday saw a bump in the road in the development of my site as two, rather straightforward task, turned into something short of a nightmare as I have been unable to get past these two, seemingly, relatively simple task.
I have posted in 4 other flash forums the issues, in detail, that I am facing - and have quite a bit of interest/views in the topic as the numbers suggest - yet no response/answer as of yet. [Which confirms other messages I have seen which seem to state that working with buttons has become increasingly difficult with the newer version of flash - something Im a bit surprised with actually from Adobe. - I would have thought there would be a palette where you could set parameters...]
Screenshot of Site/Timeline:
Before getting into the two questions I have, I would like to post an image of the site as it looks whenever an swf file is saved out, as well as a piece of the timeline in the back for reference.
Issue #1
As of now when the swf file is saved out you get exactly what you see above:
a: A scrolling thumbnail
b: ...which loads a large image when clicked on it - PEFECT...
BUT...
1a: I need for the buttons to load in this action, not for it to just load on its own.
[i.e., the silk_paintings gallery is what is open, so I need the "silk_paintings" button to call up this action]
note: Initially I had attacked this problem by taking out the actions layer you see above and applying it directly to the individual buttons with some crude MouseEvent Listener/Handerls... that did not work - at all.
Im sure it may be "easier" to make an array out of it, but with my coding level it may be "easier" to apply it to the buttons.
1b: How I currently see it, I would take the xml-list and duplicate it for the number of galleries I have.
[I would then re-name the xml-list to reflect the name of the galleries they are to represent, i.e. "silk_paintings"]
[also, I would have to rename the folders to "thumbnails1,2,3, etc., & "images 1,2,3, etc"
From there I would duplicate the actions and paste it into the buttons, changing the xml-list name to that of "silk_paintings", etc., as well as write in the MouseEvent listener Handler to make it work. [ah, ha, but what is that magic phrase, I have tried to implement various code from other tutorials, and all in vein.]
Issue #2
At this point I would be tickled pink just to get this to basic function to work.
However, once the buttons are working and calling up the xml, etc., then I need the buttons to stay on the semi-transparent blue color it is whenever in the 'hit' state. [note: NOT pictured above.]
With the way the buttons are currently set up, and with wanting to use scripting to get them to interact with the thumbnail gallery, it will have to be some miraculous code to tell that button what color to stay as whenever its clicked, and of course it going back to white when another button is clicked.
Conclusion:
Since this is an Adobe Forum I would like to make a few additional statements in hopes that the developers, etc. may take heed.
Adobes products are not cheap, and when I went to purchase the websuite I went in as a designer needing a program as not to need to program.
I understand the flexibility that coding gives, but something as simple as linking buttons should not be in the realms of rocket science. [yes, for many its not...but my brain just does not operate that route despite all the tutorials thrown at me.]
Again, it would seem that there would be a button panel where you could drag options like scrolling thumbnail slider, loader, and then parameters would come up. [much like Apples iWeb. - but before the argument of one being pro and the other for non-pros, I see it differently. Software should not be the limiting factor in how flexible you can design, or rather ones lack of programming shouldnt be. With all the talented, and I say this in all humility and honesty, programmers working for Adobe, Im sure something could be programmed like what Im asking for.]
note: Director is a good example, back in 1997 I knew nothing of multimedia and in one week I had assembled a portfolio, clicking buttons, speech, movies, and all. - and no, I dont have the money to buy more software!
At this moment I am at the mercy of someone who reads code like its a nighttime tale they are telling their kids, and who can see the exact issue I have and can share the appropriate, correct code. [as I have noticed, it has to be on target - naturally - but this target changes with just a slight change in the design.]
Thank you,
peace
Dalen
p.s.
The actionscript: [note: This is only the current working/good code that Im trying to get the buttons to call up.]
stop();
fscommand("allowscale", false);//keep SWF display at 100%
var x:XML = new XML ();//Define XML Object
x.ignoreWhite = true;
var fullURL:Array = new Array;//Array of full size image urls
var thumbURL:Array = new Array;//Array of thumbnail urls
var thumbX:Number = 25;//Initial offset of _x for first thumbnail
x.onLoad = function(){ //Function runs after XML is loaded
var photos:Array = this.firstChild.childNodes;//Defines variable for length of XML file
for (i=0;i<photos.length;i++) {//For loop to step through all entry lines of XML file
fullURL.push(photos[i].attributes.urls);//Each loop, adds URL for full sized image to Array fullURL
thumbURL.push(photos[i].attributes.thumbs);//Each loop, adds URL for thumbnails to Array thumbURL
trace(i+". Full Image = "+fullURL[i]+" Thumb Image = "+thumbURL[i]);
var t = panel.attachMovie("b","b"+i,i);//Each loop, Define local variable 't' as a new instance of 'b' movie clip, given unique instance name of 'b' plus the index number of the For loop
t.img.loadMovie(thumbURL[i]);// Each loop, load thumbnail image from XML data into variable movie clip
t._y = 0;//Set Y coordinate of variable movie clip
t._x = thumbX;//Set X coordinate of variable movie clip based on variable thumbX
t.numb = i;//Set sub-variable 'numb' inside variable t to hold index number
t._alpha = 75;//Set the Alpha value of the variable movie clip to 75% - for onRollOver highlight action
thumbX += 55;//Increment thumbX value so next thumbnail is placed 125 pixels to the right of the one before
t.onRollOver = function () {//define onRollOver event of the variable movie clip
this._alpha = 100;//Set thumbnail alpha to 100% for highlight
t.onRollOut = function () {//define onRollOut event of the variable movie clip
this._alpha = 75;//Reset thumbnail alpha to 75%
t.onPress = function () {//define onPress event of the variable movie clip
this._rotation += 3;//rotates thumbnail 3 degrees to indicate it's been pressed
this._x += 3;//Offset X coordinate by 3 pixels to keep clip centered during rotation
this._y -= 3;//Offset Y coordinate by 3 pixels to keep clip centered during rotation
t.onReleaseOutside = function () {//define onRelease event of the variable movie clip
this._rotation -= 3;//rotate thumbnail back 3 degrees
this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during rotation
this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during rotation
this._alpha = 75;//Reset thumbnail alpha to 75%
t.onRelease = function () {//define onRelease function to load full sized image
this._rotation -= 3;//rotate thumbnail back 3 degrees
this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during
this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during
this._alpha = 75;//Reset thumbnail alpha to 75%
holder.loadMovie(fullURL[this.numb]);//Load full sized image into holder clip based on sub-variable t.numb, referenced by 'this'
holder.loadMovie(fullURL[0]);//Initially load first full size image into holder clip
x.load ("silk_paintings.xml");// path to XML file
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse<b.xMin||_xmouse>b.xMax||_ymouse<b.yMin||_ymouse>b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
if (panel._x >= 740) {
panel._x = 740;
if(panel._x <= (thumbX-10)) {
panel._x = (thumbX-10)
var xdist = _xmouse - 830;
panel._x += -xdist / 7;
The xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<slideshow>
<photo thumbs="thumbnails/i_brown_fairy.jpg" urls="images/brown_fairy.jpg" />
<photo thumbs="thumbnails/i_blonde_fairy.jpg" urls="images/blonde_fairy.jpg" />
<photo thumbs="thumbnails/i_flower_fairy.jpg" urls="images/flower_fairy.jpg" />
<photo thumbs="thumbnails/i_red_fairy.jpg" urls="images/red-fairy.jpg" />
</slideshow>
Attached is a link to the file I made named "index".
https://rcpt.yousendit.com/706233226/5e7b4fe0973dacf090b5cbae32c47398
I would have liked to have included the following files but was limited due to "you-send-it" not uploading folders. Files not included: [but functioning] : xml list - images [folder] - thumbnails [folder]
Again, Thank you
DalenThe issues with the buttons calling up the scrolling thumbnail panel have been resolved, as well as keeping the buttons in their hit state once clicked, thanks to Rob.
Those that have been following this thread, or stumble upon it in their searches later, may appreciate to see the final solution to this particular issue.
[Hopefully I will be able to update this thread with a url in the future to show the site in operation, which may help somebody with their project in the future if its set up similarly.]
Alas, it would be nice if future versions of flash had a more direct, flexible, user friendly method for creating navigation.
[We may see development beyond the flash ads which everyone seems to loathe... and more creativity with flash in terms of games, web interactivity, & animation.
Below are 2 sets of code:
a] the first is located within the first frame of the first button, and has some extra variables in it that the additional buttons call upon...
b] the second is the code applied to every other button.
stop();
fscommand("allowscale", false);//keep SWF display at 100%
var x:XML = new XML();//Define XML Object
x.ignoreWhite = true;
var fullURL:Array = new Array();//Array of full size image urls
var thumbURL:Array = new Array();//Array of thumbnail urls
// ....... CHANGE
var thumbX:Number;// = 25;//Initial offset of _x for first thumbnail
// make an array of all of the instance names of each button object...
// only do this once
var buttonsList:Array = new Array(shadesOfGrey, silkPaintings);
shadesOfGrey.isLatched = false;
// the rollover function... repeat for each button
shadesOfGrey.onRollOver = shadesOfGrey.onDragOver=function ():Void {
if (!this.isLatched) {
this.gotoAndStop(2);
// the rolloff function... repeat for each button
shadesOfGrey.onRollOut = shadesOfGrey.onDragOut=shadesOfGrey.onReleaseOutside=function ():Void {
if (!this.isLatched) {
this.gotoAndStop(1);
// the mouse press function... repeat for each button
shadesOfGrey.onPress = function():Void {
resetAllButtons();
this.isLatched = true;
this.gotoAndStop(3);
shadesOfGrey.onRelease = function():Void {
x.load("shadesOfGrey.xml");// path to XML file
thumbX = 25;
function resetAllButtons():Void {
for (b in buttonsList) {
buttonsList[b].isLatched = false;
buttonsList[b].gotoAndStop(1);
x.onLoad = function() {//Function runs after XML is loaded
// resets the position of the panel on each new load
panel._x = 740;
// ....... CHANGE removes the existing movieclips from the panel before any new load...
for (c in panel) {
if (typeof (panel[c]) == "movieclip") {
removeMovieClip(panel[c]);
var photos:Array = this.firstChild.childNodes;//Defines variable for length of XML file
for (i=0; i<photos.length; i++) {//For loop to step through all entry lines of XML file
fullURL.push(photos[i].attributes.urls);//Each loop, adds URL for full sized image to Array fullURL
thumbURL.push(photos[i].attributes.thumbs);//Each loop, adds URL for thumbnails to Array thumbURL
//trace(i+". Full Image = "+fullURL[i]+" Thumb Image = "+thumbURL[i]);
var t = panel.attachMovie("b", "b"+i, i);//Each loop, Define local variable 't' as a new instance of 'b' movie clip, given unique instance name of 'b' plus the index number of the For loop
t.img.loadMovie(thumbURL[i]);// Each loop, load thumbnail image from XML data into variable movie clip
t._y = 0;//Set Y coordinate of variable movie clip
t._x = thumbX;//Set X coordinate of variable movie clip based on variable thumbX
t.numb = i;//Set sub-variable 'numb' inside variable t to hold index number
t._alpha = 75;//Set the Alpha value of the variable movie clip to 75% - for onRollOver highlight action
thumbX += 55;//Increment thumbX value so next thumbnail is placed 125 pixels to the right of the one before
t.onRollOver = function() {//define onRollOver event of the variable movie clip
this._alpha = 100;//Set thumbnail alpha to 100% for highlight
t.onRollOut = function() {//define onRollOut event of the variable movie clip
this._alpha = 75;//Reset thumbnail alpha to 75%
t.onPress = function() {//define onPress event of the variable movie clip
this._rotation += 3;//rotates thumbnail 3 degrees to indicate it's been pressed
this._x += 3;//Offset X coordinate by 3 pixels to keep clip centered during rotation
this._y -= 3;//Offset Y coordinate by 3 pixels to keep clip centered during rotation
t.onReleaseOutside = function() {//define onRelease event of the variable movie clip
this._rotation -= 3;//rotate thumbnail back 3 degrees
this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during rotation
this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during rotation
this._alpha = 75;//Reset thumbnail alpha to 75%
t.onRelease = function() {//define onRelease function to load full sized image
this._rotation -= 3;//rotate thumbnail back 3 degrees
this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during
this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during
this._alpha = 75;//Reset thumbnail alpha to 75%
holder.loadMovie(fullURL[this.numb]);//Load full sized image into holder clip based on sub-variable t.numb, referenced by 'this'
holder.loadMovie(fullURL[0]);//Initially load first full size image into holder clip
// this one function scrolls the panel for all of the buttons, it gets the
// size of the panel when the images are loaded by any given button...
stroke.onEnterFrame = function() {
if (this.hitTest(_xmouse, _ymouse, false)) {
if (panel._x>=740) {
panel._x = 740;
if (panel._x<=740-panel._width+mask._width) {
panel._x = 740-panel._width+mask._width;
if ((panel._x<=740) && (panel._x>=740-panel._width+mask._width)) {
var xdist = _xmouse-830;
panel._x += -xdist/7;
Of note is the change to how the movie clips are measured... this change in and of itself has really helped to make the thumbnail panels operation more efficient.
Below is the script for each additional button: [Having issues with the forums not letting me post additional code, so I will put the remaining code in a reply below.]
cont. -
Scrolling image gallery problems
I am creating a scrolling image gallery using thumbnails. I have 36 thumbnails that are 100 x 100 px. I cannot figure out the x y coordinates to line up the images correctly. They are overlapping. I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap. Does anyone have a clue how to fix this? I am working on this site for a very pushy client who wants it done NOW...Thanks,
If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.
-
Hi all,
I recently made a scrollong thumbnail gallery using a
tutorial from Kirupa.com
(Link).
I was wondering if there is a way to change the scrolling speed of
the thumbnails as the position of the mouse changes. That is, if
the cursor is a little to the right it scrolls the images at slow
speed. If it is further to the right, it scrolls at a faster rate.
Even further to the right, the speed increases again (this goes for
the left side as well). If the cursor is at the centre, the
thumbnails don't move at all.
I don't need infinitely variable speeds, depending on the
cursor position (although that would be OK if it's easier to write
that way). I just want to divide the thumbnail bar into 7 areas,
with the centre as stop, 3 speeds to the left, and 3 speeds to the
right.
Please help a newbie out!
Thank you in advance,
-Tets T.try mouse listener that you can get the _xmouse and _ymouse,
then you get the position of where your cursor is. -
Slider with scrolling thumbnails
Is there a way within Muse to have a slider/gallery with scrolling thumbnails? Currently I am using a third party gallery to accomplish this, but I'd rather stay within Muse itself.
You can try using compositions and then slideshow within composition.
In composition target container insert the slideshow and as set of slides create different slideshows for separate composition containers.
It would similar effect.
Thanks,
Sanjit -
Scrolling Thumbnail Panel Problems
I'm creating a personal portfolio website in flash. the
address is
http://homepages.nildram.co.uk/~motiv8/AlexBimpson/AlexBimpson%20New/
On the "photo" page, by clicking on view portfolio a
scrolling humbnail gallery appears, however as you can see it moves
extremely jerkily.
This seems to be because the "photo" page is a seperate flash
movie loaded into the main navigation page, a parent swf file,
hence you see the loading animations when you switch pages on the
website.
If you access the photo swf file alone the scrollbar seems to
work fine. its address is
http://homepages.nildram.co.uk/~motiv8/AlexBimpson/AlexBimpson%20New/flash/photo/photo.swf
the coding for the panel is taken from a video tutorial, and
seems to work fine. i have displayed this below
panel.onRollOver = panelOver;
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse<b.xMin || _xmouse>b.xMax ||
_ymouse<b.yMin || _ymouse>b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
if(panel._x >= 214) {
panel._x = 214;
if(panel._x <= -1272) {
panel._x = -1272;
var xdist = _xmouse - 384;
panel._x += -xdist / 8;
where 'panel' is the mask object used to create the bounding
area for the thumbnail panel and 'stroke' is a surrounding outline,
hidden as white colour.
Is anyone able to tell me why loading one movie into another
is having this effect, and how I go about overcoming this problem?
I've noticed that the panel seems 2 work with the mouse below
the thumbnail panel in the parent site, so it all seems a little
buggy - im guessing there's something that needs changing in the
referencing for the stroke and panel, but as of yet I havent found
a solution.
Any help would be greatly appreciated. thanks very much
alexok, i think ive figured out where the problem lies, but not
how to solve it.
the movie "stroke" is used there because apparently a flash
scrollPanel does not recognise button actions. Therefore, when you
are over the panel, it is no longer set as a scrollPanel. however,
once you move outside the stroke, it will again.
the boundaries of the stroke are gathered using the getbounds
function, as in this code
var b = stroke.getBounds(_root);
function scrollPanel() {
if (_xmouse<b.xMin || _xmouse>b.xMax ||
_ymouse<b.yMin || _ymouse>b.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
however, because this movie is loaded within another swf,
something is going wrong with getting the bounds. at the moment it
uses _root to reference the stroke, but this doesnt seem 2 work
when loaded within the parent movie. I've tried using _parent but
this has no effect.
i guess i need 2 change that 2 something else??? -
AS3 Creating Side Scrolling Thumbnails?
I'm creating a gallery page for my site, and I need a side
scrolling thumbnail display.
Basically it would have several thumbnails that would keep
scrolling for ever (some how duplicating the content in a mask). If
anyone has anything like this or any links that would be great.
Cheers!
Parallels.fmSix different examples here:
http://robdillon.com/flash.html -
hey,
i have a folder of photos that i wish to place in a flash
thumbnail gallery. does anyone have suggestions for a method or
have implemented an efficient method that has worked for them?Nancy,
Thankyou! THe link set up worked great.
I have no idea why my teacher wouldn't recomend this to me. If I knew about being able to do this instead of hot spots I would have the first time.
I tested it out in safari and firefox and everything is ok.
I didn't test it out yet on internet explorer yet because im on a mac.
i did have one problem though. i tested it out in opera, and when you click on the thumbnail, it does go to the image, but doesnt obide by the size.
instead of having it fit the screen like all the other browsers, it previews the picture at the actual pixels filling the entire screen forcing you to scroll to see everything.
is there any way to fix this problem? not many people use this browser so its not too big of a deal. i can't remember exactly but it might have been the hotspot set up where you can set it so the size fits to the browser. can i set this up with the link? and if so how? it seems like it already is working fine for everything else
thanks,
Mike -
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.
<!-- code
var is_rev:Boolean = false;
-->
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. -
Need help making javascript thumbnail gallery function in javascript tab menu
Hello all,
I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work. It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab. In addition, once I click on the "gallery" tab the other tabs stop showing their content. I feel like I am missing something obvious. But I just can't figure out what. If anyone can help I would greatly appreciate it.
Thanks,
Natalie
Below is the code of my whole page:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tour template</title>
<!--TABS-->
<link rel="stylesheet" type="text/css" href="MenuFader/style.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tour-button").css({
opacity: 0.3
$("#gallery-button").css({
opacity: 0.3
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the target div must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#contents").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
</script>
<!--End Tabs-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
#realtor panel {
width: 1000px;
body {
background-color: #282828;
margin: 0px;
.style4 {color: #A1A1A1}
-->
</style>
<!-- InstanceBeginEditable name="Gallery" -->
<title>Example tour page</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
<link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">
<!-- InstanceEndEditable -->
</head>
<!-- InstanceBeginEditable name="body" -->
<body>
<div id="realtor panel"><table width="100%" border="0">
<tr>
<td width="18%"> <div align="center"></div></td>
<td width="82%"> </td>
</tr>
</table>
</div>
<div id="page-wrap">
<div id="tour-button" class="button">
<img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
</div>
<div id="gallery-button" class="button">
<img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
</div>
<div id="info-button" class="button">
<img src="MenuFader/images/INFO.png" alt="info" class="button" />
</div>
<div id="specs-button" class="button">
<img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
</div>
<div class="clear"></div>
<div id="contents">
<div id="tour">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
<param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
<param name="quality" value="high" />
<embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
</object></noscript>
</div>
<div id="property gallery">
<div id="container">
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
<img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/apt sign.jpg" >
<img src="Gallery/images/example/Tudor thumbs/apt sign.jpg" alt="apt sign" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/entryway1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living1.jpg" alt="living1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/living room3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/living3.jpg" alt="living3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining1.jpg" alt="dining1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Dining2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining2.jpg" alt="dining2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/dining3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg" alt="kitchen1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
<img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed1.jpg" alt="bed1" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom2.jpg">
<img src="Gallery/images/example/Tudor thumbs/bed2.jpg" alt="bed2" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
<img src="Gallery/images/example/Tudor thumbs/bed3.jpg" alt="bed3" />
</a>
</li>
<li>
<a class="thumb" href="Gallery/images/example/bathroom.jpg">
<img src="Gallery/images/example/Tudor thumbs/bath.jpg" alt="bath" />
</a>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="info">
<p class="style4">Content for info</p>
</div>
<div id="specs">
<p class="style4">This content is for specs.</p>
</div>
</div>
</div>
<!--script for gallery-->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '400px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
</script>
</body>
<!-- InstanceEndEditable -->
<!-- InstanceEnd --></html>Sure thing:
http://www.acresllc.net/TA501001.html -
Help with scrolling image gallery?
Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Marc Moss Art</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="../../../../style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body topmargin="600">
<div id="wrapper">
<div class="container">
<header></header>
<div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
</div>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
<img src="../../../../mosspictures/DSCN0040.JPG" alt="">
<img src="image-3.jpg" alt="">
<img src="image-4.jpg" alt="">
<img src="image-5.jpg" alt="">
<img src="image-6.jpg" alt="">
<img src="image-1.jpg" alt="">
<img src="image-2.jpg" alt="">
<img src="image-3.jpg" alt="">
<img src="image-4.jpg" alt="">
</div>
<nav>
<div id="navigation">
<ul>
<li><a href="#">bio</a></li>
<li><a href= "#">inspiration</a></li>
</ul>
</div>
</nav>
<!-- end .content --></article>
<footer>
</footer>
<!-- end .container --></div>
</div>
</body>
</html>Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
<img src="mosspictures/DSCN0040.JPG" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
<img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.
Maybe you are looking for
-
Netscape 4.7x and CSS appearing as HTML
Hi Can anyone help with the following. I have a simple web page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CRIB</title> <LINK REL=StyleShe
-
hi all , what are the tables related to inspection plan in QM Module regards
-
Hi, I am getting the below error in my server wile in DB13 db check command_line brconnect -u / -jid CHECK20101006090000 -c -f check alert_log
-
Do you have to pay for a refurbished iPad if your iPad is still has warranty ?
Do you have to pay for a refurbished iPad if your iPad is still has warranty ? Or something like that ?
-
[PKGBUILD] new rulez for the creation
Hi, I'll be perhaps a new users. I was looking for a new linux distrib, I come from slackware then freebsd, tried Gentoo for a long, but not satisfied I'm want sources+packages, and find out that Arch could the one I've looked to pacman, abs, etc., I