Hype lynda.comでの稼働

• かもしれません 17, 2024

lynda.comのこのビデオトレーニングコースでは、 誇大広告で稼働、インストラクターのJake Strohは、Hypeの基本について説明しています。この1時間37分のコースを終了すると、Hypeで簡単なアニメーションを作成するための基礎が得られます。

Strohは、ツールバーからタイムラインまでのHypeユーザーインターフェイスのクイックツアーから始まります。次に、最初のアニメーションの作成方法を説明します。これは、記録機能を使用して、四角形を画面上にフェードイン効果で移動することです。開始キーフレームと終了キーフレームの位置と不透明度のプロパティ値を設定するプロセスを説明します。

その簡単な例を基に、Strohは次に、Hypeでアニメーション化できる画像の種類と、Elementsメニューを使用してそれらをインポートする方法について説明します。インポートされたサンプル画像は飛行機であり、飛行機が画面上を飛行するためのアニメーションパスを作成する方法と、それをモーションパスに変換する方法を示します。彼は、シーンにテキストを追加し、テキストをスタイリングし、フェードイン効果をキーフレーム化することにより、2番目の例を終了します。

次のセクションでは、Strohが、タイムライン、キーフレーム、および記録機能を使用して、アニメーターがhtml5およびcss3アニメーションを作成する方法について詳しく説明します。キーフレームを要素プロパティに適用するいくつかの例をカバーしています。また、タイムライン上のコントロールを使用して、アニメーションを微調整する方法についても説明します。

次のトピックは、イージングと、6種類のイージングを使用して、現実世界の物理学をアニメーションに追加する方法です。彼が議論する例は、いくつかのイージング効果を組み合わせることにより、跳ねるボールアニメーションを実現する方法です。次のいくつかの例では、Strohは変換アニメーションを作成する方法と、Capoツールを使用してタイムライン上の一連の要素のアニメーションを調整する方法を示します。また、同じシーンでアニメーションを再利用する方法と、Hypeには回転アニメーション用のアンカーポイントツールがないという制限を回避する方法についても説明します。最後に、アニメーションでのマスキング、トリミング、CSSフィルターの使用について説明します。

次のセクションでは、インタラクティブ機能について説明します。 Strohは、組み込みボタンのタイプと、ステージにアクションを追加する方法についての議論から始まります。次に、画像にアクションを追加して画面上のボタンとして機能させる方法について説明します。彼はすぐに、複数のタイムラインを使用したアニメーションの制御と、メインタイムラインにボタンを追加して追加のタイムラインを制御する方法に進みます。また、ループタイムラインを作成する方法を示します。

より複雑なアニメーションを作成するために、Strohは相対タイムラインとアクションチェーンの操作方法について説明します。次のいくつかの例では、オーディオファイルを操作し、ボタンアクションで再生を制御する方法を示します。また、複数のタイムラインとメインのタイムラインを使用して、インタラクティブな画像ギャラリーのスライドショーを制御することの違いも示しています。

次に、プロジェクトの例は製品ギャラリーです。 Strohは、これをHypeで構築するための2つのオプション、複数のタイムラインまたはシーンの長所と短所について説明します。

これで、プロジェクトをWeb上に置く準備ができました。 Strohは、Hypeプロジェクトと、スタンドアロンWebサイトのさまざまなオプションをエクスポートおよび埋め込む方法、またはプロジェクトを既存のWebサイトに追加する方法を示します。

これは、Hypeの詳細な学習コースではありません。ただし、このコースでは、Hypeソフトウェアを使用して作成できるアニメーションの種類について説明します。 Adobeのムービークリップに精通している場合^R 閃光^R、ネストのタイムライン、相対的なタイムライン、アクションチェーンに関するStrohの議論に感謝します。

//www.lynda.com/Hype-tutorials/Up-Running-Hype/135360-2.html

開示：私はこの記事に対して金銭的な報酬を受け取っていません。私の経験に基づいて、意見は完全に私自身のものです。

動画の説明: 無理矢理 Hype HTML5 でスクロール (かもしれません 2024).