| View previous topic :: View next topic |
| Author |
Message |
giglio
n00b
Joined: 22 Jul 2005
Posts: 24
|
 Posted: Sat Jul 30, 2005 4:50 pm Post subject: e17 - Animated Background (Mini) How-To |
 |
|
I recently started using e17 and wanted to make some animated backgrounds for it.
I couldnt find a How-To so I poked around in some example files and put together a Mini How-To.
I dont have any webspace to put up a zip-file so I'll just be giving instructions.
There werent any comments so I tried to add my own where I could.
Images used - 5 numberd PNG's, 1 overlay image, 1 background image. 1 placeholder image.
Open gimp
make a black 800x600 image , save it as black.png
make a 1 pixel transparent image, save it as 1pix.png
make 5 transparent pngs, each with a different number in it, 1 to 5, and save them as 1- 5 .png.
Save this as reflection_overlay.png http://img131.imageshack.us/img131/2363/reflectionoverlay0ee.png
Save the following as demo.edc
| Code: |
/*---------------------------------*/
/* Load Images to Use */
/*---------------------------------*/
images {
image: "1.png" COMP; /* Animation Image */
image: "2.png" COMP; /* Animation Image */
image: "3.png" COMP; /* Animation Image */
image: "4.png" COMP; /* Animation Image */
image: "5.png" COMP; /* Animation Image */
image: "1pix.png" COMP; /* Placeholder Image */
image: "black.png" COMP; /* Background Image */
image: "reflection_overlay.png" COMP; /* Background Overlay */
}
/*-----------------------------------------*/
/* Finished Loading Images */
/* Begin the madness */
/*-----------------------------------------*/
collections {
group {
name: "desktop/background";
script {
public is_ready;
public do_end;
} /*script*/
/*---------------------------------*/
parts { /* Begin Creating Image Entries */
/*---------------------------------*/
part { /* This is the Main Background Image, Or Color */
name: "background";
description {
state: "default" 0.0;
image {normal: "black.png";}
} /*desc*/
} /*part*/
/*---------------------------------*/
part { /* This is a little wavy overlay on top of the background */
name: "reflection_overlay";
description {
state: "default" 0.0;
image {normal: "reflection_overlay.png";}
} /*desc*/
} /*part*/
/*---------------------------------*/
part { /* This is the Location of the Animations */
name: "logo_point";
type: RECT;
description {
state: "default" 0.0;
color: 0 0 0 0;
visible: 0;
aspect: 1 1;
max: 160 160; /* Size of the Animations */
} /*desc*/
description {
state: "visible" 0.0;
inherit: "default" 0.0;
color: 255 255 255 255;
visible: 1;
} /*desc*/
} /*part*/
/*---------------------------------*/
part { /* Animation Setups*/
name: "logo";
clip_to: "logo_point";
description { /* Zoom In Enable/Disable */
state: "default" 0.0;
visible: 0;
image {normal: "1pix.png";}; /* Placeholder 1 pix Image*/
} /*desc*/
description { /* Animations Below */
state: "loop" 0.0;
visible: 1;
rel1 {
offset: 0 0;
to: "logo_point";
} /*rel1*/
rel2 {
offset: 0 0;
to: "logo_point";
} /*rel2*/
image {
normal: "1.png"; /* These are the Animations */
tween: "2.png";
tween: "3.png";
tween: "4.png";
tween: "5.png";
} /*image*/
} /*desc*/
} /*part*/
/*---------------------------------*/
} /*parts*/
/*---------------------------------*/
programs {
program {
name: "init";
signal: "load";
source: "";
script {
set_int(is_ready, 0);
set_int(do_end, 0);
} /*script*/
} /*program*/
program {
name: "init_pause";
signal: "show";
source: "";
action: STATE_SET "default" 0.0;
transition: LINEAR 0.0; /* Image Timers */
target: "logo_point";
after: "logo_show";
after: "logo_animate";
} /*program*/
program {
name: "logo_show";
action: STATE_SET "visible" 0.0;
transition: LINEAR 0.0; /* Image Timers */
target: "logo_point";
} /*program*/
program {
name: "logo_animate";
action: STATE_SET "intro_start" 0.0;
target: "logo";
after: "logo_animate2";
} /*program*/
program {
name: "logo_animate2";
action: STATE_SET "intro_go" 0.0;
transition: LINEAR 0.0; /* Image Timers */
target: "logo";
after: "logo_animate2b";
} /*program*/
program {
name: "logo_animate2b";
script {
new val;
val = get_int(do_end);
if (val == 1)
run_program(PROGRAM:"done2");
else
set_int(is_ready, 1);
} /*script*/
after: "logo_animate3";
} /*program*/
program {
name: "logo_animate3";
action: STATE_SET "loop" 0.0;
target: "logo";
after: "logo_animate4";
} /*program*/
program {
name: "logo_animate4";
action: STATE_SET "loop" 0.0;
transition: LINEAR 3.0; /* Image Timers */
target: "logo";
after: "logo_animate4";
} /*program*/
program {
name: "done1";
signal: "done";
source: "";
script {
new val;
val = get_int(is_ready);
if (val == 1)
run_program(PROGRAM:"done2");
else
set_int(do_end, 1);
} /*script*/
} /*program*/
program {
name: "done2";
action: STATE_SET "default" 0.0;
transition: LINEAR 0.0; /* Image Timers */
target: "logo_point";
after: "done3";
} /*program*/
program {
name: "done3";
action: SIGNAL_EMIT "done_ok" "";
} /*program*/
/*---------------------------------*/
} /*group*/
} /*collect*/
|
Open a command line and type
| Code: | | edje_cc demo.edc demo.edj |
then copy demo.edj into ~/.e/e/backgrounds
Open Emblem and select the new Background, you will see it scrolling 1- 5 in the preview pane, click it and it will be on your desktop scrolling 1- 5.
Emblem Screen
http://img130.imageshack.us/img130/3720/emblem15yn.jpg
Bad screen of the image on my desktop
http://img130.imageshack.us/img130/5585/bg16ur.jpg
There ya go, now just replace the 1- 5 pngs with images of your choice and youve got your own animated background. |
|
| Back to top |
|
 |
JoeG
Apprentice
Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA
|
| Posted: Thu Aug 04, 2005 3:26 am Post subject: |
|
|
giglio, this is too damn cool! I hadn't even bothered to check out how to do this before now. Your script made it really, really simple. As a matter of fact, I hacked up an animated background in the style of gentoo. You can preview it or download the edj here.
Let me know whatcha think. I got the original "g" logo here. I used gimp's light effects to create the 5 png's from the original, and replaced your reflection_overlay with a gradient-filled one of my own.
Thanks again!
JoeG
_________________
Linux User#226477 |
|
| Back to top |
|
|
grzewho
l33t
Joined: 31 Dec 2002
Posts: 626
Location: /home/g
|
| Posted: Thu Aug 04, 2005 7:47 am Post subject: |
|
|
that`s cool thanks a lot !
btw. does anyone know an app for making animations (something different than gimp) ?
_________________
| Code: | | USE="freedom -software_patents" emerge --deep --update world |
|
|
| Back to top |
|
|
JoeG
Apprentice
Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA
|
| Posted: Thu Aug 04, 2005 12:19 pm Post subject: |
|
|
| grzewho wrote: | that`s cool thanks a lot !
btw. does anyone know an app for making animations (something different than gimp) ? |
In what format? You could use MING for shockwave. MAYA for 3D animations. Blender3D for 3D photo ... etc.
_________________
Linux User#226477 |
|
| Back to top |
|
|
peatCMC
n00b
Joined: 14 Jan 2005
Posts: 10
Location: nbg
|
| Posted: Mon Aug 08, 2005 2:38 pm Post subject: Re: e17 - Animated Background (Mini) How-To |
|
|
| giglio wrote: |
| Code: |
/*---------------------------------*/
part { /* This is the Main Background Image, Or Color */
name: "background";
description {
state: "default" 0.0;
image {normal: "black.png";}
} /*desc*/
} /*part*/
/*---------------------------------*/
|
|
Instead of a 800x600 black image, a simple black rectangle should also work.
| Code: |
part { /* This is the Main Background Image, Or Color */
name: "background";
type: RECT;
description {
state: "default" 0.0;
color: 0 0 0 255;
} /*desc*/
} /*part*/
|
|
|
| Back to top |
|
|
Maedhros
Bodhisattva
Joined: 14 Apr 2004
Posts: 5511
Location: Durham, UK
|
| Posted: Mon Aug 08, 2005 4:33 pm Post subject: |
|
|
Moved from Desktop Environments to Documentation, Tips & Tricks.
_________________
No-one's more important than the earthworm. |
|
| Back to top |
|
|
val
Apprentice
Joined: 30 Jun 2004
Posts: 234
|
| Posted: Tue Aug 09, 2005 7:53 am Post subject: |
|
|
| JoeG wrote: | | grzewho wrote: | that`s cool thanks a lot !
btw. does anyone know an app for making animations (something different than gimp) ? |
In what format? You could use MING for shockwave. MAYA for 3D animations. Blender3D for 3D photo ... etc. |
gifsicle for gifs
_________________
My log saw what happened to Laura Palmer. Go ahead. Ask it. |
|
| Back to top |
|
|
JoeG
Apprentice
Joined: 30 Jul 2003
Posts: 179
Location: Kentucky, USA
|
| Posted: Tue Aug 09, 2005 12:18 pm Post subject: |
|
|
| grzewho wrote: | | btw. does anyone know an app for making animations (something different than gimp) ? |
You could also use convert by targeting a group of images and specifying the name of the output file if you already have the static images created. 
_________________
Linux User#226477 |
|
| Back to top |
|
|
perchut2
Tux's lil' helper
Joined: 31 Mar 2003
Posts: 96
Location: Paris
|
| Posted: Tue Aug 09, 2005 5:18 pm Post subject: |
|
|
/me 's wondering what a mplayer -vo png something.avi would give... 
_________________
Bonheur Amour Risette,
Labeur Labour Levrette. |
|
| Back to top |
|
|
perchut2
Tux's lil' helper
Joined: 31 Mar 2003
Posts: 96
Location: Paris
|
| Posted: Tue Aug 09, 2005 7:04 pm Post subject: |
|
|
in fact, quite easy... i'm not an artist, though :/
http://perchut2.free.fr/demo.edj
_________________
Bonheur Amour Risette,
Labeur Labour Levrette. |
|
| Back to top |
|
|
Vespira
n00b
Joined: 20 Feb 2005
Posts: 33
Location: Arizona, USA
|
| Posted: Thu Sep 08, 2005 3:59 pm Post subject: |
|
|
very nice stuff..
the problem i have is that i run dual monitors, so my desktop resolution is 2048x768. There are some really nice .edj files, but it seems as if no one in the community uses a dual headed setup >.>
I tried to modify the script posted here and made my own background.. the problem is that the location that i wish to have the animation take place is not in the center of the screen.. in addition the animation i want is only going to be 120x120px, not 160x160.. i tried changing the max line (i cannot find a tutorial or documentation anywhere on compiling wallpapers, so i'm prone to noob it up here), but the resulting .edj file still has a 160x160 animation plopped down in the middle of the screen.
| Code: | part { /* This is the Location of the Animations */
name: "logo_point";
type: RECT;
description {
state: "default" 0.0;
color: 0 0 0 0;
visible: 0;
aspect: 1 1;
max: 120 120; /* Size of the Animations */
} /*desc*/
description {
state: "visible" 0.0;
inherit: "default" 0.0;
color: 255 255 255 255;
visible: 1;
} /*desc*/
} /*part*/
|
I'm trying to get the animation to be constrained to a 120x120 area with upper left corner at 350,400 (where 0,0 is upper left corner of a 2048x768 desktop)
totally clueless, so if someone could provide me direction, i'd be quite grateful. |
|
| Back to top |
|
|
rominet7777
n00b
Joined: 21 Oct 2005
Posts: 1
|
| Posted: Fri Oct 21, 2005 7:26 pm Post subject: |
|
|
Hi,
I just played a little bit with this code, coz' I felt it was much much complicated for a simple animation...
I created the 5 "X.png" files using a 800x600 size, so that the text is centered on the screen.
I think the following works the same as the first example, except it doesn't shrink the text images as it did before.
Anyway : the programs are much more simpler, and you might want to play with this too (with smaller "X.png" for example, and with the relative positions)
There's still something I don't understand : why doesn't the LINEAR 5.0 seconds transition take 5 seconds to complete ... ??
Here it is :
| Code: |
/*---------------------------------*/
/* Load Images to Use */
/*---------------------------------*/
images {
image: "1.png" COMP; /* Animation Image */
image: "2.png" COMP; /* Animation Image */
image: "3.png" COMP; /* Animation Image */
image: "4.png" COMP; /* Animation Image */
image: "5.png" COMP; /* Animation Image */
image: "reflection_overlay.png" COMP; /* Background Overlay */
}
/*-----------------------------------------*/
/* Finished Loading Images */
/* Begin the madness */
/*-----------------------------------------*/
collections {
group {
name: "desktop/background";
script {
public dumb;
} /*script*/
/*---------------------------------*/
parts { /* Begin Creating Image Entries */
/*---------------------------------*/
part { /* This is the Main Background Image, Or Color */
name: "background";
type: RECT;
description {
state: "default" 0.0;
color: 0 0 0 255;
} /*desc*/
} /*part*/
/*---------------------------------*/
part { /* This is a little wavy overlay on top of the background */
name: "reflection_overlay";
description {
state: "default" 0.0;
image {normal: "reflection_overlay.png";}
} /*desc*/
} /*part*/
/*---------------------------------*/
part { /* Animation Setups*/
name: "logo";
description { /* Zoom In Enable/Disable */
state: "default" 0.0;
visible: 1;
image { normal: "1.png"; }
} /*desc*/
description { /* Animations Below */
state: "loop" 0.0;
visible: 1;
rel1 {
relative, 0.0 0.0;
offset: 0 0;
}
rel2 {
relative, 1.0 1.0;
offset: -1 -1;
}
image {
normal: "1.png"; /* These are the Animations */
tween: "2.png";
tween: "3.png";
tween: "4.png";
tween: "5.png";
}
}
}
/*---------------------------------*/
} /*parts*/
/*---------------------------------*/
programs {
program {
name: "init";
signal: "load";
source: "";
script {set_int(dumb, 0);}
} /*program*/
program {
name: "test";
signal: "show";
source: "";
action: STATE_SET "default" 0.0;
transition: LINEAR 0.0; /* Image Timers */
target: "logo";
after: "logo_rotate";
}
program {
name: "logo_rotate";
action: STATE_SET "loop" 0.0;
transition: LINEAR 5.0; /* Image Timers */
target: "logo";
after: "logo_rotate";
}
/*---------------------------------*/
} /*group*/
} /*collect*/
|
|
|
| Back to top |
|
|
doubleagent
Guru
Joined: 15 Apr 2005
Posts: 444
Location: 127.0.0.1
|
| Posted: Fri Sep 15, 2006 4:32 am Post subject: |
|
|
Now why didn't I think of doing this!
I didn't read, but thank you for being that thoughtful. 
_________________
| shickapooka wrote: | | i think they programmed [otw] based on a right-wing jewish-nigger-nazi, his gay, retarded, left-wing love slave with webbed feet, and their three headed cat that poops uncontrollably. the cat is also an apple fanboy |
|
|
| Back to top |
|
|
0x0065
n00b
Joined: 08 Apr 2007
Posts: 49
|
| Posted: Fri May 25, 2007 12:11 pm Post subject: Xscreensaver? |
|
|
or you can run many of the xscreensaver programs.
They have options to run in the root window
Works with Mac OS X screensavers too.
I could never get either to do switching for multiple desktops though... !!!
if anyone can get it to work. hint hint
anyway, I'm sure there's a screensaver that'll cycle through a few stills. |
|
| Back to top |
|
|
nordic bro
Guru
Joined: 25 Oct 2003
Posts: 585
|
| Posted: Sun Dec 30, 2007 1:03 am Post subject: |
|
|
| Anyone know how to scale images using the edc file? Like many startup files have an "e" float into the picture but I manually scaled each one of them up in size (2x) but after rebuilding the edj and trying it out, those images ended up being the same size as they were originally (no, I didn't mix up the files and was definitely using the one with altered images ). So it seems that somewhere in the edc file something sets the size it will appear as on-screen regardless of the physical dimensions of the image files themselves; anyone know what does that? |
|
| Back to top |
|
|
MidnighToker
n00b
Joined: 11 Jul 2008
Posts: 3
|
| Posted: Fri Jul 11, 2008 9:13 am Post subject: |
|
|
| e17 lets you set different backgrounds for desktops, so you could try and create two "standard" animations and putting them next to each other |
|
| Back to top |
|
|
|
Documentation, Tips & Tricks
