Magnifying Glass Effect

Display your gorgeous images in high resolution with no constraints. Your users will be able to magnify over the areas they are most interested in. You can define the image path (image of any size), the display area size as well as the lens size in XML or HTML.

The image is automatically resized to fit the entire display area, and this is the minimum zoom of the image. The large image is the maximum zoom of the image. Through the lenses the user can see the image at the highest resolution, without the need to wait for a different image to load.

This effect is called the magnifying glass effect, and we hope you enjoy it and will use it in creative ways!

Features:
1. Scalable lenses.
2. Scalable display area.
3. Scalable image.

 

Andrei Potorac

on 10/6/10

 

We just updated the file. Please check the change log.

 

tmbrwlf74

on 26/5/11

Can I use this in any editing software?

 

Corneliu Chitanu

on 27/5/11

You can use the source files in Adobe Flash CS3 or higher. However, you can embed the swf file in an HTML using any editor :). You don't need to change the source files to change the image. Just check out the flashvars the component is reading and the XML file it's using.

 

yvettesio

on 10/6/10

 

Hi I tried out this component with an image. it works great! but what i really want to do is to embed this into a swf file. I have flash cs3 installed but I am not really familiar with flash. Do you have a sample that can help me. I tried checking your tutorials I downloaded the fla files provided but still couldn't understand it.

 

Andrei Potorac

on 10/6/10

Hi. The video tutorial provides step by step instructions on how that needs to be done.

 

yerbme

on 22/7/10

 

Hi Andrei,

I'm completely new to Flash and AS.

I have 2 questions:

1. Can I use a vector based file for the image?

2. Can I capture a "click" event base on the location of the mouse>

thanks!

 

Marius-Cristian Donea

on 27/7/10

Hello,
1. You can add a vector in a swf file and import it.
2. To add the "click" event you will need to modify the code.

 

riafabien

on 3/8/10

 

Is it possible to use a custom image for the lens like this zoom : http://france.hermes.com/webapp/wcs/st...

 

Marius-Cristian Donea

on 3/8/10

Hi,
I think if you change the shape in the FLA file it should work.

 

nlimpag07

on 6/1/11

 

Hi, I use this product and i modify it a little more cause i want something difference.. i'm new to AS3 but have used to AS2..

I dig deeper into the codes and i did add a movieclip named "mymovie" at first it results an error but i have configured it out on magnify.as..

