Create A Material Design Floating Action Button In Adobe Flash Professional CC

of 05
Create A Material Design Button In Adobe Flash Professional CC

The Flash Professional Interface is shown.
When it comes to protyping or motion on the web, you can't overlook Flash.

Between 1999 and 2011, Adobe Flash had quite the run. It became almost ubiquitous as it added the dimensions of interactivity and animation to otherwise static web sites. It was also the app that unleashed video on the web and was YouTube’s de factor standard from its beginning in 2005 until January of 2015. Then along came smartphones and the mobile web.

The year 2010 is the year when Steve Job issued his famous dictum regarding banning the Flash Player from the iOS ecosystem and Flash started to lose its way. This was actually quite understandable because even Adobe was finding it extremely difficult to keep Flash current with the mobile market.

For the next six years, the inevitable series of “Flash Is Dead” articles appeared in blogs, the Tech Press, Conferences and practically anywhere else someone could find a soapbox to stand on and announce “Flash Is Dead”. The latest outbreak was when Mozilla, reacting to a Flash Player security breach, blocked all Flash support in its Firefox browser for 5 days in July 2016. This prompted a lot of speculation around the impending death of Flash and even Facebook considered deep-sixing Flash content until it realized the vast majority of its most popular  games are Flash-based.

You would think with all of this bad news Adobe would throw in the towel. It didn’t. In fact it has quietly been moving Flash creation into the HTML5 universe meaning Flash content will play in a browser with no plug-in required. Maybe it is time to stop jumping on the band wagon and ask a fundamental question: Where does Flash fit?

One area is where Flash fits like a glove is the prototyping of Motion Graphics, especially when it comes to mobile. In this “How To” I am going to show you how Flash can quickly create a Floating Action Button (FAB) that is an integral aspect of Google’s Material Design specification that is sweeping the web and a key component of any Android app.

Let’s get started.

of 05
How To Create The Assets In Adobe Flash Professional CC

The assets are on the Flash stage and the Timeline and Library panels are visible.
If you can draw a circle, you can create a Material Design Floating Action buttto.

To get started open a new Flash HTML5 Canvas document and use the following Stage Settings in the Properties panel:

  • Stage: 400 px W, 250 px. H.
  • Color: White
  • FPS: 30

With the stage prepared we can create the button pieces. I say “pieces” because a couple of things will be put in motion. The first is a color change- called a “ripple” – that moves across the button when it is touched and the second is a +-sign icon that sits on the button. The button, itself, must have a shadow as per the Material Design Specification. This tells me all of the pieces need to be movieclips.

To start, select the Oval Tool and draw a circle on the stage. In the Properties set the width and height values to 200 and set the fill color to #1976D2 (Blue). Right click on the circle and, in the Context Menu select Convert to Symbol. Name the symbol Base and select Movieclip from the Type pop down. With the Base movieclip selected, twirl down the Filters area of the Properties, click the + sign and select Drop Shadow. Use these shadow values:

  • Blur X: 7px
  • BlurY: 7px
  • Strength: 90%

Name the Oval layer Base and add two more layers named Ripple and Icon.

Open the Library panel- Window>Library – right click on the Base movieclip and select Duplicate from the pop down. Rename this new movieclip, “Ripple”. Double click the Ripple icon in the Library to open the movieclip. Click once on the oval and set its Fill color to #7C4DFF (Purple). Drag the Ripple movie clip into the Ripple layer and place it just below and to the right of the Base movieclip.

Select the Icon Layer. Click once on the Text tool and press the + key. Set this, in the Properties to Arial Bold, 100 px and white. Convert it to a movieclip named Plus.

With the assets assembled, let’s create the ripple effect.

of 05
How To Create Material Designn Ripple Effect In Adobe Flash Professional CC

The Layers panel shows the copied layer is a mask.
Masking is an absolute breeze in Adobe Flash Professional CC.

Touch animations are very short. This one will last about 1-second which is only being used to demonstrate technique. To start, Right-Click on Frame 30 of the Base layer and select Insert Frame from the Context Menu. This will extend the layer’s duration to 30 frames.

The next step in the process is to select the Purple movieclip, open the Transform panelWindow>Transform – and set the scale value to about 30%. Move the movieclip closer to the Base movieclip.

Right click on Frame 5 of the Ripple layer and select Insert Keyframe. The black dot in the frame indicates the new key frame. Select Frame 20 and insert another keyframe. In the Transform panel, scale the ripple up until it completely covers the Base movieclip. Right click between the two keyframes and select Classic Tween from the Context menu. An arrow will appear between the frames and, if you scrub the playhead, the ripple grows. Right click on Frame 30 and select Insert Frame.

Obviously this isn’t exactly the desired effect. Let’s fix that.

Right click on the Base layer and select Duplicate Layers. Move the new layer above the Ripple Layer. This layer is about to be used as a mask. With the layer still selected, click on the duplicate object on the stage and, in the Properties panel remove the Drop Shadow by clicking ,first, on the Drop Shadow effect to select it and then clicking the – sign to remove it. Right click on the new layer and select Mask. The Ripple Layer is now indented on the timeline which shows it is being masked by the layer above it. If you scrub the timeline or press the Return/Enter key, you will see the ripple.

of 05
How To Create A Rotation Animation In Adobe Flash Professional CC

The Rotation value is shown in the Transform panel.
Classic Tweens and the Transform panel make motion dead simple to accomplish.

The final step in the process is to have the + sign rotate while the color changes inside the Floating Action Button.

The text first needs to be converted to a flattened graphic. To do this double click the Icon movieclip to open its timeline. Switch to the Text tool, select the text and select Modify>Break Apart. Click the Scene 1 breadcrumb to return to the main timeline.

Insert a frame in Frame 5 of the Icon layer and another in Frame 25 where the Ripple color change finishes. Add a frame in Frame 30 to extend the button to the duration of the timeline.

Select the key frame at Frame 25 and, in the Transform panel (Window>Transform) change the rotation value to 90 degrees. Right click between the two key frames and, in the Context Menu, select Create Classic Tween. If you press the Return/Enter key you will see the “ripple” and the rotation. At this point you might want to save the movie.

of 05
How To Publish The HTML5 Document In Adobe Flash Professional CC

The Flash Publish Options dialog box is showing.
Easily publish to HTML5 using the Publish Options dialog box.

 If you want to test the motion in a browser press Cmd>Return (Mac) or Control>Enter, PC. The browser will open and your animation will play.

To output the file as HTML 5, select File>Publish Settings. This will open the Publish Settings dialog box. The only real change you have to make is to rename the file. What you don’t do is to click the OK button. Instead, click the Publish button. You may see a couple of warnings in the Output panel but it is OK to ignore them for this project. When finished click the OK button to close the Publish Settings dialog box. Your HTML and Javascript files will be saved to the same location as the Flash file.