現在フラッシュアニメーションを作ってます。
と、言ってもフォトショップで作ったフルカラーのjpg画像をキーフレームにペーストしてフラッシュで軽くフェードイン・アウトさせる超基本操作のみを使ってます。

そこで質問です。
全18カットあるのですが、フルカラーのjpg画像を貼り付けたフラッシュアニメーションをウェブ上に置いたらやっぱり読み込みに時間がかかってしまうでしょうか?
未着色のjpg画像を使ってパイロット版を一度作ったのですが、swfファイルが136KBありました。
また、フラッシュアニメーションにMIDIで音楽を流すことって可能なんでしょうか?もしあるのなら、どういうふうにやれば良いのでしょうか?
さらに、実行したらやっぱり重くなってしまうのでしょうか??

あ・・ちなみに、フラッシュを置くスペースはレンタルホームページスペースです。

フラッシュ初心者なもので、あまり良くわかってません。
この道に詳しい方、情報をお待ちしております。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

フラッシュは基本的に線画で画像を作ることを前提に作られているもので、だからこそ小さいファイルサイズで動きが付けられたり、解像度に依存しないデータが作れるわけです。


その中にビットマップ形式のデータ(GIF,JPG等)を入れればその分ファイルサイズが大きくなるのは仕方ないでしょうね。
いずれにしても既に作成する環境があるのでしたら色々試してみるべきではないでしょうか?
    • good
    • 0
この回答へのお礼

やっぱりそうですよね。(^_^;)
色々試してみます。

shigatsuさん、ありがとうございました。<(_ _)>

お礼日時:2001/03/19 08:26

フラッシュのことは、何も分からないのでアドバイスで・・・



重い・重くないは、実際に試してみれば、分かると思います。
ADSLや、CATV環境などの高速回線の人以外に、試してもらえば良いと思います。
サーバへの接続状態(バックボーンが細い、混み合っている等)にもよりますが、
おおよその感想をもらえば良いと思います。

ちなみに、フレッツ・isdn環境の私には、少し重いような気がします(サイズのみの感想)。
DLに、時間がかかっても内容によって、「重い」と感じなくなる時もあります。

最後の一文は、個人的な意見なので、アシカラズ...
    • good
    • 0
この回答へのお礼

私もフレッツISDNです。
回線が重くても、「いかに重さを感じさせない」という作りにするのも必要かもしれませんね。(^_^;)
日本の回線事情がもっと良くなれば、こんなこと悩まなくて済みそうですが・・・・。

raadさん、ありがとうございました。<(_ _)>

お礼日時:2001/03/19 08:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qcssとhtml使用。メニューボタンを作ったらできてしまった変なスペースを取りたい

HP内にメニューボタンを作っていました。
4つ項目がある中の4つ目(★★★★★の部分)だけが上部に変なスペースが入ってしまいます。
解決方法を教えてください。
よろしくお願いします。

【html】
<div class="nav">
<ul id="normal" class="dropmenu">

 <li><a href="#"><b>TOP</b></a></li>
<li><a href="#"><b>業務案内</b></a>
<ul>
<li><a href="#"><b>業務1</b></a></li>
<li><a href="#"><b>業務2</b></a></li>
<li><a href="#"><b>業務3</b></a></li>
<li><a href="#"><b>業務4</b></a></li>
<li><a href="#"><b>業務5</b></a></li>
</ul>
</li>
<li><a href="#"><b>費用一覧</b></a></li>
<li><a href="#"><b>★★★★★</b></a></li>

</ul>
</div>


【css】
div.nav{
background: #3eaa87;
}

.dropmenu{
*zoom: 1;
list-style-type: none;
width: 1200px;
margin: 5px auto;
padding: 0;
border-right: white solid 2px;
}
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
.dropmenu:after{
clear: both;
}
.dropmenu li{
position: relative;
width: 25%;
float: left;
margin: 0px;
padding: 0px;
text-align: center;
}
.dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #3eaa87;
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
border-left: white solid 2px;
}
.dropmenu li ul{
list-style: none;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu li ul li{
width: 100%;
}
.dropmenu li ul li a{
padding: 13px 15px;
border-top: 1px solid white;
background: #3eaa87;
text-align: left;
}
.dropmenu li:hover > a{
background: #F5F5DC;
color: #3eaa87;
}
.dropmenu li a:hover{
background: #F5F5DC;
color: #3eaa87;
}


#normal li ul{
display: none;
}
#normal li:hover ul{
display: block;
}

HP内にメニューボタンを作っていました。
4つ項目がある中の4つ目(★★★★★の部分)だけが上部に変なスペースが入ってしまいます。
解決方法を教えてください。
よろしくお願いします。

【html】
<div class="nav">
<ul id="normal" class="dropmenu">

 <li><a href="#"><b>TOP</b></a></li>
<li><a href="#"><b>業務案内</b></a>
<ul>
<li><a href="#"><b>業務1</b></a></li>
<li><a href="#"><b>業務2</b></a></li>
<li><a href="#"><b>業務3</b></a></li>
<l...続きを読む

