movie symbol issues

[_kuma_]

Hi all,

First off - many thanks in advance for your assistance!

Imagine two buttons side by side, and a space for a picture to load to the side of both these buttons - pretty simple, I'm guessing - I need to achieve a couple of things though that aren't happening for me:

1) each button opens a different picture (in the same space, to the right of the buttons), and when the user moves their mouse OFF the button, the image stays loaded. It's only when the user hovers their mouse over the other button, does another picture load (over the top, so to speak) of the first button picture.

2) if a user hovers their mouse over the area where the pictures display - nothing happens; i.e. the picture doesn't change, nor the states of a button.

The beautiful gensler.com website illustrates this really well - once you get through the intro sequence, if you put your mouse over each of the 4 different boxes to the left, the pictures change - the only thing that allows those pictures to change are those 4 boxes, and when you move your mouse off a box, there's no change in state

Any help, hugely appreciated!

[_kuma_]

sorry m(_ _)m - not a movie symbol; a button symbol

[snickelfritz]

This is actually fairly simple to set up.
Download and install TweenGroup (http://blog.greensock.com/tweengroup/) in your custom classes directory.
(the TweenGroup download includes most of the Greensock tweening classes.)

The images should be set up in Photoshop, each on its own layer, and the document saved in PSD format.
In Flash, Insert > New Symbol... > MovieClip; name it "images", and give it a class export name of "Images".
In edit mode for images, import the PSD to the stage. check the box for layers to keyframes.
You should end up with an image sequence within the Movieclip "images".
Exit edit mode to scene1.
Insert > New Symbol... > MovieClip; name it "btn", and give it a class export name of "Btn".
In edit mode for btn, draw a rectangle at 0,0;
Exit edit mode to scene1.
At this point there is nothing on the stage, and two MovieClips in the library.
On frame1 of the main timeline, in a locked actions layer, write the following actionscript 3.0:


import gs.*;
import gs.easing.*;

var images:Images = new Images();

var imageProps:Array = new Array();

var imageHolder:Sprite = new Sprite();
addChild(imageHolder);

var buttonHolder:Sprite = new Sprite();
addChild(buttonHolder);

// space between the images
var padding:int = 20;

// destination x coordinate for imageHolder
var imgX:int;

// the following function advances the image sequence by one frame on each pass.
// places the images in a row within imageHolder.
// a button is created for each image in the sequence.
// the image properties are assigned to a Rectangle then pushed into an array.
buildSlider(images.totalFrames);

function buildSlider(n:int):void
{
for (var i:int = 0; i < n; i++)
{
var img:Images = new Images();
img.gotoAndStop(i + 1);
img.x = (img.width + padding) * i;
img.y = 0;
imageHolder.addChild(img);

var imgProp:Rectangle = new Rectangle(imageHolder.x + img.x, imageHolder.y + img.y, img.width, img.height);
imageProps.push(imgProp);

var btn:Btn = new Btn();
btn.x = btn.width * i;
btn.y = 0;
btn.id = i;
btn.buttonMode = true;
btn.mouseChildren = false;
btn.addEventListener(MouseEvent.MOUSE_OVER, onOver, false, 0, true);
buttonHolder.addChild(btn);
}
}

// imgX is assigned a value from the imageProps Array
// the button id number is used to target the array index.
// ie: if mouse is over button with id of 1, the value stored at the second index in the imageProps array is assigned to imgX.
// the imageHolder MovieClip is then moved to the negative value of imgX.
function onOver(e:MouseEvent):void
{
imgX = imageProps[e.currentTarget.id].x;
TweenLite.to(imageHolder, 1, {x:-imgX});
}


I've prototyped this script using shapes instead of images, and it should work perfectly if you construct your FLA according to the instructions, and have the Greensock tweening classes correctly installed.

Just to clarify: the image sequence within MovieClip "images" should be on one layer, as follows:
image1 on frame1, image2 on frame2, image3 on frame3, and so forth.
(importing a PSD to the stage should result in this configuration automatically)

[_kuma_]

Hugely appreciated snickelfritz! I'll let you know how I go~

Have a great day!

[_kuma_]

Hey again snickelfritz,

Am having a few hiccups with this - would you mind posting your shape example for me to look over?

I've downloaded TweenGroup (AS3 version) and made a folder for it on my desktop - looks incredibly powerful - just not 100% sure I'm using it correctly :confused:

Thanks again!

[snickelfritz]

Attached is a comprehensive example that uses shapes instead of bitmaps.
This was done to reduce the FLA filesize for posting here; just replace the shapes with imported bitmaps.
It's essentially a complete gallery navigation system with tweened in/out transitions, rollover effects, etc...

The Greensock tweening classes (TweenMax, TweenLite, TweenGroup, etc...) will need to be installed in your custom classes directory.
This custom classes directory will have to be set up by you in the ActionScript 3.0 preferences.
Basically, the process for setting up a directory for custom classes is fairly straightforward:

Open Flash preference panel;
Select the Actionscript item;
Click the ActionScript 3.0 settings button;
Click the "+" icon to add a new class path;
Click the crosshair icon to navigate to a specific folder where you wish to keep all of your classes.
I suggest you create a folder named "Classes" in your Documents folder.
This way, your system backups (which will presumably include the Documents directory by default) will include all of your custom classes.
Select the Classes folder, and click Choose; (your OS may require that you "Open" the folder, then Choose)
The path to the folder should now be listed in the AS3 prefs panel.
Close the prefs panel.
Copy the "gs" folder from the Greensock download into the new Classes folder.

If you have done all of this correctly, the FLA attached to this post should open and compile without errors.

[_kuma_]

anybody ever told you you're awesome??? ;) thanks buddy, again - your help is hugely appreciated, wish I could return the favor

[_kuma_]

so this is definitely what I had in mind! - ... just need a liiiiiittle more help :confused: sorry, really trying to get my head around this. Mostly all good though!

I've got it working thanks to your file + the directions below. Last but not least; is there a way to change the layout of the rectangles (in point 6 below)? Currently I can make them any size/shape etc., but all four align along the top of the movie. Is there a way to have two rows of two boxes?

sorry for all the trouble~

[_kuma_]

and sorry; the other thing...

1) can I get each button to link to a url/flash movie?

2) I've had a play, but no luck - can I change the flash transitions in this between photos - i.e. instead of having them slide across, have one fade in over the top of the other?

thanks again

[_kuma_]

so I've attached what I've achieved so far using the Greensock tweening class (ignore the colors; just to keep file size down), and also a jpg image of the actual layout that I want to achieve:

1) not the four boxes across the top, but two rows of two on the left hand side of the interface, with a transparent layer sitting over the top of the photo layer, and beneath the boxes/text.

1) instead of the pictures changing when you hover your mouse over them, they should first be clicked, then the respective picture slides across

2) when the picture slides across, the text beneath the boxes also changes. In this text I need a hyperlink to send users to a new page

3) if you click on a picture, it also sends users to a new page (same one as the text of course)

any help here, hugely appreciated. Have lost a few clumps of hair today ... :confused:

Jon

[snickelfritz]

You might want to post this in CS3 format.

[_kuma_]

good point - cheers ;)

[_kuma_]

anyone able to help here?

thanks