Categories
Adobe Animate Animation javascript Multimedia Deign 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!

OpenWeatherMap

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 = 'https://api.openweathermap.org/data/2.5/weather?q=YOUR-CITY-HERE&appid=ADD-YOUR-TOKEN-HERE';

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:

data.name

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

_this.theCity.text = data.name;

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
 * IMPORTANT
 * 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 = 'https://api.openweathermap.org/data/2.5/weather?q=Aarhus&appid=ADD-YOUR-TOKEN-HERE';

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

}).then(data => {

	// JSON data to the console for inspection
	console.log(data);

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

}).
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="https://yoursite.net/yourFolder/weather.html" 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.

Resources

Categories
Adobe Animate Multimedia Deign

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( data.weather[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.

Categories
Adobe Animate Animation Multimedia Deign

Adobe Animate CC

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

Categories
Multimedia Deign

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

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.