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.
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
“full moon night” by magann
…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.
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.
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.
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.
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!
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.
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.
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.
For more detail on how to use Shape Tweens in Animate CC, have a look at the following resource:
And if you need more information on how masking works… here you go:
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.
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.
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.
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.