Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Tvorba animací

Dobrý den,
chtěl jsem udělat jednoduchou animaci, kde bych měl nějakou křižovatku a tam bych si "nasimuloval" dráhy aut a kde se zastaví ... a případně bych to pak chtěl udělat do nějakého avi nebo nějakého podobného formátu, protože bych pak celé to dal do nějakého programu a k tomu dal i audio komentář a chtěl si to pouštět třeba ve Windows media Playeru.
Ale nevím si rady v jakém programu. :( Celý obrázek klidně dokáži upravit a uložit na několik obrázků nebo ten obrázek "rozkouskovat" a každé auto třeba uložit zvlášť, silnici taky... to u mě nedělá problém. Ale nevím jak dále. :( Poraďte prosím. Předem díky.

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
Ako programátor by som to robil ako webovú stránku s použitím CSS3 animácií - prehral by si to v kaž…
los 11.12.2011 15:08
 los
mimochodem- nežere to enormně víc prostředků, než obyč stream, či flash? má to někdo změřený?
kmochna 11.12.2011 15:15
 kmochna
Záleží od zariadenia a prehliadača - niektoré dokážu robiť CSS animácie pomocou grafickej karty. Pod…
los 11.12.2011 15:43
 los
mi zaujala ta idea, dělat to přes "html", líbí se mi to. pro uživatele by bylo jednodušší si nakresl…
kmochna 11.12.2011 16:08
 kmochna
já jak tu křižovatku, tak ty autíčka už mám :( jen to rozpohybovat :( Napadlo mě to udělat v Microso…
B3art 11.12.2011 16:23
 B3art
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 čas…
kmochna 11.12.2011 16:28
 kmochna
Dobře.... hodím sem nějaké autíčka... :) a tu křižovatku :) Ať se pohneme z místa nový
B3art 18.12.2011 19:29
 B3art
los už udělal nástřel- http://pc.poradna.net/q/view/741109-tvorba-animaci ?page=r741519#r741519 vypa… nový
kmochna 18.12.2011 20:06
 kmochna
kvk 001 -auta se sipkama kvk 002 -auta bez sipek kvk 003 - bez aut a bez sipek Tak tady jsou ty moj… nový
B3art 23.12.2011 09:38
 B3art
to by bylo dobrý se naučit. ve videu nevidím budoucnost- je statický, tohle můžeš změnit kdykoliv. t… nový
kmochna 23.12.2011 11:22
 kmochna
<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <… nový
kmochna 23.12.2011 11:23
 kmochna
http://pc.poradna.net/a/view/717788-gimp-sestav-si -animaci-z-vlastnich-obrazku
Kráťa 11.12.2011 15:23
 Kráťa
Celé dělám v PhotoSHopu .... :( v tom by to nešlo? Mám verzi CS 5.1 nový
B3art 18.12.2011 19:28
 B3art
Já dělám animace v PIVOTu, ale jak to pak dáš do avi, to nevím :D poslední
Metride 23.12.2011 12:08
 Metride

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.

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.

Zpět do poradny Odpovědět na původní otázku Nahoru