Tip:
Highlight text to annotate it
X
In this part of the tutorial, we'll be going over: 1. pinning, 2. snapping and 3. linking to websites.
Pinning is useful when we're designing for both orientations.
It tells objects which edge of the screen to move toward when the iPad is rotated.
Its purpose is to keep objects the same distance from the edge—regardless of which orientation we're viewing it in.
...Bp - Popup - Pinned Blocks...A - Main Tower...
...and Ap- Popup-Main Tower.
Since we haven't covered popups yet, we'll focus on pinning objects on the B and A main Tower layers.
On the B (background) layer, you can pin your object both horizontally and vertically.
Here's an example:
Say we want to align this department head on the left edge of the margin.
We could try to extend the red box on the left so that there isn't any padding next to it in landscape,
but it would look pretty awkward.
So we'll want to pin it to the left, so that it'll keep the same distance from the left margin in both orientations.
To do so we'll group this object together,
make sure it's on the B pinned slides layer and that our background is on the b slides main content layer.
With our object selected, we'll then go to the Mag+ Object pallate and select horizontal pin "left."
Alternatively, we could select right, if we wanted the object to keep the same distance
from the right edge of the iPad in both orientations.
Remember that if we were to group objects together, this distance would redefined...
...depending on the object farthest to the selected horizontal pin.
In our instance: the object farthest to the left.
Here we can see our object remains pinned to the left...
...regardless of whether we're viewing it in portrait or landscape.
If we want to control the amount of padding at the top of the object...
...we can set a vertical pin on it.
To do so, we'll go back to our Mag+ object palette and select "top."
Here's an example of having multiple pins on one layer.
This object is grouped to the left, with a vertical pin to the top.
And this object is grouped to the right, with a vertical pin to the top.
Notice that they're both grouped individually.
This is when not grouping everything on the layer together, is a valid exception...
...because we need the objects to be separate in order to achieve the design we want.
Now we're ready to move on to the A-Main Tower layer.
Since the A layer is the scrolling, fluid layer you can only pin objects horizontally.
To do so, we'll make sure our object is grouped, on the correct layer...
...and we'll select which way we want to pin it.
You can see that I'm able to scroll to read the entire text and that when I view it in landscape...
...this margin is maintained on the right.
The last part of pinning is called snapping.
The default behavior of the A layer is to allow the user to scroll freely...
...but sometimes you might need the content to snap to an exact place for each page.
We can to do this by snapping the A-layer to either "Outer-top," "Inner-top" or "top."
To demonstrate this, I've created 4 pages.
On the first page, it's set to "snap to none."
On the second, snap to "outer top."
On the third, "inner top."
And on the fourth, "top."
If we fast review the design, we'll see that when we scroll on this layer...
...it doesn't snap, but allows the user to scroll freely.
On the second one, it snaps to outer top.
But, if we look at it in landscape, it cuts some of the layer off.
Here, it's snapping to "inner top." Which is the top of landscape.
And here it's snapping to the top of whichever orientation you're viewing it in.
Now say that we needed this A-layer to snap exactly to this yellow line.
We'll simply move our grouped object exactly where we need it to be.
And then, we'll draw an empty frame on that same layer, making sure that there is no fill or stroke...
...so that it doesn't appear on the device.
We'll group it together and select "snap to outer top."
When we review our design, you'll notice that it snaps exactly to that yellow point...
...in both landscape and portrait.
This is because the software still registers that empty frame as an object...
...even though, you can't see it.
The next part of this tutorial will cover linking.
Linking should always be the final step in our design.
This is because the software relies on grouping to know where the link is within the vertical.
Any time we ungroup an object that has a link, the link will be broken.
To add a link, we'll make sure all of our objects are grouped together as needed.
Then we'll go to the Mag+ Object palette and simply click "add link."
Don't try to do this any other way, otherwise it won't work correctly.
We'll now see that there's transparent blue box over our page.
This is known as the clickable area and defines where we can touch to activate a link.
Obviously we don't want the entire page to be clickable...
...so we'll readjust the size of it with our direct selection/mouse pointer tool.
Now that we've readjusted our clickable area, and given people generous room to click...
...(so that they don't have to be exactly within the circle)...we'll go back to our palette and...
...we'll make sure that a link is selected. Always leave this (ID field) the same...
...you don't need to mess with that...embedded...and then we'll copy and paste a URL.
And we can review our design!
Now, if we click where we set the clickable area...
...our link appears and it's embedded within the app.
To add another link to the same layer, you can either:
copy and paste this blue, clickable area OR option-click-drag.
Place it where you want it to be, redefine it and copy and paste your new URL.
Now obviously you'll want to give some sort of indication that there's clickable content there.
And it seems that a double circle is pretty common practice.
To add a link to a different layer, we'll make sure our objects are grouped together as needed...
...and again click "add link."
We'll redefine our area...
...and put in our URL.
When we scroll to where the URL is and click it...
...it appears.