Adobe Animate CC Masterclass: HTML5 Banner Ads and Animation

Explore Adobe Animate's essentials interface and use the selection tool to select, transform, and customize shapes by adjusting fill, stroke, and color across different workspaces.

Explore the sub selection tool inside the selection tool in Adobe Animate CC to edit anchor points, strokes, and handles for precise object reshaping.

Learn to use the free transform tool to rotate, resize, skew, and transform objects, using shift to preserve proportions, alt to resize from a corner, and perspective for depth.

Apply and edit gradients with the gradient transform tool, fill with the selection tool, edit gradient content, and explore radial and linear gradients from black to white, 16 million colors.

Master 3D rotation and 3D translation tools in Animate CC, including creating a symbol and rotating on the x, y, and z axes while moving objects in 3D space.

Master the lasso, polygon, and magic wand tools to draw objects, select parts inside shapes, and apply color changes, then use the 3d transform tool for size and position adjustments.

Master the pen tool and anchor point editing in Adobe Animate CC to add, delete, and convert anchors, adjust handles with the sub-selection tool, shaping corners or smooth curves.

Explore the text tool in Adobe Animate CC, creating static and dynamic text, adjusting font, color, kerning, alignment, line spacing, and paragraph margins, with scripting notes and instance naming.

Discover how the line tool in Adobe Animate CC creates and edits lines, adjusts stroke color and thickness, and applies dash, hatched, or brush styles with cap and join settings.

Explore rectangle and rectangle primitive tools in Adobe Animate, drawing rectangles or squares (centered with option key, shift for square) with rounded edges and strokes, and understand their differences.

Learn to use the old primitive tool in Adobe Animate to draw ellipses and circles from center, modify shapes with non-anchor points, and convert rectangles to regular objects.

Explore the PolyStar tool in Adobe Animate CC to draw polygons and stars, customize triangle and pentagon shapes, and adjust point size and inner radii for banner ads.

Use the pencil tool in Adobe Animate CC to draw strokes on vector objects, shaping with anchors and handles, while applying smoothing and creating straight lines or circles.

Explore how the paint brush tool creates brush strokes, adjusts anchor points, and handles draw as fill versus stroke modes in Adobe Animate CC.

Use the brush tool to draw with a five-pixel brush and adjust smoothing. Learn about zoom behavior, pen tablet pressure, paint inside versus behind strokes, and brush shapes.

Master the bone tool and bind tool to rig a simple character in Adobe Animate CC, drawing a base figure and binding bones to create movable controls.

Explore the paint bucket tool to fill closed shapes with a chosen color, including fill all regions, and use the ink bottle tool to create strokes along object boundaries.

Explore how to use the eyedropper tool to pick colors from objects, images, or the stage, add them to the palette, and apply stroke colors and stroke styles to objects.

Learn to use the eraser tool in Adobe Animate CC to erase objects, fields, and strokes, with options to erase fields or strokes inside or outside shapes.

Use the width tool to change stroke width, drag to create blobby strokes, and adjust handles to inflate or deflate the stroke for leaf-like shapes.

Explore the asset warp tool to create a mesh with joints, animate with keyframes and classic tween across frames, and use asset swap to shape objects.

Explore the camera tool in Adobe Animate CC to zoom and rotate the camera, adjust the default pose and lens, and manipulate scenes, frames, and colors.

Use the hand tool to pan the stage, the rotation tool to rotate it, and the time scrub tool to move in the timeline in Adobe Animate CC.

Explore the zoom tool, the magnifying glass, and how to click and zoom in and out to adjust the view.

Master practical shortcuts for Adobe Animate CC, from zooming with Ctrl plus and space bar panning to quick selection, color picking, gradient creation, and efficient timeline keyframe workflow.

Learn how to use symbols in adobe animate cc to create reusable graphic objects, including graphic, movie clip, and button symbols, and manage instances and editing inside symbol definitions.

Learn about graphic symbols in Adobe Animate, create and name symbols, set registration points and midpoints, manage them in the library, and practice frame and key frame animation with looping.

Learn how movie clip symbols differ from graphic symbols, including real-time playback, naming, and library management; drag, edit, and animate instances, then export the final HTML5/JavaScript render.

Explore button symbols in Adobe Animate CC, distinct from movie clip and graphic symbols, and learn to define up, over, down states and a hit area for HTML5 canvas.

Discover how frame-by-frame images and frames-per-second create motion, and how adjusting fps changes animation duration and smoothness through keyframes and tweens.

Explore frame-by-frame animation in Adobe Animate CC, drawing with the pencil tool, inserting key frames, and building looping sequences for HTML5 banner ads.

Draw the key frames first, then create in-between frames to shape tween animation in Adobe Animate, inserting key frames every 10 seconds and looping the range to explore tween types.

Create a motion tween in Adobe Animate by transforming a symbol, inserting frames, and using motion paths with handles and anchor points to shape complex timing.

Explore shape tween in Adobe Animate CC by creating and deforming shapes with key frames, switching from one shape to another, and smoothing motion.

Learn to create classic tweens in Adobe Animate by converting symbols, setting keyframes, and generating automatic in-between frames, with symbols required for classic tween and the tween appearing purple.

Learn Google's ads terms and policies for creating five HTML5 banner ads, including under 30-second animations, zip packaging under 150 KB, and proper HTML structure.

Plan a four-scene animation for a Blue Diamond construction company banner, detailing scene-by-scene logo animations, image and slogan placement, and asset optimization (Photoshop resizing, Illustrator logo, under 150 kilobytes).

Set up the project by creating ads and assets folders, define banner sizes (350x250, 300x250, 300x158), and configure publish settings for javascript and H2 in Adobe Animate, export jpeg assets.

Divide the scene 1 banner animation into scenes with movie clip symbols, import and convert the logo, and build a 300x250 background with layered logo elements and tweening with easing.

Create a 300x250 banner ad in Adobe Animate CC by building scene 2 with movie clips, images, and text, then apply a classic tween with ease out.

Create and refine a 300x250 banner ad in Adobe Animate CC, using scene three to copy and paste frames, swap library symbols and images, and export to preview.

Create and finish a 300x250 banner ad animation in Adobe Animate CC by arranging layers, symbols, and masks, synchronizing logo, text, and image with keyframes, easing, and stop actions.

Create a 250 by 250 canvas, center and resize the logo to fit the stage while preserving aspect ratio, then adjust the background and dummy elements and preview the animation.

Set up a 300x600 banner ad in Adobe Animate CC Masterclass; adjust stage, center text, and position logo on a transparent black background. Create a tween with ease and export.

Create additional advertisements in 336x280 and 200x200 sizes by using the same aspect ratio from larger files, then export and save with proper naming to complete the banner setup.

Arrange html5 banner ad files by organizing assets, setting proper doctype and tags, and zipping images and html files for hosting on Google, while optimizing image size and quality.