Aベストアンサー

そんなHTML(大文字ですよ)もCSSも書きません。(^^)
<div class="nav">
 <ul>
  <li><a href="#">TOP</a></li>
  <li><a href="#">業務案内</a>
   <ul>
    <li><a href="#">業務1</a></li>
    <li><a href="#">業務2</a></li>
    <li><a href="#">業務3</a></li>
    <li><a href="#">業務4</a></li>
    <li><a href="#">業務5</a></li>
   </ul>
  </li>
  <li><a href="#">費用一覧</a></li>
  <li><a href="#">★★★★★</a></li>
 </ul>
</div>
1) <B>は使いません。スタイルシートで
2) id="normal" class="dropmenu"
  そんなidやclassは書きません。
  idもclassも文書に構造を追加するためのものです。先でdrop以外のデザインにするとき齟齬が生じる。
3) .dropmenu{
 CSS2以降基点セレクタから書きはじめます。また子孫セレクタなどを使うといらないです。

具体的なサンプル
★タブは、_に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 で検証済み。HTML4.01strict+CSS2.1 ウェブ標準
★IE8以降なら問題ない。標準モードで起動する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
/* ここから */
div.header div.nav{
_width: 100%;
_margin: 5px auto;
_padding: 0;
_border-right: white solid 2px;
_font-size:0;
_text-align:center;
_background-color: #3eaa87;
}
div.header div.nav ul,
div.header div.nav ul li{
_margin:0;padding:0;
}
div.header div.nav ul li{
_font-size:14px;
_list-style:none;
_display:inline-block;
_width: 25%;
_margin: 0px;padding: 0px;
_position: relative;
_line-height:28px;
_background-color:green;
}
div.header div.nav ul li ul{
_width:100%;
_position:absolute;
_top:29px;
_left:0;
_display:none;
}
div.header div.nav ul li:hover ul{
_display:block;
}
div.header div.nav ul li:hover{
_background-color:red;
}

div.header div.nav ul li ul li{
_width:100%;
_display:block;
}
div.header div.nav ul li a{
_display: block;
_width:auto;
_margin:0 0 0 2px;
_height:100%;
_color: white;
_text-decoration: none;
_border-top: 1px solid white;
_text-align:left;
_text-indent:-10em;
_overflow:hidden;
_background-color: lime;
_z-index:1000;
}
div.header div.nav ul li:hover a{
_background: lime;
}
div.header div.nav ul li ul li:hover a{
_background: silver;
}

*/
/* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
__<div class="nav">
___<ul>
____<li><a href="/">TOP</a></li>
____<li><a href="/product">業務案内</a>
_____<ul>
______<li><a href="/product/1.html">業務1</a></li>
______<li><a href="/product/2.html">業務2</a></li>
______<li><a href="/product/3.html">業務3</a></li>
_____</ul>
____</li>
____<li><a href="/price">費用一覧</a></li>
____<li><a href="/star">★★★★★</a></li>
___</ul>
__</div>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

そんなHTML(大文字ですよ)もCSSも書きません。(^^)
<div class="nav">
 <ul>
  <li><a href="#">TOP</a></li>
  <li><a href="#">業務案内</a>
   <ul>
    <li><a href="#">業務1</a></li>
    <li><a href="#">業務2</a></li>
    <li><a href="#">業務3</a></li>
    <li><a href="#">業務4</a></li>
    <li><a href="#">業務5</a></li>
   </ul>
  </li>
  <li><a href="#">費用一覧</a></li>
  <li><a href="#">★★★★★</a></li>
 </ul>
</div>
1) <B>は使いません。ス...続きを読む

QPC/ケータイ/フルブラウザ@ケータイ/フルブラウザ@ゲーム機に最適なページの作り方。

ホームページを閲覧するデバイスとして次のようなものを考えています。
・PC(IE,Firefox等)
・ケータイ(DoCoMo,Softbank,au)
・ケータイ搭載のフルブラウザ(Opera, Netfront)
・ゲーム機搭載のブラウザ(ニンテンドーDS、PSP)

これら、それぞれに最適なページを出し分ける手段として皆さんがとっている方法を教えてください。

今まではPC用とケータイ用(フルブラのぞく)はUserAgentで判断をし、最適なページを出し分けているのですが、そこにケータイ搭載のフルブラウザ、ゲーム機搭載のブラウザで見ることを考慮したいと思い、主にこの2つについてどういう対応をするのが良いか、検討しています。

ケータイ同様UserAgentでだしわけるか、CSSでレイアウトを変えるかのどちらかしか思いつかないのですが、これ以外に良い方法があるか、もしくは、この2つのどちらがよいのか、ご意見をお聞かせください。

Aベストアンサー

無難にUserAgentで分岐させてリダイレクトやページフォワードで
ページごと変えちゃった方が良さそうに思えます。
準備する画面数は増えますが、サーバで処理できるのがいいですね。

フルブラウザで差が小さくなりそうだとはいえ、
CSSはi-CSS, CSS2などまだまだ混乱しそうです。

ゲーム機の方は正直分かりませんが、案外PCのサイトを作るより
環境(ユーザがブラウザを選べない?)が統一されていて作りやすそうです。
しかし、PCと比べると解像度が低いテレビで(320*240くらい?)
閲覧することも考えられるのでどうかなーと言った所です。

Qtableで画像の周りにスペースが空く。(IE6です)

以下のtableなのですが、
画像の右横と下にすごく間が空くのですが、これはどうすれば直りますか?
文字数の関係でしょうか。。
Dreamweaverで組んでいる画面では大丈夫ですが、やはりIE6のプレビューで見た際に空いてしまいます。

-------------------------------------------------------------------------

<table width="720" height="357" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="350" height="300"><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
</table></td>
<td width="350" valign="top"><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字</td>
</tr>
</table></td>
<td><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
</table></td>
</tr>
</table>

以下のtableなのですが、
画像の右横と下にすごく間が空くのですが、これはどうすれば直りますか?
文字数の関係でしょうか。。
Dreamweaverで組んでいる画面では大丈夫ですが、やはりIE6のプレビューで見た際に空いてしまいます。

-------------------------------------------------------------------------

<table width="720" height="357" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="350" height="300"><table width="350" height="54" border="0" cellpadding="5" cel...続きを読む

Aベストアンサー

解決法↓。
<td colspan="2" width="336">
がミソです。
ここに横幅の指定が必要なのです。(こんなの完全におかしいですよね汗(IEが。))

<table width="720" height="357" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="350" height="300">

<table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr><td width="200"><img src="#" width="200" height="150" /></td><td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td></tr>
<tr><td colspan="2" width="336">文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td></tr>
</table>


</td>
<td width="350" valign="top"><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字</td>
</tr>
</table></td>
<td><table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="#" width="200" height="150" /></td>
<td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
<tr>
<td colspan="2">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</td>
</tr>
</table></td>
</tr>
</table>

解決法↓。
<td colspan="2" width="336">
がミソです。
ここに横幅の指定が必要なのです。(こんなの完全におかしいですよね汗(IEが。))

<table width="720" height="357" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="350" height="300">

<table width="350" height="54" border="0" cellpadding="5" cellspacing="0">
<tr><td width="200"><img src="#" width="200" height="150" /></td><td width="130" valign="top">文字文字文字文字文字文字文字文字文字文字文字文文字文字...続きを読む

QFlashのフェードイン/フェードアウト

下記のサイトのFlashの部分で和菓子の写真が横に流れる感じでフェードイン/フェードアウトしているところがあるのですが、これはどのようにして作れるのでしょうか?
私が使っているソフトはMacromediaのFlashMXです。
是非教えてください。

http://www.toraya-group.co.jp/index_f.html

Aベストアンサー

まず写真のレイヤーのがあり,
その上のレイヤーでアルファチャンネル
(#ffffff,0%→#ffffff,100%か?)
を使ったグラデーションで塗った長方形のオブジェクトを,
左から右へと動かしてるだけ。

非常に基礎的なテクニックです。

Q画像のスムーズなフェードイン方法

このスクリプトではなんか動きがぎこちないのですが、スムーズに変化させるには、どう変更すればいいのでしょうか?

<SCRIPT language="JavaScript">
var roopcount = 0;
function myfadein(i){
if ( roopcount >= 0){
fade.filters(0).Opacity = 10*roopcount;
fade.filters(0).FinishOpacity = 10*roopcount;
roopcount++;
setTimeout("myfadein(roopcount)",200);}
}
</SCRIPT>
</head>

<body bgcolor="#000000" onload="myfadein()">

<CENTER>
<IMG id=fade style="filter:Alpha(Opacity=0,FinishOpacity=0,
style=2,StartX=0,StartY=0,FinishX=420,FinishY=350)"
src="014-2.gif" border=0">
</CENTER>
</body>

宜しくお願いしますm(_ _)m

このスクリプトではなんか動きがぎこちないのですが、スムーズに変化させるには、どう変更すればいいのでしょうか?

<SCRIPT language="JavaScript">
var roopcount = 0;
function myfadein(i){
if ( roopcount >= 0){
fade.filters(0).Opacity = 10*roopcount;
fade.filters(0).FinishOpacity = 10*roopcount;
roopcount++;
setTimeout("myfadein(roopcount)",200);}
}
</SCRIPT>
</head>

<body bgcolor="#000000" onload="myfadein()">

<CENTER>
<IMG id=fade style="filter:Alpha(Opacity=...続きを読む

Aベストアンサー

fade.filters(0).Opacity = 100*roopcount;
fade.filters(0).FinishOpacity = 3*roopcount;
roopcount++;
setTimeout("myfadein(roopcount)",100);}

こんな感じにしたら
少しは滑らかに見えましたよ。


このカテゴリの人気Q&Aランキング

おすすめ情報