Tvorba animací

truespace 7,dnes je to freeware,openFX...

Díky, ale to je vše v 3D ne ? :) Mě to stačí jako klasická animace. Chci jenom něco jako pohled shora pokud mě chápeš, něco jako je: pepinator.tym.cz, ale v animaci jak přijedou a postupně odjedou, ale o více autech a situacích a trochu jiné křižovatce.

tak môžeš použiť napr. toto plasticanimationpaper.dk alebo toto www.pencil-animation.org

Ako programátor by som to robil ako webovú stránku s použitím CSS3 animácií - prehral by si to v každom modernom prehliadači a mohlo by to byť interaktívne.

mimochodem- nežere to enormně víc prostředků, než obyč stream, či flash? má to někdo změřený?

Záleží od zariadenia a prehliadača - niektoré dokážu robiť CSS animácie pomocou grafickej karty. Podobne aj Flash dokáže v špecifických prípadoch prehrávať akcelerované video, takže je zložité to porovnávať. Napríklad konkrétne pre mňa je síce Flash akceptovateľný, ale na mojom 64-bitovom Ubuntu je dosť nestabilný. Naproti tomu CSS animácie sú otvorený štandard, ktorý má širokú podporu.

To vypadá zajímavě. Dej sem nějaký link na čkánek/ky, počtu si. Dík.
Já dělal jen "marqueart"

mi zaujala ta idea, dělat to přes "html", líbí se mi to. pro uživatele by bylo jednodušší si nakreslit křižovatku, autíčka a interaktivně a kdykoliv změnitelně dělat pohyb.

To mě právě také. A ještě naprogramovat semafory etc a je interaktivní autoškola

no kdyby měl los chvilenku na sepsání jedné křižovatky, nebo jiné věci...

Spravil som taký nástrel, ako by to mohlo vyzerať. Nechcelo sa mi počítať presne tie transformácie, tak som to spravil len tak od oka. Vo firefoxe to občas laguje, ale Chrome ide plynulo. Ostatné prehliadače som neskúšal.

Dalo by sa to implementovať aj inak, napr. pomocou canvasu alebo WebGL. Cez WebGL by to bolo najvýkonnejšie, ale na takéto jednoduché môže stačiť canvas alebo to CSS.

Takýto prístup má výhody, že ak má rovnaké autá a podobné križovatky, tak nemusí ťahať kvôli každej križovatke nové video. Ten Flash by bol tiež dobrá voľba, tam by to mohol spraviť podobne. Ak si definuje križovatky a dráhy áut nejako rozumne, tak môže z rovnakých dát vygenerovať buď CSS animácie, alebo si to vyrenderovať cez canvas/WebGL, alebo to použiť vo Flashi. Skrátka najprv použije niečo, len aby to fungovalo a ak to nestačí, tak potom môže rozmýšľať nad tým ako to zrýchliť. Ja by som si to zvolil hlavne kvôli tomu, že grafické programy nie sú môj šálok kávy.

Ve Firefoxu mi přejela dvě auta, v Opeře se nic nestalo.

nj, opera sa este musi vela ucit

No ono jak v čem. Když jsem asi před půlrokem udělal formulář s
<input type="date">
tak to zase uměla pouze Opera a FF, ani IE nee.
input-date

