Animated Images

Previous posts of mine discussed animating images. How about animated images in an animated 3-D cube?

My nine GIF Animation posts in the order presented:

1 – Animation – Photos and Otherwise

2 – Animated GIF Images

3 – Animated GIF Software – Rudimentary Features

4 – Adding Falling Snow, Part 1 – Still Images

5 – Adding Falling Snow, Part 2 – Animated Images

6 – Adding Falling Snow, Part 3 – It’s Snowing!

7 – A Plug-in for Making Falling Snow

8 – Animating Sunrise & Sunset

9 – Animated GIF Photos – The End


This next display illustrates that there’s more than one way to animate an image. In fact, this one further animates an already animated (the GIF) image.

Animated 3-D cube + Animated GIF “Running Dog” (pure CSS)

Front side
_DSC4327_nx
Back side
wordpress
Top side
info button
dogrun
Bottom side_DSC4327_nx sep2
Left sidedogrun
Right sidedogrun

 

Hover over the cube for an exploded view
The back of each side properly shows the reverse of its front
Are we having fun yet? 😉

Of the techniques shown in the past three posts, this one is most likely to fail. It works with the current versions of Chrome and Firefox and doesn’t work with any version of IE due to failure to support the CSS3 transform-style: preserve-3d property (as I said in the last post – avoid IE if you can).


Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Spring is Here (Calendar-wise anyway)

Summary – A short floral photography video to celebrate the first day of spring (unless you’re down under).

.

——————————————————–

——————————————————–

Abstract Exhibit Entry Deadline Change

I’ll accept entries from

Anyone who has already entered at least one image

but not more than two

If that fits you and you’d like to enter one more image

I need to have it no later than 6 PM EST 3/23

Sorry for the last-minute change

From the original 3/31 deadline


Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.

Danny Boy – To Celebrate St. Patrick’s Day

Summary – Something to bring tears to the eye….

.

——————————————————–

Danny Boy as you’ve never heard it before

Still mournful & beautiful though

But from the other side of the world

.

Click the image for the performance

(Sorry for the 15 second ad; couldn’t figure out how to kill it)

Danny Boy

The melody may be familiar

The words, which you almost certainly won’t understand,

Are not familiar

Except for the sad tale they tell

(and the island is Okinawa, not Ireland)

Translation to English:

Beloved child of mine,

From beyond the skies is heard the voice of the flute calling to you.

Summer has passed, the flowers of the season have fallen.

You are preparing for the journey to distant lands.

Through the summer when the grasses and flowers bloom and peak,

Through the winter when the north winds bluster and blow, here on this island I’m always waiting for you.

Beloved child of mine, o beloved child of mine!

I’m watching and waiting for you to return, gentle and brave.

As the seasons turn and you finally come home to the island of your birth, 

Though you may no longer see my form, 

my love for you is true through eternity.

With your gentle voice, call to me!

Beloved child of mine, o beloved child of mine!

Beloved child of mine, o beloved child of mine!


Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.

OT – Keeping Track of Time

Summary – Do you find yourself needing a timer while working at your desk? Here are two (of many) that are handy. Motivated by my program deadline.


Here’s a timer that you can customize

Use it to count down

Days, hours, minutes, seconds, milliseconds

Until some event

.

Click inside the box to go to the timer site and make your own2014-02-18_6-11-52

As of 6:12 AM today

Running 24/7 in a browser window to keep me focused

Geez! Time’s getting short….

The program is done in the sense that I could give it as is right now

But – I’ll feel better about it after a bit of spit & polish


.

This next one is a more conventional timer

BUT – it’s found in the most unlikely place

In a Google search Box

(must use Google, not Bing or some other)

Try it as illustrated in the following short video –

.


Enter the International Abstract Photography Exhibit

Entries close March 31st; it’s free

Entry details are here

The gallery is here

Oblique Smoke

No Smoking

A surprising merit winner that I entered more as a “throw away”



Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.

Slide Show Effects for Photos – Motion Timing

Summary – Modern slide shows typically contain multiple image layers. These layers are programmed to move in order to provide the illusion of motion. Timing the moves is “the trick”.

.

Figure 1 shows the 4 layers used in this short show

Higher layers in a stack hide whatever is below them

Unless the layer is a mask with transparent areas

The top three images are masks

Masks hide anything behind their opaque areas

Here, the car hides/reveals the city as it rolls along

2014-02-03_17-54-11

Figure 1

________________________________________________________

Figure 2 show the timing steps for the show

The time steps occur at the same time for all four layers, but needn’t

#1 & #4 are the times for the start and end of the show

#2 & #3 are times I added to

Momentarily stop & restart the motion

2014-02-03_17-55-24

Figure 2

________________________________________________________

Figure 3 is a more informative view of the timing & motion

If you scan down the center column

You’ll see where each layer is located as time progresses

The motion between time-steps is smooth & continuous

The car starts far left, ends far right, stops briefly en route

Look at the skyline

I moved if from right to left as the car moves

That’s what happens in real-life

Click image for full screen2014-02-09_7-16-47

