Friday, March 26, 2010

magnifying help

Hi I am doing a multi course but cant seem to get this to
work i was wondering if anyone can help

ill post the instructions i was given and if anyone can help
id greatly appreciate it



Step one: Creating the image you want to magnify

Before you can start you will need an image of something to
magnify. This could be a bitmap image such as a Jpeg or Gif. It
could also be a vector based image created with Flash (or in a
Graphics program like Freehand, Illustrator, or CorelDraw). The
vector based images are best because the file sizes are smaller but
they take more time to create as you have to draw every detail.

I have taken the easy way out and typed in a Company name and
phone number in Fireworks and then saved them as a Jpeg and the
mobile phone comes from a clip art site we have a license to use
images from and is a gif with a transparent background.



Don鈥檛 make your image larger than your stage dimensions
in Flash.



Step two: Setting up the Flash file

Open a new Flash file



Go to: Modify %26gt; Document

Set the document size to about: 480 x 400 pixels



Go to: File %26gt; Import

Browse to the Jpeg/Gif file that you wish to use.

Your Jpeg should now be on Stage. If it is not on Stage it
will be in your Library - Drag it onto the Stage



Note: If you are using an image from a graphics program you
can copy and paste it into Flash (make sure you rename it in the
Library)

Rename the Layer you start with to: object



Change the image you have moved from the Library or typed
text by using the Selection Tool to grab it all and then go to
Modify, then Convert to Symbol and choose Movie Clip as the symbol
type 鈥?name it firstimage



Name this instance of the graphic in the objectLayer using
Properties: original



The image is now ready to be magnified.

Step three: Preparing the Magnifying Layer

Create a New Layer above the object Layer and call it:
largerobject



Go to the Library and right click on firstimage, choose
Duplicate and name this image secondimage the Behavior will still
be Movie Clip



Go back to the main stage and drag the new movie clip
secondimage from the library and place it on the main stage.



This movie clip must be in the new layer: largerobject

In the Property inspector give this movie clip an instance
name: scaledimage

Step four: The Glass Mask

Create a New Layer above the largerobject layer called:
magglass



Draw a circle in this layer with a diameter of about: 145
pixels

With your Arrow tool select the outside stroke of the circle







Stroke selected





Go to: Edit %26gt; Cut



Note: You will paste the stroke later to create the glass rim





Right click on the inside of the circle and convert it to a
Symbol

Name: mglass

Behavior: Movie Clip



Note: The advantage of creating the movie clip this way is
that the circle will be exactly centred in the movie clip and we
need this





Instance of mglass on stage with a centred registration point







In the magglass Layer select the mglass Symbol and name this
instance of the graphic in the objectLayer using Properties:
magnifiermask

Add a grey edge to the circle or a crescent shape to show the
glass effect to the full 鈥?remember to make these effects
about 30% Alpha or more if you use them



Right click on the Layer name: magglass

Select: Mask





Your layers should look like this



Note: The layer stacking order is critical

Step five: The Magnifying Glass object

Create a new Layer above your magglass Layer called: magtool







Note: It is important that the magnifying glass rim and
handle is in its own layer, otherwise the mask may fail to work
correctly or the rim may not be visible.

If you cut the outside stroke from the circle above (step
4.3) it should still be in the computer memory.

Go to: Edit %26gt; Paste





If you do not have the outside of the circle in the memory
you will need to draw one. Remember to delete the centre or you
will not see the magnifying glass underneath!

Right click on the rim and convert it to a Symbol

Name: magna

Behavior: Movie Clip



Make your own colour and texture changes to the rim to make
it look authentic



In the magtool Layer select the magna Symbol and name this
instance of the graphic in the objectLayer using Properties:
magnifyingglass

Add the following code to this Symbol:

onClipEvent (load) {

_root.mag = 150;

}





Step six: The Handle

On the same layer draw a rectangle away from the rim you have
just created, add colour



Right click on the rim and convert it to a Symbol

Name: handle

Behavior: Button



Then using the Selection Tool arrow move it to touch the rim



