In previous lessons, you have learned how to create and place items in your activity and you may have even learned how to make items move about the screen.  Those items displayed either colors of your choosing (like our yellow square) or contained a picture that you wanted to displayed (like our good friend Jami the dog!).  Well, did you know that you can take this one step further and display video?  You can!  And the designer makes this easy.

To get started, let’s open the designer on our blue background yellow block starter activity.  Do the typical… find the activity in the activity list and then touch the activity’s icon.  Once the activity loads and displays any instructions, go in to Edit Mode on the activity.  Once you’ve done this, you should be seeing something like the following:

So, let’s go a little nuts here and change our yellow square so that instead of just showing a yellow square, it instead displays a video!  To do this requires a few steps.  First, touch the yellow square to make it the “currently selected item”.  Next, bring up the property inspector by tapping the “hammer/wrench” icon on the navigation bar.  Your screen should look something like the following:

Notice that before, we had used the “Color” section of the property inspector to set the color of our square to yellow.  We also used the “Picture” section of the inspector to change the yellow square to show a picture.  Now, let’s look at the “Video” section.  Tap the Video button and you should see the following display:

The video property inspector let’s you choose a video to display using two techniques… you can either select a video from your device’s photo library, or you can indicate that the video exists at a known URL location.  For now, let’s pick a video from your video library.  Pick something short… less than 30 seconds is best for videos used in activities.  Anything long takes too long for the activity to download and can frustrate your activity users.  (NOTE: If you have a really long video, it is best to place it out on a youtube.com channel and then reference it in the URL field as the video will pay immediately without waiting for download).  For now, let’s assume you have a short video in your photo library so go ahead and tap on “Select from iPhotos” button.

You’ll probably need to scroll down to your “Videos” folder to find the video you want to show.   I went ahead and selected a video of the world famous Jami for my video.  When I did so, there was a slight delay as the video was processed (a little clock spinner showed up) and then the video screen clip was shown as seen below.

Next, I touched the “Use” button.  The system spent some time processing the video (and you also may receive a prompt asking if it’s OK to access the photo library).  And then my video loaded and was presented in my activity.  Notice however that the little yellow square is gone now and instead a larger square shows up with the video inside of it.

So, my video is too big for me now.  I would rather have a more manageable sized video of Jami, so I used my finger gesture on the video to shrink it down to size.

OK.  Now that I have the video about the size and placement that I want it, I’ll go ahead and run the activity (touching “Done”, saving my work and then touching the play button).

And, here’s the results…