Adobe Creative Cloud

July 27, 2016 /Adobe Stock /

Night and Day: Easily Create a Landscape Alteration in Animate CC

Ever since Flash Professional became Animate CC back in February of this year, we’ve had access to the CC Libraries panel. Included within this panel is a direct connection to search against the library of assets included in Adobe Stock. Why would anyone want to search for Stock assets within Animate? For one thing, it’s a great way to throw some ideas together without a lot of commitment. You can use an unlicensed, watermarked version of the assets within your project as a proof-on-concept or to simply try out some new ideas. Later on, when decisions have been made, you can license the asset to use the full-resolution, un-watermarked version in your project, or even replace the unlicensed version with a final asset created by you or your team.

Figure_01

Figure 1: The completed animation

We are going to demonstrate how to go about using Adobe Stock within Animate CC – and build out the animation seen above with those assets.

Project File Downloads

You are encouraged to explore Adobe Stock on your own and find some assets which appeal to your own sense of creativity. However, if you want to use the same exact Adobe Stock assets used below within your own projects, they can be found at the following locations:

“hill at sunset” by Dmitriy Sladkov

https://stock.adobe.com/search?k=84819895

“full moon night” by magann

https://stock.adobe.com/search?k=61979038

…and here is the completed FLA from Joseph.

Access Adobe Stock Assets

When working in an Animate project, it’s easy to search for and add assets from Adobe Stock. We do so through the CC Libraries panel. If you do not see the CC Libraries panel open within your Animate project, you can reveal it through the Window > CC Libraries command in the application menu.

Figure_02

Figure 2: The CC Libraries panel within Animate

Once open, you will see all of your personal and shared libraries, as well as the assets within the selected library. Any Adobe Stock assets you may have previously added to a library will become immediately available when that library is selected from the dropdown.

Figure_03

Figure 3: Searching Adobe Stock

If you would like to search for a new asset from Adobe Stock, we can do so by using the Search Adobe Stock input directly below the library dropdown. Once search terms have been entered, the results of that search will appear directly below in a visual grid.

Figure_04

Figure 4: Stock asset options

To add an asset from the search results to the currently chosen library, we have two options. Both options are accessed by hovering the cursor over any of the individual assets. The choices are as follows:

License and Save to… This option will license the asset and save the high resolution version to the selected CC Library.

Save Preview to… This option will download a low resolution preview of the asset and save this preview version to the selected CC Library. If you decide to purchase the asset, you can do so from within the CC Libraries panel and receive the full resolution version.

In the next section, we will have a detailed look at building an animated project using assets from Adobe Stock.

Using Adobe Stock Assets

As seen above, we’ll be building a short piece of animated content using assets from Adobe Stock.

Project Setup

I’ve created a new ActionScript 3.0 document at 747 x 420. The FPS is the default 24 – though any of this can vary depending upon your own project. Why ActionScript 3.0? We’re producing a raw video and an animated gif image from this project, so the chosen document type doesn’t matter all that much since there is no interactivity. However, when working within an ActionScript 3.0 document, when you test your movie, Animate is able to do using the built-in Flash Player, keeping the entire experience of designing your content within one focused application. Additionally, you have access to tools like 3D Rotation and Transform – and the widest variety of filters and blend modes –  always a fun option to have!

Timeline Setup

Find the two assets you’d like to use from Adobe Stock (as detailed above) and bring the preview versions of those assets down into your CC Library. They’ll now be available for use within your project.

I’ve gathered a detailed landscape photo and have placed this on the very bottom layer. I have also found a nice nighttime sky with a great moon to use as a blending layer. The sky photo has been placed in a layer directly above the previous.

Figure_05

Figure 5: The Adobe Stock assets are assembled in the Timeline

Blending MovieClip

I want to use a blend mode upon the sky photo to create an ethereal effect upon the landscape. To do so, I must first create a MovieClip symbol around that photo – as MovieClip symbol instances can accept blend modes and photographic bitmap images cannot.

To create a MovieClip symbol, we select the shy photo and choose Modify > Convert to Symbol from the application menu. A small dialog will appear allowing us to name the symbol (I named mine “NightSky”) and choose a symbol type. Choose MovieClip!