já jak tu křižovatku, tak ty autíčka už mám :( jen to rozpohybovat :( Napadlo mě to udělat v Microsoft Office PowerPoint 2003, ale nevím jak to pak převést do avi nebo něčeho podobného. :(

zkus barte štěstí a obrázek křižovatky a dvou autíček sem nahrát. třeba los podaruje svým drahým časem. mě osobně by to zajímalo také. jestli to jde.

Dobře.... hodím sem nějaké autíčka... :) a tu křižovatku :) Ať se pohneme z místa

los už udělal nástřel- http://pc.poradna.net/q/view/741109-tvorba-animaci ?page=r741519#r741519
vypadá to vážně dobře a v kódu pochopitelně.

kvk 001 -auta se sipkama
kvk 002 -auta bez sipek
kvk 003 - bez aut a bez sipek

Tak tady jsou ty moje nástřely z PhotoShopu. Zkoušel jsem udělat jakoby i 1 situaci jak by vypadala v realu, ale chci jích udělat o mnoho více.
Jinak to pozadí bílé je schválně vč. "jenom" naznačení silnice jak vede. Nechci totiž nic tmavé... :) K dispozici kdyby jste chtěli auta, tak mohu taky poskytnout. Jako pro zlepšení orientace, jsem jako blinkry dal schálně žlutými hvězdičkami.
Nástřel tady od LOSe :) tak ten je pěkný, sám bych to asi takto bohužel nenapsal. :( Jinak to vypadá pěkně.

to by bylo dobrý se naučit. ve videu nevidím budoucnost- je statický, tohle můžeš změnit kdykoliv. takže já na to taky seru a požaduju podporu týhle věci, chci jí (jsme na poradně, takže to čte kaýdý v republice).
vypadá ten losovo kód vážně zvládnutelně, mám pocit,že to zvládnu i já.

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Crossroad</title>
<style type="text/css">
html, body { margin: 0; padding: 0; background: #fff; }
h1 { font-family: "Trebuchet MS",Trebuchet,Verdana,Arial,Helvetica,sans-serif; font-size: 170%; font-weight: normal; margin: 20px; color: #333; }
p { margin: 0 20px; }
.map { width: 768px; border: 1px solid #fff; overflow: hidden; margin: 20px; position: relative; }
.road { width: 256px; height: 256px; background: transparent url(tiles.jpg); float: left; }
.void { background-position: -256px -256px; }
.horizontal { background-position: 0 0; }
.vertical { background-position: -768px 0; }
.cross { background-position: -512px 0; }
.car { position: absolute; z-index: 1; left: -100px; top: -100px; }
.pickup {
	width: 56px; height: 134px;
	margin-left: -28px; margin-top: -67px;
	background: transparent url(pickup.png) no-repeat;
}
.vw-bug {
	width: 50px; height: 98px;
	margin-left: -25px; margin-top: -49px;
	background: transparent url(vw-bug.png) no-repeat;
}
/* moz */
.animate .pickup {
	-moz-animation-name: left-to-top;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-moz-animation-name: top-to-bottom;
	-moz-animation-duration: 3.5s;
	-moz-animation-timing-function: linear;
	-moz-animation-fill-mode: forwards;
}
@-moz-keyframes left-to-top {
	0% { -moz-transform: rotate(90deg); -moz-transform-origin: 28px 67px; left: 0; top: 415px;  }
	30% { -moz-transform: rotate(90deg); -moz-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -moz-transform: rotate(90deg); -moz-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -moz-transform: rotate(0deg); -moz-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-moz-keyframes top-to-bottom {
	0% { -moz-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -moz-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -moz-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -moz-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -moz-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* webkit */
.animate .pickup {
	-webkit-animation-name: left-to-top;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-webkit-animation-name: top-to-bottom;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes left-to-top {
	0% { -webkit-transform: rotate(90deg); -webkit-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -webkit-transform: rotate(90deg); -webkit-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -webkit-transform: rotate(90deg); -webkit-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -webkit-transform: rotate(0deg); -webkit-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-webkit-keyframes top-to-bottom {
	0% { -webkit-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -webkit-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -webkit-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -webkit-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -webkit-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* ms */
.animate .pickup {
	-ms-animation-name: left-to-top;
	-ms-animation-duration: 5s;
	-ms-animation-timing-function: linear;
	-ms-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-ms-animation-name: top-to-bottom;
	-ms-animation-duration: 3.5s;
	-ms-animation-timing-function: linear;
	-ms-animation-fill-mode: forwards;
}
@-ms-keyframes left-to-top {
	0% { -ms-transform: rotate(90deg); -ms-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -ms-transform: rotate(90deg); -ms-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -ms-transform: rotate(90deg); -ms-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -ms-transform: rotate(0deg); -ms-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-ms-keyframes top-to-bottom {
	0% { -ms-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -ms-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -ms-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -ms-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -ms-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* o */
.animate .pickup {
	-o-animation-name: left-to-top;
	-o-animation-duration: 5s;
	-o-animation-timing-function: linear;
	-o-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-o-animation-name: top-to-bottom;
	-o-animation-duration: 3.5s;
	-o-animation-timing-function: linear;
	-o-animation-fill-mode: forwards;
}
@-o-keyframes left-to-top {
	0% { -o-transform: rotate(90deg); -o-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -o-transform: rotate(90deg); -o-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -o-transform: rotate(90deg); -o-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -o-transform: rotate(0deg); -o-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-o-keyframes top-to-bottom {
	0% { -o-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -o-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -o-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -o-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -o-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* */
.animate .pickup {
	animation-name: left-to-top;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.animate .vw-bug {
	animation-name: top-to-bottom;
	animation-duration: 3.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes left-to-top {
	0% { transform: rotate(90deg); transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { transform: rotate(90deg); transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { transform: rotate(90deg); transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { transform: rotate(0deg); transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@keyframes top-to-bottom {
	0% { transform: rotate(180deg); left: 350px; top: 0; }
	15% { transform: rotate(180deg); left: 350px; top: 128px; }
	50% { transform: rotate(175deg); left: 355px; top: 384px; }
	60% { transform: rotate(180deg); left: 360px; top: 460px; }
	100% { transform: rotate(180deg); left: 350px; top: 768px; }
}
</style>
</head><body>
<h1>Crossroad</h1>
<p>
<input type="button" id="start" value="start">
</p>
<div class="map">
<span class="void road"></span>
<span class="vertical road"></span>
<span class="void road"></span>
<span class="horizontal road"></span>
<span class="cross road"></span>
<span class="horizontal road"></span>
<div class="pickup car"></div>
<div class="vw-bug car"></div>
</div>
<script>
document.getElementById('start').onclick = function() {
	document.documentElement.className = '';
	setTimeout(function() {
		document.documentElement.className = 'animate';
	}, 100);
};
</script>
</body></html>

edit// omluva- toto je losův původní kód.

css-animation tady je pěkná raketa, tak možná by to šlo podle toho udělat.

Šlo by to sejmout třeba v CamStudio. Pustil bys to v PowerPointu, nastavil region...

Snad nekecám, ale nevyřadil by tím všechny IE?

Ak to chce aj pre neschopnejšie prehliadače (IE, Opera a pod.), tak môže použiť nejakú knižnicu na animovanie (napr. plugin do jQuery), ktorá využije CSS3, len ak sa dá.

http://pc.poradna.net/a/view/717788-gimp-sestav-si -animaci-z-vlastnich-obrazku

Celé dělám v PhotoSHopu .... :( v tom by to nešlo? Mám verzi CS 5.1

Já dělám animace v PIVOTu, ale jak to pak dáš do avi, to nevím :D