Creating your own button arrow
Posted: Sun Oct 20, 2013 5:27 pm
The Bottom set of buttons are mine, the top is from the lessons
I created a quick and silly button arrow in photoshop for livecode to practise a few things. 3 hours later ....you can imagine my thoughts. Going through reams of exercises....So having failed miserably I went back to the early exercise and realised I had the same problem as before,they don't really tell you exactly HOW to create your own button. Because this is the problem I have: point number 13 from these instructions here did not work on my new buttons because...
As you can see from my buttons I have the wrong property inspector box, well not wrong I know, but how do I get to the property inspector that comes from the default buttons? I have to change something in order to make my imported buttons have the property inspector that the default buttons automatically have ? Point number 13 here below well I don't know, how do I assign the various properties to my image buttons when I can not access these properties.
INSTRUCTIONS FROM LESSON:
LiveCode makes it simple to use custom icons from buttons, simply by using imported images. Follow these steps to do this.
1. Create a transparent button. (Use the Style popup in the Basic panel of the property inspector.) Give the button a name and label.
2. Choose the Icons & Border panel in the inspector.
3. Next to the icon field, click the wand tool.
4. Select an image from those displayed.
5. How does the button's appearance change?
6. Click the wand again to change the icon.
7. Choose This Stack from the popup list at the top. This shows all the images you previously imported. Choose one. Note that any imported image can also be used as a button icon.
8. Rename your button "Previous".
9. Click the button at right to download a several images in a folder called "ArrowImageIcons". Note where you saved the image files.
10. Choose File menu > Import as Control > All Images in Folder... Navigate to the ArrowImageIcons folder you just downloaded and select it. You should see all of the images in the folder appear in the center of your card.
11. Select and hide all of the arrow images you just imported. (Uncheck the "visible" checkbox in the property inspector for all the images.)
12. Return to the Icons and Border panel for your transparent button.
13. Assign the various icon types—Normal, Hilite, Disabled, Hover—to the appropriate button states, using the left-facing arrow set.
14. Test the button to see the various states in action: normal icon, down or hilited icon, disabled icon, hover icon.
15. Copy your button and name the copied button "Next".
16. Assign the icons to the Next button, this time using the right-facing arrows.