Show img clicking on a hotspot and hide the img

[eliecer]

How to display an image clicking on a hotspot and hide the image clicking on the image

With the permission of the moderators and administrators, I have taken parts of the tutorial "How to display a. png file onClick on a hotspot" to create this tutorial. It has taken me two days because I have been trying to achieve this effect. Now that It's done, I put it to the consideration of all of you.

I am using the last version (Flashificator 2.0693)

1. Add new hotspot
2. Name it
3. Choose an image (the image you want to show when you click on the hotspot - small image)
4. Check static box
5. Go to Functions Tab. Click on Make Another Function and Click on Green button (you will start to record a new function)
6. Go to Hostspots
7. Decrease scale to 0 (x=0 y=0)
8. Go to Functions and click on red button (you are stoping the recording)
9. Uncheck Generate Reverse
10. Name the Function (Ex. DecreaseSize)
11. Click the codeline that is in the box "This was recorded" (something like scaleX=0 and scaleY=0) *You will have to click in both and adjust the following parameter:
• Set time in milliseconds: 500 - This will be the time of the Fade Out Effect (You can play with the other parameters)
12. Click finish
13. Check that you are still on the right hotspot (the big image hotspot)
14. Be sure that onclick is selected
15. Choose the function you did a second ago (Ex. DecreaseSize)
16. Click the little arrow between the 2 boxes, and then the function will be added to the right list, and is now added to the hotspot you have selected at the bottom.
17. Go to Hostspots Tab
18. Decrease scale to 0 (x=0 y=0)
19.Choose the location where you want the hotspot for the small image [prefered same hotspot for big image , in this way, the big image will cover the small image], the hotspot that will trigger the larger image when clicked
20. Add new hotspot and name it
21. Choose the small image (small image hotspot which will trigger the larger one)
22. Lock position
23. Reload so that you can see the hotspot (sometimes not neccesary)
24. Go into functions tab
25. Select Make Another Function
26. Click the green "record" button, you have now started recording and many of the changes you do will be saved!
27. Choose the first hotspot you did [the big image] (you find all of them at the bottom of the userinterface)
28. Go back to the Hotspots tab, now you increase the scale to 1 ( x=1 y=1 ) [the image is shown again]
29. Go back to functions tab, and click the red button. You will now stop recording.
- Be sure Generate Reverse is uncheck
30. Name your function (something different from the other one we created before) (Ex. IncreaseSize)
31. Click the codeline thats in the box "This was recorded", (something like scaleX=1 and scaleY=1) * You will have to click in both and adjust the following parameter:
• time in milliseconds: 500 - This will be the time of the Fade In Effect (You can play with the other parameters)
32. Select the last hotspot we create (the small image)
33. Click finish
34. Check that onclick is selected
35. Choose the function you did a second ago (Ex. IncreaseSize)
36. Click the little arrow between the 2 boxes, and then the function will be added to the right list, and is now added to the hotspot you have selected at the bottom.
37. go to the hotspots Tab
38. Assign Depth to 0 (Depth Values are the layers in Flashificator) Number 0 equals to the Back layer. (Images with Depth 1 will be on top of the images with Depth 0)

That's it!

Please check all the steps and let me know if something is going wrong. I have been with Flashificator for only few days. That means I am not an expert but I am trying to learn.

[kbellis]

Way to go Eli! Thanks for the efforts - I can't wait to try out your advice.

In the mean time, could you please post an example of what the final effect is actually supposed to look like?

Thanks!

Kelly

PS. What do you think about an FFC wiki?

[eliecer]

Hi kbellis,

This is an example. Just click on top of the yellow cameras.

http://www.papin.ca/creek/creek.html

The FCC Wiki is a good idea. Sorry for the late reply but I've been really busy lately.

[kbellis]

This is great - the map, photos, the whole shebang. Thanks for posting Eli.

Pressures of my day job (land surveyor) are keeping me from digging in at the moment


Kelly

[smhill]

Could you help me with a few questions?

First and most important-Do you (fingers crossed) have a video tutorial of this?

Second:
When you say "small image" (as below) you mean the actual hotspot image and not the image that is to be triggered when the hotspot is clicked, right?

"3. Choose an image (the image you want to show when you click on the hotspot - small image)"

Third:
Did you add the X and the word "close" to your jpg image in photoshop or some other photo editing software?

Thanks-Stephani

[kbellis]

Hi Steph,

I think Trausti made one - at least I remember seeing one, but darned if I can find again!

Kelly

[smhill]

Thanks for replying, Kelly. I thought there was one, too. I haven't been able to locate it either. I have had trouble following the written directions because I get the small image and larger image and this hotspot and that hotspot all messed up. I guess I am a visual learner because I just keep making a mess!

If I locate it, I will post it for everyone.

Stephani

[kbellis]

Hey Steph, I found it!
http://flashificator.com/1/Diverse/Movi ... ation.html

And here's a related link: viewtopic.php?f=3&t=2269&p=6685&hilit=hide+trausti#p6685

[smhill]

Kelly! I feel my blood pressure easing by the second. Thank you so much!!!!! (This called for lots of ! points)

Thanks-Stephani

[eliecer]

Hi guys,

Unfortunately I don't have a video tutorial but I will create one as soon as possible.

When I say "small images", I was referring to the hotspot.

I used photoshop to add the "X" with the word "close"

[kbellis]

Hi Eli,

When you do post your video - which will be much appreciated, btw - and post a link to it, would you also please consider adding a link to the FFC+FPP wiki - Video Tutorials page?

Thanks for all of your good work!

Kelly

[smhill]

Eli-
I second everything Kelly said and thank you in advance for the video tutorial!

Stephani