TUTORIAL: How to call highslide from within flash.

[mx3design]

This is a quick and easy way to call hs from within flash using externalInterface (actionscript 2).

FLASH:
Create a movieclip on your stage and give it an instance name, in this case it's 'btn_example'

In your actionscript layer add:

Code: Select all

import flash.external.ExternalInterface;

btn_details.onRelease = function () { ExternalInterface.call("firehs");
};

HTML/JAVASCRIPT:
In the head section of your page add:

Code: Select all

<script type="text/javascript">
function firehs(){
document.getElementById('hslink').onclick();
}
</script>

In the body of your page add your normal highslide link and give it an id, in this example it's 'hslink'

Code: Select all

<a id="hslink"  href="index.php#intro" onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )">text</a>

That's all, clicking on your flash button will now open highslide. An example can be seen here http://www.mx3design.co.uk/predesign.php (click on the 'VIEW DETAILS' button within the movie at top of page).

[torstein.honsi]

Thanks! I added your complete post the FAQ, I hope it is OK?

[mx3design]

Yes, that's fine.

[Tony.RhinoWebGroup]

I converted to Actionscript 3 if anyone needs it. Javascript and HTML are the same.

Actionscript 3:

Code: Select all

import flash.external.ExternalInterface;

button_name.addEventListener(MouseEvent.CLICK, popvideo);
function popvideo(event: MouseEvent) {
	ExternalInterface.call('firehs');
	}

Also when you are embedding the swf onto your page make sure and add an ID to the object tag it will prevent issues with IE

[DigitalKarma]

I am trying to do something like this using buttons in flash to have highslide display images.

I followed your post but have no luck as of yet.

Would you be willing to share your Html / AS2 code with me for comparisson

OR maybe write something out that would work for single images only?

Thanks any help would be appreciated.

[Laush]

Yes. I have the same problem. The script from first post isn`t working OK.
I`m using simmilar example which I found here http://highslide.com/forum/viewtopic.php?f=4&t=2500 and that one works fine.

However, that script has no abbility to adjust position of zoomin picture related to the

Code: Select all

<a id="hslink"  href="index.php#intro" onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )">text</a>

anchor from first post.

Can you please check this ishue?

[darcman]

Hi @ all,

is anybody here that knows how to execute HighSlide from a Flashbutton that is programmed in Swishmax? I don't know how i can use the Information from http://highslide.com/forum/viewtopic.php?t=2500. Simply i want to open HighSlide from a Button in a Flashfilm. That Film is programmed in Swishmax 4.

I hope it's clear..?


Gr├╝sse from Germany

Andy

[RoadRash]

Hi Andy,

I'm not familiar with Swishmax at all, but you need to edit the flash button so it can interact with javascript to launch the neccesary Highslide function.
A Swishmax forum will be the best place to start if you don't know how to edit the button and what to add to the button to make this happen.

[darcman]

@ Roadrush

Yes, thats what i start before. I write to the http://www.swishzone.de Forum and link to here. Anyway, i'm looking forward to read from somebody who know how i can get lucky

[darcman]

Mh no answers? No answers in the Swish-Forum

One question in addition:

<script type="text/javascript">
function firehs() {
hs.expand (null, { src: 'image.jpg' } );
}
</script>

What mean's the "image.jpg"? Can someone upload a complete html-File where i can take a look at the Sourcecode?

Many thanks...

[RoadRash]

The code youÔÇÖve posted can be used to open an image from a flash button, but the flash button need to be able to interact with the javascript function ('firehs').
We canÔÇÖt help you preparing your flash button.

This demo page shows the code youÔÇÖve posted in action: http://www.roadrash.no/hs-support/call- ... onAS3.html

If you want to open an iframe instead, you can replace the code with this:

Code: Select all

<script type="text/javascript">
function firehs() {
   hs.htmlExpand (null, { objectType: 'iframe', src: 'your-page.html' } );
}
</script>

[darcman]

Many thanks RoadRash

Yes, it works a littlebit.

Please go to "TEST" http://megapano.de/test/button.html and take look. Looks ugly...

But what i want is this in "TEST2": http://megapano.de/test2/highslide-custom-example.htm.
It looks strange to me because both uses the same "highslide.config.js" and "highslide-full.js"!

According to http://blog.codefidelity.com/?p=18 it is very simple to call from a Swishmax Button:

Code: Select all

on (release) {
    getURL("javascript:firehs('');");
}

Now i need help to let it look like "TEST2"...

[RoadRash]

In TEST - replace this:

Code: Select all

<script type="text/javascript">
function firehs() {
   hs.htmlExpand (null, { objectType: 'iframe', src: 'http://google.de' } );
}
</script>

with this:

Code: Select all

<script type="text/javascript">
function firehs() {
	hs.htmlExpand (null, { 
		objectType: 'iframe', 
		src: 'http://www.megapano.de/medimax/medimax.html',
		width: '657',
		height: 550,
		headingText: 'MEDIMAX SMC in Frankfurt/Oder',
		wrapperClassName: 'titlebar'
	} );
};
</script>

[darcman]

Hilde you're the greatest!!!

But if i say'ed "ugly" i intend this:


As you can see in this pic the flash is'nt shaded. But in you're example the Button is shaded!

This is better but the animation is not similar "TEST2" although "TEST" and "TEST2" uses the same "highslide.config.js" and "highslide-full.js"!

Take a look at "TEST3": http://megapano.de/test3/button.html

[RoadRash]

Ah ÔÇô that ugly thing! I didnÔÇÖt see it because it doesnÔÇÖt appear on the Mac.
You can fix it by setting wmode to transparent in the object and the embed code ÔÇô see highlighted lines.

Code: Select all

<object
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,42,0"
        id="button"
        width="560" height="410"
      >
        <param name="movie" value="button.swf">

        <param name="bgcolor" value="#FFFFFF">
        <param name="quality" value="high">
        <param name="base" value="C:/a4/">
        <param name="seamlesstabbing" value="false">
        <param name="allowscriptaccess" value="samedomain">
	     [hilight]<param name="wmode" value="transparent">[/hilight]
        <embed
          type="application/x-shockwave-flash"
          pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
          name="button"
          width="560" height="410"
          src="button.swf"
          bgcolor="#FFFFFF"
          quality="high"
          base="C:/a4/"
          seamlesstabbing="false"
          allowscriptaccess="samedomain"
	       [hilight]wmode="transparent"[/hilight]
        >
          <noembed>
          </noembed>
        </embed>

      </object>

Im not sure what you mean with the animation is not similar to TEST2 Do you mean that TEST3 expands from the center of the page, not from the button itself?