Once the symbol is created, an instance of that MovieClip symbol will exist upon the stage where the photo one was. Select this instance and have a look at the Properties panel. We can see that the selected object is a MovieClip instance of “NightSky”. Perfect. All that needs to be done now is the selection of a blend mode.

Under the Display section of the Properties panel for your MovieClip symbol instance, you’ll find a Blending dropdown. Go ahead and play around until you find one with the desired effect expressed upon the stage. I chose Overlay.

Figure_06

Figure 6: MovieClip instance properties – Blending choice

Animated Masking

What we want to do now is create a mask layer and a shape within that layer that is animated across the stage – performing a dynamic transition between the two photographic images. The first thing we do is create a new layer above the previous two, right-click and choose Mask from the contextual menu. This will transform the top layer into a special mask layer, and will automatically nest the layer below it within the mask as indicated by the visual indentation of the layer and the change in layer icon.

Now to create the animated content. You can use any sort of shape or motion you like – I created a large rectangular shape to cover the stage and then employed the Free Transform tool to skew the shape a bit, creating a neat angle.  At this point, it’s just a matter of creating an additional further along the timeline, shifting the content of the previous keyframe so that it begins off-stage, and then applying a Shape Tween to the content. To apply a shape tween between two keyframes, select any of the frames within that span, right-click, and choose Shape Tween for the menu. If all is well the mask will now be animated.

Figure_07

Figure 7: The project with masking applied

For more detail on how to use Shape Tweens in Animate CC, have a look at the following resource:
https://helpx.adobe.com/animate/using/shape-tweening.html

And if you need more information on how masking works… here you go:
https://helpx.adobe.com/animate/using/using-mask-layers.html

Reverse Duplication

Not only do we want the mask to animate across the stage in one direction – we also want to have it leave the stage as well – creating a seamless looping animation. Animate CC makes this task very simple. All we need to do is select the entire tween with the cursor, including the keyframes on each end. With all of these frames selected, right-click and choose Copy Frames. Now, move about 10 frames past the final keyframe (frame 60 in the demo) and select the frame. Right-click again and this time choose Paste Frames. The entire tween will be pasted across the timeline.

At this point, the second tween is just a repetition of the previous one. To reverse the tween, select all frames once again (in the second tween this time) including both keyframes. Now right-click to summon the contextual menu once again and this time choose Reverse Frames. Pesto! We hardly had to lift a finger and now the animation is reversed, completing our loop.

Video Export

There are a couple of options to exporting the content we have created. You can, of course, choose to simply publish for Flash Player – but we want to export as a video and animated GIF. Let’s look at how to export a video file first.

This is actually super-simple. Just choose File > Export > Export Video from the application menu. An Export Video dialog will appear, allowing you to save off your completed animation as raw video data. This exported file can then be taken into Adobe Media Encoder and be transcoded to any number of video file formats.

Figure_08

Figure 8: Exporting the animation as a video file

Animated GIF Export

An often-overlooked feature of Animate is the ability to produce animated GIF files. To export the animation as an animated GIF, we’ll need to use the Publish Settings dialog. Publish Settings can be accessed through the Properties panel with the document itself selected (no objects on the stage or pasteboard selected) or directly from the application menu using File > Publish Settings.

As you can see in the figure below, we have numerous file publish option through use of this dialog. One of these options – the one we are immediately interested in – is GIF Image. If we select this option, we’ll see all of the properties we can tweak when exporting a GIF. The important one here is that we want to choose Animated from the Playback dropdown, and then select Loop continuously.

Once we hit the Publish button, an animated GIF will be generated alongside our FLA, assuming we haven’t specified an alternative file location.

Figure_09

Figure 9: Animated GIF Export

Conclusion

The use of Adobe Stock assets within Animate CC is a great way to try out a wide array of easily approachable stock assets. From this point, you can build out your content around the asset previews, and when you feel confident enough that the asset will work… go ahead and license it from directly within Animate itself.

Adobe Stock

Join the discussion

  • By Gene Fowler - 1:42 PM on July 27, 2016  

    That is a mask. That’s a technique from the 90’s.

    I wish Flash would really take a step and improve it’s software. As a studio owner, I really am frustrated that I’ve been paying Adobe hundreds of dollars everymonth to cover workstations. When flash from an animator’s POV has not even once really improved.

    ugh.