Flash / Greybox question

Discussion in 'Web Design and Development' started by kidkaprie, Jun 2, 2008.

  1. kidkaprie macrumors member

    kidkaprie

    Joined:
    Mar 17, 2008
    Location:
    Philadelphia, PA
    #1
    I'm trying to use a greybox in my website.

    greybox: http://orangoo.com/labs/GreyBox/

    the reason I'm using greybox, is because regular lightbox wouldn't work with my flash web galleries that i created in adobe lightroom.

    So, I've gotten the greybox working on my old site (just a plane html site) by using this:<a href="Lightroom/Fotos/index.html" onclick="return GB_showPage('Fotos', this.href)">Post Production Fotos</a>

    I've now redesigned my site as an all flash site. Any idea on how I would go about implementing this on my flash site?
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Untested. In flash create a button and assign actionscript to it:

    Code:
     yourButtonInstanceName.onRelease = function()
    {
    getURL("javascript:GB_showPage('Fotos', this.href)");
    }
    This is how Flash can call JavaScript via a Flash button you design, and of course the HTML file that generates the Flash must include the same code to initialize the Greybox libraries and functions so the function exists.

    If you are unfamiliar with actionscripting in Adobe Flash, check out this tutorial.

    -jim
     
  3. kidkaprie thread starter macrumors member

    kidkaprie

    Joined:
    Mar 17, 2008
    Location:
    Philadelphia, PA
    #3
    my page is here. the buttons are under the portfolio section.

    im still a little confused...
    this is what i have for the button on my page:

    Code:
    thumb0.onRelease = function(){
    	getURL("javascript:GB_showPage('Fotos', this.href)");
    }
    and this is what im trying to get appear in the greybox when i click on the buttons.

    are you saying i need to edit something on the html file that is created with my web gallery?

    edit: i should mention that im very much used to automation/GUI implementations (Dreamweaver for HTML webpage, Lightroom for Flash galleries) and Coding a site from scratch is very difficult for me. I can however edit the code when i need to after it has been created in one way or another. Thanks!!
     
  4. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #4
    The greybox effect seems simple enough to implement in Flash.
    I completed a quickie-example in about 5 minutes.

    On a layer above everything except the images:
    1. Draw a black or white rectangle.
    2. Convert it to movieclip with registration in the center.
    3. Use stage.width and stage.height as its dimensions.
    4. Use stage.width/2 and stage.height/2 as the coordinates.
    5. Initialize it at alpha 0.
    6. Prevent the rectangle from trapping mouse events:
      Code:
      rectangle.mouseEnabled = false
    7. Set the rectangle to alpha 0 in your click function; onComplete, call a function that sets the alpha to .5, then loads your image.

    BTW, target the rectangle with a good tweening class such as TweenMax or Tweener to more easily create advanced transitional effects.
    (trust me, the built-in tweening class sucks by comparison)
    BTW, I like your site design.
     
  5. kidkaprie thread starter macrumors member

    kidkaprie

    Joined:
    Mar 17, 2008
    Location:
    Philadelphia, PA
    #5
    thanks for praise, but i have no idea what you are telling me to do. haha

    i got the design from a tutorial online.

    so this is what my site looked like as an HTML site:

    just reiterating that id like to get the same effect except with a flash based site.

    thanks!
     
  6. snickelfritz macrumors 65816

    snickelfritz

    Joined:
    Oct 24, 2003
    Location:
    Tucson AZ
    #6
    Attached is a rough copy of your site using AS3 and TweenMax, in a liquid layout.
    (FlashCS3 and TweenMax are required)

    example: http://www.byrographics.com/AS3/devo/
    I've included the "greybox effect" on the portfolio page, and some very basic page transitions.
    Move the greybox function to your gallery.
     

    Attached Files:

    • devo.zip
      File size:
      55.6 KB
      Views:
      141
  7. kidkaprie thread starter macrumors member

    kidkaprie

    Joined:
    Mar 17, 2008
    Location:
    Philadelphia, PA
    #7
    thanks for the help snickelfritz, but "greybox effect" that you implemented is not what im trying to go for. im trying to implement the code i had on my html site, not a similar effect.

    thanks again for your help, i truly appreciate it!
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    You didn't add the GreyBox initialization stuff in the HTML file that loads your Flash. I checked your page source. Please do the following:

    Step 1: Put all the GreyBox source into a sub-directory off your document root called "graybox" (one level down)

    Step 2: Go into the head section of the HTML file that loads your Flash page and add in (based on instructions found here for GrayBox installation) and save when done:

    HTML:
    <script type="text/javascript">
        var GB_ROOT_DIR = "http:/www.pages.drexel.edu/greybox/";
    </script> <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> 
    Step 3: In Flash MX, use the same ActionScript you tried before:

    Code:
     thumb0.onRelease = function(){
        getURL("javascript:GB_showPage('Fotos', this.href)");
    }
    If an errors related to argument 2 (this.href) then try this instead which references this.href as a local variable within Flash (note the quotes):

    Code:
    thumb0.onRelease = function(){
         getURL("javascript:GB_showPage('Fotos', "+this.href+")");
     }
    That should do it, otherwise I digress to others who might be able to steer you down the right path. I'm pretty confident this is a good start for you.

    -jim
     
  9. c0r3y macrumors newbie

    Joined:
    Oct 30, 2009
    #9
    Jim's explanation is great for launching a page (I used it myself, actually.) Thanks.

    As for launching GreyBox image sets or a gallery, here's my implementation: http://www.coreyfoster.com/?p=96

    I'll add some screenshots and sourcefiles soon.... but gotta get back to work right now.
     

Share This Page