[jimyjoe]

Hi all this is my first topic. I have been a member for a couple of weeks but i have just be in ore of how much useful information there is floating about on this hear forum.

I am in need of some help regarding a part of a website i am building for a collage course. The effect i am trying to achieve is a image, that moves around within the frame of the image. However the image will be larger than the frame so you see different parts of the image as it moves around.

However as with most things i have no idea how to achieve this as i am relatively new to this sort of thing i am in need of some help.

Thanks in advance
joe

[Roberto]

Hello + welcome to the forum.

Is the image movement user controlled/set by you or random?

Rob

[jimyjoe]

if it could be random that would be great.

Thanks for the warm welcome

joe

[Roberto]

Hello

The attachment shows how to do it in action script 3. There are two versions, one which moves the image around , changing the direction of movement when the edge of the image is about to appear on the screen. This gives a kind of random looking movement ( getting smooth truly random movement is tricky - best to fake it). The second version uses the position of the mouse pointer to move the image - gives a better controlled user experience.

Both version have the same stage set up. Layer one is renamed "image movie clip" - this layer contains a large image, which has been converted to movieclip. To convert an image to movieclip : right click the image + select Convert to Symbol -> Give the symbol a name, select Movie clip as the type + ** click the top left registration point ** -> click on ok. The movieclip needs to be top left registered for the code to work. In the properties panel, this movieclip was given the instance name image_mc.

A second layer was added + renamed mask. A rectangle is added to this layer, sized and converted to a top left registered movieclip. In the properties panel the movieclip was given the instance name of mask_mc. This rectangle will act as the viewable frame for the image below it - only the part of the image directly below the mask will be seen. To convert the layer into a mask, the layer name was right clicked + Mask was selected.

A new layer was add + rename actions. With frame one of the actions layer selected, the actions panel was opened + the code was added.

In randomMove.fla, it you click on frame 1 of the actions layer, you will see that 2 variables are created : across + down - across is added to the image_mc's x position + down is added to its y position on each frame. A check is made to see if image_mc.x is greater than mask_mc.x - if it is, then the left edge of the image has gone past the left edge of mask, so the image is positioned at the mask_mc's left edge + the across speed value is multiplyed by minus 1 ( this just changes a positive speed into negative + negative speed into positive (reverses direction)). A check is also made to see if the right edge of the image has gone left of the right edge of the mask + the same for top edge/bottom edge.

In mouseMove.fla - if the mouse is over the frame mask, then image_mc is moved using the position of the mouse ( changing the 0.02 bit will change the speed of the movement) -

Rob

Attached File(s)

•  ImageMove.zip (15.27K)
  Number of downloads: 4

[jimyjoe]

i have flash cs3 im not sure what action script i have it gives me the option to create action script 2.0 and 3.0.

Hope that is the information you were needing.

joe

[Roberto]

jimyjoe, on Feb 4 2009, 16:26, said:

i have flash cs3 im not sure what action script i have it gives me the option to create action script 2.0 and 3.0.

Hope that is the information you were needing.

joe

Yep - soz was editing my post while you added this.

Rob

[jimyjoe]

Thats brilliant just what i was after. Thank you very much for helping me out the amount of detail in your post is far from anything i have found on any forum before.

Thanks very much

joe

[Roberto]

Hello

Glad it helped

Rob

[jimyjoe]

Sorry Roberto to be asking you help again. You mentioned in your post about instance name image_mc, however with me being a bit of a flash noob im not entirly sure on what this means or how to achive it.

Sorry if this is a very basic thing.

Thank you again

joe

[Roberto]

Hello

If you select your movieclip on the stage with the Selection Tool (arrow), then take a look at the Properties Panel - just above the w,h,x,y box there's a space to enter an instance name. An instance name is the name that is used in the action script to reference that movieclip - it lets flash know which symbol your trying to control/access with your script. You dont need to give an instance name, if your not going to involve that symbol in your action script. Your can't use the same instance name for more than one symbol. To enable code hints give your movieclip symbols a name that ends in _mc , for buttons _btn + for textboxes _txt :

myMovieClip_mc
myButton_btn
myText_txt

You can then access the symbol in your code :

myMovieClip_mc.x += 5;
myButton_btn.addEventListener(MouseEvent.CLICK, imClicked);
mText_txt.text = "some text";

The properties panel will show info about the currently selected symbol or if you click the grey area surrounding the stage, it gives info about your fla - size, color, frame rate & publish settings.

Rob