Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

12 May 2021

Several Issues about Responsive Web Pages and HTTPS

Several Issues about Responsive Web Pages and HTTPS


1. Texts and images are not aligned to HTML5 animations viewed on phones

They are aligned on computer monitors.

Cause: width of text and images are '100%', but that of the animation is '1140px'.

Solution: After I changed width into '100%' and height into 'auto' in -

(1) 'animation_container' div;

(2) canvas;

(3) 'dom_overlay_container' div,

the text and images have become aligned to the html5 animation now.

(Got help from 'Cypher- Entrepreneur')


2. There is a link on the image banner, but when viewed in browser, there is no link.

Cause: '>' is missing in <div> of <div><a href=""><img ...></a></div>

Solution: Inserted the missing '>', then the link on the image banner works now.

Note: (1) Better use 'Sublime Text' software to edit code files.

        (2) Better use https://www.aliciaramirez.com/closing-tags-checker/ to check if any closed tag is missing. 

(Got help from 'Cypher- Entrepreneur')


3. Website completely normal visited outside of our company LAN network, but can not open at all in LAN

Cause: IP of CloudFlare has changed.

Handling: The IP on our LAN DNS server which is mapped to our website domain was 104.28.30.95, which is an IP of CloudFlare.

Since we can not open our website at all, I changed IP on our LAN DNS into 64.91.250.231, which is the IP when we ftp and upload our website files. After the change, we can open our website, but (1) it is http, not https, 'not secure' shows. (2) none of our html5 animations show up, and some of the images do not show.

Pinging website domain name from out of LAN, IP addresses are (1) 172.67.133.250 (2) 104.21.25.97. Pinging website domain name from within LAN, IP is 64.91.250.231, of course.

Solution: changed the IP on LAN DSN from 64.91.250.231. The problem is gone. Website becomes normal viewed whether from out of LAN, or in LAN.

(Got help from 'Benjamin Gao)


4. On home page of website, there are two html5 animations. The first animation shows up fine, but the second one does not show.

If I remove the first animation, then the second animation shows.

Cause: </iframe> for the second animation is missing.

Solution: Added </iframe>. The second animation shows.


5. The distance between the two animations is too far away.

Cause: 'vh' in 'min-height:98vh' cause the distance.

Solution: Removed 'min-height:98vh'. The space in vertical direction disappeared. But there is a big blank space horizontally.

Using responsive iframe solved the problem of the problem of big blank space horizontally.

(Got help from 'Cypher Entrepreneur') 

16 April 2020

How to make your html5 animation clickable?

How to make your html5 animation clickable?

After you publish your animation in Adobe Animate, you get an html file.

Open the html file, in the html body, find the '<canvas> ... </canvas> part. Insert '<a href="..."> in the front of <canvas>, and put '</a>' after '</canvas>'. It is so easy! :)

10 February 2016

How to Convert Flash Video into HTML5 Video?



http://www.sothink.com/tutorials/how-to-convert-flash-to-html.htm

Step 1
Load the relevant SWF into Sothink SWF Decompiler for preview.

 Step 2
Click on Export HTML5 button to launch the relevant export wizard window.

 You can click on Browse button to define the output directory for new .html file.

 Step 3
Click on OK button to start the conversion process.

 Step 4
After the exporting process has been finished, please go to the directory you specified to preview .html file.

 Let's preview the exported .html in browser now.

 Now the whole converting process is over, it is very simple to convert Flash into HTML5 with the latest version of Sothink SWF Decompiler!  



===================================

The following method is not available any longer. The company does not support the extension any more -

https://developers.google.com/swiffy/


Under 'Use our Adobe Flash Extension', click 'Get the Extension'.
Install the extension. You will see a new sub-menu item 'Export as HTML5 (Swiffy)' under 'Commands' menu in Adobe Flash.

Open your .fla file (e.g. test.fla) in Adobe Flash. Click the the new sub-menu. A browser will open, displaying a web page with your video, which has been converted from .fla. A new html file has been created, in the same folder as test.fla is, whose name is 'test.swf.html'.

Use <iframe> to include the html file. You can put the video wherever you like.