Flash / Greybox question

[kidkaprie]

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?

 

[SrWebDeveloper]

Untested. In flash create a button and assign actionscript to it:

 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

 

[kidkaprie]

the HTML file that generates the Flash must include the same code to initialize the Greybox libraries and functions so the function exists.

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:

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

 

[snickelfritz]

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:
   

   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.

 

[kidkaprie]

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!

 

[snickelfritz]

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.

 

[kidkaprie]

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!

 

[SrWebDeveloper]

my page is here. the buttons are under the portfolio section.
im still a little confused...
I can however edit the code when i need to after it has been created in one way or another. Thanks!!

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:

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

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

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

 

[c0r3y]

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.