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.

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.

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