Select the handle Button and add the following code to your
selected handle:

on (press) {

startDrag(_root.magnifyingglass);

}

on (releaseOutside, release) {

stopDrag();

}



Note: This will attach and then release the handle to the
mouse cursor 鈥?which in turn is now attached to the rim and
more importantly the mask. It gives users a truer feeling of
holding a magnifying glass in their hand even though the code will
move both the shape and the mask



Step seven: The Final Code

Create your last New Layer above your magtool Layer (you can
leave this to use the default name for the layer or name it code as
this is where your ActionScript code will sit



Create 2 Keyframes through all the layers (To create a new
Keyframe, select Insert %26gt; Timeline %26gt; Keyframe, or Right Click
the frame where you want to place a Keyframe, and select Insert
Keyframe from the context menu. You will need to make the two
Keyframes on the code layer Blank Keyframes - to create a new Blank
Keyframe, select Insert %26gt; Timeline %26gt; Blank Keyframe, or Right
Click the frame where you want to place the Keyframe, and select
Insert Blank Keyframe from the context menu)



In the first Blank Keyframe on your code layer add the
following code:

// this makes the mask follow the magnifying glass

magnifiermask._x = magnifyingglass._x;

magnifiermask._y = magnifyingglass._y;

// this scales up the image according to the magnification
variable, mag

scaledimage._xscale = mag;

scaledimage._yscale = mag;

// this places the scaled image in the correct spot

// (original._x-magnifiermask._x) tells us where the glass is
''relative to the centre of the original''

scaledimage._x = mag/100*(original._x-magnifiermask._x) +
magnifiermask._x;

scaledimage._y = mag/100*(original._y-magnifiermask._y) +
magnifiermask._y;

if(Key.isDown(key.Up)) {

mag= mag * 1.01;

}

if((Key.isDown(key.Up))%26amp;%26amp;(Key.isDown(key.SHIFT))) {

mag= mag * 1.05;

}

if(Key.isDown(key.Down)) {

mag= mag / 1.01;

}

if((Key.isDown(key.Down))%26amp;%26amp;(Key.isDown(key.SHIFT))) {

mag= mag / 1.05;

}



Note: The // strokes stop the text to the right of them on
each line from being read and worked on. They are useful to
describe what each part of your script does especially if you are
going to reuse the script later in other projects



In the second Blank Keyframe you will need to place the
following code: gotoAndPlay(1);



Your magnifying glass animation should be ready to use.

Use the existing .fla file from this magnifying







thanks

magnifying help
can anyone helpmagnifying help
What *exactly* are you stuck on. Which steps have you
successfully achieved?



--

-------------------------------

Remove '_spamkiller_' to mail

-------------------------------






I have completed the actual task its just the magnifying
clicking wont work.

I believe that the error is here:



===========================

// this makes the mask follow the magnifying glass

magnifiermask._x = magnifyingglass._x;

magnifiermask._y = magnifyingglass._y;

// this scales up the image according to the magnification
variable, mag

scaledimage._xscale = mag;

scaledimage._yscale = mag;

// this places the scaled image in the correct spot

// (original._x-magnifiermask._x) tells us where the glass is
''relative to the centre of the original''

scaledimage._x = mag/100*(original._x-magnifiermask._x) +
magnifiermask._x;

scaledimage._y = mag/100*(original._y-magnifiermask._y) +
magnifiermask._y;

if(Key.isDown(key.Up)) {

mag= mag * 1.01;

}

if((Key.isDown(key.Up))%26amp;%26amp;(Key.isDown(key.SHIFT))) {

mag= mag * 1.05;

}

if(Key.isDown(key.Down)) {

mag= mag / 1.01;

}

if((Key.isDown(key.Down))%26amp;%26amp;(Key.isDown(key.SHIFT))) {

mag= mag / 1.05;

}





================================

because everything works except for the clicking of the
buttons it magnifies at around +100% but it does it automatically
im meant to use the control arrows to define the magnification
rate.



Thanks Peter

No comments:

Post a Comment