[As an exception on this blog this post is in English because this is of interest to a broader audience]
[UPDATE 16 June 2011 – A better, more advanced, project template has been released by the Blend product team. See my newer blogpost.]
In an earlier post I published the project template for Blend to enable a way to create a SketchFlow prototype for a Windows Phone application. This post adds information on how to go from there.
This post: how to add an a panorama view.
NOTE: an update was made to the project template ZIP-file. You will need that update to follow the rest of this post. You can download it from here. For installation instructions, see the first post.
In this update the background of LayoutRoot of the PhoneUI component was set to transparent.
Once you have created a project based on the template, create a new screen or select an existing screen like App Settings Screen. In this tutorial I’ll be using the App Settings Screen. For a detailed description how to create your own screen, take a look at the first post.
Now you need a panorama. Maybe you have drawn something the “old way” (you know, using paper and pencil). You can scan that image and use it. For this tutorial I use this sample I drawn myself (yes, you call me “Picasso” as well). It is a panorama showing 5 different groups of data.
The idea is to put this image in the PhoneUI and make it interactive, so the customer can get an idea of how it scrolls and even a way to go to another screen when content is clicked.
Drag the required image from Windows Explorer to the screen in Blend where the panorama or pivot should appear. I have chosen to add it to the standard App Start Screen. Once the image is placed make sure that it’s in the visual tree (Objects and Timeline panel) before PhoneUI, like so:
This way the image is visible within the phone UI window and the rest is outside of the phone. Position and size the image so that it aligns with the phone window. In this sample I’ve sized the image somewhat bigger to make sure the borders don’t appear in the phone’s window.
Now we want to simulate scrolling the panorama view. We can do this using SketchFlow Animation. If you don’t see this panel (it should be next to the SketchFlow Map tab), open the Windows menu from the menu bar and select SketchFlow Animation to make it visible.
In the SketchFlow Animation window, click the + sign to create a new animation.
A first frame is created. On the left side of the frame you see the duration of the starting animation (default 0,5 s) and the used easing function (default CubicInOut). At the bottom of the frame the duration to pause that frame is indicated (default pause is switched on and 1 s). In the top right corner of that frame-image is another + sign to add a frame after that one. Click it to create a second frame.
You are now position on the second frame and you are in recording mode (you can see that by the red border, the recording button on the design surface followed by the text “SketchFlowAnimation Frame 2 recording is on”). Move the image a bit to the left until “Spotlight” is visible in the phone window. Add another frame and move the image even further left to make Categories, New and Top visible as well.
After the five frames have been created, we want to tweak the animation a bit to make it have the feel of the scrolling on the phone. Change the pause duration of each frame to 0,5 s. This duration can be seen at the bottom of each frame. Now we want to change the easing function used for each frame. Click the easing function image (the box with the swirl in it before the frame). Select the Back Out (top of the list in the middle) easing function for each frame.
You can test the animation by clicking the Play button at the bottom of the SketchFlow Animation window. When you start the application in the SketchFlow Player and navigate to the App Settings Screen we used, there is an option there as well to play the animation.
The next step is to make it interactive. To do this we can put an invisible rectangle on top of the UI to trigger the animation. To do that make sure “Base” is selected in the SketchFlow Animation window first (on the left). Now draw a rectangle on top of the phone window, covering the Featured-sketch. If you still have the defaults set, the rectangle will have a fill-color and a stroke-color.
In the properties of the rectangle, select under Brushes “Stroke” and select the “No Brush” icon below that. After that select under Brushes “Fill” and, no matter what color, set the A to 0% (this is the alpha channel). We want to have a transparent brush. If there is no brush, it won’t respond to events like click.
Right click the rectangle in the Objects and Timeline window, select Play SketchFlow Animation and select App Settings Screen / SketchFlow Animation.
Now start the player again (F5 or Run Project in the Project menu), navigate to the App Settings Screen en click on the drawing. You’ll see the animation start. At anytime you click on that, the animation will start over.
If you want to make it a bit more fancy with a real design, you can do the same trick with another image of course. For instance, use this sample image from the Windows Phone Design Templates and do the same.
With all the text and the images this looks as a lot of work, but actually doing it is much faster. Maybe I’ll make a screencast for this … I’ll keep you posted 