Sliding image mask...

[momonline]

Is there a non-flash script/coding for this:

http://www.lukamaras.com/tutorials/cool-design/sliding-image-mask.html

If not, can it be accomplished without the oh-so-pricey Flash MX software?

Thanks for your time!

[BLiZZaRD]

You can probably accomplish this with Javascript. It won't be exact, of course and could be tedious coding, but it would be free.

Alternately, no.
However, how many instances of this were you looking for? Do you have the images already?

If so zip them up and attach them and I will see what I can do for you ;)

[momonline]

thanks blizzard!

if i just link you to two pics to start, i possibly may be able to figure out for the others *possibly* -- i'm working on gathering others though if you want more :)

http://www.makeovermagic.org/2822af.jpg

http://www.makeovermagic.org/2822b4.jpg

they're before/after for my retouching site that i am in the process of updating.

edit: here are 2 more:

http://www.makeovermagic.org/mom-af.jpg

http://www.makeovermagic.org/mom-b4.jpg

[BLiZZaRD]

I made the first one. (didn't see the second set of pics before I was done).

I have added the HTML, .swf and .fla (Flash version 8) in a zip file you can download here (http://outsidetheurl.com/FCL/Flash/Programs/maskPics.zip)

Let me know if this is what you are after. If it is, gather all the photos you want done this way and post them all at once, I will then make a separate swf for each.

Once done I will show you how to embed them properly on your page(s).

[momonline]

thank you so much for taking the time to do this, but before this goes any further...without the flash software, can i work on a .fla file? i have only frontpage for my site work.

[BLiZZaRD]

That would be a negative. But you can download the 30day trial at adobe.com.

[momonline]

okay, i'll do that right now. thanks!

[BLiZZaRD]

Note that you will be downloading version 9 (CS3) of Flash. This is the latest and greatest. I made this in version 8, but CS3 will have no problems opening the files or executing them for you.

[Medyman]

thank you so much for taking the time to do this, but before this goes any further...without the flash software, can i work on a .fla file? i have only frontpage for my site work.

You might be wondering what you're going to do after the 30 day trial. The solution is XML. With XML, all you need is a text editor and ftp access to your server.

If you can run PHP on your server, you don't even need the text editor.

The process is this:

1. Create a flash file which will read XML data and automatically update the slideshow when you add more images

2. Upload an image to your server.

3. Update the XML to show that a new image is available.


XML is a VERY easy way to maintain flash. A sample XML file for the type of application you're looking for might look like this:


<slideshow>
<image src="path/to/image1" />
<image src="path/to/image2" />
<image src="path/to/image3" />
</slideshow>

As you can see, very intuitive and self-explantory.

If you have PHP available, you can run a PHP script that would automatically create the XML based on whatever files were in a specific diretory. So, all you would need to is upload an image to your server.

If you want to go that route and want me to create a flash for you, post back here (and also send me a PM, I'm kind of busy these days and haven't been on the forums much so I might miss your response).

[momonline]

Medyman,

Bingo, you hit the nail on the head :) I haven't responded back here 'cause I didn't know what I'd do after Flash 30-day expired so I wasn't going to go this route...but I will take you up on your offer to help me out so I can edit myself without Flash.

I'll PM you with a link to the pics that I'd like to use.

Thank you.

[Medyman]

Edit: This probably isn't what you're looking for. I've added another version in the next post


Hi Marsha...

So, had a chance to quickly make something up.

I created two versions...

1. AutoDetect Version
You can download a zipped up version of that here (http://www.designsbyvishal.com/DD/AutoDetect.zip). In the file you'll find the .swf, an example HTML page, a PHP script and the images folder. Obviously, all of your images should go in the images folder.

You'll notice that I've changed the names of the images to sequential numbers. This script was initially designed to display images at random. The script will create the XML of the image files in alphabetical order. Thus, if you have images named 1before and 1after. The after will come before the before. To avoid that, change it to numbers.

I've already configured the PHP script so you shouldn't need to mess with that. Again, it was designed for a much larger application so there are things in there that you don't necessarily need, but it works just as well for this as a more complicated version.

Note: If you test this locally, it probably won't work (unless you have WAMP or XAMPP installed). You'll need a server with PHP capabilities to test/use it.

2. XML Version
You can download this version here (http://www.designsbyvishal.com/DD/XML.zip). This is practically the same thing except that you're manually creating the XML. In the zipped archive you'll find the same files as mentioned above except an XML file instead of the PHP script. If you open the XML file with any text editor, you'll find a structure as such:


<?xml version="1.0" encoding="utf-8"?>
<gallery>
<album lgPath="images/">
<img src="001.jpg" caption="" link="" />
<img src="002.jpg" caption="" link="" />
<img src="003.jpg" caption="" link="" />
<img src="004.jpg" caption="" link="" />
</album>
</gallery>

Pretty self explanatory...

The lgPath attribute is the path to the images relative to the .swf. If you don't change the directory structure from my example, you won't need to worry about it.

To add a new image, simple create another <img> node with the correct filename. The order in which these files are listed are the order that the images will appear. So for this application, you wouldn't need to rename your files.

You'll also see a caption and link attribute. If you enter a caption for any of the nodes, a caption will appear on mouseover (this can be changed to be static...as in always there instead of appearing on mouseover. The problem with this is that it will show even if there is no caption). If you enter a link, clicking on that particular image will take you to the link.


That's all I think I need to explain for now. Let me know if you have any questions.


The speed, size and effect of the animation and/or .swf are all things that are controlled via the FLA. Let me know if you require any changes.

Hope this helps.

[Medyman]

Take II

Marsha...

I just looked over your initial post again and realized that the functionality that you're going for is a little different than what I provided in my last post. I didn't really take a good look at it before...sorry.

I've taken the liberty of modifying BLiZZaRD's example (hope you don't mind Blizz) so that you won't need to use Flash to edit it.

You can find the new files here (http://www.designsbyvishal.com/DD/MaskPics.zip)

The process is a little tedious but when you take away a tool like Flash out of the work flow for a Flash app, it's hard to overcome.

Step 1: Upload your images
Upload your images to the same folder. It doesn't have to be called images. All of your images have to be in the same folder, however. Take note of the relative path of the folder from the flash movie.

Step 2: Update the XML
Open images.xml in a text editor. You'll find something like this:

<?xml version="1.0" encoding="utf-8"?>
<gallery>
<album imgPath="images/">
<img before="001.jpg" after="002.jpg" />
<img before="003.jpg" after="004.jpg" />
</album>
</gallery>

imgPath is the relative path of where the images are from the flash movie. Don't forget the trailing backslash (/). The image nodes themselves are pretty self explanatory...before is the before image, after is the after image.

Save and upload images.xml to the same directory as your flash file.


Step 3. Embed Flash into HTML
Let's kill two birds with one stone here. In IE you'll notice a "click here to activate" bug. To get rid of that, let use SWFObject. It's available for download at http://blog.deconcept.com/swfobject/.

Download SWFObject (I've included the .js file in my zipped archive but w/o the documentation so you might want to download the full package from deconcept.com).
Unzip the file and add swfobject.js to your web directory
Link the javascript file to your HTML page by placing the following between your head tags:


<script type="text/javascript" src="swfobject.js"></script>
*Note: this assumes that swfobject.js is in the same directory as your html file.

Next, add the following code where you want your flash movie to appear:




<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("MaskPics.swf", "mymovie", "400", "600", "8", "#FFFFFF");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addVariable("currentImage", "1");
so.write("flashcontent");
</script>

The text in teal will appear should someone not have Flash installed. Change it accordingly.

The highlighted text should be changed to whatever you name your .swf (i.e. if you change it).

Now, the most important part in this whole step...
The number in red...This is variable (aka FlashVars) that is being passed to the flash movie. Bascially, it's telling the Flash which set of images to display.

1 will display the first set of images (001.jpg, 002.jpg in my example above), 2 will display the second set (003.jpg, 004.jpg) and so on.

Step 4. Repeat Embed
I'm assuming you'll have more than one instance of the flash on one page. If so, you'll just need to paste the same snippet of code from above and just change the FlashVars number. Also make sure to have different div names (that's the text in blue).

Hopefully that's not TOO confusing. Please post back with any questions. I'll leave the above post for posterity. They should be helpful to someone passing by here.

Good luck.

[momonline]

wow, thank you!! it works! i really appreciate this, and although this is way out of my league, i'm going to try my hardest to make it work.

i sent you a PM with another question :)

i'll be back with more, i'm sure!!!!

[Medyman]

wow, thank you!! it works! i really appreciate this, and although this is way out of my league, i'm going to try my hardest to make it work.

Sorry if I made it too complicated. I might have made it seem worse than it really is. Once you get the hang of it, I think you'll be fine.

It's the only way I know to do what you want to do without using Flash directly to edit anything. Maybe BLiZZaRD can shed light on another way...:)

As far as your second question...

What exactly are you having troubles with? If you just use the embed code above within middle-frame2.html, it should work.


A wider suggestion about your site.:
From the page you showed me, it looks like you're doing a redesign of your site. If that's so and you're early in that process, might I suggest that you get rid of the frames and tables and use CSS. It'll save you a lot of grief in the long run.

Here is a way to get the same look with CSS: http://www.dynamicdrive.com/style/layouts/item/css-top-frame-layout/

[momonline]

I don't think it'll be too complicated. I just have to figure it out and gather all the photos that I need.

And yes, I'm completely redoing my site...so thank you for the CSS link. I will definitely use that too!

Yes, my goal was to not have to rely on Flash for updates so for that I thank you very much!

I'm sure I'll be back with questions, but this is an excellent start to get me on my way.

Thank you again.

[momonline]

hey medyman!

i'm digging up this oldie but goodie thread...i'm attempting to finally add it to my site, if i can get it to work.

in the attached link (you created it several months ago), is there a way to have the images side-by-side without any border?

...and how can i edit this page? can it be done within "maskpics.html" or do i have to go into one of the other files associated with it, i.e. the "swf" file or something else?

thanks for your time (again)!

[Medyman]

i'm digging up this oldie but goodie thread...i'm attempting to finally add it to my site, if i can get it to work

So, you're still working on this, huh? It was only a few months ago, but it's fun to see how different my coding style is now than it was just a few months ago.

Ok, so first to the easy stuff...

in the attached link (you created it several months ago), is there a way to have the images side-by-side


You could either use some CSS and float the divs that the flash content is in. Or, you can use the new version of SWFObject which creates inline objects anyway. Also, I see that you're using 500x500 for the dimensions. Two of these won't fit side my side on most screens (I'm talking about the usual 1024 x 768 resolution).


Now, it gets a little more complicated

without any border?
The border is actually hard-coded into the flash file. It took me a minute or so to realize it. I'm not sure why I made those ugly borders. I think it's because I just recoded Blizzard's example and figured you wanted that aesthetic. In any case, I'll need the .fla of that to fix it.

I'll see if I have the .fla in one of my backups. The old files are still up on my server (I just checked), but they don't have the .fla. I'm not sure if you have the source code. If you do, post it up somewhere and I'll take out the border for you.

I'll post back when I can track down the file.

[momonline]

thanks for your response! i always look forward to hearing from you :)

all photo images have different widths but all are 470px in height.

what i ultimately want them to do is fit into the frame seen here that i believe you also helped create:



there will be more than the two images also within the frame...i just only uploaded the two as a starting point.

hope this additional info helps.

EDIT:

if you need any other links, they should all be uploaded to my site so just let me know.

[Medyman]

all photo images have different widths but all are 470px in height.

Hmm...
So, it turns out I didn't keep the .fla. And, by this new info, it wouldn't much matter if I had because the current application doesn't allow for variable widths.

So, I made this (http://www.visualbinary.net/files/MOM/) up really quickly. It's even simpler than the last version. It's more flexible, too (AS 3.0, for anyone who's wondering). You can put in any dimensions (height or width) that you want. Plus, no more mucking around with XML. You can add all of your info straight to your HTML page.

First of all, you'll need the new version of SWFObject. It's available here (http://code.google.com/p/swfobject/).

Here is a sample "block" of javascript to embed the .swf.

<script type="text/javascript">
var flashvars = {};
flashvars.before = "1b.jpg";
flashvars.after = "1.jpg";
var params = {};
params.menu = "false";
params.quality = "best";
params.scale = "noscale";
params.wmode = "transparent";
swfobject.embedSWF("maskpics.swf", "flashcontent1", "480", "272", "9.0.0", false, flashvars, params);
</script>>

It's not very different from the older version. Just a little different syntax. The only parts you should really concern yourself with are the parts I've highlighted.

The first two flashvars: before & after are the paths to your image. So, you don't add it to the XML file anymore. You can add them here directly. Moving down, the flashcontent1 is the id of the div that you want the flash content to replace. This is the same as the old version of SWFObject. Next, is the height and width. As I said, add in any height and width and the .swf will react to the size and recalculate all the math internally.

So, if you decide to change your design later on, and use different sized images, you're able to.
I zipped everything up for you and put a link on that page. All the source files are in there. If you ever need anyone to change it again, you'll have them.

Let me know if you have any questions.

[momonline]

okay, you totally lost me on this...i was sorta, kinda getting it and now i'm lost again!

the google download for the .swf file -- i downloaded the zip file but don't know what to do with it.

also, in my html file where i insert your code above, do i do a separate group for each before/after set?

can you just post a sample of two sets of before/after so i know what info gets repeated?

[Medyman]

okay, you totally lost me on this...i was sorta, kinda getting it and now i'm lost again!

the google download for the .swf file -- i downloaded the zip file but don't know what to do with it.

also, in my html file where i insert your code above, do i do a separate group for each before/after set?

can you just post a sample of two sets of before/after so i know what info gets repeated?

Look at the sample page I posted, it's all there! There is a .zip file with all the sources, including the HTML and SWFObject. This is much simpler than the old method, you shouldn't be lost.

[momonline]

on the link you provide, it goes to a google code page with a "featured downloads" section which includes 3 downloads: swfobject 2_1.zip; swfobject generator 1_1 air.zip; swfobject generator 1_1 html.zip

do i download all 3 files?

'cause i did and i'm still lost :)

which are the editable files?

[Medyman]

on the link you provide, it goes to a google code page with a "featured downloads" section which includes 3 downloads: swfobject 2_1.zip; swfobject generator 1_1 air.zip; swfobject generator 1_1 html.zip

do i download all 3 files?

'cause i did and i'm still lost :)

which are the editable files?

lol....
i guess you're still not seeing the link in my first post. The this in "So, I made this up really quickly" is a link. It's okay, it happens. Let's try this again.

Go to: www.visualbinary.net/files/MOM/
Click on http://www.visualbinary.net/files/MOM/page_white_zip.png. (It's under the first image, on the left).
Download the file that it links to.
Unzip the file.
It has everything that you need. You don't have to download SWFObject by yourself.

[momonline]

okay, well that makes sense.

i downloaded the zip file and will work on figuring it today.

i'll be back, i'm sure :)

thank you for your time!

[markzacc]

Hi

Im affraid im one of them newbie xml people. I wondered if its poss to get the caption taken off altogether?

Kind regards
Mark Zaccaria




Edit: This probably isn't what you're looking for. I've added another version in the next post


Hi Marsha...

So, had a chance to quickly make something up.

I created two versions...

1. AutoDetect Version
You can download a zipped up version of that here (http://www.designsbyvishal.com/DD/AutoDetect.zip). In the file you'll find the .swf, an example HTML page, a PHP script and the images folder. Obviously, all of your images should go in the images folder.

You'll notice that I've changed the names of the images to sequential numbers. This script was initially designed to display images at random. The script will create the XML of the image files in alphabetical order. Thus, if you have images named 1before and 1after. The after will come before the before. To avoid that, change it to numbers.

I've already configured the PHP script so you shouldn't need to mess with that. Again, it was designed for a much larger application so there are things in there that you don't necessarily need, but it works just as well for this as a more complicated version.

Note: If you test this locally, it probably won't work (unless you have WAMP or XAMPP installed). You'll need a server with PHP capabilities to test/use it.

2. XML Version
You can download this version here (http://www.designsbyvishal.com/DD/XML.zip). This is practically the same thing except that you're manually creating the XML. In the zipped archive you'll find the same files as mentioned above except an XML file instead of the PHP script. If you open the XML file with any text editor, you'll find a structure as such:


<?xml version="1.0" encoding="utf-8"?>
<gallery>
<album lgPath="images/">
<img src="001.jpg" caption="" link="" />
<img src="002.jpg" caption="" link="" />
<img src="003.jpg" caption="" link="" />
<img src="004.jpg" caption="" link="" />
</album>
</gallery>

Pretty self explanatory...

The lgPath attribute is the path to the images relative to the .swf. If you don't change the directory structure from my example, you won't need to worry about it.

To add a new image, simple create another <img> node with the correct filename. The order in which these files are listed are the order that the images will appear. So for this application, you wouldn't need to rename your files.

You'll also see a caption and link attribute. If you enter a caption for any of the nodes, a caption will appear on mouseover (this can be changed to be static...as in always there instead of appearing on mouseover. The problem with this is that it will show even if there is no caption). If you enter a link, clicking on that particular image will take you to the link.


That's all I think I need to explain for now. Let me know if you have any questions.


The speed, size and effect of the animation and/or .swf are all things that are controlled via the FLA. Let me know if you require any changes.

Hope this helps.

[Medyman]

Hi

Im affraid im one of them newbie xml people. I wondered if its poss to get the caption taken off altogether?

Kind regards
Mark Zaccaria

Sure...It's all up to you, really.

If you don't reference the caption in your ActionScript it makes no difference if it's in the XML or not. You should probably get rid of it if you don't need it, though. But, the important and functional part here would be taking it out of your AS.

If you need more guidance, post your AS.