Introduction

Introducing Avante-garde for Excel

Avante-garde, an Animated Modal or Modeless Dialog & Lightbox for Excel 2016, Version 16 (32bit or 64bit)

Avante-garde is an Animated Modal or Modeless Dialog for Excel that can be used as a replacement MsgBox to provide Screen information to end users. It has a Title, Close Cross, resizable SVG Icon, Message Text, Okay Button and Cancel Button. It has Theme Colours that apply to the hover effects on the Buttons and the Colour of the Icon. Avante-garde can be 'skinned' using embedded images. Avante-garde uses JavaScript to control the Animations and handle Dialog Events - you can capture the 3 Button presses, the Escape {ESC} Key and a Mouse click on the Modal Dialog itself. The Lightbox can be used together with Avante-garde to produce 'easing' overlay effects that Avante-garde can Animate In and Out over - adding the Lightbox (with Opacity set to 1 for invisibility if required) turns Avante-garde into a Modal Dialog, otherwise it can be used as a Modeless Dialog, allowing movement within a Worksheet whilst it is presented

The Avante-garde Class, HTML/CSS and JavaScript were built from scratch using legacy Markup and helper Classes, Easing, SystemMetric, SystemTiming and Lightbox
You are purchasing version Avante-garde v1.4 with the Windows 11 fix

The Avante-garde Skins are Base64 encoded patterns that can be downloaded from Subtlepatterns.com
Icons were downloaded from FontAwesome · (Free License)
The Avante-garde File is Compressed and Cleaned using VBADecompiler.exe by Orlando
Code Inspections are maintained using Rubberduck
Base64 Image Files can be encoded using base64image.org
Animations using the Animation Library called Animate by Daniel Eden
Additional Generated Animations from Animista
Colour Name Finder can be used on colors.artyclick.com

Avante-garde Animated Dialog & Lightbox for Excel with Grey Squares Skin, Dark Theme and BurntRed Colour

Avante-garde Animated Dialog & Lightbox for Excel with Woven Skin, Dark Theme and Banana Colour

If you love Avante-garde, you may also like Wild Oliva, Carbon or Zombie

Zingy
Wild Oliva
Carbon
Zombie

Prerequisites

Microsoft Excel 2016, Version 16 (32bit or 64bit)
Basic to moderate Excel Skills and some basic IT/VBA skills to Base64 encode and embed additional objects
Windows PC · NOT a Mac!
No support is provided for customization of this Software

Features

The Dialog can be used as a Modeless Dialog as Standard or as aModal Dialog by adding the Lightbox Effect
24 Skins, 34 Icons & 28 Animations are all embedded into a single very hidden Sheet called 'Sheet999' as a Macro-enabled Excel File
Silky-smooth Lightbox effects with 36 different Easing Functions to pair up for a Fade In and a Fade Out effect
Fast loading so there is no lag or waiting for anything to render when using Avante-garde
34 embedded, resizeable SVG Icons which can be positioned either left or right on the Dialog interface
Tooltips can be shown for the Buttons and the tiny Close Cross
Avante-garde HTML/CSS/JavaScript built from scratch. Avante-garde Class built from scratch using helper Classes (some Carbon 2.7 Code ported), Easing, SystemMetric, SystemTiming and Effect which are all included with the purchased File
29 Awesome Embedded KeyFrame Animations to bring in your Dialog and exit your Dialog in style
20 different Animation Speeds based upon Tempo Markings varying from slowest to fastest ie. Larghissimo, the slowest through to Prestissimo, the fastest
Lots of options including change the Theme Colour, round the Corners of the Avante-garde Dialog
After the initial 'Animation In' ends, you can capture any of the 3 button presses, the Close Button, Okay Button and Cancel Button. You can also capture a click on the Dialog and / or the Escape {ESC} Key - in total you have 5 different methods to exit a Dialog
Adding a Lightbox (with Opacity set to 1 for invisibility if required) turns Avante-garde into a Modal Dialog, otherwise it is always a Modeless Dialog, meaning you can type in Cells, navigate to other Worksheets etc.
When presented on a Darker backgroound with RoundedCorners set to zero (0) the Dialog has a very thin, light Border
Version 1.1 there are many more Colours and you can also adjust the Width and Height of the Dialogs
Version 1.2 there are lots of additional Animations and some Modal demonstrations
Version 1.3 there are many more Skins and Icons with pairing demonstrations

Avante-garde Animated Dialog & Lightbox for Excel with Linen Skin, Dark Theme and BurntGreen Colour

Installation

Right-click on the Avante-garde.zip file and Extract all of the contents. Open Avante-garde.xlsm and test all of the Examples. To configure or use Avante-garde in your own Projects see the Usage Section

Usage

How to use Avante-garde

Examples
On the 'Examples' Sheet you will find all of the Avante-garde examples in a number of different sections. The VBA Code used for all of these examples is in the 'mdExamples', 'mdExamples2' and 'mdExamples3' Worksheet Code Modules

Basic Dialog
To animate an Avante-garde Dialog in and out, you can use the following code. The animations used are 'BounceInLeft' (In) and 'BounceOutRight' (Out), the Colour Theme is 'BurntRed', the Google Font is 'Abel' and the Icon displayed is 'Info' which is left-aligned by passing 'FloatLeft' as the IconPosition Named Arg. and sized to 64 pixels. The Speeds used by the animations are 'Allegretto' and 'Allegrissimo'. The Skin is Skinless (default), the Theme is Default (Grey), the Dialog will have a Box Shadow and be 400px wide. I have allowed the Dialog to be dismissed using any of the 3 Buttons, the Close Cross Button, the Okay Button or the Cancel Button and also by the Excape {ESC} Key or via a Mouse click anywhere on the Dialog itself. For brevity, I have left all of the Named Args in situ - you can then use ':=' to identify any Dropdown Enumerations. Another tip is that when iterating through Function Parameters, remove a comma and press ', ' (comma-space) again to bring up Enumeration Drop-downs. Moving through the Function Parameters will allow you to identify the Named Args and / or any required Parameters

Public Sub Default_Avante_Garde_Dialog_All_Buttons()
   
   Dim Result As Long
   Dim Dialog As AvanteGarde
   Set Dialog = New AvanteGarde
   With Dialog
      Result = .Animate(Title:="Avante-garde Animated Dialog", _
               Message:="This Animated Dialog allows you to exit via the 3 Buttons, by the Escape Key or via a Mouse Click on the Dialog itself", _
               Colour:=BurntRed, Theme:=Default, Icon:=Info, IconSize:=64, IconPosition:=FloatLeft, _
               AnimationIn:=BounceInLeft, AnimationOut:=BounceOutRight, SpeedIn:=Allegretto, SpeedOut:=Allegrissimo, _
               Skin:=Skinless, ButtonText:="Okay, Understood|Cancel", _
               AllowEscapeKey:=True, AllowModalClick:=True, RoundCorner:=2, BoxShadow:=True, DialogWidth:=400)
      .Kill
   End With
   Set Dialog = Nothing

End Sub

And this is the result of the code shown above

Avante-garde Animated Dialog & Lightbox for Excel

Avante-garde Methods
Avante-garde has just 2 Methods, Animate and Kill(). If you just use Kill() without a call to Animate() then you are essentially just 'priming' the Dialog. This can be useful for a first run, when starting your PC for the first time and opening Excel, it will create the UserForm and Webbrowser Controls with any required code in the background

          
* Animate() passes all of the Text for the Title, Message etc. and tells Avante-garde how to look and behave, for example what Font to use, what Icon to display and the position to display it         

* Kill() psuedo destruction, prepares for destruction but doesn't actually terminate the Class

Avante-garde Tags
Avante-garde uses Span and inline Tags to add extra style to a Dialog for the Title. Of course, you can go into the Code and amend these CSS Styles to anything that you like if you have a little Web Programming knowledge and incorporate these into the Message as well

          
.Animate "<span id=titlehighlight>Avante-garde can Highlight Stuff</span>"...

Here is a list of all of the available hard-coded style Tags for the Title

span: titlehighlight (highlight, theme coloured title text)
span: titlehighlightdark (highlight, theme coloured title text for Dark Themes)
span: titlelowlight (lowlight coloured title text)

