Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Skinning the V2 ProgressBar Component, Part 1

Flash Guru Colin Moock Shares His Expertise on Skinning and Customizing V2 components

This article explains how to completely change the graphical appearance of (i.e., "to skin") the V2 ProgressBar component. Before we begin, a warning: the techniques described in this article apply to the ProgressBar and to many other V2 components, but not to all. Some compo-nents require advanced skinning techniques not discussed in this article. For example, the Button component's skin, perhaps surprisingly, is primarily code-based. Skinning a Button component requires a thorough understanding of the Button skin code. Likewise, the specific steps required to skin components made up of multiple subcomponents, such as the DataGrid or the List, are not covered in this article. This article will help you get started with skinning and will give you the skills to skin many V2 components, but for some components you should expect to do further research (see Further Study at the end of this article for suggested resources).

The Basics: Styles Versus Skins
A component's appearance can be changed in two ways: 1) by setting the component's styles, 2) by skinning the component. Setting a component's styles means using code to change the component's color and font without changing its graphics. For example, the default appearance of a ProgressBar component is shown at Figure 1.

And Figure 2 shows what the ProgressBar component looks like with the "themeColor", "fontFamily" and "fontSize" styles set.

Here's the code used to style the ProgressBar shown in Figure 2:

pBar.setStyle("themeColor", 0xFF0000);
pBar.setStyle("fontFamily", "Times New Roman");
pBar.setStyle("fontSize", 16);

In Figure 2, the ProgressBar's color is now red instead of green and its text is set in Times New Roman instead of Verdana, but the basic graphical shapes of the ProgressBar are the same as they were in Figure 1. By setting a component's styles, we can gain some control over the appearance of the component, but when we need to change more than just colors and fonts we must skin the component. Skinning a component means replacing the component's graphics entirely, producing a completely new appearance for the component. For example, if we were creating an adventure game we might want to skin our game's ProgressBar to make it look like Figure 3.

Later we'll examine how the above "adventure game" ProgressBar was made. But before we do, it's worth pointing out that not everything about the appearance of a component can be changed, even with skins. The internal display system of each component determines what aspects of the component's appearance can be changed. For example, the variable-width "load bar" section of the ProgressBar component shown in Figures 1, 2, and 3 is produced by stretching a thin graphic between the left and right side of the component. Because the graphic is stretched, it must be a simple, abstract shape not, say, a repeating image such as the apple shown in Figure 4.

Filling a region with a repeated graphic like the apple in Figure 4 is known as "tiling." Tiled skins are not natively supported by the V2 ProgressBar. Hence, modifying a ProgressBar to look like the one shown in Figure 4 would require custom code and in-depth knowledge of the ProgressBar's own skinning implementation.

What, Exactly, Is a "Skin"?
In interface-programming terms, the "skin" of a user interface is its graphical appearance, which is typically separated from code so that the interface can be changed visually without affecting the underlying logic.

Specifically, for a Flash V2 component, a "skin" is a collection of movie clips that contain the component's graphics. Each movie clip represents either an entire state of the component (e.g., enabled, disabled, pressed, etc) or a subsection of a particular state or states. For example, a skin movie clip might contain an entire disabled button face or just the arrow icon for a scrollbar. The skin is broken into multiple sections so that it can be assembled and resized at runtime in response to either user input or application logic. Each movie clip in a skin has a specific Linkage Identifier that is used by the component to attach the movie clip to the Flash movie stage. Once on stage, the movie clips are positioned and scaled to produce the graphical appearance of the component.

Figure 5 shows the skin movie clips for the ProgressBar component. The Linkage Identifier for each movie clip is shown in black text.

Among the various skin movie clips shown in Figure 5, those whose IDs begin with "ProgTrack" are the background of the ProgressBar while those whose IDs begin with "ProgBar" are the foreground of the ProgressBar ­ the part that stretches horizontally to indicate load progress. Both the "track" (background) and the "bar" (foreground) are made up of three separate sections: a left and right edge ­ the "caps" at the ends of the bar ­ and a middle section that stretches between the caps. When the ProgressBar is resized, the caps remain the same size and are placed at either end of the bar, while the middle section is scaled horizontally to fill the space between the caps. Finally, the ProgIndBar is a special graphic that animates between the left and right caps if the duration of the load operation being represented is unknown. The ProgIndBar movie clip is only used when the ProgressBar instance's indeterminate property is set to true.

