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:

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.

Multimedia Design WordPress WordPress Workshop

E-Alumni Talk: “New Trends in WordPress: 2020 – 2021”

Here are the slides from my E-Alumni talk at Business Academy Aarhus November 4rd 2020

WordPress logo

The Trends

  • A) Trends in CMS usage with focus on WordPress 2020 – 20201.
  • B) Blockbuilders – the situation where Gutenberg is integrated in the WordPress Core.
  • C) Twentytwentyone under deveopment here and now. What can we expect from the next generation of WordPress themes?

The Slides

Here are the slides from my presentation. The live code session happened IRL, but you can get an idea of the code in the sample below.

Sample code

How to create your own Patterns for Gutenberg is a well kept secret. In due time I guess that you’ll be able to create the Patterns via a button. But in the present version of WordPress you’ll have to write some code. Here is a plugin, but you could do something similar in the child theme’s functions.php.

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.