Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

Thread: Sliding image mask...

  1. #11
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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. 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. 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:

    Code:
    <?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.
    Last edited by Medyman; 02-26-2008 at 01:33 AM.

  2. The Following 2 Users Say Thank You to Medyman For This Useful Post:

    momonline (02-26-2008),ReadyToLearn (02-29-2008)

  3. #12
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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

    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:
    Code:
    <?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:

    HTML Code:
    <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:


    Code:
    		
    <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.
    Last edited by Medyman; 02-26-2008 at 01:48 AM.

  4. The Following 2 Users Say Thank You to Medyman For This Useful Post:

    momonline (02-26-2008),ReadyToLearn (02-29-2008)

  5. #13
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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!!!!

  6. #14
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by momonline View Post
    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/la...-frame-layout/

  7. The Following User Says Thank You to Medyman For This Useful Post:

    momonline (02-26-2008)

  8. #15
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #16
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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)!
    Last edited by momonline; 07-24-2008 at 11:48 AM.

  10. #17
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by momonline View Post
    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.

  11. The Following User Says Thank You to Medyman For This Useful Post:

    momonline (07-23-2008)

  12. #18
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by momonline; 07-24-2008 at 11:49 AM.

  13. #19
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by momonline View Post
    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 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.

    Here is a sample "block" of javascript to embed the .swf.
    Code:
    <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.
    Last edited by Medyman; 07-24-2008 at 12:37 AM. Reason: typo

  14. #20
    Join Date
    Mar 2006
    Posts
    75
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •