Austin Bales walks through how to create an interactive photo viewer prototype using Quartz Composer and Origami.
09. Alpha port
Select the Transition connected to the Alpha port, and set its Start and End values to 1 and 0 respectively. For the Transition connected to the Scale port, set the values at 1 and 0.95.
10. Progress
Now, if you select the Transition patches and toggle their Progress ports from 0 to 1, the Start and End values you entered in the previous step will be sent to your Layer .
11. The fun begins
Here's where the fun begins. Insert a Switch and a Pop Animation into the Editor. Connect the On/Off port to the Number port and then connect Progress to the Progress ports of both Transition patches.
12. Animation values
Select the Switch patch. Double-click the Flip checkbox, and watch your Photo Grid fade out to the background. Play with the pop animation's Bounciness and Speed values.
13. Add in an image
Now, let's add our other image. Drag Photo.png into the Editor window. Again, an Image and a Layer patch will appear, and you'll see a large photo appear in the Viewer. Double-click the title to rename it 'Photo'.
14. The last transition
Next, Insert three Transition patches. Attach the first two's Progress ports to X Position and Y Position on your Photo layer, respectively. The last Transition we'll attach to both the Width and Height ports.
15. Set your end values
Set the Start and End Values of the X, Y, and Width/Height Transition patches to the following values: X Position: -213, 0; Y Position: -93, 0; Width/Height: 212, 640. Then, connect your Pop Animation 's Progress port to the Progress ports of each of these Transitions .
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
16. And you're done
Finally, insert an Interaction 2 patch and connect its Click port to your Switch's Flip port. This will trigger your Switch when you click anywhere in the Viewer. That's it!
This prototype just gives a glimpse of what's possible with Origami and QC.
Words: Austin Bales
Austin Bales in a product design manager for Facebook. Follow him on Twitter at @arbales. This article first appeared in net magazine issue 261.