Create a Minimal Stripped down version of Avante-garde
Avante-garde has already been cleaned / compressed but if you only need say 4 Icons, 1 Skin and a couple of Animations then you can very easily create a minimal version of Avante-garde. Follow these steps:

          
1. Make a Copy of Avante-garde
2. Open Avante-garde in the Code Editor and click into the 'mdEmbed' Code Module
3. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
4. Run the EmbedResources() and Select just the 4 Icons, 1 Skin and 2 Animations that you need to embed these into 'Sheet999'
5. Do a Debug->Compile VBAProject to identify an issues.  If there are any issues it will be the Enumeration Names just need commenting out
   - Scroll to the top of the AvanteGarde Class Code Module and comment out any Icon, Skin, Animation Names that you have Not embedded into 'Sheet999'

Create a New Skin .TXT File to Embed
Avante-garde has 24 available Base64 Encoded & Embedded Skins. They are in the Folder included with the Zip File download following purchase. If you want to add a different Skin then follow these steps:

          
1. Make a Copy of a the last Skin .TXT File, '123 Tweed.txt' called: '124 New Skin.txt' - the 124 will be the next Skin Enumeration that we will add to the AvanteGarde Class
2. Go into the AvanteGarde Class Code Module and at the top where you see the 'Public Enum TSkin' declaration, add the additional line of code 'NewSkin = 124' where NewSkin is the Name that you want to call your Skin
3. Okay, now go and find a pattern for your new Skin - I use Subtlepatterns.com 
4. Download the pattern, pick the smallest size and then Base64 encode this pattern - I use base64image.org
5. Okay now open the '124. New Skin.txt' File in a Text Editor and replace anything after: '...data:image/gif;base64,' up until the closing Bracket ')' with the Base64 Contents.  Save the File and exit the Text Editor
6. Open Avante-garde in the Code Editor and click into the 'mdEmbed' Code Module
7. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
8. Run the EmbedResources() and Select all of the Icons, Skins (including your new one) and Animations to embed these into 'Sheet999'
9. Copy one of the Examples and change the Skin Name from whatever it currently is to your new Skin Name (the one that you added for the extra line of code).  In my example I called mine 'NewSkin' so I changed mine to NewSkin
10. Run the Example to view your new Skin

Create a New Icon .TXT File to Embed
Avante-garde has 34 available Regular SVG Embedded Icons. They are in the Folder included with the Zip File download following purchase. If you want to add a different Icon then follow these steps:

1. Make a Copy of a the last Icon .TXT File, '423 SVG Copies.txt' called: '424 SVG New Icon.txt' - the 424 will be the next Icon Enumeration that we will add to the AvanteGarde Class
2. Go into the AvanteGarde Class Code Module and at the top where you see the 'Public Enum TIcon' declaration, add the additional line of code 'NewIcon = 424' where NewIcon is the Name that you want to call your Icon
3. Okay, now go and find a new Icon
4. Download the Icon - I use a Regular SVG downloaded in a full pack from FontAwesome
5. Okay now open the '424 SVG New Icon.txt' File in a Text Editor. Open the downloaded Regular Font Awesome Icon in the same Text Editor
6. Replace anything in the '424 SVG New Icon.txt' File after '...<svg viewBox='0 0 512 512' width='64px' height='64px' fill='Black'><path d='' with the contents from between the 2 quotes for the 'path d=' in the Regular download SVG Font Awesome Icon File
- in other words you are substituting anything for the 'path d=' in the Copy of the Icon .TXT File with the weird looking symbols in the New Icon File
7. Open Avante-garde in the Code Editor and click into the 'mdEmbed' Code Module
8. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
9. Run the EmbedResources() and Select all of the Icons (including your new one), Skins and Animations to embed these into 'Sheet999'
9. Copy one of the Examples and change the Icon Name from whatever it currently is to your new Icon Name (the one that you added for the extra line of code). In my example I called mine 'NewIcon' so I changed mine to NewIcon
10. Run the Example to view your new Icon

For Info: Animations are not covered here. Future versions will include more ported Animations. At this moment there are a total of 29 Embedded KeyFrame Animations

Screen Shots

Avante-garde 1.3. Tweed Skin with Tired Face Icon

Avante-garde 1.3. GreyWashedWall Skin with List Icon

