Monday, October 24, 2011

My turtle book talk made with the Explain Everything app

Did you know there is a way to do a screen capture on your iPad? The Explain Everything app records what you do inside it such as drawing on an image, using a virtual laser pointer, and rotating/enlarging/shrinking an image as well as your narration. Here is an example:
 
Here is how I made the video:

1) The box turtle photo was on my desktop computer, so I emailed it to myself, saved the image to the iPad camera roll, and cropped it using the free Adobe Photoshop Express app.

2) I opened my picture book Tracks in the Sand in the iBooks app, and took a screenshot of the spread I wanted. You can take an iPad screenshot by briefly pressing the round Home button and the Lock button at the same time. The resulting image ends up on the Camera roll in the Photos app. I cropped it a little bit to get rid of the iPad info bar on top because it was unnecessary as well as confusing.

3) The third image is a jpeg of the iBooks cover of Tracks. It’s a reasonably big image so it won’t get blurry when it’s enlarged.

4) In the Explain Everything app, I imported the three images and arranged them in starting position: the box turtle was on top, the sea turtle was underneath, and the book cover was shrunk down in the lower right corner.

5) Making sure the laser pointer button was selected, I pressed Record. When I was finished with the box turtle photo, I deselected the laser pointer button, used a “pinch” to shrink the photo, then moved it to the lower left corner, revealing the sea turtle illustration.

6) After selecting the laser pointer again, I proceeded with the rest of the talk.

7) Exporting the movie to YouTube took about 30 minutes total because the file was first compressed then uploaded automatically.

I heard about the Explain Everything app (and other iPad screen capture options) on Langwitches Blog, which is dedicated to 21st century skills and technologies. The hardest thing about making this video (besides figuring out what to say and not flubbing it) was creating a quiet place to make the recording. The refrigerator was rumbling, the cat was meowing, the birds were chirping…I even had to chase away a pair of squirrels who were scolding the cat through the patio screen. And then there were the lawn mowers(!) The best place turned out to be in our closet where the clothing helped to muffle outside sounds.

I hope this info has been useful…have a productive week!

Tuesday, October 18, 2011

Sea turtle resource roundup

From Tour de Turtles site
To help celebrate the new digital edition of Tracks in the Sand, I dug around online for some resources to help primary kids learn about our flippered friends. :
Click image to download PDF
  •  The original edition of Tracks is out of print but is still widely available in libraries.
Hope this list is helpful. If you know of other good resources, please leave a link or other info in the comments.

Thursday, October 13, 2011

Tracks in the Sand now on the #iBookstore!

After being stuck in my flat files for too long, my sea turtle picture book is back in the swim of things again.

Here is the iBooks preview page …if you’re using an iPad to read this blog post you can download a free sample right away.

Or, later on you can open your iBooks app, click on the Store button and search on Tracks in the Sand. Eventually I’d like to make this book available on other tablets/formats, but this is a start.

Also, this page on my web site has a coloring page to download.


So now the question is, what will my next digital project be…?

Toodleloo for now!

Loreen

Sunday, September 25, 2011

Ebook in the works

This is the more or less final cover for the digital edition of Tracks in the Sand, my picture book about sea turtles. To see the jacket of the print edition plus a close up of one of the baby turtles, click here.
The book had to be redesigned to fit on the iPad, so it needed a new cover as well. I’m excited about making this book available again, hopefully it will be soon. Currently I’m working on getting it into an iBooks format that allows full-bleed images (i.e. fixed-layout EPUB).

Sunday, August 14, 2011

Easing for animations demo

While learning how to use DIY app software, I’m running across quite a few things I know very little about, such as animation. A simple type that moves an image in a straight line is called a linear animation. The Photoshop plug-in Kwik has quite a few ways to create variation with easing. Easing changes the speed and other aspects of how the image moves from point A to point B.

The easing options have interesting names such as InExpo and inOutElastic. For the inexperienced, their descriptions can be a little tough to visualize and differentiate, such as:
inOutExpo: starts motion from a zero velocity, accelerates, then decelerates to a zero velocity using an exponential easing equation.


