Solved

as3 xml photogallery with next / prev buttons, photo number indicator and no thumbnails

Posted on 2010-11-23
17
1,161 Views
Last Modified: 2014-01-29
Hello

I am looking to for the code or tutorial to make a flash gallery with the following features:

action script 3
no thumbnails
photo number indicator (1 of 21)
next and previous buttons (preferably on rollover over the right and left side of the image
xml based

thank you for you help!
0
Comment
Question by:cristobal_ny
  • 10
  • 6
17 Comments
 
LVL 5

Accepted Solution

by:
gingermoleman earned 500 total points
Comment Utility
I happen to have made almost exactly that for a friend!
Is fed from xml file, Categorys and subcats can have images, image list is numbers (eg 1,2,3 upto 23!), is AS3 just doesnt have the next and previous, though that wouldnt be hard to add in.
Its not a "Pro job", theres duplicate code where I was coding on the fly and wanted it DONE over done proper. My friends site is www.martinsaint.com if you want to see it live (home page versions hides the nav so goto gallery page). to be honest, simpleviewer.net may suit your needs all the same and look better.
Category and sub-category dont have limits other than those imposed by actual stage size (so as is about 5 subcats and 13 main cats).

Any questions let me know


XML format is:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<vbc>
 <cat title="Actors">
<pic>images/Actors/01.jpg</pic>
</cat>

and for subcats

<cat title="Corporate">
<subcat title="Indesit">
<pic>images/Corporate - Indesit/01.jpg</pic>
</subcat>
</cat>
NEWfinalgallery.fla
0
 

Author Comment

by:cristobal_ny
Comment Utility
Thanks gingermoleman

would it be possible to modify the code so that it removes the number buttons, adds the previous / next button and the photo number indicator (1 of 21, 2 of 21, 3 of 21 and so on)

I can't use simple viewer because I'll be using a component that is written in AS3, but thanks for the suggestion.

thank you!
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
Hi,

yep, will be able to do this, will post something over the weekend

GMM
0
 

Author Comment

by:cristobal_ny
Comment Utility
thanks!
happy thanksgiving!
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
back at ya, im a brit but i get the sentiment
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
cristobal,

Good news, had some free time today to work on this but have hit a design snag!

At present, have added the LR buttons as well as the image number (its not tidy!).
I have the LR buttons resizing to match image width(ie click left side or right side of image)
This was a "good" idea that I dont think works (have attached it)

You happy to have a bar like this in place of the Numbers?
<- Viewing Image X of XX -> NEWfinalgallery.fla
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
Hi Cristobal,

Keep up!! ;)
Have added the LR nav with text in between. number range remains so you can click from 1 to 23 if you like or use prev, next.
Again, im sure this isn't done right, but it does work and isnt that ultimately the point?. If your trying to learn flash, then getting your head around some of the things this does will help (loading the images with the preloader bar, loading and parsing the xml)
Ive picked up a lot from
www.kirupa.com
www.4guysfromrolla.com
www.flashandmath.com
 to name a few.
 When were done here im going to tidy up the code releasing this free under www.bluebombmedia.com


GMM FinalgalleryLR-OnBar.fla
0
 

Author Comment

by:cristobal_ny
Comment Utility
thank you for your help!
I really appreciate, I'll check it out tonight and let you know.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:cristobal_ny
Comment Utility
I've been working with the file and it's mostly good.
There is an issue that it won't display more than two images.
 I also need the <- Viewing Image X of XX -> text (with a text field I can move myself). This instead of the numbers it has now. And I forgot to ask about something important: the name of the image text field.

This thanks giving I give thanks for your amazing help!

0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
Hi Cristobal,

The LR Nav is inside the imageLoader mc that is on stage and can be moved around in there.
Adding file name is simple to do (this will show the FULL path as defined in your xml)

I'll add a new mc to the stage that contains both of these so you can just drag and drop where you want.
Removing the existing number strip isnt so easy as its listened for. Easiest work around is to set it to invisible instead.

Will post this a bit later on

GMM
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
Hi Cristobal,

Try this one on for size.

Also ,you mention only viewing 2 images? Check your XML, it works fine for me (on some servers it must be case specific as well). If you cant spot a prob, please post your XML so I can recreate from here.

GMM


FinalgalleryLR-OnBar.fla
0
 

Author Comment

by:cristobal_ny
Comment Utility
Thank you!
It was my fault the problem with the 3rd image.
it all works great, just need help with the image name field, I attached the xml I'm using, I don't know how I should do it <name> </name> perhaps?


<?xml version="1.0" encoding="ISO-8859-1" ?> 

<vbc>

 <cat title="">

<name>ggg, 1977, oil, acrylic on canvas, 80x85"</name>

<pic>images/01.jpg</pic>

<pic>images/02.jpg</pic>

<pic>images/03.jpg</pic>

</cat>

</vbc>

Open in new window

0
 
LVL 5

Assisted Solution

by:gingermoleman
gingermoleman earned 500 total points
Comment Utility
Hi,

I wouldnt do it this way, my concern would be the correct pairing of name to pic so I'd look to store the name as an attribute eg
<pic name="bacon">images/01.jpg</pic>
<pic name="eggs">images/02.jpg</pic>

Have ammended the FLA to pick this up, not the file location and name.

GMM     FinalgalleryLR-OnBar.fla
0
 

Author Closing Comment

by:cristobal_ny
Comment Utility
thank you so much for your help

You really went the extra mile by making the files for me.
I still have a question about using the " for inches in the image name (the xml marks an error) but I will make it a separate question so you can get more points for it.

thank again!!
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
No probs, was nice to revisit the as3. If you go public with the gallery, let me know where!!
0
 
LVL 5

Expert Comment

by:gingermoleman
Comment Utility
Oh, looked at your other question and the answer on there is spot on, switch over to single quotes on the titles eg title= ' myTitle" '
0
 

Expert Comment

by:mark_matsuno
Comment Utility
Hi gingermoleman,

Sorry to hijack this posting, but is there any way to modify the layout/elements in the Flash file? I have searched high and low for a solution that functions almost exactly like yours, however I cannot see the other image numbers (2-?), only 1 showing and also would like to add a previous/next button to other gallery categories.

Any help would be greatly appreciated!

Thanks!
Mark
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now