Image plugin with clickable areas ^^

  • Hi folks !!

    I'm working on a project to make a website using Krpano ^^
    It's a huge work, using almost all the possibilities of Krpano ^^

    I actually have this problem:

    1- I'd like to add different clickable areas on a image plugin ^^
    Here's a part of the code I have for the moment:

    The plugin is a map, and I'd like to have this kind of effect on hover:
    1- normal image:

    2- hover effect when onhover:

    I've think about an polygonal hotspot on the image...
    Or maybe another image over the normal one with a zorder,
    but this two ways seem very complicated :'(

    And I have another thing I'd like to do: is it possible to use a tween effect to open the map image ?

    Quote

    tween(plugin[map].visible, true); instead of
    set(plugin[map].visible, true);


    cause the alpha way

    Quote

    alpha="0" on the plugin then tween(plugin[map].alpha,0,1);


    is very heavy to use cause of many plugins to show at least in the tour ^^

    Here's the deal ^^
    If someone have an idea ^^
    I'm working on it, if I get a solution I'll let you know !!!
    Thanks in advance !!

  • You have to define the shape of the rollover effect somehow, so you either have to create the shape using an image png over the map (with zorder) or you draw it using the polygonal tools.

    Another way would be using the flash IDE. You import the map and draw the shapes using the tools that come with flash. You then convert the shapes to buttons. and bind krpano actions to them

    I did this for Meerstad http://www.meerstad.eu/assets/flash/index.html. The map in the bottom left corner has flash drawn shapes, if you click the green ones, it opens a larger map with even more shapes.

  • Hi Zephir ^^

    Thanks for the tips !!
    Effectively your second method seems to be the best one,
    but my problem is AS3 scripting...
    Although I'm able to understand the Krpano documentation,
    but I'm a reel noob in flash coding...
    Would you know were I can learn about flash cause there no much tutorials
    around the web... :'(
    I think I would be able to use your first solution, but it's very binding...
    Your project for real estate is awsome !!!
    It's exactly what i aim to do !!
    Thank you for your reply,
    i'll let you know my advancement ^^

  • I've made a quick example

    <plugin url="example.swf" keep="true" align="center" />
    <action name="SomeAction">
    trace("success");
    </action>

    you can make more buttons:

    1) draw a shape on the buttons layers,
    2) click shape, press f8, select button, type in a unique name for the button
    3) dlcick the button. go to the last frame (hit) and press F5. This extends the current frame to the end.
    4) click on the down frame, rechtmouse, add keyframe. Delete the first frame (up) now you have an invisible button, only visible on over. This is all by choice

    5) go back to the main. click the button. Set an instance name

    6) go to actions layer, click the frame, press f9 to open actions dialog
    7) go to line 31, you'll see

    Code
    /* bind click action to buttons */
    btn_chateau.addEventListener(MouseEvent.CLICK, clickHandler);
    btn_chateau.addEventListener(MouseEvent.MOUSE_OVER, clickHandler);
    btn_chateau.addEventListener(MouseEvent.MOUSE_OUT, clickHandler);
    btn_chateau.alpha = 0.8;

    duplicate that code, change the btn_chateau to your instance name, change the clickhandler name to something else

    then duplicate

    and rename to the currect function name. change the click event to whatever you want. In this case the click handle calls an krpano action called SomeAction.

    See attachment for the files.

    Btw you can't tween "visible" because it's a boolean, it can be true or false (or 1 or 0). The only way to tween the map, (fade in and out) is through alpha.

  • HI guy !!!
    Totally awsome !!!
    It's exactly what I expected ^^
    Thanks a lot !!
    I'm going to follow your explanations to do it myself, I know it's the only way
    to learn more about ^^
    Are you giving any formations ^^
    I think I'm going to train myself cause I'm self-educated on Krpano usage,
    but I've reached my limits cause of flash coding ^^
    In all case thanks a lot for your help, It'll be precious !!

    PS: I've found googling around a great introduction in AS3 and Flex,
    for the frenchies "parce que je le vaux bien" *wink*
    Here's the link:
    Formation Flash
    There's a huge tutorial when clicking on "cours complet".
    Here's another one more simple about flex (in french too ^^):
    Flex buton

    Hope it could help *wink*
    see you soon !!!

  • If you are new to Flash/Actionscript, I would stick to learning actionscript 3.0 with the Flash IDE, and ignore flex. although the code is the same, the flash ide can help you out with it's components and library. Alsoo simple drawning of a shape is not possible. You have to code shapes with the graphics namespace.

  • Hi Zephir ^^
    I'm testing your code actually.
    Could you correct me if I'm on the right way ?
    I'm trying it with one button at first :


    Would this be right if I just want to load a pano by clicking on the btn_chateau ?
    I have a lot of difficulties understanding how the link between krpano and flash map works ><

    If that's the right way, i presume that for other butons it would be something like:

    That language seems like chinese for me, I don't know the syntax at all ! ^^
    I perceive that a lot of krpano user doesn't know the flash AS3 language either,
    and that's very difficult to get simple explanations or examples O_o.

    Therfore learning self by is very complex...
    Thanks again for your help !!!
    I'll continue to work on it !

  • Hi,

    yes this is the correct way. Once the connection is established with krpano, you have access to everything in krpano.

    krpano.call is used to execute custom actions, functions like loadpano or even get amd set

    with krpano.get you get a value. like krpano.get("display.details"). Display is here the object, and details the property. krpano.get("plugin[test].url") is alsoo possible
    the same goes for krpano.set . only this one requires 2 parameters. the attribute you want to set, and the value. krpano.set("display.details", 16).

    Mind the quotes. quotes means it is a string. Calls and get are strings parsed by krpano. Like xml is 1 big giant string. xml doesnt have typecasting (number, string, int, boolean etc)

    About your functions, this works. But as time passes, you learn to keep your code DRY. Dont Repeat Yourself. You have 2 functions that call a loadpano. In this case you could for instance use the name of the button as part of the parameter and use just 1 function. But Ill show you when you are a bit further in AS3.

    btw this is faulty code:

    Code
    btn_chateau.addEventListener(MouseEvent.MOUSE_OVER);
    btn_chateau.addEventListener(MouseEvent.MOUSE_OUT);

    what you are saying here is, bind a listerner to the button, when a mouse goes over it. But then you do nothiing with that event. mind as wel delete those 2 lines.

    Alsoo your function misses a } on line 19.

  • Hi Zephir !!
    It works perfectly !!!!
    I suppose of course that there's a way to "dry up" the code *squint*
    With "If" conditions maybe ?
    But I'll see that when I'll be furthur in AS3 *wink*
    Thanks for the tips !!!
    About the :

    Code
    btn_chateau.addEventListener(MouseEvent.MOUSE_OVER);
    btn_chateau.addEventListener(MouseEvent.MOUSE_OUT);

    Is showtext possible ? I've tried it and didn't work *confused*

    here's what I tested:

    Missed something ? ^^

    Workin' on it !!!!
    I'm trying to make it all by myself to learn using the AS3 interface ^^
    Thank you a lot for your precious help !!!! *thumbsup*
    Thank you again for your precious help !!!!

  • Showtext doesn't work like that. A mouseover event is just fires once. Your MOUSE_OVER needs to add a MOUSE_MOVE event, whch fires the showtext. And on MOUSE_OUT it should remove the MOUSE_MOVE Eventlistener.


    About Drying up the code:

  • Ok ^^
    I indeed missed a step with the showtext action *huh*
    I understand the idea for "drying" the code, but conforts me in the fact that
    I really need to learn AS3 !!!
    One point maintained dark for me in your explanation.
    This is set for any button, not necessarry to copy/paste to add another button ( right ?)

    Code
    function addEventListeners(mc:*):void
    {
    	 this[mc.name].addEventListener(MouseEvent.CLICK, mousefunction);
    	 this[mc.name].addEventListener(MouseEvent.MOUSE_OVER, mousefunction); 
    	 this[mc.name].addEventListener(MouseEvent.MOUSE_OUT, mousefunction); 
    }

    But then when you create the functions "mousefunction" and the "showtooltip":

    How do you define an action for another button ?
    If you want to have an other showtext or another pano to load? *confused* *wacko* *question*
    *squint* *squint* *squint* *squint*

    I'm really sorry to bother you so much I suppose you've got better things to do ^^
    Having said that it's Xmas, let's say it'll be my present, I've been really nice this year !! *wink*

    Seriously thank you very much for your help, and I think it wouldn't help just me here ^^

  • Ok lets go throught the code step by step:

    for(var i:int = 0; i < this.numChildren; i++) //gets all the movieclips on the stage
    {

    this is a loop, a for loop. A loop executes certain things contained in the loop, untill the condition is met.

    i = 0
    this numChildren is the number of children (movieclips/buttons/graphics etc) which are present on the sta
    i++ is the increment

    so loop untill every movieclip has been found.

    if(this.getChildAt(i).name.substr(0,12) == "btn_chateau_") //if the movieclip starts with the name btn_chateau
    {

    Everything on the stage has a number, an index number, which is unique in that parent. It determines which layer a movieclip resides. Not important right now, but I use it the get the name of the movieclip.
    I made a mistake, substr(0,4) should be 0,12 (12 letters starting from 0)

    if the movieclips/buttons name start with btn_chateau_ then throw the movieclip in the function addEventlisteners.

    Code
    function addEventListeners(mc:*):void
    {
    	 this[mc.name].addEventListener(MouseEvent.CLICK, mousefunction);
    	 this[mc.name].addEventListener(MouseEvent.MOUSE_OVER, mousefunction); 
    	 this[mc.name].addEventListener(MouseEvent.MOUSE_OUT, mousefunction); 
    }

    Every button which starts with btn_chateau_ gets an eventlistener. This way you dont have to copy paste this code for each button.
    this eventlistener fires this function:

    Again I get the name of the button:
    var buttonname:String = String(evt.target.name); //for instance btn_chateau_2

    then I strip the name so there only remains a number
    btn_chateau_2 becomes: 2

    var id:String = buttonname.substr(12,4) //get 4 characters, after the 12th character. for example: 2


    case MouseEvent.CLICK :
    krpano.call("loadpano(pano"+id+".xml)"); //use the id to load an xml. example: pano2.xml

    break;

    now, the id you saved is put in krpano.call. You see the +id+ ? that will get replaced with a 1 or 2 or 3 or 4 etc whatever the number was of the button. So you load pano1.xml or pano2.xml depending if btn_chateau_1 or btn_chatea_2 was pressed.
    In my example every button has the same showtext... which ofcourse isnt handy.

    this is an improved function:

    this code is ment to help you, if it gets too complex, just stick with what you know and works ;) In time you will get this. After today I won't be on krpano for atleast after xmas. Family and such ;)

    Happy holidays

  • Hi !!
    Happy new year !!
    Health and hapyness !!!
    I'd like to thank you for the time you've spent helping me ^^

    Until I'm formed and used to AS3, I found another solution for my request,
    using Krpano flash effects, cause it was getting a little taugh for me ^^
    I understand the logic but havn't succeed making the plugin work ^^

    Here's what I obtain to get a similar effect using only superposed images :

    Using the code:

    Code
    onhover="set(plugin[mask2].effect, glow(0x000000)); set(plugin[map].effect, blur(5)); set(plugin[mask1].effect, blur(5));"


    enables me to blur all the image exept the button I wish to be in front for the two buttons.
    The tricky part was to align correctly in x and y the two buttons ^^

    I'm looking now for a flash AS3 formation to get furthur with Krpano ^^
    Where did you learn that language, cause in France it's very hard to get specific training on AS3 *cry*

    Thanks again for helping !!!
    Hope my solution could help someone who's like me a nooby in flash ^^

  • I learned it myself. I took upon a project at my work to create a flexible interface to be used in krpano tours. And that project became bigger and bigger, from a simple tour to a complex interface where everything can be altered through xml. Adding features step by step, learning new stuff. I haven't watched video tutorials or read books. Just plain browsing, everything in flash has be done before (atleast the beginner stuff). I can recommend you kirupa.com it's a great website to learn the beginner stuff. Then there is senocular, he is a pro in flash (lingers in kirupa forum).

    The best way to learn is figuring stuff out yourself. Don't look at the big plan (create a interface) but rather look at the individual pieces (how to create a button). Try to understand every line of code you might copy paste. Besides that, use the Flash help, it's been one of my biggest help.

    After a half year, I rewrote my interface by so it was based on Classes, later I learned to use patterns like the singleton. So I rewrote the interface again. Nowadays Im more busy with everything around Flash, like javascript, css, html, php.

  • Hi Zephyr !!
    So you're self educated like me ^^

    I've first worked on Xhtml and php stuff, nowadays I think I'm not so bad in Javascript too (very usefull for Krpano ^^),
    but it's true that flash is a big part for creating Krpano plugins, and I'm really goin' to learn it soon !!!
    Thank you for the links, Kirupa seems to be great for start *wink*

    I wish you a very good continuation in your work, applied persons like you are precious !!

    See you soon in a future post ! *wink*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!