Multimedia Design wceu2021

WCEU 2021

This years WCEU is much more than yet another Zoom event. The conferencing platform is a great and pleasant surprise.

Profile … done … ready!

Entering is as simple as clicking your personal link. Boom! After a small intro I created my user profile. And was ready to go. A few minutes later a company asked for an interview. Even before the event began we were networking.

So far I’ve attended sessions about Scrum, Gutenberg and O’Auth. One of the most interesting session was not a talk – but a coffe break with four developers from all corners of the World.

#WCEU 2021 Opening
#WCEU 2021 Opening

One of the developers recommended using the “WP Engine” plugin with the REST API if you want to use the styles from a block builder in the design.

Here is my planned schedule, however I’m sure that I may change my mind here and there. Here are the YouTube recordings from WCEU:

Figma / WordPress Prototyping

In the design team the Figma prototyping tools were introduced:


Boss GT-1 Guitar Effects

The Boss GT-1 can emulate 27 different amps. They are named in a weird way, probably in order to avoid copyright issues. So far I have only found one list, that suggests the “real” names of the simulated amps. In this blog post Michael Rendon suggests what the names of the simulated ams could be.

The list is long – around 27 amps or so are listed. I have commented a few of the amps, and added links to articles about a few of them.

Rendon’s List

An unembellished, clean sound that minimizes the amp’s idiosyncrasies, such as its trebly character and boomy low end.

An amp with a broad frequency range and an extremely flat response. Good for acoustic guitar.

Crunch sound that allows the nuances of your picking to be expressed even more faithfully than on conventional combo amps.

Great-feeling crunch sound that responds well to picking dynamics while retaining all the defining characteristics of a 4 x 12” speaker cabinet.

High-gain sound of a vintage Marshall specially revamped in a way that is possible only with COSM modeling technology.

A straight drive sound that works well in a broad range of situations, from backing to lead. A sound like this cannot be obtained from any existing combo amp or stack amp.

A new type of sound that smoothes out the uneven frequency response that is typical of existing large stack amps.

A large stack sound that has been tweaked extensively in the pursuit of the ultimate metal sound.

This models the sound of the Roland JC-120.

This models a Fender Twin Reverb.

This models a Fender Pro Reverb.

This models a Fender Bassman 4 x 10” Combo.
– Here I’d suggest that the modelled amp simulates the classic Fender Tweed (1948-1960). / petj

This models a Fender Deluxe Reverb.

This models the drive sound of a VOX AC-30TB. This is a sound that it suited to sixties-style British rock.

This models the lead sound of the VOX AC-30TB.

This models the sound input to left input on a Matchless D/C-30. A simulation of the latest tube amp widely used in styles from blues and rock.

This models the lead sound of the MESA/ Boogie combo amp. The sound of a tube amp typical of the late ‘70s to ‘80s.

This models a MESA/Boogie with TREBLE SHIFT SW on.

MS1959 I
This models the sound input to Input I on a Marshall 1959. This is a trebly sound suited to hard rock.

MS1959 I+II
The sound of connecting inputs I and II of the guitar amp in parallel, creating a sound with a stronger low end than I.

Models the sound of the Channel 2 VINTAGE Mode on the MESA/Boogie DUAL Rectifier.

Models the sound of the Channel 2 MODERN Mode on the MESA/Boogie DUAL Rectifier.

This models a Hughes & Kettner Triamp AMP3.

This models a Soldano SLO-100. This is the typical sound of the eighties.

5150 DRV (5150 DRIVE)
This models the lead channel of a Peavey EVH 5150.

This is a heavy distortion sound that models the high- gain channel of a Bogner Uberschall.

This models the dirty channel of an ORANGE ROCKERVERB.”
– The sound emulates a “dirty” Orange sound experience. I guess that the emulation is a “general Orange experience”. But it cannot compete with a real amp. / petj

(here the very long quote ends)

My favorite amps

In “real life” I use an Orange Crush 35 RT as my home practise amp. Mostly I like the sound directly from my amp – as in no effect pedals. Here the modelling amps cannot compete.

Among the modelling amps in the Boss GT-1 I prefer the simulated Vox Amps. Add a dash of sustain and some slap back echo. I tend to prefer a 4×12″ cabinet – that is in my headphones.

On rare occations I add the Boss GT-1 to the FX-loop on the Orange 35 RT. Here the simulated amps should be turned off, since the real amp is the Orange. But then you have a plethora of pedals, effects, wahs, flangers, tubescreamers, and …

Multimedia Design

YouTube Tutorials

YouTube tutorials
Tutorials: HTML, CSS, JavaScript.

Feel free to follow and subscribe to my tutorials on YouTube

Per's WordPress Tutorials
WordPress tutorials.

Here are a few of my tutorials on YouTube. Most of the tutorials give you sample code for the prototypes in projects or exercises. The tutorials are available via Github.

Multimedia Design

Github: Nice Code Review Feature

One of the new features on Github is code review. Here you can go in and add comments to specific code lines.

Adobe Animate Animation API JavaScript Multimedia Design WordPress

Adobe Animate and the OpenWeatherMap API

