Cu3er Tutorial

This tuto­r­ial con­cerns the par­tic­i­pants of last Friday’s Ycad­emy Call only and is focus­ing on dif­fer­ent tran­si­tion of slides using the Cu3er 3D Slider. The result­ing slider from this tuto­r­ial can be viewed HERE.

To write this tuto­r­ial I have changed the slide size to 940 pix­els x 650 pix­els. Image sizes oscil­late between 60 kb and 320 kb to test tran­si­tion speeds.

These are the steps to repro­duce exactly what results in the demo site:

From your dash­board access the theme edi­tor and change Cu3er height as follows:

Note also the num­ber of slides is set to 8 and the xml filer efresh is enabled; this set­ting goes to dis­abled once your slides are loaded and you have viewed them from your home page.

I just used screen shots and cre­ated a few slides with dif­fer­ent col­ors to test effects.

You may down­load my Pho­to­Shop PSD file from HERE. You can view the pic­tures from the port­fo­lio page which is not yet re-styled as I am writing)

If you just would like to play with my images, you may down­load the images from HERE.

I am using 8 images which I loaded from the Dash­board to the Word­Press Media Library (Media -> Add New).

For the demo I need 8 posts, the Hello World Post plus 7 test posts which I call Test, test 1,.…., Test 7.

Each post gets just the title plus 2 cus­tom fields which you cre­ate and pop­u­late from the post editor:

• Pre­view: cre­ate a cus­tom field named prewiev (spell exactly like this) and enter as Value the link to the image cor­re­spond­ing to the post
• Cu3er tran­si­tions: cre­ate a cus­tom field named cu3er and enter as Value your Tran­si­tion codes (see below).

Exam­ple:

Cu3er related Cus­tom Fields

In your theme edi­tor you find a default tran­si­tion which rotates 3 slices. How­ever there are dif­fer­ent tran­si­tions you may configure.

For this Tuto­r­ial I have used 8 dif­fer­ent tran­si­tion con­fig­u­ra­tions which I will explain here below.

0.

No need to edit the cu3er cus­tom field as it exe­cutes the default from the theme settings.

1.

num="3" slicing="horizontal" direction="right" duration="1.5" delay="0.30" shader="phong" light_position="10,10,-100" cube_color="0x000000" z_multiplier="2"

2.

num="5" slicing="horizontal" direction="right" duration="1.5" delay="0.10" shader="phong" light_position="10,10,-100" cube_color="0x000000" z_multiplier="6"

3.

num="1" slicing="vertical" direction="up" duration="1.5" delay="0.30" shader="phong" light_position="10,10,-100" cube_color="0xffffff" z_multiplier="10"

4.

num="9" slicing="vertical" direction="up" duration="1.5" delay="0.30" shader="none" light_position="10,10,-100" cube_color="0xffffff" z_multiplier="10"

5.

num="3" slicing="horizontal" direction="left" duration="1.5" delay="0.30" shader="phong" light_position="10,10,-50" cube_color="0x000000" z_multiplier="20"

6.

num="3" slicing="horizontal" direction="left" duration="1.5" delay="0.30" shader="none" light_position="10,10,-100" cube_color="0x000000" z_multiplier="6"

7.

num="3" slicing="vertical" direction="up" duration="1.5" delay="0.30" shader="none" light_position="10,10,-100" cube_color="0x000000" z_multiplier="6"

Note: The above are the tran­si­tions added to images 0–7. The dis­play on the site is in inverse order as the image loaded last shows first when you visit the site. Also, the tran­si­tion applies to the exit of the image not the load­ing; first the pic, then the tran­si­tion lead­ing to the next image.

From the above snip­pets you can guess how it works. To be com­plete, let’s add here below the

num  — num­ber of slices each tran­si­tion con­sists of

slic­ing — direc­tion of bube slic­ing -“hor­i­zon­tal” or “vertical”

direc­tion — tran­si­tion direction/cube rota­tion direc­tion — “left”, “right”, “up”, “down”

dura­tion — time needed for each sliced cube tran­si­tion — in seconds

delay — time each cube will wait before start­ing tran­si­tions — in seconds

shader — tran­si­tion shad­ing type — “none”, “flat”, “phong”

light_position — use this to define x,y and z light posi­tion — default value “0,0,-100″

cube_color — cube faces color in hex num­bers (the # is replaced by 0x — default gray would be 0x333333

z_multiplier — bezierThrough effect over z-axis dur­ing tran­si­tion — default is 2 (in my sam­ple I go up to 20 in one case)

If you expe­ri­ence any prob­lems, don’t hes­i­tate to com­ment here below and I will do my best to sort out the problems.

• cu3er tuto­r­ial
• tuto­r­ial cu3er
• cu3er exam­ple
• cu3er
• cu3er exam­ple sites
• cu3er tran­si­tion example
• cube_color — define cube color dur­ing tran­si­tion (hex value)
• change cu3er tran­si­tion time
• edit cu3er wordpress
• flash tran­si­tion tuto­r­ial like cu3er

Related posts:

1. The­sis Tuto­r­ial Author Box
2. The­sis Tuto­r­ial Fea­ture Box
3. The­sis Tuto­r­ial Header Ban­ner Rotator
4. The­sis Footer Tuto­r­ial for Author Blog

Tags: Cu3er for WordPress, Cu3er Tutorial

This entry was posted on November 14, 2010 at 7:06 pm and is filed under Cu3er, Featured Main, Semiomantics, Ycademy, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.