As opposed to:
OutExpo: starts motion fast and then decelerates motion to a zero velocity as it executes.


Being a visual person, I’ve been making a demo app to see the various features in action. This video shows all the easing methods (plus 2 widgets because there was some extra room):

Aside from the easing method selected, all other aspects of the animation are the same for each one. The video is a little jerky but it gives the idea. For a interactive demo of easing options on the web, check out this page.

I hope this is helpful to someone...it certainly is for me, at least.

Thursday, August 11, 2011

Cartoon bunny drawing tutorial

Kids love to watch me (or any artist) draw and usually get busy afterwards creating their own artwork. Here is a step-by-step drawing of a comical rabbit character:

Enjoy!


Sunday, July 31, 2011

DIY app software Kwik tutorial: making a butterfly fly

The short clip below was made with the Photoshop plug-in Kwik and previewed using Corona. Basically, the art is in layers in PS, the animation and interactivity is added using Kwik, then the app can be previewed in the Corona simulator. Once the app is complete, it can be uploaded to the various app stores. More details on all that can be found on www.kwiksher.com.

I drew and painted the art in Illustrator and Photoshop. Here are the steps to make the animation:

I made 6 images of the butterfly with the wings squinching in then out again, saved in PNG format. The images must be named like this: Name_1.png; Name_2.png, and so on. These will create the “movie clip” that will run in a loop to create the flapping motion. [Note: these 6 images could have been on a sprite sheet as an alternative method.]

The artwork elements were sized for a 1024 X 768 pixel document @132 pixels per inch to fit an iPad screen.
The first butterfly image was placed as a layer in the Photoshop file, along with the hibiscus, bushes, and background. A new Kwik iPad book project was made using the layered Photoshop document.

I selected the butterfly image layer, then moved it off screen in the lower left corner. This was the starting position so the butterfly can fly into the screen.


In the Kwik panel, I clicked the Add Animation icon (circled in red):
A dialog box comes up with quite a few options, so here we go (numbers refer to image below):

1 I changed the animation name to get rid of the random numbers Kwik generates.


2 Type: From the drop down menu, Movie Clip was selected.


3 First File: The movie clip will replace the butterfly layer. I used the Browse button to navigate to the first of the 6 images. Kwik will automatically bring in the rest.

4 Image Width/Height: The numbers were obtained from the first butterfly image.

5 Number of Images: In this case there are 6 images i
n the butterfly wing flap loop..

6 Loop: It’s hard to know how many times the wings will need to flap, so I just entered any number than adjusted it later to arrive at the number of 42. Most of the remaining numbers are a result of tweaking after watching the preview.

7 End Position: Once you start moving the x and y sliders, the butterfly can be seen in the PS document (remember, it had been offscreen.) X controls the horizontal axis, Y is vertical.

8 Duration: This controls how long it takes the butterfly to go from off screen to its final position.


9 Starts: This animation starts as the page loads (as opposed to being triggered by a button.) The delay is 1 second so it’s not too abrupt.

10 Easing: There are several methods that change how the butterfly goes from start to end position. Some go past the end point, some bounce, some speed up or slow down, etc.

11 Loop: This refers only to the path the butterfly takes from start to end position, not how its wings are looping as in step 6. It loops once meaning the animation runs once. If “forever” is checked, the butterfly will disappear and fly in from the corner over and over.

12 Rotate: It is set to 20% so the butterfly starts with a vertical orientation then makes a slight turn to the right by the end of its path. However, the path itself is a straight line.

So, this seems like a lot of stuff, but it starts to make sense after you do it a few times.

Additional notes:

Sometimes it’s a little tricky to reopen the animation dialog box to tweak these numbers. You have to double click it, but sometimes it doesn’t work right away.

The End Position sliders sometimes don’t update the image on the screen, but by clicking back and forth from the x and y boxes, it usually will.

I used Screenflow to record the animation in the Corona simulator. Love it!
Related Posts Plugin for WordPress, Blogger...
Pin It button on image hover