Part One: Adobe Animate and API

Do you want to fetch data from an API and use the data in your Adobe Animate CC creative work? Animate CC productions are made by JavaScript and HTML canvas. In theory getting data should work.

Let’s try!


The data from OpenWeatherMap is only available when you have a token. The first step is to create a user profile, and then to create a token. Then you can create the URL to fetch the weathere data.

Above you see the API call. That’s the information we need in order to get data from the website. The data will be returned as JSON, but we can fetch the content and display it in Adobe Animate. You can create the string along these lines:

var weather = '';

The url will fetch data from the API in the form of JSON. The URL for the weather data is formed in the variable weather.

A JSON object from OpenWeatherMap.

The fetch() function will use the variable above, and that’s how we get the data for the JavaScript into the document:

fetch( weather ).then( ... etc ... );

Dynamic Texts

Now we have the data. Then we want to use the data in the design. Here we will work with Dynamic Text Fields.

Dynamic Text Field.
Here the Dynamic Text Field is selected. In Propterties to the left it is named theCity. Now we can change the content dynamicly with JavaScript.

On the stage you see two Dynamic Textfields called theDescription and theCity. If you want to change the text of these fields you could do it like this:

_this.theCity.text = “Hello World”;

But we need the text from the API. If you check out the content of the weather data in the console, you can see, that the name of the city is:

The city name is added to the Dynamic Text Fiels like this:

_this.theCity.text =;

If you use the Inspect Tool in the browsesr you will be able to create Dynamic text fields for all the data in the object from OpenWeatherMap.

The JavaScript

In the actions layer you can add your Vanilla Javascript. Here is the script I used:

 * OpenWeatherMap API Demo
 * Don't use the code beautifier. It will ruin the => in the Js.

// get this as a global var
var _this = this;

// Openweather API string
var weather = '';

// get the weather data via query URI
fetch(weather).then( response=>{
	return response.json();

}).then(data => {

	// JSON data to the console for inspection

	// add the weadther description,texts or images to theDescription
	_this.theDescription.text =[0].description;
	_this.theCity.text =;

catch (err => {
	// Do something for an error here
	console.log('There was an error.');

Now you can test the production. Use the inspection tool in order to use the data from the JSON object in Dynamic Text Fields.

So that’s what it takes if you want to create an Adobe Animate production that can display data from OpenWeatherMap’s API. Of course you can work in a similar manner with other API’s and JSON objects.

Display the Weather Forecast in WordPress

In order to show your work in WordPress, you can use an iframe. Upload your production to a folder on your server. Then add am iframe along these lines:

<iframe src="" height="480" frameborder="0" style="overflow=hidden;"></iframe>

When you upload your work you’ll need the HTML, JavaScript file and the images/ folder – of course with the images in the folder. You don’t need the .fla file, since it’s for production only, but I would recommend to put it there anyway. If you want to change anything, you’ll know where it is.


Adobe Animate Multimedia Design

Adobe Animate Weather App – now with weather conditions

Part Two: Adobe Animate and API

Here is the second part of my tutorial about Adobe Animate and the OpenWeatherMap API. In the previous article we got texts from the API. Now we want graphical symbols for the weather conditions. If we have a thunderstorm in Aarhus, then the app skould display a thunderstom symbol.

In this variation of my weather app the weather conditions are visualized in a movie. Each frame in the movie has a weather symbol inspired by the symbols from Openweathermap.

On the movie each frame is named after one of the weather conditions from OpenWeatherMap. The movie instance on the stage is named weatherConditions.

A weather condition.The thunderstorm has animated raindrops.

Each frame in the weather condition movie has a label. The API can return 18 weather conditions, here are the labels:

Symbol Day Night
Clear Sky 01d 01n
Few Clouds 02d 02n
Scattered Clouds 03d 03n
Broken Clouds 04n 04n
Shower Rain 09d 09n
Rain 10d 10n
Thunderstorm 11d 11n
Snow 13d 13n
Mist 50d 50n
Weather conditions returned by OpenWeatherMap.

The API could return something like “11n”. That would be a thunderstorm during the night, because the d and n after the numbers refer to day or night. Hence we have nine weather conditions with day and night graphics.

So we need a movie with 18 frames. Nine for the day. Nine for the night. Each frame shall have a label name. Then you can create JavaScript commands that will “go to a label and stop there”.

Since we know the name of the symbol, the weather condition will be displayed by a simple gotoAndStop command:

_this.weatherConditions.gotoAndStop([0].icon );
// the api will return something like: 03d

Of course each frame could be animated ad libitum. You could add a movie clip with proper weather conditions to each of the frames. But now we have the skeleton for either a weather forecasst supported by an API.

This sample will open doors to the fascinating world of APIs. Now you know how to use Adobe Animate with APIs – and you can create movies controlled by the data returned from your favorite APIs.

If you have created something similar – let me know, and share your link. Post a comment below.

Here are the symbols from OpenWeatherMaps’ pages.

Adobe Animate Animation Multimedia Design

Adobe Animate CC

Interactive animation made with Adobe CC. Transitions via the camera feature.

We use cookies - is it ok with you+ more information will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies.