Adobe Edge Animate Box Shadow Effects

Adobe Edge Animate Box Shadow Effects

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

Adobe Edge Animate adds a new feature set when working with text, image and shape (Rectangle, Rounded Rectangle, Ellipse) elements.

As captured below, top, a single Rounded Rectangle element, with a 100% Color Fill and a Box Shadow set to Inset creates a neat ‘pillow’ effect.

As captured below, bottom, I created multiple (same dimension: width/height) Rounded Rectangle elements. Then isolated the effect starting with a base shape with a Solid Color Fill of 100%; followed by a variation of Box Shadow ‘Inset’ (solid fill Color set to 0%) versions. The effect resembles a gradient style you commonly see in graphics programs like Photoshop, Illustrator or Firreworks.

Adobe Edge Animate Box Shadow

Here is an elabrate take on the above mult-shape Box Shadow ‘Inset’ – a combination of shape elements with varying Inset properties to create a realistic dial button – all image free.

Preview Box Shadow Effects or click the below image capture to preview the below output animation.

Adobe Edge Animate Box Shadow Inset 

Download sample file below.

Animate Box Shadow Effects

Create details to elements with multiple box-shadow ‘inset’ effects.

Adobe Edge Animate Simple Scrollbar Symbols

Adobe Edge Animate Simple Scrollbar Symbols

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

The following sample and download demonstrates a simple (custom) use case vertical and horizontal scroll bar.

As captured below, the process uses a simple workflow: nest a text element (child) into a content div (parent) and set the parent div ‘overflow’ property to ‘hidden’. This essentially prevents text longer than the height and width of the parent from showing.

[message type=”info”]See Tip on Nesting Text Elements[/message]

Normally an overflow property of ‘auto’ is used to compensate with standard scrollbars, but in this case we don’t have that option and have to create custom scroll features with additional event triggers.

In this case it wll be a simple scrollbar – just the (Vertical Scroll) up/down buttons; (Horizontal) left/right buttons. An image or, in my case, a rectangle element, will suffice.

To make them scroll the contents of the parent container I will use the jquery (Vertical Sample) scrollTop and (Horizontal Sample) scrollLeft methods on a ‘click’ event handler.

An Example:

The Vertical scrollbar up button, has the following click event handler:

sym.$("content").animate({ scrollTop: "-=45" }, 500);

Download (bottom of page) the sample symbol files and review the click event handlers for the remaining buttons.

Preview ScrollBar Symbols or click the following screen-capture to preview.

Adobe Edge Animate Scroll Symbols

Download the zipped Symbol files (bottom of this page); unzip; then in your Edge project file go to the Library Panel and click the + icon command to the right of the Symbols then from the context list choose ‘Import Symbols…’.

At the prompt, navigate to the unzipped location and select both the .eglib files then click Open to commit the import process. As captured below, right, you should have two new symbols called myHorizontalScroll and my VerticalScroll. Drag and drop onto the Stage of your project file to use.

Adobe Edge Animate Import Symbols

ScrollBar Symbols

Two sample symbols (horizontal and vertical scrollbars) to import into an existing Edge Animate project.

Adobe Edge Animate: Concentric Rings Demo Animation

Adobe Edge Animate: Concentric Rings Demo Animation

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

This is a deviation from the Symbol Instance tutorial posted earlier.

I re-positioned the symbol instance; turned off Solid Color Fills; disabled the ‘box-shadow’ css ‘blur’ effect, and enabled Stroke Fills.

Click image below (or Concentric Rings Demo Animation) to preview.

Download sample project file below.

Concentric Rings Symbol Instance

A simple demonstration of multiple child symbol instance on the Stage.

Bokeh Blur Symbol Instance Effect

Bokeh Blur Symbol Instance Effect

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

Here is a simple example demonstration symbol creation and using multiple instances’ of that symbol on the Timeline, with a touch of Playback dynamics and CSS (‘box-shadow’) ‘blur’ effect.

Click the image below (or Symbol Instance Animation) to preview the animation.

One: New Edge Project

Create a new Project (File > New) using a Stage size of your choice. Then File > Import (or drag n’ drop from your machine to Stage) a graphic file as backfrop for the animation.

Two: Create Element

Select the Rounded Rectangle To0l and draw a small circle element (Color #c0c0c0) on the Stage (rename the element to ‘circle’, or something user-friendly, other than the default ‘RoundRect#’).

Three: Convert Element to Symbol

Select the ‘circle’ element, then Right/Option Click and from the context menu list choose Convert To Symbol. At the Create Symbol prompt give it a user-friendly name then Ok to commit.

Four: Create Symbol Animation

Double Click directly onto the ‘mycirclesym’ symbol instance to enter Edit in Place’ mode. Once in ‘Edit in Place’, with the ‘Playhead’ at 0; in the Properties Panel, click the ‘Add KeyFrame for Opacity’ and change the default value of 100% down to 0%. Then click the ‘Add  Keyframe for Scale X & Y’ and change its default scale factor of 100% down to 0%.

The Basic Animation

The below capture simply demonstrates, that from o secs to 2 secs both, Opacity and Scale start at o%; the Scale factor change will occupy the full 2 second length, while the Opacity change will fade in briefly then fadeout for the remaining duration.

  • drag the Playhead to 2 seconds, add a Keyframe for the Scale property and adjust it’s property to 100%;
  • drag the Playhead to .375 seconds, add a Keyframe for Opacity and adjust it back to 100%;
  • drag the Playhead back to 2 seconds, add another Keyframe for the Opacity property back down to 0%;

Loop Animation

At this stage if you preview in your browser all you will get is a single ‘play’ instance of the animation, so let’s add a little Action Trigger to loop back to the start, for continious playback.

Still in Symbol Edit Mode: Position the Playhead at the end (2 seconds in our case); go to the Timeline > Add Trigger menu command; at the code editor panel enter sym.play(0); then click anywhere outside the code panel to close and commit trigger addition. As captured below you should now have an ‘a’ action trigger marker located at 2 seconds.

Add Blur

Before delving into creating symbol instance, let’s apply a simple Blur effect using the css3 ‘box-shadow’ property on the ‘circle’ element.

Still in Symbol Edit Mode: Position the Playhead at 0 seconds; go back to the Timeline > Add Trigger menu command and copy/paste the following code snippet into the code editor panel. (Be sure to visit the w3schools reference link to experiement with the different box-shadow properties.)

// http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
// h-shadow | v-shadow | blur | spread | color | inset
var element = sym.$("circle");
element.css("box-shadow","0px 0px 12px #c0c0c0");

Once pasted, click outside the editor panel to close and commit changes. As captured below, you should now have an ‘a’ Action Trigger positioned at 0 seconds on the Timeline.

We can now exit Edit in Place Mode (click the Stage) breadcrumb link at the top of the Edit in Place Window.

File > Preview in Browser and you should have a simple loop of the circle fading into full-scale, with a slight blur around the edge.

Five: Create Symbol Instance

Now lets get creative with the original symbol. Drag and drop the original symbol ‘mycirclesym’ anywhere onto the Stage to create a Symbol Instance.

If you ‘File > Preview in Browser’ now, you should have two identical circles fade in and out, continuously, at the position where they are located on the Stage.

However, I want to apply some dynamics to any new instance added to the Stage. In our case I want to control ‘when’ on the Stage Timeline the instance should play; and apply a new Scale factor for each instance.

Symbol Playback Control

To control the Symbol Playback:

  • Position the Playhead at 0;
  • Select the Symbol Instance then in the Properties Panel > Playhead Actions choose Stop; A ‘Stop’ icon will be appended at the position of the Playhead.
  • Adjust the Playhead to a new position on the Timeline then go back to the Playback Options > Play; A ‘Play’ icon will be appended at the position of the Playhead.

If you ‘File > Preview in Browser’ you should have the original symbol immediately start; followed by the symbol instance at the time dictated by the Playback Control (in my case it plays at .750).

Adjust Symbol Instance Scale Factor

At the exact same Timeline location the Playback (Play) is invoked, add a Keyframe for Scale X & Y with an increase in value from the original.

If you ‘File > Preview in Browser’ you should have the original symbol immediately start; followed by the symbol instance at the time dictated by the Playback Control with a new Scale factor applied.

Six: Add Additional Instance

Repeat step 5 (Drag/Drop original instance onto Stage; add ‘stop’ Playback at 0; add ‘play’ Playback at a new position on the Timeline; adjust ‘scale’ factor) for each additional symbol instance.

As captured below, I created two additional instance of the original symbol ‘playing’ at different Timeline locations; with varying ‘scale’ factors.

Preview Symbol Instance Animation result.

Download original source project file, below.

Bokeh Effect through Symbol Instance

A demonstration of a ‘blur’ Bokeh effect and symbol instance in Edge Animate.

Adobe Edge Animate: Append() Youtube Video

Adobe Edge Animate: Append() Youtube Video

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

Here is a neat little snippet to get a YouTube HTML5 video control inside Adobe Edge Animate.

Preview YouTube HTML5 video sample.

Setup Div Container

  • First select the Rectangle Tool (M), then draw a div element.
  • Once the div is created, alter the Size: w/h properties to fit the specifications of the YouTube player. I used 450 px (w). To get a proportionally scaled size, multiply the width by 0.8235 (source information youtubeonyoursite). In this case the height will be 350 px (h).
  • Optionally set the Background Color and Border Color.
  • Name this div element vcontainer.

Set up Stage Action

  • In the Elements Panel, click the Action icon (encircled in red, below) to the left of the root ‘stage’ node.
  • At the Actions Panel click the Add Action icon (+) and from the list choose compositionReady.
  • Copy/Paste the below code snippet into the Actions Panel, close it. File > Save your Project; then File >Preview in Browser.

Note: I use the Stage > compositionReady as an example use case. The snippet can be used wherever you wish to trigger it.

Code Snippet

 var youtubevid = $("<iframe/>");
 sym.$("vcontainer").append(youtubevid);

 youtubevid.attr('type','text/html');
 youtubevid.attr('width','425');
 youtubevid.attr('height','350');
 youtubevid.attr('src','http://www.youtube.com/embed/GqcPh3OXoNo');  // url/Video_Id
 youtubevid.attr('frameborder','1');	   // 1 | 0
 youtubevid.attr('allowfullscreen','0');   // 1 | 0

Code Snippet Explained:

  • Line 1 creates a javascript object and stores it in a variable called ‘youtubevid’.
  • Line 2 does symbol lookup for an element called ‘vcontainer’, and then appends the previuosly created object to it.
  • Line  4- 9 defines the attribute parameters for the ‘youtubevid’ object.
    Match the width/height values to that of your div container.
    Replace the Video_Id (GqcPh3OXoNo) with the youtube video reference you want to show.

[message type=”custom” width=”100%” start_color=”#353535″ end_color=”#353535″ border=”#ccc” color=”#fff”]

For more information about jquery append() method.

For a complete list of YouTube video control parameters.

[/message]

Download Sample File (sample also includes standard video embed)

append() YouTube Video Control Method

Use the jquery append() method to insert YouTube Video Control Method in Edge Animate.

Adobe Edge Animate: Simple Nested Elements

Adobe Edge Animate: Simple Nested Elements

[message type=”info”]SAMPLE PREVIEW AND DOWNLOAD NOW UPDATED FOR THE LATEST VERSION OF EDGE ANIMATE[/message]

Here is a simple example of element nesting now available in Adobe Edge Animate.

Click the above image to preview example.

Element Nesting:

  1. Select the Rectangle Tool (M) and draw a div shape. I called mine ‘Parent’.
  2. With the ‘Parent’ div element active, in the Properties Panel set it’s Overflow property to ‘auto’;
  3. Double-click it’s Background Color swatch and set the Alpha value to 0%;
  4. Optional: Set desired Border Color and Style;
  5. Then add (drag and drop) additional elements directly onto the ‘Parent’ div element in the Elements Panel;
    In my example I added an additonal graphic, background div and text div.

Download Sample file below.

Scroll within Nested Elements

A demonstration to achieve scrolling among nested elements in Edge Animate.