Figure 3

________________________________________________________

Here is the resulting video

NOTE – it is shown twice

1st – the developer’s view, per Figure 3

To test & confirm the motion is as planned

2nd – the audience’s view, i.e. the final video


Enter the International Abstract Photography Exhibit

Entries close March 31st; it’s free

Entry details are here

The gallery is here

001D300-_131218_103431__DSC9572_origblog

Eight tiny multicolored slinkies

In a cut glass goblet (but you knew that 😉 )

Wide open macro lens, almost zero depth of field

Making an abstract? Learning to isolate is important.



Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.

Using Layers & Masks in Slide Show Software

Summary – Slide show programs derive some of their most powerful effects through the use of layers and masks. In some ways these are no different from those you’d find in Photoshop. In other ways they are very different.


First a simple illustration

It has five layers (and a short sound track, not shown)

Three layers are still images

One layer contains an image used as a mask

One layer contains a video

2014-01-27_14-14-41

Figure 1

And here’s the resulting video

Figure 2

.

Let’s consider the role of layers & masks in creating

A modern multimedia slide show

Masks – serve the same function as they do in

Photoshop (or painting a wall)

They hide parts of what’s behind them

This is the function served by the top layer of Figure 1

Layers – like a stack of cards with images on the front

If the cards are aligned perfectly

The top card hides all of the rest

Note that the mask hides everything below it

Except for the cut-out mask area

This is why it’s at the top of the stack

Spread the cards out and you can see more of them

Upper cards still hide whatever is below, however

This is where Photoshop style layers & slide shows differ

PS layers “blend” and produce a single still image

Slide show layers “move” (pan, zoom, tilt, rotate)

To reveal underlying layers

PS layers don’t change with time (they’re static)

Slide show layer must move else nothing happens

.

In the above video –

Layer 1 is a mask

Nothing is visible below it except through the “hole”

Layers 2 & 3 are initially behind the mask’s “hole”

They are both moved (L & R) to reveal layer 4

Layer 4 is a video with a sound effect

It pivots and reveals layer 5

Layer 5 is a stationary background image

It’s invisible until the layers above it move

An additional layer, not shown in Figure 1, contains text

It moves after layer 5 is revealed to show a title

The ability to control the timing of the moves described above

Is an essential slide show creation program function

To recap –

Both post-processing and slide show programs use

Layers and masks

Slide shows move layers to create motion (& other video effects)

Post-processing blends layers to create a new still image

Functionally, masks are more or less the same in both


The above video illustrates key layers & masks points

It’s a bit rough in terms of transitions & timing

It’s a first-try to test possibilities

More to come….

Timing of layer adjustments (movements & more)

To get video effects


Enter the International Abstract Photography Exhibit

Entries close March 31st; it’s free

Entry details are here

The gallery is here

_DSC9866 nx sep

As captured (a la Jackson Pollock’s style)

A thermal pool near Yellowstone NP geyser area



Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.

Slide Show Effects for Photos – Motion

Summary – When many hear “slide show”, their minds immediately think PowerPoint – unless they’re photographers. Photographers are apt to think Ken Burns (or not).


Slide show programs are replete with features

Among the most popular (to the point of being overdone) is

Image motion (blame Ken Burns 😉 )

Future posts will illustrate many more of these features

.

Panning across an image, aka The Ken Burns’ Effect

Photos are mine, not Ken’s

Two still photos used (Grand Tetons & Shenandoah NP)

.

Modern slide show programs

Make adding motion, even complex motion, relatively easy

The next (9 sec) video is an example of what is possible

The focus is on the what (the effect)

Not the how (the specific program used)

Nor “why would you ever do this?

The possibilities are limited

Only to your imagination

Done with just two still images

One remains still and serves as a background

The wheel appears to move across the screen and

The spokes rotate (but recall there’s only one image)

It also grows in size as it moves

Further, this wheel is transparent and

Reveals the background as it moves

Use your imagination to come up with applications for this

A background (still or not), together with

A (partially transparent) foreground

What possible applications are there?

Maybe the foreground is a picture frame for a background?

Is that all (the best) you can think of? Hope not.


Why use motion (hopefully not just 😉 to show off)?

It adds interest & reduces boredom is one reason

But – just because you can, doesn’t mean you should

At least not all of the time

Although the previous examples may seem trivial

They demonstrate a small part of what is possible

You can’t create new & interesting videos

IF you don’t know what’s possible and

How to pull it off

.

My previous slide show post’s video

(made with a photo slide show program)

Used motion extensively

.

More to come….

Layers & masks aren’t used just in Photoshop

That wheel was

A layer which was used as a mask

In a slide show producing program


Enter the International Abstract Photography Exhibit

Entries close March 31st; it’s free

Entry details are here

The gallery is here

D800E_130330_111955__DSC7339



Subscribe (see sidebar). New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

Another option – Click on the “Follow” button at the bottom right of the screen.

  • Or – “Follow” in your admin bar, displayed at the top of the screen, for logged-in WordPress.com users.