Avante-garde 1.3. Tweed Skin with WindowClose Icon

Avante-garde 1.3. DebutDark Skin with Image Icon

Avante-garde 1.1. Animated Dialog & Lightbox for Excel with Tex2Res4 Skin and RedWetChalk. The Height has been adjusted to 180px

Avante-garde 1.1. Animated Dialog & Lightbox for Excel with Tex2Res4 Skin and BlueWetChalk. The Height has been adjusted to 180px

Avante-garde Animated Dialog & Lightbox for Excel with Grey Squares Skin, Dark Theme and BurntRed Colour

Avante-garde Animated Dialog & Lightbox for Excel with Woven Skin, Dark Theme and Banana Colour

Avante-garde Animated Dialog & Lightbox for Excel with Linen Skin, Dark Theme and BurntGreen Colour

FAQ

* Q. How does Avante-garde differ from Wild Oliva or Carbon?
* A. Avante-garde can be both a Modal or Modeless Dialog, whereas Wild Oliva is a Modal Dialog. Also Avante-garde has more refinied JavaScript Code that times the Animations and only allows feedback to the Excel Application once the Animation is over - this also prevents a user from immediately pressing the Escape {ESC} Key to exit the Dialog before it is even presented. Avante-garde has many more Skins that Wild Oliva and uses a Lightbox that is not contained within a single Class Object, like Wild Oliva or Carbon. Avante-garde contains lots of small Classes as helper Classes, so if you are looking for one single Class go for Wild Oliva or Carbon, but if you want a better controlled Dialog, Modal or Modeless and don't mind the extra Classes, then go for Avante-garde

Avante-garde Videos

This is a video of the Demo in Avante-garde. Music #DVRK5IDE (Original Mix) by Frainbreeze Get it Here · view this Avante-garde video on YouTube

This is a video of the Avante-garde v1.1 with some new Colours and a new Skin Tex2Res4 - I have also added the ability to change the Height of the Dialog. Music is Horizon, by Mark Kubiszyn. Listen to it Here · view this Avante-garde video on YouTube · view Short videos Avante-garde (vid1)

Support

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support for my Software

Responding to questions or problems regarding the Software and its features
Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

Customization and installation services
Support for third party software or ANY kind of development whatsoever

Before seeking support

Make sure your question is a valid Software Issue and not a customization request
Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
Ensure that you access to the VBOM is allowed and that Macros can run in Excel
Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
Remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Future Builds

* No ideas as yet!

Bug Fixes

* If an animation has not yet completed, clicking on a Button may turn the Button into the Hover Colour an not register the Click - this ususally only occurs with slow animation speeds OPEN

* If a single Button is used then pressing Escape or clicking with the Mouse onto the Dialog will not exit the process Fixed 3.11.2021 - Code amend, where JavaScript was having an error due to the fact that I had removed the Cancel Button HTML whenever a second Button wasn't required and which the JavaScript relied upon

Changelog

Read more information on the status of each release below. The latest Version including a description of any changes is shown first


16.12.2021 - (Version 1.4)

Fix for Windows 11 OS, for a Lightbox. The code detects the the OS Build Number >=22000 indicating Windows 11 or greater and then rounds the Window corners and adjusts the Windows Width & Height


10.11.2021 - (Version 1.3)

1. Added 9 more Skins bringing the total number of embedded Skins in Avante-garde to 24
2. Added 10 more Ions bringing the total number of embedded Icons in Avante-garde to 34


8.11.2021 - (Version 1.2)

1. Ported some more Animations from my Zombie Software
- New Animations In (Entrances) include, Swing, HeadShake, Shake, BounceIn, BounceInDown
- New Animations Out (Exits) include, SkewOut, BounceOut, ZoomOutRight
2. Added some more New Colours, PastelLightGreen, PastelGreen, PastelPink & PastelBlue
3. Added a Demo of a Modal Dialog - this can be achieved by adding a Lightbox and setting the Opacity to 1


4.11.2021 - (Version 1.1)

1. Added the latest Colours from Wild Oliva into Avante-garde
2. Added in the ability to adjust the Dialog Height ie. 180. So now you have a little more flexibility when designing the size of your Dialogs


3.11.2021 - (Version 1)

General release of Avante-garde