Flash Site Design - Shrink to fit

Author

Shrink to fit

drewp88 webforumsuser@macromedia.com

2004-01-29, 11:31 am

Hi I'm very new, trying to do a very simple site for a coming attraction. Here's my plan:

1. Have two layers of content. On the bottom layer, a small picture frame in the middle of the stage. On the top layer, a pic enlarged a great deal so that one detail in the picture totally occupies the screen.
2. On clicking anywhere on the page, I want the top layer Pic to shrink down to fit within the frame, and stop.

That's it.

I created the layers and pics, and can shrink the Pic (graphic) using a motion tween, and even wrote a script to make it stop (again, i'm new and not a programmer, so for me this was quite an accomplishment). I can't figure out how to have the movie be i
n "stop" mode when first viewed, and enable a click to start the shrink of the top layer Pic.

Many thanks for your help.

drew

swingb13 webforumsuser@macromedia.com

2004-01-29, 12:30 pm

Sounds pretty simple Drew. One important thing to remember when working in Flash is that there are always at least ten different ways to do things. You were on the right track but doing it the hard way so I've written an easier and better way for you to a
ccomplish the same goal.

Let's build a new file using the same goal. This is a more reusable approach and will also help you understand some good actionscripting concepts.

With a new .fla open create a new movie clip (ctrl+F8), name it 'pic'.
Import your image (ctrl+r) to the stage of the pic movie clip.
**TIP: Import your image at the largest size you want it to display. If your stage is 550 x 400 then make your image that size. This way your image won't be distorted.
Return to the main stage (ctrl+E).
Open your Library (ctrl+L).
Drag the pic movie clip on to the stage and in the Properties Inspector give it the instance name 'pic'.
Add a new layer to your timeline and name it 'actions'.
Open the actions panel (F9).
Add the following actions (you can cut and paste but it's better to get in the habit of typing it yourself).
**TIP: Comments in Actionscript have two slashes //

//this declares that this script should execute as soon as it is loaded
onLoad = function () {
pic._xscale = 25;
pic._yscale = 25;
//_xscale and _yscale are percentages. This reduces that big image to 25% of it's original
//size
};
//next we add our press event
pic.onPress = function() {
//we could just say: Make Pic 100% but that doesn't look good so we're going to add
//a simple script that scales the image up over time
pic.onEnterFrame = function() {
if (pic._yscale<=100 && pic._xscale<=100) {
// 5 is the speed
pic._yscale += 5;
pic._xscale += 5;
}
};

Now preview your movie, click on the image, and viola! You're all set. Enjoy and if you have questions please post to this thread.

Doug Richards
Team Macromedia Volunteer for Flash
Team Macromedia
Sprint Corporate Champions User Group Manager
Member AIGA

nez9 webforumsuser@macromedia.com

2004-01-29, 12:30 pm

Not really clear on what you're trying to do but I can answer your subquestions which sounds like what you need help with most so hopefully that will let you finish the big picture...

To keep a movie from playing when the swf loads, put an action into the first frame of the movie (or wherever you want it to stop) with the action stop; ...to get this going again later, just have a button or clipevent tell it to play again and it picks u
p where it was paused.

To make it work from a mouseclick, use an onClipEvent(play) command (the actual code may vary a little, dont have flash in front of me atm)

hope this helps, and gl (let us see the final version if this works out!)

drewp88 webforumsuser@macromedia.com

2004-01-29, 1:28 pm

Hi and many many thanks for the clear and generous directions.

I tried this step by step, and keyed in the actions by hand. There were errors. Rather than monkey around I cut and pasted your script to test, and got the following syntax errors:

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 9: Statement block must be terminated by '}'
pic.onPress = function() {

**Error** Scene=Scene 1, layer=Actions, frame=1:Line 18: Syntax error.
};

It's probably something I did, but can you please shed a little light on this?
-d

drewp88 webforumsuser@macromedia.com

2004-01-29, 2:31 pm

Hi nez9, thanks a ton. I"m going to give this a stab too, in parallel...although it might still be a little over my head (not hard to do...i'm swimming in deep water still). I posted a little different description a moment ago, it might make my intentio
n clearer (I hope).

In any event, will post the final product.

swingb13 webforumsuser@macromedia.com

2004-01-29, 4:31 pm

So first things first the error was my fault not yours. I always test compile my script posts in SciTe and I just didn't copy far enough down. The script is missing a closing }. Just like in HTML or any other tag based language you're required to open and
close statements. So for one of these: { there must always be one of these: }. It gets confusing sometimes when you get into nested functions.

That's a really good visual description, I see where you're going with this. So basically using the same script we're going to reverse the process. Keep in mind that the reason we initially set the _x and _y scale to 25% is so we only have to load one ima
ge, the largest, and manipulate that. This saves time and file size plus gives you the best quality image every time.

So, here's our script to reverse the process.

onLoad = function () {
pic._xscale = 25;
pic._yscale = 25;
};
//we've added a variable to check if the picture movie is 'full' (large) or not
full = false;
//this is a recursive function, basically that means this function does not fire until it's told to
function doScale() {
//here we check if full is false (our initial value), meaning it's not full screen
if (full == false) {
pic.onEnterFrame = function() {
if (pic._yscale<=100 && pic._xscale<=100) {
// 5 is the speed
pic._yscale += 5;
pic._xscale += 5;
//notice that we set the variable to true meaning that
//yes, it is full screen
full = true;
}
};
}
//now we reverse the function, same script but reducing the size
if (full == true) {
pic.onEnterFrame = function() {
if (pic._yscale>=25 && pic._xscale>=25) {
pic._yscale -= 5;
pic._xscale -= 5;
//we have now reset our movie clip to it's original 25%
//starting size and we're also resetting the value to false
full = false;
}
};
}
}
//now when we press the mouse we 'fire' our recursive function called doScale()
//**TIP: you don't have to say do in front of recursive functions, it just makes them easier to read
//(I think)
pic.onPress = function() {
doScale();
};

Try that and let me know if that's the idea.

Doug Richards
Team Macromedia Volunteer for Flash

Sprint Corporate Champions User Group Manager
Member AIGA