Lets play with a few new behaviors:
First, lets build a Puzzle!
- Lets start by bringing in various picture pieces. Take any image and slice it apart in a program like Photoshop. I created four pieces of all the same size.
- Place each image into a layer. I sized the layers to the same size of each picture piece.
- Click anywhere in your document, except for on a layer or object. This is easiest if you have no text in the main html page, if its all associated to a layer.
- Go to the Behaviors panel and select "Drag Layer". You'll need four, one for each image slice.
- Notice the following fileds.
- Layer = layer name
- Movement = unconstrained
- Drop Target = location where you want piece to fit
- Snap = how close to the drop target an item needs to be before it will go there when it is let go.
- Mix up the pieces and preview in browser.
With this drag and drop combined with a show/hide layer, you can also drag a layer onto another and have it change.
OK, lets do something a bit tricky with the show/hide layer behavior and the set text of layer behavior.
- First draw a layer that will have text we can change.
- Lets name it something like "setTextLayer".
- Now draw a layer to use as the first "button" to change this text. Lets call it "changeText". Put a piece of text in the button to give it an label, like "Change". You can even give it a color if you like.
- Make an identical button, but call it "revertText" and give it a label like "Revert".
- Now move it right on top of the "Change" button
- In the layer palette, make it invisible.
- Now lets draw two more layers. One that will be "normalText" and the other "boldText". Make each the same size and place them one above the other.
- In the layers palette, make these invisible.
- Now, for the Show/Hide Layers
- Change = show bold, normal, revert | hide change
- revert = show change | hide bold, normal, revert.
- Make all the show/hide behaviors "On Click"s.
- Now, temporarily show the Revert, Bold and Normal buttons.
- Apply the following behavior and settings.
- Bold - Set Text of Layer = select the layer we want to change the text on.
- Add the new text with <strong> tags to make it bold.
- Normal - Set Text of Layer = select the layer we want to change the text on.
- Add the text without the <strong> tags.
- Revert - Set Text of Layer = select the layer we want to change and add the text we originally had in it.
- Make sure all behaviors are MouseUp so they happen after you click.
- Now you have buttons that will change the text and put it back.
- Make sure you hide those three buttons again in the layers palette.
You can also change text fields in forms, the status bar and Frames!
This text will change based on the "buttons" below.