my problem is i want to add a button inside "mcMagnify" that when u click it, it goes to the url. say (http://www.adobe.com)..

I have tried the AS3 format but it displays an error..

var link:URLRequest = new URLRequest("http://www.adobe.com");

button_mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void {
navigateToURL(link);
}


I know it is possible...

really need help... thanks.

 

Corneliu Chitanu

on 7/1/11

Hi,

Thanks for downloading our component.

I don't know what error you're getting, but I think it's because you didn't declare the "mymovie" movieclip in the ActionScript class associated to it's parent. Try declaring it as public in that class. I don't know where you put it inside the mcMagnify movie clip, so this might not be the problem.

If you want us to help you with these customizations you can always send us an email to office@vuzum.com. Our team of experts will make it perfect for you.

 

nlimpag07

on 7/1/11

Thanks for your reply... as i said i have dig into codes.. and what you are saying is inside the magnify.as right?... i have declare the mymovie.. and before you're reply i have already fixed it.. and get what i want.. sorry for not posting earlier that i have already fixed it..

What i have done is add 2 layers under the "mymovie". 1 for the new script and 1 for the button (with effects) used as the thumbnail of the click... and use the AS3 linking format...

Heres my result....

Hope you'll like my modification..:)

http://absolutegraphicdesigns.com/_web...

 

nlimpag07

on 7/1/11

additional... hover to the '+' sign to see what i did.. thanks for this great component!!!!

 

Corneliu Chitanu

on 10/1/11

It's looking great. You did a good job!

 

nlimpag07

on 10/1/11

Thanks... and also thanks to your great component!

 

derricklough

on 16/2/11

 

So How do you replace the images? I am a bit confused as I am a flash novice.

 

Corneliu Chitanu

on 17/2/11

Hello,

The image path is given as a flashvar in the index.html file. Just edit the index.html file using your favorite text editor. You'll have to use that code for embedding the component in your webpage. This tutorial will help you:

http://www.flabell.com/blog/1829/how-t...

 

derricklough

on 17/2/11

 

One more question: If I wish to make the magnification greater, do I need to adjust the javascript? Is there an easy way to do this? BTW, this thing rocks - very cool!

 

Corneliu Chitanu

on 17/2/11

This depends on how big your image is and how small you made the component.

We're glad you like the component. Enjoy!

 

Kevin Purcell

on 11/3/11

 

How can I increase the magnification without increasing the width of the circle itself? Do I edit the xml of js file? And how do I do this. Thanks.

 

Corneliu Chitanu

on 12/3/11

You'll have to use a bigger image for this. The smaller image the component displays is the same image resized to fit into the width and height you specify.

The magnification is to the maximum resolution the image has, so in order to magnify more, you'll have to use a bigger image.

 

fellixius

on 20/4/11

 

hi, im newbee in AS and need some help.

im trying to use this script. i will use the effect on 3 images in a single html file. i have copied 3 times the "deploy" folder (as deploy1, deploy2, deploy3) than i have changed images and swf names (swf1, swf2, swf3). each swf works great in its folder. i will embed this 3 swf files in my main html file, but the image can not be displayed. i think that i have a problem with paths. hierarchy seems so:

main.html ;
deploy1>swf1.swf;index.html;js;magnify
deploy2>swf2.swf;index.html;js;magnify
deploy3>swf3.swf;index.html;js;magnify

i have used to embed it with the javascript code from index.html files. I have changed the parameters too but i have still problem.

flashvars.pathToFiles = "deploy1/magnify/"; flashvars.xmlPath = "xml/magnify.xml";

flashvars.imagePath = "images/image.jpg";

swfobject.embedSWF("deploy1/swf1.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "deploy1/js/expressInstall.swf", flashvars, params);

thanks

 

Corneliu Chitanu

on 21/4/11

This tutorial will help you embed multiple components on your webpage:

http://www.flabell.com/blog/1669/how-t...

Thanks for downloading the component and we hope you'll enjoy it the way you need it.

 

azharmalik

on 6/6/11

 

i want to set dynamic image path.
please help

 

Corneliu Chitanu

on 6/6/11

You can do this with PHP. The path to the image is set as a flashvar. You can see this in our index.html file, from the project -> deploy folder:

                
flashvars.imagePath = "images/image.jpg";

                

You can make a PHP file that generates this code and changes the image path dynamically.

If you need our help on this, we can do this for you, as custom work. Please send an email with some details at info@vuzum.com, if you're interested.

 

azharmalik

on 6/6/11

I have already doing this but not working.
actually image is placed on amozon server and set image path like "http://amozon.s3. etc"

 

Corneliu Chitanu

on 7/6/11

The issue was that the component didn't work with absolute paths. We just updated it and it should work on your local machine.

However, on the server the component would try to get a crossdomain.xml file from the hosting server that the image is on. This XML file permits the component to get the image and duplicate it.

This is a security measure Adobe takes, so you'll have to set up a crossdomain.xml file on the root of the hosting server.

You have an example here:

http://dev.vuzum.com/crossdomain.xml

If you can't put this file on the amazon server, then there is no way that component will not work. I hope you understand.

321

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Magnifying Glass Effect - change log

Update 10 June 2010

- we modified the component to the new Flabell structure, replacing Main.as with Sample.as
- we also moved the image path in the Flash Vars, so you can pass the same XML but different images to different instances of the component, in your pages.

Magnifying Glass Effect - tips and tricks

Introduction: 

     This is a fully customizable Magnifying Glass Effect, with support for any image size (jpg, gif, png or swf). You can define the image path (image/swf of any size), the display area size as well as the lens size in the XML or HTML files (depending if you want to use the product in a flash file or html file).

     It is easy to use this product in your Flash projects or as an independent Flash Component in your html based website.

     If you want to use the component in a Flash file, importing it is as easy as moving some actionscript files around and dragging the movieclip containing the Magnifying Glass Effect in your Flash file.

     To edit the file you don't need any Flash experience, because all the settings are loaded from an external XML file, which you can edit with any text editor.

     The code is very well commented, written following the best OOP practices, and the downloaded file comes with all the assets used to create the Magnifying Glass Effect such as the PSD source file, the fla source file and the code.

Features:

1. Scalable lenses.
2. Scalable display area
3. Scalable image.

 

Folder structure:

     Please navigate to the deploy folder, inside the project folder. This folder contains all the files you need to upload to your server to have the Magnifying Glass Effect work.

     magnify/xml/settings.xml

     XML configuration file - This is where you make all changes to the look and feel of your Magnifying Glass Effect.

     js/swfobject.js

     Deconcept SWFObject is a small JavaScript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible.

     js/expressInstall.swf

     SWFObject has full support for the Adobe Flash Player Express Install feature. Using expressinstall, your users never have to leave your site to upgrade their Flash Player.

     preview.swf

     This is the component swf file which is embedded in your website.

     index.html

     HTML document used to embed the swf file. Please check the source code to see how the variables are passed to the swf file, using any text editor such as Notepad or Textedit.

 settings.xml structure: 

     Below you can see what each of the attributes in the XML file means:

<settings width="560"
height="420"
lensSize="200">

     Here you can define the component width, height, as well as the lens size.

<item image="images/image.jpg"/>

     Define the path to the preview image/swf file.

Flashvars:

     In the html file you can set some variables for the magnifying effect like dimensions (width and height), the path to the files if you choose to put them in another location rather than the same folder of course, and the path to the settings xml file.                        
     

flashvars.componentWidth = 560;
flashvars.componentHeight = 354;
			
flashvars.pathToFiles = "magnify/";
flashvars.settingsPath = "xml/settings.xml";  

Support:

     If you need any help using the product, please contact us at support@flabell.com.