Changing the Skin of a Single Instance
As we've just seen, a component's skin is made up of graphics stored in movie clips (well...that's generally true, but some component skins are made of movie clips that link to ActionScript 2.0 classes instead of containing graphics). To change a skin, then, we need to tell the component to render itself using our own, customized movie clips instead of its default set. There are two ways to tell the component to use our movie clips instead of its own:

  • change which Linkage Identifiers the component uses when attaching its skin movie clips
  • set the Linkage Identifiers for our custom movie clips to match the Linkage Identifiers used by the component (in other words, override the component's default skin movie clips)

The first option requires more work, but lets us skin a component on a per-instance basis. The second option is easier to implement, but forces every instance of the component being skinned to use the custom skin. Let's take a look at both options, starting with changing the Linkage Identifiers a component uses when attaching its skin movie clips. The V2 components store the Linkage Identifiers for their skin movie clips in so-called "skin properties". For example, the Linkage Identifiers for the ProgressBar component (as shown in Figure 5) are stored in the following properties: ProgressBar.progTrackLeftName, ProgressBar.progTrackMiddleName, ProgressBar.progTrackRightName, ProgressBar.progBarLeftName, ProgressBar.progBarMiddleName, ProgressBar.progBarRightName, ProgressBar.progBarIndName. We can change which movie clips a component instance uses for its skins by setting its skin properties. Let's see how this works by making a progress bar with a black square for its track's left cap instead of the default rounded grey left cap. Admittedly, this is a boring skin but it demonstrates the general principle. We'll make a more interesting skin later. Follow these steps:

  1. Create a new Flash document (.fla file).
  2. On Frame 1, Layer 1 drag a ProgressBar component to the stage.
  3. Create a new movie clip symbol named Square.
  4. In the Square movie clip, draw a small square shape 4 pixels wide and 4 pixels high. Position the shape with its top left corner at the Square symbol's registration point as shown (greatly magnified) in Figure 6.
  5. Select the Square movie clip symbol in the Library
  6. On the Library panel's pop-up options menu (top-right), select Linkage...
  7. On the Linkage Properties dialog, for Identifier, enter "SquareSymbol".
  8. Click OK to accept the Linkage Properties settings.
  9. With the ProgressBar component instance selected on stage, add the following code to the Actions panel:
    onClipEvent (initialize) {
    this.progTrackLeftName = "SquareSymbol"; }
  10. Export the movie using Control > Test Movie. The ProgressBar component should look like the one in Figure 7 (again greatly magnified to show the new skin). Note the black square on the left side of the bar.

The preceding steps describe how to modify the skin of a component instance placed on stage manually in the Flash MX 2004 authoring tool. We changed the skin of the component by setting the progTrackLeftName property within the component's "initialize" event. But if we had created the instance with code at runtime, we would not be able to use onClipEvent() as we did in Step 9. Instead, we would use the createClassObject() method's initObj parameter to set the skin property on the new component instance. The following code does just that; it creates a ProgressBar instance at runtime with createClassObject() and uses the initObj parameter to set the progTrackLeftName property to "SquareSymbol". The result is exactly the same as that shown in Figure 7.

import mx.controls.ProgressBar;
this.createClassObject(ProgressBar, "pBar", 0,

Where to Find a Component's Skin Properties
As we've just seen, in order to skin a component we can assign new movie clip Linkage Identifiers to its skin properties. But how do determine which skin properties a component uses? There are two options.

First, we can look in the Flash MX 2004 Help files. The so-called "ellipsis" release of the Flash authoring tool (Version 7.2) contains updated Help files that include the skin properties for all V2 components. For each component, the skin properties are listed in the following location:

  • Using Components > Components Dictionary > [component name] component > Customizing the [component name] component > Using skins with the [component name] component

    For example, the skin properties for the ProgressBar component are listed here:

  • Using Components > Components Dictionary > ProgressBar component > Customizing the ProgressBar component > Using skins with the ProgressBar component

    Alternatively, we can find the skin properties for a component by looking at the component's class source code. The component classes are located in the Flash MX 2004 application folder, in the following directory:

  • Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\First Run\Classes\mx\controls
  • Macintosh: HD/Applications/Macromedia Flash MX 2004/FirstRun/Classes/mx/controls

    For example on an English language Windows system, the ProgressBar component's class is located here:

  • \Program Files\Macromedia\Flash MX 2004\en\FirstRun\Classes\mx\controls\ProgressBar.as

Within that file we can find the following skin property definitions:

var progTrackLeftName:String = "ProgTrackLeft";
var progTrackMiddleName:String = "ProgTrackMiddle";
var progTrackRightName:String = "ProgTrackRight";
var progBarLeftName:String = "ProgBarLeft";
var progBarMiddleName:String = "ProgBarMiddle";
var progBarRightName:String = "ProgBarRight";
var progIndBarName:String = "ProgIndBar";

However, locating the skin properties in the source code for a component's class can be difficult because the code is often not thoroughly commented and the skin property names do not follow a single naming convention. Some skin property names end with the word "Skin", as in "Button.trueUpSkin"; some skin property names end with the word "Icon", as in "RadioButton.falseOverIcon", while still others follow no convention at all, as in "NumericStepper.upArrowDisabled". Hence, the easiest way to determine the skin properties for a class is through the Flash MX 2004 Version 7.2 updated documentation.

No matter how you find a component's skin properties, once you know them you can skin the component by setting those properties to the Linkage Identifiers of your own custom skin movie clips.

Creating Skins That Can Be Colored with Styles
In our earlier SquareSymbol example, we replaced a ProgressBar instance's left track cap with a black square. In the example, we permanently set the color of the square to black ­ any attempt to change the color of the left track cap to red using styles would now fail. However, with a single line of code, we can make a skin's color alterable with styles. Using the same document we created earlier, follow these steps to see how it works:

  1. Select the ProgressBar instance on stage.
  2. In the Properties panel, set the ProgressBar's instance name to "pBar".
  3. Edit the Square movie clip symbol.
  4. Select the shape inside the Square movie clip.
  5. From the Modify menu, choose Convert to Symbol.
  6. For the symbol Name, enter "SquareShape". For Behavior, choose "Movie clip".
  7. Edit the SquareShape movie clip symbol.
  8. Rename Layer 1 to "graphic".
  9. Add a new Layer to the SquareShape movie clip and name it "actions".
  10. Select Frame 1 of the actions layer.
  11. In the Actions panel, enter the following code:
    mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");

    That code registers the skin movie clip as a styleable skin element. As a result, it will change color when the "themeColor" style is set.

  12. Return to the main document timeline.
  13. Select Frame 1.
  14. In the Actions panel, enter the following code to set the ProgressBar theme color to red:
    pBar.setStyle("themeColor", 0xFF0000);
  15. Export the movie using Control > Test Movie. The ProgressBar component should look like the one in Figure 8 (again magnified to show the new skin). Notice that the left track cap is now red because it is registered to change color when the "themeColor" style is set.

A detailed look at styleable custom skins is outside the scope of this article, but Figure 8 should give you a sense of what's possible. For more information on associating skins with color styles, see the following document in the Flash MX 2004 Version 7.2 updated Help: Using components > Customizing components > About skinning components > Linking skin color to styles.

Changing the Skin of All Instances in a Document
So far our SquareSymbol example has shown how to change the left track cap of a single ProgressBar instance only. To change the left track cap of all ProgressBar instances in a document we have several options. We can:

  • set the progTrackLeftName property on the ProgressBar class's prototype
  • use the default Linkage Identifier for our custom left track cap movie clip
  • set the progTrackLeftName property in a ProgressBar subclass

We'll examine the first two techniques in this article; for information on subclassing component classes see the resources under Further Study.

Here's an example of the first technique, setting the progTrackLeftName property on the ProgressBar class's prototype:

import mx.controls.ProgressBar;
ProgressBar.prototype.progTrackLeftName = "SquareSymbol";

That code tells the ProgressBar class to use the SquareSymbol movie clip when creating any ProgressBar component's left track cap. If the above code appears on frame 1, then all ProgressBar instances placed on frame 2 or later will be affected. That said, it is still possible to customize the left track cap for any single instance. To customize a single instance, we follow the exact steps we studied earlier in the SquareSymbol example--using onClipEvent(initialize) (for author-time instances) or createClassObject()'s initObj parameter (for runtime instances) to set the instance's progTrackLeftName property to the desired movie clip. For example, to apply a triangular cap to a single ProgressBar instance we would use the following code (assuming we had also created a triangle movie clip and given it a Linkage Identifier of "TriangleSymbol"):

onClipEvent (initialize) {
  this.progTrackLeftName = "TriangleSymbol"; }

Now let's consider the second technique for changing the left track cap of all ProgressBar instances in a document ­ using the default Linkage Identifier for our custom left track cap movie clip. We'll start by determining the default Linkage Identifier for the skin movie clip we want to customize, and then we'll assign that Linkage Identifier to our own custom skin movie clip, overriding the component's default skin. Let's return to the document we created earlier and follow these steps to see how it works:

  1. On the main timeline, select the on-stage ProgressBar instance.
  2. Delete all code from the Actions panel.
  3. Open the following document in the Flash MX 2004 Version 7.2 updated Help:
  • Using Components > Components Dictionary > ProgressBar component > Customizing the ProgressBar component > Using skins with the ProgressBar component
    1. In the skin-property table, under the Description column for the progTrackLeftName property, find the property's "default value". The "default value" is the default Linkage Identifier for the left track cap skin movie clip. In our case, it's "ProgTrackLeft".
    2. Change the Linkage Identifier for the Square movie clip symbol to "ProgTrackLeft". Note that case sensitivity matters! Make sure to use a capital P, T, and L when setting the Linkage Identifier.
    3. Export the movie using Control > Test Movie. The ProgressBar component should once again look like the one in Figure 7.
    Because we set the Square symbol's Linkage Identifier to match the ProgressBar's default Linkage Identifier for the left track cap skin, the ProgressBar uses our Square instead of its own skin. If a document's Library contains a movie clip exported with the same Linkage Identifier as a component's internal skin movie clip, then the document's movie clip overrides (i.e., is used instead of) the component's internal movie clip.

    Overriding a component's skin movie clip is an attractive way to skin components, especially for designers, because it involves no code whatsoever. However, for a complicated component, creating skin movie clips and assigning Linkage Identifiers can be time consuming. Fortunately, we can use so-called "themes" to reduce the labour required to override the skin of every component instance in a document.

    A "theme" is a collection of skin movie clips and code used to change the appearance of the entire set of V2 components. Each theme is contained within its own .fla file. Macromedia provides two themes with Flash MX 2004, each of which offers its own graphical look for the V2 components. The default theme used by the V2 comp onents is the Halo theme, which resides in a file named HaloTheme.fla in the following location:

    • Windows: \Program Files\Macromedia\Flash MX2004\[LANGUAGE_CODE]\Configuration\ComponentFLA\HaloTheme.fla
    • Macintosh: HD/Applications/Macromedia Flash MX2004/Configuration/ComponentFLA/HaloTheme.fla
    The other theme supplied by Macromedia is known unceremoniously as "Sample Theme." It resides in a file named SampleTheme.fla in the following location:
    • Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\Configuration\ComponentFLA\SampleTheme.fla
    • Macintosh: HD/Applications/Macromedia Flash MX 2004/Configuration/ComponentFLA/SampleTheme.fla
    Creating custom themes and using the supplied themes is not our focus here; we're interested in themes only because they supply us with the skin movie clips we need to override a component's skin, complete with the correct default Linkage Identifiers!

    Here's how it works. Each theme has an entire set of skin movie clips for every available V2 component. To skin a component in a new document, we simply copy the component's skin movie clips from one of the supplied themes into the new document, then alter the graphics as desired. PRESTO! Our new skin will automatically be applied to all component instances in the new document.

    Let's use this "copy-from-theme" approach to build the adventure-game ProgressBar example shown earlier in Figure 3. But as we build the example, remind yourself that this technique works only with components that use graphics-based skins. As we learned earlier, components that are nested or use code-based skins require advanced techniques that are not covered here, but can be found in the Flash MX 2004 Version 7.2 help.

    The Adventure-Game ProgressBar Example
    Earlier we skinned the left track cap of a ProgressBar but we didn't actually use the ProgressBar to show any load progress. This time we'll link our adventure-game-style ProgressBar to a Loader component so that we can see it in action.

    Before we start, here's a warning to heed when using ProgressBar with Loader: when a ProgressBar's mode property is set to "event" (the default) it won't broadcast complete() or progress() events. If you want to register for events from a ProgressBar make sure its mode is set to "polled" or "manual". If you are using the ProgressBar in "event" mode then you should register for events with the ProgressBar's source rather than with the ProgressBar itself.

    Bearing that warning in mind, follow these steps to create a ProgressBar linked to a Loader component:

    1. Create a new Flash document (.fla file) named skinnedV2ProgressBar.fla.
    2. Rename Layer 1 to "assets".
    3. Create a new layer and name it "scripts".
    4. On Frame 1 of the assets layer drag a ProgressBar component to the stage.
    5. In the Properties panel, set the ProgressBar component's instance name to "pBar".
    6. On Frame 1 of the assets layer drag a Loader component to the stage.
    7. In the Properties panel, set the Loader component's instance name to "loader". Your document should now look like the one shown in Figure 9.
    8. Finally, select Frame 1 of the scripts layer and add the following code to the Actions panel:
    // Make the load bar red.
    pBar.setStyle("themeColor", 0xFF0000);
    // Tell the ProgressBar to show progress for the Loader.
    // (The source property specifies the object for which
    // load progress will be displayed.) pBar.source = loader;
    // Load an image into the Loader.
    loader.contentPath = "http://marsrovers.jpl.nasa.gov/gallery/press/spirit/"
    + "20050113a/site_A89_CY_navcam_360_cyl-A365R1.jpg";

    Our ProgressBar is now fully functional. Let's get skinning.

    First, we need to copy the ProgressBar skin assets from the HaloTheme.fla file to our document's Library. Follow these steps:

    1. Select File > Import > Open External Libary.
    2. Open HaloTheme.fla, which is in the following location:
  • Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\Configuration\ComponentFLA\HaloTheme.fla
  • Macintosh: HD/Applications/Macromedia Flash MX 2004/Configuration/ComponentFLA/HaloTheme.fla
    1. With both the skinnedV2ProgressBar.fla Library and the HaloTheme.fla Library open, drag the following folder from HaloTheme.fla to skinnedV2ProgressBar.fla's Library: Flash UI Components 2 > Themes > MMDefault > ProgressBar Assets
    Your skinnedV2ProgressBar.fla Library should now look like the one shown in

    In the Elements folder (shown in Figure 10), you should recognize the following symbols as the ProgressBar skin movie clips (shown earlier in Figure 5): ProgBarLeft, ProgBarMiddle, ProgBarRight, ProgIndBar, ProgTrackLeft, ProgTrackMiddle, and ProgTrackRight. Those symbols are the movie clips that you would normally redesign when skinning the ProgressBar.

    In addition to the skin movie clips from Figure 5, the Elements folder also contains a series of symbols whose names end with "ThemeColor": ProgBarCapThemeColor, ProgBarIndMiddleThemeColor, ProgBarIndThemeColor, and ProgBarMiddleThemeColor. Those movie clips contain the raw shapes for the caps and middles of the ProgressBar's track (background), load bar (foreground), and indeterminate bar (animated bar that indicates an unknown load progress). The raw shapes are contained by the "ThemeColor" movie clips so that they can be associated with a style (exactly like we saw earlier under "Creating skins that can be colored with styles"). Each "ThemeColor" movie clip contains the following single line of code, which causes its color to change when the "themeColor" style is set:

    mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");

    Finally, the ProgressBar Assets folder itself contains a single movie clip symbol named ProgressBarAssets. That symbol simply forces the ProgressBar skins to export with the movie.

    For our purposes, we're only interested in skinning the track (background) of the ProgressBar, so we'll only need to change the following movie clips: ProgTrackLeft, ProgTrackMiddle, and ProgTrackRight. In addition to changing those movie clips, we'll also create three new movie clips to contain our track's highlight shapes: ProgTrackLeftHighlight, ProgTrackMiddleHighlight, and ProgTrackRightHighlight. We place the highlight shapes in movie clips so that we can associate them with the "themeColor" style (i.e., so that they change color whenever the "themeColor" style is set). The highlight movie clips are nested inside the track movie clips.

    Figure 11 shows the completed skin movie clips for our ProgressBar skin.

    Notice that the ProgTrackMiddle movie clip has a transparent (i.e., 0% alpha) shape just above the ProgTrackMiddleHighlight movie clip. The transparent shape forces the track's middle section to line up with the left and right caps. Transparent shapes are often used to force proper alignment in graphical component skins.

    Now follow these steps to apply the adventure-game style skin to the ProgressBar in skinnedV2ProgressBar.fla.

    1. Edit the ProgTrackLeft movie clip and delete everything on its stage (you may have to unlock layers to do so).
    2. Delete all but one of the layers in ProgTrackLeft's timeline.
    3. Rename the remaining layer "graphic".
    4. Draw a shape like the one shown for ProgTrackLeft in Figure 11. Make sure to place all graphics below, and to the right of, the symbol's registration point (i.e., the registration point should be at the top-left corner of the graphic).
    5. Draw a shape like the one shown for ProgTrackLeftHighlight in Figure 11.
    6. Select the ProgTrackLeftHighlight shape.
    7. Convert the ProgTrackLeftHighlight shape to a movie clip by choosing Modify > Convert to Symbol.
    8. On the Convert to Symbol dialog, for Name, enter ProgTrackLeftHighlight, then click OK.
    9. Edit the ProgTrackLeftHighlight symbol.
    10. Rename Layer 1 to "graphic".
    11. Create a new layer and name it "actions".
    12. Select Frame 1 of the actions layer.
    13. Add the following code to the Actions panel:
      mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
    14. Repeat steps 1 to 11 to create the ProgTrackMiddle and ProgTrackRight movie clips, substituting the appropriate graphics and symbol names from Figure 11. Remember to include the transparent shape above ProgTrackMiddleHighlight in ProgTrackMiddle.
    And that's it! The adventure-game ProgressBar skin is done. Choose Control > Test Movie to see it if worked. If it didn't work, try comparing it with the downloadable example file provided at the beginning of this article.

    Further Study
    For more information on skinning and customizing the V2 components, see the following resources:

  • Skinning the Flash MX 2004 Components
  • Flash MX 2004 Version 7.2 updated Help: Using Components > Customizing Components > About Skinning Components
  • Building and Testing Components in Macromedia Flash MX 2004
  • Flash MX 2004 Version 7.2 updated Help: Using Components > Creating Components
  • More Stories By Colin Moock

    Colin Moock is an independent web guru with a passion for networked
    creativity and expression. He is author of the world-renowned guides to
    Flash programming, "ActionScript for Flash MX: The Definitive Guide" (O'Reilly
    & Associates, 2003, 2001) and "Essential ActionScript 2.0" (O'Reilly &
    Associates, 2004). A web professional since 1995, Moock runs one of the web's most venerable Flash developer sites, www.moock.org. He spends most of his
    time pursuing his cardinal interest, multiuser application development, and
    working on Unity, moock.org's complete commercial framework for creating and
    deploying multiuser applications for Macromedia Flash.

    Comments (0)

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

    IoT & Smart Cities Stories
    In today's enterprise, digital transformation represents organizational change even more so than technology change, as customer preferences and behavior drive end-to-end transformation across lines of business as well as IT. To capitalize on the ubiquitous disruption driving this transformation, companies must be able to innovate at an increasingly rapid pace.
    Growth hacking is common for startups to make unheard-of progress in building their business. Career Hacks can help Geek Girls and those who support them (yes, that's you too, Dad!) to excel in this typically male-dominated world. Get ready to learn the facts: Is there a bias against women in the tech / developer communities? Why are women 50% of the workforce, but hold only 24% of the STEM or IT positions? Some beginnings of what to do about it! In her Day 2 Keynote at 17th Cloud Expo, Sandy Ca...
    New competitors, disruptive technologies, and growing expectations are pushing every business to both adopt and deliver new digital services. This ‘Digital Transformation’ demands rapid delivery and continuous iteration of new competitive services via multiple channels, which in turn demands new service delivery techniques – including DevOps. In this power panel at @DevOpsSummit 20th Cloud Expo, moderated by DevOps Conference Co-Chair Andi Mann, panelists examined how DevOps helps to meet the de...
    According to Forrester Research, every business will become either a digital predator or digital prey by 2020. To avoid demise, organizations must rapidly create new sources of value in their end-to-end customer experiences. True digital predators also must break down information and process silos and extend digital transformation initiatives to empower employees with the digital resources needed to win, serve, and retain customers.
    In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, will provide an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life ...
    While the focus and objectives of IoT initiatives are many and diverse, they all share a few common attributes, and one of those is the network. Commonly, that network includes the Internet, over which there isn't any real control for performance and availability. Or is there? The current state of the art for Big Data analytics, as applied to network telemetry, offers new opportunities for improving and assuring operational integrity. In his session at @ThingsExpo, Jim Frey, Vice President of S...
    Rodrigo Coutinho is part of OutSystems' founders' team and currently the Head of Product Design. He provides a cross-functional role where he supports Product Management in defining the positioning and direction of the Agile Platform, while at the same time promoting model-based development and new techniques to deliver applications in the cloud.
    @CloudEXPO and @ExpoDX, two of the most influential technology events in the world, have hosted hundreds of sponsors and exhibitors since our launch 10 years ago. @CloudEXPO and @ExpoDX New York and Silicon Valley provide a full year of face-to-face marketing opportunities for your company. Each sponsorship and exhibit package comes with pre and post-show marketing programs. By sponsoring and exhibiting in New York and Silicon Valley, you reach a full complement of decision makers and buyers in ...
    There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
    As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...