how to change pages in gallery

[Dan_21]

in a picture gallery how do i make 2 pages of thumbnails contolled with a button to scroll between the pages ? i cant find a decent tutorial...

Cheers

[Muzak]

File isn't corrupt (well not completly, I did get a warning message about "scenes" when opening the file, but just ignored it).

Anyways.. there were quite a few things wrong.

For starters, you had nested functions in the thumbsMC (meaning, some braces were out of place).

function foo():void {
     function blah():void {
     }
}

instead of:

function foo():void {
}
function blah:void {
}

In the rollover and rollout event handlers, you don't need all the "if()" statements.

Just use the currentTarget of the event argument to access the current rolled over or rolled out instance.

So I removed all the if statements and used the following instead:

function rollOverHandler(event:MouseEvent):void {
 trace("thumbMC ::: rollOverHandler");
 event.currentTarget.alpha=1;
}
function rollOutHandler(event:MouseEvent):void {
 trace("thumbMC ::: rollOutHandler");
 event.currentTarget.alpha=.5;
}

The thumbs were not MovieClip instances, but Button instances, which is why casting didn't work properly. Button symbols are refered to as SimpleButton, not MovieClip.

I changed all of them to MovieClip symbols (both in the Library and on Stage).

Next I removed the click event handlers in the thumbsMC and decided to use event bubbling (see docs) instead.

So instead of defining listeners for each thumb inside thumbsMC, I added a click event handler in masterMC (thumbsMC parent).

When a thumb is clicked in thumbsMC, the event will bubble through to the masterMC.

In the event handler (in MasterMC) you can then use the event arguments .target property to determine which thumb was clicked.

Note that there's a difference between .target and .currentTarget.

.target will point to the thumb movieclip being clicked (if any)

.currentTarget will always point to the displayobject that the event is registered to (thumbsMC).

In other words, if you were to click "between" 2 thumb movieclips (but still click on thumbsMC) the event handler will be triggered, but both.target and .currentTarget will refer to thumbsMC.

If this doesn't make sense, just click around in thumbsMC and watch the output panel (I've put some traces in the event handler).

Anyways, here's what it looks like:

function thumbClickHandler(event:MouseEvent):void {
 trace("masterMC ::: thumbClickHandler");
 trace("    - target: ", event.target);
 trace("    - currentTarget: ", event.currentTarget);
 var t:MovieClip = event.target as MovieClip;
 trace("    - target name: ", t.name);
 if(t == thumbsMC.thmb1_btn) {
  photosMC.gotoAndPlay("image1");
 }else if(t == thumbsMC.thmb2_btn) {
  photosMC.gotoAndPlay("image2");
 }else if(t== thumbsMC.thmb3_btn) {
  photosMC.gotoAndPlay("image3");
 }else if(t== thumbsMC.thmb4_btn) {
  photosMC.gotoAndPlay("image4");
 }else if(t== thumbsMC.thmb5_btn) {
  photosMC.gotoAndPlay("image5");
 }else if(t== thumbsMC.thmb6_btn) {
  photosMC.gotoAndPlay("image6");
 }
}
thumbsMC.addEventListener(MouseEvent.CLICK, thumbClickHandler);

Here's the FLA:

http://muzakdeezign.com/cs4/Surrey-florist-gallery3.fla

[Dan_21]

Muzak first off thank you very much for taking the time of re-writing my documents it is greatly appreciated.

The way in which i started to carry out this task was watching a vid for an as2 gallery and changing the script so it worked with as3.I did find it rather repetitive!

Is the way in which you have written the script the correct method as it were, or in scripting is there not really right and wrong, but best and most efficient?

Also thanks you to Ned and kglad who spent a lot of time yesterday helping me.

cheers

[Muzak]

Is the way in which you have written the script the correct method as it were, or in scripting is there not really right and wrong, but best and most efficient?

The best way, no

There's always more than one way to do get things done.

A more programmatic approach (and IMO better) would be to do this kind of thing using classes, rather than coding in the timeline.

So you'd have a Master class, Thumb class and Photos class (aka Views) and each of these would be "attached" to a MovieClip in the Library.

It's not that different from what you have now, except that the code would be taken out of the movieclips and put into separate .as files (ActionScript classes).

And you could have a complete separate "layer" (Data class, aka Model) for your data (the thumbnails and photos).

The way in which i started to carry out this task was watching a vid for an as2 gallery and changing the script so it worked with as3.I did find it rather repetitive!

I'm afraid alot of what is out there is just poorly written (from a programming point of view).

[Dan_21]

thanks for your help man, i have a lynda training vid so hopefuly it will go through classes. Although i am learning rails atm and i notice you are talking about Models and Clases (MVC?). Im sure we will meet again here lol

thanks again !

[Muzak]

Well, I went ahead and rewrote the whole thing, now using Classes.

As I mentioned earlier, there's 3 classes Master, Thumbs, Photos, each of these are linked to MovieClips in the Library (with the same name):

The setup hasn't changed, Master still contains Thumbs and Photos.

- Master

     - Thumbs

     - Photos

I've cleaned up the library though, put everything in folders and that kind of stuff.

Something to consider is making sure "imported stuff" has clear names. Having a bunch of bitmaps named "layer", "layer copy", "layer copy" isn't really helping . So before importing psd's make sure everything is named properly (in PhotoShop).

Should also avoid importing graphics (plain fills) that can easily be drawn in Flash itself (vector), which will reduce swf filesize. Or at least once they're imported, replace them with vector shapes (redrawn in Flash) or use "Convert Bitmap".

I've also rearranged a few things, Thumbs and Photos now have a clear background so they're easier to spot and position (align) properly when working in Flash. Stuff like this should be high on your list as it makes working so much easier !!

The masterMC (now Master) apparently was scaled.. that's a big "no no". Don't do that, especially when working with bitmap images.

So I removed the scaling.

I removed all the timeline tweens in Photos and put all the images on top of eachother. In the Photos class they're then tweened using ActionScript and their visibility is switched on/off as well.

Rather than using event bubbling, this time Thumbs dispatches an event (thumbClick) to which Master listens.

When a thumb image is clicked (in Thumbs) a property (selectedThumbIndex) is set indicating the index (0 to 5) of the thumb that was clicked upon (duh!).

The Master class then passed that index on to Photos by setting a property: selectedPhotoIndex.

Photos then uses that value to determine which image to show (and tween).

So basically each thumbnail movieclip and image movieclip has a corresponding index. This is done by storing the movieclips in an Array:

in Photos:

images = [photo01, photo02, photo03, photo04, photo05, photo06];

in Thumbs:

btns = [thmb1_btn, thmb2_btn, thmb3_btn, thmb4_btn, thmb5_btn, thmb6_btn];

So when in Thumbs, the first thumbnail movieclip is clicked, the selectedThumbIndex will be 0 (arrays are zero based).

And when in Photos the selectedPhotoIndex = 0, the first image will become visible and tweened.

Get the files here:

http://muzakdeezign.com/cs4/florist_gallery04.zip

[Dan_21]

Wow thank you very much!

I know I was very messy with that file, it was just a practice till I got it to work and i think the size of the library was causing that error message from before.

You have given me some great tips on how to work in which i  cant thankyou enough for. I think it is very valuable to have pointers from somebody who is clearly very good in using the software.

Now the part im having trouble getting my head around is how the movieclips are linking with with their classes. Am i correct in saying that you created all the clips  .You then go to properties in the library and give them a class name and export them for action script, then create a external class.as file for each using its class name, so the master(which is the master movie clip) and master.as .Is that naming convention and hierarchy enough on its own to link the class and the clip or is it something to do with the package in the code.Sorry i just don't fully understand how they are  seeing each other as there is no code inside the actual fla(im not stupid honest )

cheers you are a great help!

[Muzak]

Linking a Class to a MovieClip is done through the MovieClip Symbol properties in the Library.

To do so, right click a MovieClip in the Library, select Properties.

In the Properties dialog, click the "advanced" button (bottom right) if necessary.

In the "Class" field you can fill in the Class to link to the MovieClip. Note that this has to be the full package, but in this case I didn't use any packages.

You can read more about packages and class paths in the docs.

Just note that the folder an FLA is in automatically becomes a class path (for that FLA).

That's why in this case Flash (the IDE) knows where to find the Master.as, Photos.as, Thumbs.as when linking them to the MovieClips in the Library, because they're in the same folder as the FLA file.

It's a good habit to use packages, but for simplicity, I didn't

[Ned Murphy]

Muzak's tips are good things to get under your belt.  If you want a quick fix just to see it work in your file, take the very last closing brace in your button code section and move it to the end of the first function.  Then put photosMC back in the gotoAndPlay lines of the onClick function.

You should clean up your code formatting, both for yourself and for anyone who might have to review it in the future.